diff options
Diffstat (limited to 'files/de/web/api')
294 files changed, 44794 insertions, 0 deletions
diff --git a/files/de/web/api/aescbcparams/index.html b/files/de/web/api/aescbcparams/index.html new file mode 100644 index 0000000000..65c2effd7b --- /dev/null +++ b/files/de/web/api/aescbcparams/index.html @@ -0,0 +1,52 @@ +--- +title: AesCbcParams +slug: Web/API/AesCbcParams +translation_of: Web/API/AesCbcParams +--- +<div>{{ APIRef("Web Crypto API") }}</div> + +<p>Das <strong><code>AesCbcParams</code></strong> Verzeichnis (dictionary) der <a href="/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API </a>wird als <code>algorithm</code> Parameter an die Funktionen {{domxref("SubtleCrypto.encrypt()")}}, {{domxref("SubtleCrypto.decrypt()")}}, {{domxref("SubtleCrypto.wrapKey()")}} und {{domxref("SubtleCrypto.unwrapKey()")}} übergeben, wenn der Algorithmus <a href="/en-US/docs/Web/API/SubtleCrypto/encrypt#AES-CBC">AES-CBC</a> verwendet wird.</p> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<dl> + <dt><code>name</code></dt> + <dd>A {{domxref("DOMString")}}. Der Wert sollte auf <code>AES-CBC</code> gesetzt werden.</dd> + <dt><code>iv</code></dt> + <dd>Ein {{domxref("BufferSource")}}. Der Initialisierungsvektor. Er muss 16 Bytes lang sein und sollte unvorhersehbar und am besten kryptografisch zufällig sein. Er muss aber nicht geheim sein, er kann unverschlüsselt mit dem Kryptogram übertragen werden.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Siehe Beispiele für {{domxref("SubtleCrypto.encrypt()")}} und {{domxref("SubtleCrypto.decrypt()")}}.</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('Web Crypto API', '#dfn-AesCbcParams', 'SubtleCrypto.AesCbcParams') }}</td> + <td>{{ Spec2('Web Crypto API') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>Browser mit Unterstützung für den "AES-CBC" Algorithmus werden die Methoden {{domxref("SubtleCrypto.encrypt()")}}, {{domxref("SubtleCrypto.decrypt()")}}, {{domxref("SubtleCrypto.wrapKey()")}} und {{domxref("SubtleCrypto.unwrapKey()")}} für diesen Typ unterstützen.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>CBC Modus wird in Sektion 6.2 des <a class="external external-icon" href="https://nvlpubs.nist.gov/nistpubs/Legacy/SP/nistspecialpublication800-38a.pdf#%5B%7B%22num%22%3A70%2C%22gen%22%3A0%7D%2C%7B%22name%22%3A%22Fit%22%7D%5D" rel="noopener">NIST SP800-38A standard</a> spezifiziert.</li> + <li>{{domxref("SubtleCrypto.encrypt()")}}.</li> + <li>{{domxref("SubtleCrypto.decrypt()")}}.</li> + <li>{{domxref("SubtleCrypto.wrapKey()")}}.</li> + <li>{{domxref("SubtleCrypto.unwrapKey()")}}.</li> +</ul> diff --git a/files/de/web/api/animationevent/index.html b/files/de/web/api/animationevent/index.html new file mode 100644 index 0000000000..7bd808e0ca --- /dev/null +++ b/files/de/web/api/animationevent/index.html @@ -0,0 +1,190 @@ +--- +title: AnimationEvent +slug: Web/API/AnimationEvent +tags: + - API + - Experimental + - Expérimental(2) + - Interface + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub + - Web Animations +translation_of: Web/API/AnimationEvent +--- +<p>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</p> + +<p>The <strong><code>AnimationEvent</code></strong> interface represents events providing information related to <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">animations</a>.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Also inherits properties from its parent {{domxref("Event")}}</em>.</p> + +<dl> + <dt>{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the value of the {{cssxref("animation-name")}} CSS property associated with the transition.</dd> + <dt>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</dt> + <dd>Is a <code>float</code> giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an <code>"animationstart"</code> event, <code>elapsedTime</code> is <code>0.0</code> unless there was a negative value for {{cssxref("animation-delay")}}, in which case the event will be fired with <code>elapsedTime</code> containing <code>(-1 * </code><em>delay</em><code>)</code>.</dd> + <dt>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</dt> + <dd>Is a {{domxref("DOMString")}}, starting with <code>'::'</code>, containing the name of the <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> the animation runs on. If the animation doesn't run on a pseudo-element but on the element, an empty string: <code>''</code><code>.</code></dd> +</dl> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}</dt> + <dd>Creates an <code>AnimationEvent</code> event with the given parameters.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Also inherits methods from its parent {{domxref("Event")}}</em>.</p> + +<dl> + <dt>{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}</dt> + <dd>Initializes a <code>AnimationEvent</code> created using the deprecated {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} method.</dd> +</dl> + +<h2 id="Specifications">Specifications</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('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td>Initial definition.</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>Basic support</td> + <td> + <p>1.0 {{ property_prefix("webkit") }}</p> + + <p>{{CompatChrome(43.0)}}</p> + </td> + <td>{{ CompatGeckoDesktop("6.0") }}</td> + <td>10.0</td> + <td>12 {{ property_prefix("o") }}<br> + 12.10<br> + 15.0 {{ property_prefix("webkit") }}</td> + <td>4.0 {{ property_prefix("webkit") }}</td> + </tr> + <tr> + <td><code>AnimationEvent()</code> constructor</td> + <td> + <p>{{CompatChrome(43.0)}}</p> + </td> + <td>{{ CompatGeckoDesktop("23.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>initAnimationEvent()</code> {{non-standard_inline}}{{deprecated_inline}}</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("6.0") }}<br> + Removed in {{ CompatGeckoDesktop("23.0") }}</td> + <td>10.0</td> + <td>12</td> + <td>4.0</td> + </tr> + <tr> + <td><code>pseudoelement</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("23.0") }}</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>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>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td> + <td>{{ CompatGeckoMobile("6.0") }}</td> + <td>10.0</td> + <td>12 {{ property_prefix("o") }}<br> + 12.10<br> + 15.0 {{ property_prefix("webkit") }}</td> + <td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + <tr> + <td><code>AnimationEvent()</code> constructor</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("23.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + <tr> + <td><code>initAnimationEvent()</code> {{non-standard_inline}}{{deprecated_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("6.0") }}<br> + Removed in {{ CompatGeckoMobile("23.0") }}</td> + <td>10.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>pseudoelement</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("23.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li> + <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li> +</ul> diff --git a/files/de/web/api/audiocontext/decodeaudiodata/index.html b/files/de/web/api/audiocontext/decodeaudiodata/index.html new file mode 100644 index 0000000000..32cfda28eb --- /dev/null +++ b/files/de/web/api/audiocontext/decodeaudiodata/index.html @@ -0,0 +1,218 @@ +--- +title: AudioContext.decodeAudioData() +slug: Web/API/AudioContext/decodeAudioData +translation_of: Web/API/BaseAudioContext/decodeAudioData +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<div> +<p>Die Methode decodeAudioData() im Interface {{ domxref("AudioContext") }} wird dazu benutzt um in einem {{ domxref("ArrayBuffer")}} enthaltene Audiodaten asynchron zu dekodieren. Im Normalfall wird der ArrayBuffer mit der {{domxref("XMLHttpRequest")}} <code>response</code> Eigenschaft befüllt, nachdem der <code>responseType</code> auf <code>arraybuffer gesetzt wurde</code>. Der dekodierte AudioBuffer wird auf die Samplerate des AudioContextes angepasst und anschließend an ein Callback oder Promise weitergegeben.</p> +</div> + +<p>Dies ist die bevorzugte Methode im eine Audioquelle für die Web Audio API aus einem Audiotrack zu generieren.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>Alte Callbacksyntax:</p> + +<pre class="syntaxbox">audioCtx.decodeAudioData(audioData, function(decodedData) { + // use the decoded data here +});</pre> + +<p>Neue Promise basierte Syntax:</p> + +<pre class="syntaxbox">audioCtx.decodeAudioData(audioData).then(function(decodedData) { + // use the decoded data here +});</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<p>In diesem Abschnitt wird zuerst die ältere Callback basierte Syntax und anschließend die neue Promise basierte Syntax behandelt.</p> + +<h3 id="Ältere_Callbacksyntax">Ältere Callbacksyntax</h3> + +<p>In diesem Beispiel nutzt die getData() Funktion XHR um einen Audiotrack zu laden, indem sie die responseType Eigenschaft setzt um einen ArrayBuffer als Antwort zu erhalten, welcher anschließend in der audioData variable gespeichert wird. Dieser Buffer wird nun an die decodeAudioData() Funktion übergeben; Das success Callback nutzt die erfolgreich dekodierten PCM Daten, erstellt einen {{ domxref("AudioBufferSourceNode") }} mit Hilfe von {{ domxref("AudioContext.createBufferSource()") }}, verbindet diese Quelle mit {{domxref("AudioContext.destination") }} und setzt den Schleifenmodus.</p> + +<p>Die Buttons in diesem Beispiel rufen lediglich getData() um die Daten zu laden und die Wiedergabe zu starten, sowie stop() um die Wiedergabe anzuhalten auf. Wenn die stop() Methode der Quelle aufgerufen wird die Quelle geleert.</p> + +<div class="note"> +<p><strong>Note</strong>: You can <a href="http://mdn.github.io/decode-audio-data/">run the example live</a> (or <a href="https://github.com/mdn/decode-audio-data">view the source</a>.)</p> +</div> + +<pre class="brush: js">// Variablen definieren + +var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var source; + +var pre = document.querySelector('pre'); +var myScript = document.querySelector('script'); +var play = document.querySelector('.play'); +var stop = document.querySelector('.stop'); + +// Benutzt XHR um einen Track zu laden und +// decodeAudioData um diesen zu dekodieren und in einen Buffer zu kopieren. +// Anschließend wird der Buffer in eine Quelle kopiert. + +function getData() { + source = audioCtx.createBufferSource(); + var request = new XMLHttpRequest(); + + request.open('GET', 'viper.ogg', true); + + request.responseType = 'arraybuffer'; + + + request.onload = function() { + var audioData = request.response; + + audioCtx.decodeAudioData(audioData, function(buffer) { + source.buffer = buffer; + + source.connect(audioCtx.destination); + source.loop = true; + }, + + function(e){"Error with decoding audio data" + e.err}); + + } + + request.send(); +} + +// Buttons setzen um Wiedergabe zu starten und stoppen + +play.onclick = function() { + getData(); + source.start(0); + play.setAttribute('disabled', 'disabled'); +} + +stop.onclick = function() { + source.stop(0); + play.removeAttribute('disabled'); +} + + +// Script ausgeben + +pre.innerHTML = myScript.innerHTML;</pre> + +<h3 id="Neue_Promise_basierte_Syntax">Neue Promise basierte Syntax</h3> + +<pre class="brush: js">ctx.decodeAudioData(compressedBuffer).then(function(decodedData) { + // Die dekodierten PCM Daten können hier verwendet werden +});</pre> + +<h2 id="Parameter">Parameter</h2> + +<dl> + <dt>ArrayBuffer</dt> + <dd>Ein ArrayBuffer der die zu dekodierenden Daten enthält. Dieser wird normalerweise durch einen {{domxref("XMLHttpRequest")}} befüllt nachdem der <code>responseType</code> auf <code>arraybuffer gesetzt wurde</code>.</dd> + <dt>DecodeSuccessCallback</dt> + <dd>Ein Callback das aufgerufen wird wenn die Dekodierung erfolgreich abgeschlossen wird. Der einzige Parameter der an diese Funktion übergeben wird stellt einen AudioBuffer dar, der die dekodierten Audiodaten enthält. Normalerweise wird dieser Buffer an einen {{domxref("AudioBufferSourceNode")}} übergeben, von wo er wiedergeben und verändert werden kann.</dd> + <dt>DecodeErrorCallback</dt> + <dd>Ein optionales Callback das bei einem Fehler während der Dekodierung aufgerufen wird.</dd> +</dl> + +<h2 id="Rückgabewerte">Rückgabewerte</h2> + +<p>Ein {{domxref("AudioBuffer") }} der die dekodierten Audiodaten enthällt.</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('Web Audio API', '#widl-AudioContext-decodeAudioData-Promise-AudioBuffer--ArrayBuffer-audioData-DecodeSuccessCallback-successCallback-DecodeErrorCallback-errorCallback', 'decodeAudioData()')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserunterstützung">Browserunterstützung</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td> + <td>{{CompatGeckoDesktop(25.0)}} </td> + <td>{{CompatNo}}</td> + <td>15.0{{property_prefix("webkit")}}<br> + 22 (unprefixed)</td> + <td>6.0{{property_prefix("webkit")}}</td> + </tr> + <tr> + <td>Promise-based syntax</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</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>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</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>{{CompatVersionUnknown}}</td> + <td>26.0</td> + <td>1.2</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(33.0)}}</td> + </tr> + <tr> + <td>Promise-based syntax</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> +</ul> diff --git a/files/de/web/api/audiocontext/index.html b/files/de/web/api/audiocontext/index.html new file mode 100644 index 0000000000..cc2c2db92e --- /dev/null +++ b/files/de/web/api/audiocontext/index.html @@ -0,0 +1,232 @@ +--- +title: AudioContext +slug: Web/API/AudioContext +translation_of: Web/API/AudioContext +--- +<p>{{APIRef("Web Audio API")}}</p> + +<div> +<p>Die <code>AudioContext</code> Schnittstelle bildet einen Audioverarbeitungsdiagramm, aus mehreren miteinander verbundenen Audiomodulen bestehend, ab. Bei jedem dieser Module handelt es sich um einen Knoten ({{domxref("AudioNode")}}). Ein AudioContext kontrolliert sowohl die Erstellung der einzelnen in ihm enthaltenen Knoten als auch den Prozess der Audioverarbeitung oder des Dekodierens. Als erster Schritt muss immer ein Audio Kontext angelegt werden, da sämtliche Funktionen innerhalb dieses Kontextes ausgeführt werden.</p> +</div> + +<p><code>Ein AudioContext</code> kann das Ziel von Events sein, aufgrund dessen unterstützt er auch die {{domxref("EventTarget")}} Schnittstelle.</p> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<dl> + <dt>{{domxref("AudioContext.currentTime")}} {{readonlyInline}}</dt> + <dd>Returns a double representing an ever-increasing hardware time in seconds used for scheduling. It starts at <code>0</code>.</dd> + <dt>{{domxref("AudioContext.destination")}} {{readonlyInline}}</dt> + <dd>Returns an {{domxref("AudioDestinationNode")}} representing the final destination of all audio in the context. It can be thought of as the audio-rendering device.</dd> + <dt>{{domxref("AudioContext.listener")}} {{readonlyInline}}</dt> + <dd>Returns the {{domxref("AudioListener")}} object, used for 3D spatialization.</dd> + <dt>{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}</dt> + <dd>Returns a float representing the sample rate (in samples per second) used by all nodes in this context. The sample-rate of an {{domxref("AudioContext")}} cannot be changed.</dd> + <dt>{{domxref("AudioContext.state")}} {{readonlyInline}}</dt> + <dd>Returns the current state of the <code>AudioContext</code>.</dd> + <dt>{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}</dt> + <dd>Used to return the audio channel that the sound playing in an {{domxref("AudioContext")}} will play in, on a Firefox OS device.</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("AudioContext.onstatechange")}}</dt> + <dd>An event handler that runs when an event of type {{event("statechange")}} has fired. This occurs when the <code>AudioContext</code>'s state changes, due to the calling of one of the state change methods ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, or {{domxref("AudioContext.close")}}.)</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<p><em>Implementiert zusätzlich die Methoden der Schnittstelle </em>{{domxref("EventTarget")}}.</p> + +<dl> + <dt>{{domxref("AudioContext.close()")}}</dt> + <dd>Closes the audio context, releasing any system audio resources that it uses.</dd> + <dt>{{domxref("AudioContext.createBuffer()")}}</dt> + <dd>Creates a new, empty {{ domxref("AudioBuffer") }} object, which can then be populated by data and played via an {{ domxref("AudioBufferSourceNode") }}.</dd> + <dt>{{domxref("AudioContext.createBufferSource()")}}</dt> + <dd>Creates an {{domxref("AudioBufferSourceNode")}}, which can be used to play and manipulate audio data contained within an {{ domxref("AudioBuffer") }} object. {{ domxref("AudioBuffer") }}s are created using {{domxref("AudioContext.createBuffer")}} or returned by {{domxref("AudioContext.decodeAudioData")}} when it successfully decodes an audio track.</dd> + <dt>{{domxref("AudioContext.createMediaElementSource()")}}</dt> + <dd>Creates a {{domxref("MediaElementAudioSourceNode")}} associated with an {{domxref("HTMLMediaElement")}}. This can be used to play and manipulate audio from {{HTMLElement("video")}} or {{HTMLElement("audio")}} elements.</dd> + <dt>{{domxref("AudioContext.createMediaStreamSource()")}}</dt> + <dd>Creates a {{domxref("MediaStreamAudioSourceNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may come from the local computer microphone or other sources.</dd> + <dt>{{domxref("AudioContext.createMediaStreamDestination()")}}</dt> + <dd>Creates a {{domxref("MediaStreamAudioDestinationNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may be stored in a local file or sent to another computer.</dd> + <dt>{{domxref("AudioContext.createScriptProcessor()")}}</dt> + <dd>Creates a {{domxref("ScriptProcessorNode")}}, which can be used for direct audio processing via JavaScript.</dd> + <dt>{{domxref("AudioContext.createStereoPanner()")}}</dt> + <dd>Creates a {{domxref("StereoPannerNode")}}, which can be used to apply stereo panning to an audio source.</dd> + <dt>{{domxref("AudioContext.createAnalyser()")}}</dt> + <dd>Creates an {{domxref("AnalyserNode")}}, which can be used to expose audio time and frequency data and for example to create data visualisations.</dd> + <dt>{{domxref("AudioContext.createBiquadFilter()")}}</dt> + <dd>Creates a {{domxref("BiquadFilterNode")}}, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc.</dd> + <dt>{{domxref("AudioContext.createChannelMerger()")}}</dt> + <dd>Creates a {{domxref("ChannelMergerNode")}}, which is used to combine channels from multiple audio streams into a single audio stream.</dd> + <dt>{{domxref("AudioContext.createChannelSplitter()")}}</dt> + <dd>Creates a {{domxref("ChannelSplitterNode")}}, which is used to access the individual channels of an audio stream and process them separately.</dd> + <dt>{{domxref("AudioContext.createConvolver()")}}</dt> + <dd>Creates a {{domxref("ConvolverNode")}}, which can be used to apply convolution effects to your audio graph, for example a reverberation effect.</dd> + <dt>{{domxref("AudioContext.createDelay()")}}</dt> + <dd>Creates a {{domxref("DelayNode")}}, which is used to delay the incoming audio signal by a certain amount. This node is also useful to create feedback loops in a Web Audio API graph.</dd> + <dt>{{domxref("AudioContext.createDynamicsCompressor()")}}</dt> + <dd>Creates a {{domxref("DynamicsCompressorNode")}}, which can be used to apply acoustic compression to an audio signal.</dd> + <dt>{{domxref("AudioContext.createGain()")}}</dt> + <dd>Creates a {{domxref("GainNode")}}, which can be used to control the overall volume of the audio graph.</dd> + <dt>{{domxref("AudioContext.createOscillator()")}}</dt> + <dd>Creates an {{domxref("OscillatorNode")}}, a source representing a periodic waveform. It basically generates a tone.</dd> + <dt>{{domxref("AudioContext.createPanner()")}}</dt> + <dd>Creates a {{domxref("PannerNode")}}, which is used to spatialise an incoming audio stream in 3D space.</dd> + <dt>{{domxref("AudioContext.createPeriodicWave()")}}</dt> + <dd>Creates a {{domxref("PeriodicWave")}}, used to define a periodic waveform that can be used to determine the output of an {{ domxref("OscillatorNode") }}.</dd> + <dt>{{domxref("AudioContext.createWaveShaper()")}}</dt> + <dd>Creates a {{domxref("WaveShaperNode")}}, which is used to implement non-linear distortion effects.</dd> + <dt>{{domxref("AudioContext.createAudioWorker()")}}</dt> + <dd>Creates an {{domxref("AudioWorkerNode")}}, which can interact with a web worker thread to generate, process, or analyse audio directly. This was added to the spec on August 29 2014, and is not implemented in any browser yet.</dd> + <dt>{{domxref("AudioContext.decodeAudioData()")}}</dt> + <dd>Asynchronously decodes audio file data contained in an {{domxref("ArrayBuffer")}}. In this case, the ArrayBuffer is usually loaded from an {{domxref("XMLHttpRequest")}}'s <code>response</code> attribute after setting the <code>responseType</code> to <code>arraybuffer</code>. This method only works on complete files, not fragments of audio files.</dd> + <dt>{{domxref("AudioContext.resume()")}}</dt> + <dd>Resumes the progression of time in an audio context that has previously been suspended.</dd> + <dt>{{domxref("AudioContext.suspend()")}}</dt> + <dd>Suspends the progression of time in the audio context, temporarily halting audio hardware access and reducing CPU/battery usage in the process.</dd> +</dl> + +<h2 id="Obsolete_Methoden">Obsolete Methoden</h2> + +<dl> + <dt>{{domxref("AudioContext.createJavaScriptNode()")}}</dt> + <dd>Creates a {{domxref("JavaScriptNode")}}, used for direct audio processing via JavaScript. This method is obsolete, and has been replaced by {{domxref("AudioContext.createScriptProcessor()")}}.</dd> + <dt>{{domxref("AudioContext.createWaveTable()")}}</dt> + <dd>Creates a {{domxref("WaveTableNode")}}, used to define a periodic waveform. This method is obsolete, and has been replaced by {{domxref("AudioContext.createPeriodicWave()")}}.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Grundsätzliche Deklarierung eines Audio Kontextes:</p> + +<pre class="brush: js">var audioCtx = new AudioContext();</pre> + +<p>Browserunabhängige Variante:</p> + +<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext; +var audioCtx = new AudioContext(); + +var oscillatorNode = audioCtx.createOscillator(); +var gainNode = audioCtx.createGain(); +var finish = audioCtx.destination; +// etc.</pre> + +<h2 id="Spezifikationen">Spezifikationen</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('Web Audio API', '#the-audiocontext-interface', 'AudioContext')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}<br> + 35</td> + <td>{{CompatGeckoDesktop(25.0)}} </td> + <td>{{CompatNo}}</td> + <td>15.0{{property_prefix("webkit")}}<br> + 22</td> + <td>6.0{{property_prefix("webkit")}}</td> + </tr> + <tr> + <td><code>createStereoPanner()</code></td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(37.0)}} </td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(40.0)}}</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>Firefox Mobile (Gecko)</th> + <th>Firefox OS</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>{{CompatGeckoDesktop(37.0)}} </td> + <td>2.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>createStereoPanner()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul style="margin-left: 40px;"> + <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li>{{domxref("OfflineAudioContext")}}</li> +</ul> diff --git a/files/de/web/api/audiodestinationnode/index.html b/files/de/web/api/audiodestinationnode/index.html new file mode 100644 index 0000000000..4acda5845c --- /dev/null +++ b/files/de/web/api/audiodestinationnode/index.html @@ -0,0 +1,141 @@ +--- +title: AudioDestinationNode +slug: Web/API/AudioDestinationNode +translation_of: Web/API/AudioDestinationNode +--- +<p>{{APIRef("Web Audio API")}}</p> + +<div> +<p>Die <code>AudioDestinationNode</code> Schnittstelle repräsentiert das Ziel bzw. den Ausgang eines Audiographen in einem gegebenen Kontext — in der Regel die Lautsprecher. Es könnte aber auch ein Knoten <em>(Node)</em> sein, der Audiodaten in einem <code>OfflineAudioContext </code>aufzeichnet.</p> +</div> + +<p><code>AudioDestinationNode</code> hat einen Eingang und keinen Ausgang (denn er ist der Ausgang, kein weiterer Audio Node kann verlinkt werden). Die Anzahl der Kanäle des Eingangs muss zwischen null und dem Wert von <code>maxChannelCount</code> liegen, sonst wird eine <em>Exception </em>ausgelöst.</p> + +<p>Der <code>AudioDestinationNode</code> eines gegebenen <code>AudioContext</code> kann über das {{domxref("AudioContext.destination")}} Attribut erzeugt bzw. empfangen werden.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Anzahl Inputs</th> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row">Anzahl Outputs</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Kanalzählmethode</th> + <td><code>"explicit"</code></td> + </tr> + <tr> + <th scope="row">Kanal Anzahl</th> + <td><code>2</code></td> + </tr> + <tr> + <th scope="row">Kanal Interpretation</th> + <td><code>"speakers"</code></td> + </tr> + </tbody> +</table> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<p><em>erbt Eigenschaften von der Elternklasse, </em><em>{{domxref("AudioNode")}}</em>.</p> + +<dl> + <dt>{{domxref("AudioDestinationNode.maxChannelCount")}}</dt> + <dd>Ist ein <code>unsigned long</code> der die maximale Kanalzahl definiert, die das physische Gerät bedienen kann.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<p><em>Keine spezifischen Methoden; erbt die Methoden der Elternklasse, </em><em>{{domxref("AudioNode")}}</em>.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Das Benutzen des<code> AudioDestinationNode</code> ist per Design einfach gehalten — es repräsentiert den Ausgang des physikalischen Geräts (Lautsprecher), so dass man dieses mit ein paar Zeilen Code mit einem Audiographen verbinden kann:</p> + +<pre class="brush: js">var audioCtx = new AudioContext(); +var source = audioCtx.createMediaElementSource(myMediaElement); +source.connect(gainNode); +gainNode.connect(audioCtx.destination);</pre> + +<p>Für ein kompletteres Beispiel, sehen Sie sich eines unserer MDN Web Audio Beispiele, wie den <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> oder das <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a> an.</p> + +<h2 id="Spezifikationen">Spezifikationen</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('Web Audio API', '#the-audiodestinationnode-interface', 'AudioDestinationNode')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>14 {{property_prefix("webkit")}}</td> + <td>23</td> + <td>{{CompatNo}}</td> + <td>15 {{property_prefix("webkit")}}<br> + 22 (unprefixed)</td> + <td>6 {{property_prefix("webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>28 {{property_prefix("webkit")}}</td> + <td>25</td> + <td>1.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6 {{property_prefix("webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> +</ul> diff --git a/files/de/web/api/audionode/index.html b/files/de/web/api/audionode/index.html new file mode 100644 index 0000000000..8ad96dc760 --- /dev/null +++ b/files/de/web/api/audionode/index.html @@ -0,0 +1,191 @@ +--- +title: AudioNode +slug: Web/API/AudioNode +translation_of: Web/API/AudioNode +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<p>Ein <strong><code>AudioNode</code></strong> ist eine generische Schnittstelle um ein Signalverarbeitungsmodul wie z.B. ein HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} Element, ein {{domxref("OscillatorNode")}}, die Audio Destination, ein zwischengeschaltenes audio-verarbeitendes Modul wie z.B. einen {{domxref("BiquadFilterNode")}} oder {{domxref("ConvolverNode")}}), oder Lautstärkeregler (like {{domxref("GainNode")}}).</p> + +<p><img alt="AudioNodes participating in an AudioContext create a audio routing graph." src="https://mdn.mozillademos.org/files/9713/WebAudioBasics.png" style="display: block; height: 230px; margin: 0px auto; width: 677px;"></p> + +<p>Ein <code>AudioNode</code> hat Ein- und Ausgänge, jeweils mit einer gegebenen Anzahl an Kanälen.<em> </em>Einen <code>AudioNode</code> ohne Eingänge und mit einem oder mehreren Ausgängen nennt man <em>source node </em>(dt.: Quellknoten). Die Art der Signalverarbeitung in einem Audio Node variiert mit dessen Funktion. Der folgende Ablauf liegt jedoch immer zugrunde: das Signal am Eingang wird eingelesen, das Signal wird zu einem neuen Signal verarbeitet und an den Ausgang geleitet. In einigen Fällen, wir das Signal unverarbeitet durchgeschleust, so z.B. beim {{domxref("AnalyserNode")}}, wo das Resultat der Signalverarbeitung separat zugänglich ist.</p> + +<p>Mehrere Nodes können zu einem <em>Processing Graph </em>(dt.:Verarbeitungs-Netz) verbunden werden. Ein solcher Graph befindet sich immer in genau einem {{domxref("AudioContext")}}. Signal- verarbeitende Nodes erben die Eigenschaften und Methoden von <code>Audio Node</code>, implementieren aber auch eigene Funktionalität. Weitere Informationen geben die Seiten der speziellen <code>Audio Nodes</code>, die sie auf der Homepage der <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> finden.</p> + +<div class="note"> +<p><span style="font-size: 14px; line-height: 21px;"><strong>Hinweis</strong></span>: Ein <code>AudioNode</code> kann das Ziel von Events sein, und implementiert daher die {{domxref("EventTarget")}} Schnittstelle.</p> +</div> + +<h2 id="Properties" style="">Properties</h2> + +<dl> + <dt>{{domxref("AudioNode.context")}} {{readonlyInline}}</dt> + <dd>Liefert den assoziierten {{domxref("AudioContext")}}, der den signalverarbeitenden Graphen (processing graph) enthält, in den der Node eingebunden ist.</dd> +</dl> + +<dl> + <dt>{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}</dt> + <dd>Liefert die Anzahl der Eingänge des Nodes. Source nodes (dt. Quellknoten) sind definiert als Nodes, deren <code>numberOfInputs</code> Eigenschaft einen Wert von <code>0 </code>aufweist.</dd> +</dl> + +<dl> + <dt>{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}</dt> + <dd>Liefert die Anzahl der Ausgänge des Nodes. Destination nodes (dt.: Zielknoten) — wie {{ domxref("AudioDestinationNode") }} — haben einen Wert von <code>0</code> für diese Eigenschaft.</dd> +</dl> + +<dl> + <dt>{{domxref("AudioNode.channelCount")}}</dt> + <dd>Represents an integer used to determine how many channels are used when <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> connections to any inputs to the node. Its usage and precise definition depend on the value of {{domxref("AudioNode.channelCountMode")}}.</dd> +</dl> + +<dl> + <dt>{{domxref("AudioNode.channelCountMode")}}</dt> + <dd>Represents an enumerated value describing the way channels must be matched between the node's inputs and outputs.</dd> + <dt>{{domxref("AudioNode.channelInterpretation")}}</dt> + <dd>Represents an enumerated value describing the meaning of the channels. This interpretation will define how audio <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> will happen.<br> + The possible values are <code>"speakers"</code> or <code>"discrete"</code>.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Also implements methods from the interface </em>{{domxref("EventTarget")}}.</p> + +<dl> + <dt>{{domxref("AudioNode.connect(AudioNode)")}}</dt> + <dd>Allows us to connect one output of this node to one input of another node.</dd> + <dt>{{domxref("AudioNode.connect(AudioParam)")}}</dt> + <dd>Allows us to connect one output of this node to one input of an audio parameter.</dd> + <dt>{{domxref("AudioNode.disconnect()")}}</dt> + <dd>Allows us to disconnect the current node from another one it is already connected to.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>This simple snippet of code shows the creation of some audio nodes, and how the <code>AudioNode</code> properties and methods can be used. You can find examples of such usage on any of the examples linked to on the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> landing page (for example <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.)<span class="p"> </span></p> + +<pre class="brush: js;highlight[8,9,11,12,13,14]">var AudioContext = window.AudioContext || window.webkitAudioContext; + +var audioCtx = new AudioContext(); + +var oscillator = audioCtx.createOscillator(); +var gainNode = audioCtx.createGain(); + +oscillator.connect(gainNode); +gainNode.connect(audioCtx.destination); + +oscillator.context; +oscillator.numberOfInputs; +oscillator.numberOfOutputs; +oscillator.channelCount;</pre> + +<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('Web Audio API', '#the-audionode-interface', 'AudioNode')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td> + <td>{{CompatGeckoDesktop(25.0)}}</td> + <td>{{CompatNo}}</td> + <td>15.0{{property_prefix("webkit")}}<br> + 22 (unprefixed)</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>channelCount</code> <code>channelCountMode</code></td> + <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>connect</code><code>(AudioParam)</code></td> + <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</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>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>25.0</td> + <td>1.2</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>channelCount</code><br> + <code>channelCountMode</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>connect</code><code>(AudioParam)</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> +</ul> diff --git a/files/de/web/api/audiotrack/index.html b/files/de/web/api/audiotrack/index.html new file mode 100644 index 0000000000..3ef55d93ad --- /dev/null +++ b/files/de/web/api/audiotrack/index.html @@ -0,0 +1,86 @@ +--- +title: AudioTrack +slug: Web/API/AudioTrack +translation_of: Web/API/AudioTrack +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary">Das <strong><code>AudioTrack</code></strong> Interface stellt einen einzelnen Audiotrack aus einem der HTML-Medienelemente {{HTMLElement("audio")}} oder {{HTMLElement("video")}} dar. </span>Die häufigste Verwendung für ein <code>AudioTrack</code> Objekt ist das (De-)Aktivieren seiner Eigenschaft {{domxref("AudioTrack.enabled", "enabled")}} um den Track stummzuschalten.</p> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<dl> + <dt>{{domxref("AudioTrack.enabled", "enabled")}}</dt> + <dd>Ein Boolescher Wert, der kontrolliert ob der Sound für den Audiotrack aktiviert ist. Steht dieser Wert auf <code>false</code>, ist der Ton stummgeschaltet.</dd> + <dt>{{domxref("AudioTrack.id", "id")}} {{ReadOnlyInline}}</dt> + <dd>Eine {{domxref("DOMString")}}, die den Track eindeutig innerhalb des Mediums identifiziert. Diese ID kann genutzt werden, um einen bestimmten Track auf einer Audio-Track-Liste durch Aufruf von {{domxref("AudioTrackList.getTrackById()")}} zu finden. Die ID kann auch als Fragment der URL genutzt werden, wenn das Medium die Suche per Medienfragment laut <a href="https://www.w3.org/TR/media-frags/">Media Fragments URI-Spezifikation</a> unterstützt.</dd> + <dt>{{domxref("AudioTrack.kind", "kind")}} {{ReadOnlyInline}}</dt> + <dd>Ein {{domxref("DOMString")}}, das bestimmt zu welcher Kategorie ein Track gehört. Der Haupt-Audiotrack hätte bspw. als <code>kind</code> die Eigenschaft <code>"main"</code>.</dd> + <dt>{{domxref("AudioTrack.label", "label")}} {{ReadOnlyInline}}</dt> + <dd>Ein {{domxref("DOMString")}}, das ein visuelles Label für den Track anzeigt. Z.B. hätte ein Audiokommentar-Track für einen Film als <code>label</code> <code>"Kommentar mit Regisseur Max Mustermann und den Schauspielern XYZ und ZYX."</code> Dieser String bleibt leer, wenn kein Label angegeben wurde.</dd> + <dt>{{domxref("AudioTrack.language", "language")}} {{ReadOnlyInline}}</dt> + <dd>A {{domxref("DOMString")}} specifying the audio track's primary language, or an empty string if unknown. The language is specified as a BCP 47 ({{RFC(5646)}}) language code, such as <code>"en-US"</code> or <code>"pt-BR"</code>.</dd> + <dt>{{domxref("AudioTrack.sourceBuffer", "sourceBuffer")}} {{ReadOnlyInline}}</dt> + <dd>The {{domxref("SourceBuffer")}} that created the track. Returns null if the track was not created by a {{domxref("SourceBuffer")}} or the {{domxref("SourceBuffer")}} has been removed from the {{domxref("MediaSource.sourceBuffers")}} attribute of its parent media source.</dd> +</dl> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>To get an <code>AudioTrack</code> for a given media element, use the element's {{domxref("HTMLMediaElement.audioTracks", "audioTracks")}} property, which returns an {{domxref("AudioTrackList")}} object from which you can get the individual tracks contained in the media:</p> + +<pre class="brush: js">var el = document.querySelector("video"); +var tracks = el.audioTracks; +</pre> + +<p>You can then access the media's individual tracks using either array syntax or functions such as {{jsxref("Array.forEach", "forEach()")}}.</p> + +<p>This first example gets the first audio track on the media:</p> + +<pre class="brush: js">var firstTrack = tracks[0];</pre> + +<p>The next example scans through all of the media's audio tracks, enabling any that are in the user's preferred language (taken from a variable <code>userLanguage</code>) and disabling any others.</p> + +<pre class="brush: js">tracks.forEach(function(track) { + if (track.language === userLanguage) { + track.enabled = true; + } else { + track.enabled = false; + } +}); +</pre> + +<p>The {{domxref("AudioTrack.language", "language")}} is in standard ({{RFC(5646)}}) format. For US English, this would be <code>"en-US"</code>, for example.</p> + +<h2 id="Example">Example</h2> + +<p>{{page("/en-US/docs/Web/API/AudioTrack/label", "Example")}}</p> + +<h2 id="Specifications">Specifications</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('HTML WHATWG', 'media.html#audiotrack', 'AudioTrack')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#audiotrack', 'AudioTrack')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.AudioTrack")}}</p> diff --git a/files/de/web/api/battery_status_api/index.html b/files/de/web/api/battery_status_api/index.html new file mode 100644 index 0000000000..498c8bb6ae --- /dev/null +++ b/files/de/web/api/battery_status_api/index.html @@ -0,0 +1,92 @@ +--- +title: Battery Status API +slug: Web/API/Battery_Status_API +translation_of: Web/API/Battery_Status_API +--- +<p>{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}</p> + +<p>Die <strong>Battery Status API</strong>, oder kurz <strong>Battery API</strong>, stellt Informationen über den Ladezustand der Systembatterie zur Verfügung. Diese Informationen können zur Anpassung der Ressourcennutzung verwendet werden. Wenn nur noch wenig Energie zur Verfügung steht, sollten unnötige Operationen eingestellt werden, damit die Laufzeit erhöht wird. Oder aber der Zustand gespeichert werden, damit ein Datenverlust verhindert werden kann.</p> + +<p>Die Battery Status API erweitert {{domxref("window.navigator")}} mit einer Methode {{domxref("navigator.getBattery()")}}, die ein Promise mit einem {{domxref("BatteryManager")}} Objekt liefert, sowie einigen Nachrichten zum Überwachen des Batteriestatus.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>In diesem Beispiel wird der Ladezustand (Netz, ladend, etc.) und Änderungen des Batterieniveaus und der Zeit überwacht. Dies erfolgt durch Überwachen der Events: {{event("chargingchange")}}, {{event("levelchange")}} und {{event("chargingtimechange")}}, {{event("dischargingtimechange")}}.</p> + +<pre class="brush: js;">navigator.getBattery().then(function(battery) { + function updateAllBatteryInfo(){ + updateChargeInfo(); + updateLevelInfo(); + updateChargingInfo(); + updateDischargingInfo(); + } + updateAllBatteryInfo(); + + battery.addEventListener('chargingchange', function(){ + updateChargeInfo(); + }); + function updateChargeInfo(){ + console.log("Battery charging? " + + (battery.charging ? "Yes" : "No")); + } + + battery.addEventListener('levelchange', function(){ + updateLevelInfo(); + }); + function updateLevelInfo(){ + console.log("Battery level: " + + battery.level * 100 + "%"); + } + + battery.addEventListener('chargingtimechange', function(){ + updateChargingInfo(); + }); + function updateChargingInfo(){ + console.log("Battery charging time: " + + battery.chargingTime + " seconds"); + } + + battery.addEventListener('dischargingtimechange', function(){ + updateDischargingInfo(); + }); + function updateDischargingInfo(){ + console.log("Battery discharging time: " + + battery.dischargingTime + " seconds"); + } + +}); +</pre> + +<p>Siehe auch die <a class="external" href="http://www.w3.org/TR/battery-status/#examples">Beispiel in der Spezifikation</a>.</p> + +<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("Battery API")}}</td> + <td>{{Spec2("Battery API")}}</td> + <td>Initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Beteiligung ist über <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> möglich, bitte schickt uns einen "pull request" Anfrage.</div> + +<p>{{Compat("api.BatteryManager")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/Apps/Build/gather_and_modify_data/retrieving_battery_status_information">Batterie Statusinformationen abrufen - Beispiel und Artikel</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Hacks blog post - Nutzung der Battery API</a></li> +</ul> diff --git a/files/de/web/api/blob/index.html b/files/de/web/api/blob/index.html new file mode 100644 index 0000000000..352c978ac5 --- /dev/null +++ b/files/de/web/api/blob/index.html @@ -0,0 +1,245 @@ +--- +title: Blob +slug: Web/API/Blob +tags: + - API + - Files + - Reference + - TopicStub + - checkTranslation +translation_of: Web/API/Blob +--- +<p>{{ APIRef("File API") }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Ein <code>Blob</code> ist eine dateiähnliche Menge unveränderlicher Roh-Daten, die nicht notwendigerweise native JavaScript-Daten enthalten. Das {{ domxref("File") }}-Interface basiert auf <code>Blob</code> und erweitert dessen Funktionen und die Unterstützung von Dateien auf dem System des Nutzers.</p> + +<p>Eine einfache Methode, um einen Blob zu erstellen, ist der Aufruf des {{domxref("Blob.Blob", "Blob()")}}-Konstruktors. Anders ist es auch mit Hilfe eines Aufrufs von <code>slice()</code> möglich, einen Ausschnitt aus einem anderen Blob zu erhalten.</p> + +<p>Die APIs, welche Blob-Objekte akzeptieren, werden ebenfalls in der {{domxref("File")}}-Dokumentation genannt.</p> + +<div class="note"> +<p>Note: The <code>slice()</code> method had initially taken <code>length</code> as the second argument to indicate the number of bytes to copy into the new <code>Blob</code>. If you specified values such that <code>start + length</code>exceeded the size of the source <code>Blob</code>, the returned <code>Blob</code> contained data from the start index to the end of the source <code>Blob</code>.</p> +</div> + +<div class="note"> +<p>Zu beachten: Der <code>slice()-</code>Methode kann in manchen Browsern (und Versionen) ein Vendor-Präfix vorangestellt sein. Firefox 12 und früher: <code>blob.mozSlice()</code>. Safari: <code>blob.webkitSlice()</code>. Eine alte Version von <code>slice()</code> ohne Vendor-Präfix ist überholt. Die Unterstützung von <code>blob.mozSlice()</code> wurde mit Firefox 30 eingestellt.</p> +</div> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt>{{domxref("Blob.Blob", "Blob()")}}</dt> + <dd>Gibt einen neuen <code>Blob</code> zurück, dessen Inhalt das als Parameter übergebene Array in zusammengesetzter Form ist.</dd> +</dl> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<dl> + <dt>{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Gibt einen booleschen Wert zurück, der anzeigt, ob die {{domxref("Blob.close()")}}-Methode zu diesem <code>Blob</code> bereits aufgerufen wurde. Geschlossene Blobs können nicht mehr ausgelesen werden.</dd> + <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt> + <dd>Gibt die Größe des <code>Blob</code>-Inhalts in Bytes zurück.</dd> + <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt> + <dd>Ein <code>String,</code> der den MIME-Typ enthält. Ist der Typ unbekannt, ist der Rückgabe-String leer.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<dl> + <dt>{{domxref("Blob.close()")}} {{experimental_inline}}</dt> + <dd>Schließt das <code>Blob</code>-Objekt und gibt gegebenenfalls reservierte Ressourcen frei.</dd> + <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt> + <dd>Gibt ein neues <code>Blob-Objekt</code> zurück, das die spezifierte Menge an Daten enthält.</dd> +</dl> + +<h2 id="Beispiele">Beispiele:</h2> + +<h3 id="Beispielanwendung_des_Blob-Konstruktors">Beispielanwendung des Blob-Konstruktors</h3> + +<p>Der {{domxref("Blob.Blob", "Blob() constructor")}} ermöglicht es, <code>Blobs</code> aus Objekten zu erzeugen. Beispielsweise kann man einen <code>Blob</code> von einem String-Objekt erzeugen:</p> + +<pre><code>var debug = {hello: "world"}; +var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});</code> +</pre> + +<div class="warning"> +<p>{{ domxref("BlobBuilder") }} bietet noch eine weitere Möglichkeit Blobs zu erstellen, welche mittlerweile allerdings veraltet ist und nicht mehr genutzt werden sollte.</p> + +<div class="syntaxbox"> +<pre class="brush: js">var builder = new BlobBuilder(); +var fileParts = ['<a id="a"><b id="b">hey!</b></a>']; +builder.append(fileParts[0]); +var myBlob = builder.getBlob('text/xml');</pre> +</div> +</div> + +<h3 id="Erstellen_einer_URL_für_ein_typed_array_durch_einen_Blob">Erstellen einer URL für ein "typed array" durch einen Blob</h3> + +<p>Beispiel-Code:</p> + +<pre class="brush: js">var typedArray = EinTypedArrayErstellen(); +var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // ein gültiger MIME-Typ +var url = URL.createObjectURL(blob); +// Die URL wird etwa so sein: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf +// Nun kann die URL überall genutzt werden, wo URLs verwendung finden, z.B. in Bildquellen (image.src) +</pre> + +<h3 id="Daten_aus_einem_Blob_lesen">Daten aus einem Blob lesen</h3> + +<p>Um Daten aus einem Blob zu lesen, muss ein {{domxref("FileReader")}} genutzt werden. Der folgende Code liest den Inhalt eines Blobs als ein typisiertes Array aus.</p> + +<pre class="brush: js">var reader = new FileReader(); +reader.addEventListener("loadend", function() { + // reader.result beinhaltet den Inhalt des Blobs +}); +reader.readAsArrayBuffer(blob);</pre> + +<p>Über eine andere Methode von {{domxref("FileReader")}} ist es möglich, den Inhalt eines Blobs als String oder Data-URL zu lesen.</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">Hinweis</th> + </tr> + <tr> + <td>{{SpecName('File API','#blob','Blob')}}</td> + <td>{{Spec2('File API')}}</td> + <td>Grundlegende Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>5[1]</td> + <td>4[2]</td> + <td>10</td> + <td>11.10[1]</td> + <td>5.1[1]</td> + </tr> + <tr> + <td><code>slice()</code></td> + <td>10 {{property_prefix("webkit")}}<br> + 21</td> + <td>5 {{property_prefix("moz")}}[3]<br> + 13</td> + <td>10</td> + <td>12</td> + <td>5.1 {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td><code>Blob()</code>constructor</td> + <td>20</td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>10</td> + <td>12.10</td> + <td>6</td> + </tr> + <tr> + <td><code>close()</code>and <code>isClosed</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}[4]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>slice()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Blob()</code>constructor</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>close()</code>and <code>isClosed</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}[4]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}<br> + </td> + </tr> + </tbody> +</table> + +<h3 id="Anmerkung_zur_slice()-Implementierung">Anmerkung zur slice()-Implementierung</h3> + +<p>[1] Eine Version von <code>slice()</code>, die als zweites Argument die gewünschte Größe enthält, war in <a href="http://trac.webkit.org/changeset/55670">WebKit</a> und <a href="http://www.opera.com/docs/specs/presto28/file/#blob">Opera 11.10</a> implementiert. Da sich jedoch diese Syntax von {{jsxref("Array/slice", "Array.slice()")}} und {{jsxref("String/slice", "String.slice()")}} unterschied, wurde die Unterstützung in WebKit fallen gelassen zu Gunsten der neuen Syntax von <code><a href="http://trac.webkit.org/changeset/83873">Blob.webkitSlice()</a>.</code></p> + +<p>[2] Eine Variante von <code>slice()</code>, die als zweites Argument die gewünschte Größe enthält, war in <a href="https://hg.mozilla.org/mozilla-central/rev/1b3947ed93c6">Firefox 4</a> verfügbar. Da sich jedoch diese Syntax von {{jsxref("Array/slice", "Array.slice()")}} und {{jsxref("String/slice", "String.slice()")}} unterschied, wurde diese Unterstützung in Gecko fallen gelassen zu Gunsten der neuen Syntax von <code>mozSlice()</code>.</p> + +<p>[3] Vor Gecko 12.0 {{ geckoRelease("12.0") }} trat ein Fehler im Verhalten von slice() auf; die erste und letzte Position außerhalb des Bereichs von 64-Bit-Werten wurden fehlerhaft verarbeitet, was nun für vorzeichenlose 64-Bit-Werte behoben wurde.</p> + +<p>[4] Siehe {{bug("1048325")}}</p> + +<h3 id="Anmerkungen_zu_Gecko">Anmerkungen zu Gecko</h3> + +<p>Vor Gecko 12.0 {{ geckoRelease("12.0") }} gab es einen Bug, der das Verhalten von {{ manch("slice") }} beinflusste. Bei Start- und Endpositionen außerhalb von vorzeichenbehafteten 64-Bit-Werten funktionierte die Methode nicht. Dieser Bug wurde mittlerweile behoben und vorzeichenlose 64-Bit-Werte sind nun möglich.</p> + +<h2 id="Chrome_Code_-_Scope">Chrome Code - Scope</h2> + +<p>Um Blobs im Chrome Code, JSM und Bootstrap Scope zu verwenden, müssen sie folgendermaßen importiert werden:</p> + +<pre class="brush: js">Cu.importGlobalProperties(['Blob']); +</pre> + +<p><code>Blobs</code> sind auch in Worker-Scopes verfügbar.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{ domxref("BlobBuilder") }}</li> + <li>{{ domxref("File") }}</li> + <li>{{ domxref("URL.createObjectURL") }}</li> + <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> +</ul> diff --git a/files/de/web/api/body/arraybuffer/index.html b/files/de/web/api/body/arraybuffer/index.html new file mode 100644 index 0000000000..7550dfadc8 --- /dev/null +++ b/files/de/web/api/body/arraybuffer/index.html @@ -0,0 +1,87 @@ +--- +title: Body.arrayBuffer() +slug: Web/API/Body/arrayBuffer +translation_of: Web/API/Body/arrayBuffer +--- +<div>{{APIRef("Fetch")}}</div> + +<p>Die Methode <strong><code>arrayBuffer()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in einen {{domxref("ArrayBuffer")}} aufgelöst wird.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">response.arrayBuffer().then(function(buffer) { + // mach etwas mit dem Buffer +});</pre> + +<h3 id="Parameter">Parameter</h3> + +<p>Keine.</p> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein Promise, welches in einen {{domxref("ArrayBuffer")}} aufgelöst wird.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>In unserem <a href="https://mdn.github.io/fetch-examples/fetch-array-buffer/">Live-Beispiel zum Abruf eines Array Buffers</a> haben wir einen Wiedergabe-Knopf. Bei einem Klick darauf wird die Funktion <code>getData()</code> ausgeführt. Beachten Sie, dass vor der Wiedergabe die ganze Audio-Datei heruntergeladen wird. Benötigen Sie eine Wiedergabe noch während des Downloads (Streaming) ziehen Sie {{domxref("HTMLAudioElement")}} in Betracht:</p> + +<pre class="brush: js">new Audio(music.ogg).play() +</pre> + +<p>In <code>getData()</code> erstellen wir eine neue Anfrage mit dem {{domxref("Request.Request")}} Konstruktor, um dann einen OGG Musik-Track abzurufen. Wir benutzen ebenfalls {{domxref("AudioContext.createBufferSource")}} um eine Audio-Puffer-Quelle zu erstellen. Ist der Abruf erfolgreich, lesen wir mit <code>arrayBuffer()</code> einen {{domxref("ArrayBuffer")}} aus der Antwort, dekodieren die Audiodaten mit {{domxref("AudioContext.decodeAudioData")}}, setzen die dekodierten Daten als Quelle für den Audio-Puffer fest und verbinden die Quelle mit {{domxref("AudioContext.destination")}}.</p> + +<p>Wenn <code>getData()</code> durchgelaufen ist, starten wir die Wiedergabe mit <code>start(0)</code> und deaktivieren den Wiedergabe-Knopf, damit er nicht erneut geklickt werden kann, während die Wiedergabe läuft (was zu einem Fehler führen würde).</p> + +<pre class="brush: js">function getData() { + source = audioCtx.createBufferSource(); + + var myRequest = new Request('viper.ogg'); + + fetch(myRequest).then(function(response) { + return response.arrayBuffer(); + }).then(function(buffer) { + audioCtx.decodeAudioData(buffer, function(decodedData) { + source.buffer = decodedData; + source.connect(audioCtx.destination); + }); + }); +}; + +// Knöpfe zum Abspielen und Anhalten verknüpfen + +play.onclick = function() { + getData(); + source.start(0); + play.setAttribute('disabled', 'disabled'); +}</pre> + +<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-arraybuffer','arrayBuffer()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Body.arrayBuffer")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/de/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/de/web/api/body/blob/index.html b/files/de/web/api/body/blob/index.html new file mode 100644 index 0000000000..53595fdbda --- /dev/null +++ b/files/de/web/api/body/blob/index.html @@ -0,0 +1,73 @@ +--- +title: Body.blob() +slug: Web/API/Body/blob +translation_of: Web/API/Body/blob +--- +<div>{{APIRef("Fetch")}}</div> + +<p>Die Methode <strong><code>blob()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in einen {{domxref("Blob")}} aufgelöst wird.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">response.blob().then(function(myBlob) { + // mach etwas mit myBlob +});</pre> + +<h3 id="Parameter">Parameter</h3> + +<p>Keine.</p> + +<div class="note"><strong>Hinweis:</strong> Wenn die {{domxref("Response")}} vom {{domxref("Response.type")}} her <code>"opaque"</code> ist, hat der resultierende {{domxref("Blob")}} eine {{domxref("Blob.size")}} von <code>0</code> und einen {{domxref("Blob.type")}} eines leeren Strings <code>""</code>, wodurch er für Methoden wie {{domxref("URL.createObjectURL")}} <em>unbrauchbar</em> wird.</div> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein Promise, welches in einen {{domxref("Blob")}} aufgelöst wird.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Beispiel für eine Fetch Anfrage</a> (<a href="http://mdn.github.io/fetch-examples/fetch-request/">live ausführen</a>) erstellen wir eine neue Anfrage mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann ein JPG ab. Wenn der Abruf erfolgreich ist, lesen wir mit <code>blob()</code> einen {{domxref("Blob")}} aus der Antwort, fügen ihn mit {{domxref("URL.createObjectURL")}} in eine Objekt-URL ein und legen diese URL als Quelle für das {{htmlelement("img")}} Element zum Anzeigen des Bildes fest.</p> + +<pre class="brush: js">var myImage = document.querySelector('img'); + +var myRequest = new Request('flowers.jpg'); + +fetch(myRequest) +.then(function(response) { + return response.blob(); +}) +.then(function(myBlob) { + var objectURL = URL.createObjectURL(myBlob); + myImage.src = objectURL; +}); +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-blob','blob()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Body.blob")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/de/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/de/web/api/body/body/index.html b/files/de/web/api/body/body/index.html new file mode 100644 index 0000000000..cbe7484d91 --- /dev/null +++ b/files/de/web/api/body/body/index.html @@ -0,0 +1,86 @@ +--- +title: Body.body +slug: Web/API/Body/body +translation_of: Web/API/Body/body +--- +<div>{{APIRef("Fetch")}}{{seecompattable}}</div> + +<p>Die schreibgeschützte <strong><code>body</code></strong> Eigenschaft des {{domxref("Body")}} Mixin ist ein einfacher Getter, der dazu benutzt wird den Inhalt des Body als {{domxref("ReadableStream")}} bereitzustellen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">var stream = responseInstance.body;</pre> + +<h3 id="Wert">Wert</h3> + +<p>Ein {{domxref("ReadableStream")}}.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>In unserem einfachen <a href="https://mdn.github.io/dom-examples/streams/simple-pump.html">Stream-Pump-Beispiel</a> rufen wir ein Bild ab, machen den Antwort-Stream mit <code>response.body</code> sichtbar, erstellen einen Reader mit {{domxref("ReadableStream.getReader()")}} und reihen die Teile des Streams in einen zweiten, benutzerdefinierten, lesbaren Stream — wodurch wie eine exakte Kopie des Bilds erhalten.</p> + +<pre class="brush: js">const image = document.getElementById('target'); + +// Bild holen +fetch('./tortoise.png') +// Body als ReadableStream abrufen +.then(response => response.body) +.then(body => { + const reader = body.getReader(); + + return new ReadableStream({ + start(controller) { + return pump(); + + function pump() { + return reader.read().then(({ done, value }) => { + // Stream schließen, wenn keine weiteren Daten verarbeitet werden müssen + if (done) { + controller.close(); + return; + } + + // Das nächste Datenstück in unseren Ziel-Stream einreihen + controller.enqueue(value); + return pump(); + }); + } + } + }) +}) +.then(stream => new Response(stream)) +.then(response => response.blob()) +.then(blob => URL.createObjectURL(blob)) +.then(url => console.log(image.src = url)) +.catch(err => console.error(err));</pre> + +<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-body','body')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Body.body")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/API/Fetch_API">Fetch API</a></li> + <li><a href="/de/docs/Web/API/Streams_API">Streams API</a></li> + <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> +</ul> diff --git a/files/de/web/api/body/bodyused/index.html b/files/de/web/api/body/bodyused/index.html new file mode 100644 index 0000000000..052e8fcc7c --- /dev/null +++ b/files/de/web/api/body/bodyused/index.html @@ -0,0 +1,73 @@ +--- +title: Body.bodyUsed +slug: Web/API/Body/bodyUsed +translation_of: Web/API/Body/bodyUsed +--- +<div>{{APIRef("Fetch")}}</div> + +<p>Die schreibgeschützte <strong><code>bodyUsed</code></strong> Eigenschaft des {{domxref("Body")}} Mixin enthält einen {{domxref("Boolean")}} der angibt, ob der Body schon eingelesen wurde.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">var myBodyUsed = response.bodyUsed;</pre> + +<h3 id="Wert">Wert</h3> + +<p>Ein {{domxref("Boolean")}}.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Beispiel für eine Fetch Anfrage</a> (<a href="http://mdn.github.io/fetch-examples/fetch-request/">live ausführen</a>) erstellen wir eine neue Anforderung mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann ein JPG ab. Wenn der Abruf erfolgreich ist, lesen wir mit <code>blob()</code> einen {{domxref("Blob")}} aus der Antwort, fügen ihn mit {{domxref("URL.createObjectURL")}} in eine Objekt-URL ein und legen diese URL als Quelle für das {{htmlelement("img")}} Element zum Anzeigen des Bildes fest.</p> + +<p>Beachten Sie, dass wir <code>response.bodyUsed</code> vor dem Aufruf von <code>response.blob ()</code> und einmal danach in der Konsole protokollieren. Dies gibt vorher <code>false</code> zurück und anschließend <code>true</code>, da der Body ab diesem Punkt gelesen wurde.</p> + +<h3 id="HTML_Inhalt">HTML Inhalt</h3> + +<pre class="brush: html"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> +</pre> + +<h3 id="JavaScript_Inhalt">JavaScript Inhalt</h3> + +<pre class="brush: js">var myImage = document.querySelector('.my-image'); +fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg').then(function(response) { + console.log(response.bodyUsed); + var res = response.blob(); + console.log(response.bodyUsed); + return res; +}).then(function(response) { + var objectURL = URL.createObjectURL(response); + myImage.src = objectURL; +});</pre> + +<p>{{ EmbedLiveSample('Example', '100%', '250px') }}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-bodyused','bodyUsed')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Body.bodyUsed")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/de/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/de/web/api/body/formdata/index.html b/files/de/web/api/body/formdata/index.html new file mode 100644 index 0000000000..4ceb02aeb4 --- /dev/null +++ b/files/de/web/api/body/formdata/index.html @@ -0,0 +1,62 @@ +--- +title: Body.formData() +slug: Web/API/Body/formData +translation_of: Web/API/Body/formData +--- +<div>{{APIRef("Fetch")}}</div> + +<p>Die Methode <strong><code>formData()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in ein {{domxref("FormData")}} Objekt aufgelöst wird.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Dies ist hauptsächlich für <a href="/de/docs/Web/API/ServiceWorker_API">Service Worker</a> relevant. Wenn ein Benutzer ein Formular absendet und ein Service Worker die Anfrage abfängt, könnten Sie bspw. <code>formData()</code> aufrufen, um eine Key-Value-Abbildung zu erhalten, einige Felder zu modifizieren und das Formular dann an den Server weiterzuschicken (oder lokal zu benutzen).</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">response.formData() +.then(function(formdata) { + // machen Sie etwas mit Ihren Formulardaten +});</pre> + +<h3 id="Parameter">Parameter</h3> + +<p>Keine.</p> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein Promise, welches in ein {{domxref("FormData")}} Objekt aufgelöst wird.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Wird nachgereicht.</p> + +<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-formdata','formData()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Body.formData")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/de/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/de/web/api/body/index.html b/files/de/web/api/body/index.html new file mode 100644 index 0000000000..3693a73653 --- /dev/null +++ b/files/de/web/api/body/index.html @@ -0,0 +1,99 @@ +--- +title: Body +slug: Web/API/Body +tags: + - API + - BODY + - Experimental + - Fetch + - Fetch API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - request +translation_of: Web/API/Body +--- +<div>{{ APIRef("Fetch") }}</div> + +<p><span class="seoSummary">The <strong><code>Body</code></strong> {{glossary("mixin")}} of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.</span></p> + +<p><code>Body</code> is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated <dfn>body</dfn> (a <a href="/en-US/docs/Web/API/Streams_API">stream</a>), a <dfn>used flag</dfn> (initially unset), and a <dfn>MIME type</dfn> (initially the empty byte sequence).</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt> + <dd>A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.</dd> + <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt> + <dd>A {{domxref("Boolean")}} that indicates whether the body has been read.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Body.arrayBuffer()")}}</dt> + <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.</dd> + <dt>{{domxref("Body.blob()")}}</dt> + <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd> + <dt>{{domxref("Body.formData()")}}</dt> + <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd> + <dt>{{domxref("Body.json()")}}</dt> + <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.</dd> + <dt>{{domxref("Body.text()")}}</dt> + <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is <em>always</em> decoded using UTF-8.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.</p> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> +</pre> + +<h3 id="JS_Content">JS Content</h3> + +<pre class="brush: js">const myImage = document.querySelector('.my-image'); +fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg') + .then(res => res.blob()) + .then(res => { + const objectURL = URL.createObjectURL(res); + myImage.src = objectURL; +});</pre> + +<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</p> + +<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('Fetch','#body-mixin','Body')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Body")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> +</ul> + +<p> </p> diff --git a/files/de/web/api/body/json/index.html b/files/de/web/api/body/json/index.html new file mode 100644 index 0000000000..76271e680d --- /dev/null +++ b/files/de/web/api/body/json/index.html @@ -0,0 +1,73 @@ +--- +title: Body.json() +slug: Web/API/Body/json +translation_of: Web/API/Body/json +--- +<div>{{APIRef("Fetch")}}</div> + +<p>Die Methode <strong><code>json()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches den Inhalt des Body als {{jsxref("JSON")}} einliest.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">response.json().then(function(data) { + // mach etwas mit data +});</pre> + +<h3 id="Parameter">Parameter</h3> + +<p>Keine.</p> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein Promise, welches den Inhalt des Body als {{jsxref("JSON")}} einliest. Dies kann alles sein, was als JSON abgebildet werden kann — ein Objekt, ein Array, ein String, eine Zahl...</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">Beispiel für den Abruf eines json</a> (<a href="https://mdn.github.io/fetch-examples/fetch-json/">live ausführen</a>) erstellen wir eine neue Anfrage mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann eine <code>.json</code> Datei ab. Wenn der Abruf erfolgreich ist lesen wir die Daten ein und parsen sie mit <code>json()</code>, lesen die Werte erwartungsgemäß aus und fügen sie in eine Liste ein um unsere Produktdaten anzuzeigen.</p> + +<pre class="brush: js">var myList = document.querySelector('ul'); + +var myRequest = new Request('products.json'); + +fetch(myRequest) + .then(function(response) { return response.json(); }) + .then(function(data) { + for (var i = 0; i < data.products.length; i++) { + var listItem = document.createElement('li'); + listItem.innerHTML = '<strong>' + data.products[i].Name + '</strong> befindet sich in ' + + data.products[i].Location + + '. Preis: <strong>' + data.products[i].Price + '€</strong>'; + myList.appendChild(listItem); + } + });</pre> + +<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-json','json()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Body.json")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/de/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/de/web/api/body/text/index.html b/files/de/web/api/body/text/index.html new file mode 100644 index 0000000000..8ccc5fb358 --- /dev/null +++ b/files/de/web/api/body/text/index.html @@ -0,0 +1,80 @@ +--- +title: Body.text() +slug: Web/API/Body/text +translation_of: Web/API/Body/text +--- +<div>{{APIRef("Fetch")}}</div> + +<p>Die Methode <strong><code>text()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in ein {{domxref("USVString")}} Objekt (Text) aufgelöst wird. Die Antwort wird <em>immer</em> mit UTF-8 dekodiert.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">response.text().then(function (text) { + // do something with the text response +});</pre> + +<h3 id="Parameter">Parameter</h3> + +<p>Keine.</p> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein Promise, welches in einen {{domxref("USVString")}} aufgelöst wird.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-text">Beispiel für den Abruf von Text</a> (<a href="https://mdn.github.io/fetch-examples/fetch-text/">live ausführen</a>) haben wir ein {{htmlelement("article")}} Element und drei Links (im Array <code>myLinks</code> gespeichert). Zuerst durchlaufen wir all diese, damit alle einen <code>onclick</code> Event Handler bekommen, der die Funktion <code>getData()</code> ausführt — der Bezeichner <code>data-page</code> des Links wird dabei als Argument übergeben — wenn einer der Links geklickt wird.</p> + +<p>Wenn <code>getData()</code> ausgeführt wird erstellen wie eine Anfrage mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann eine <code>.txt</code> Datei ab. Wenn der Abruf erfolgreich ist lesen wir das {{jsxref("USVString")}} (Text) Objekt aus der Antwort mit <code>text()</code> und setzen dann {{domxref("Element.innerHTML","innerHTML")}} des {{htmlelement("article")}} Elements auf den Wert des Text-Objekts.</p> + +<pre class="brush: js">var myArticle = document.querySelector('article'); +var myLinks = document.querySelectorAll('ul a'); + +for(i = 0; i <= myLinks.length-1; i++) { + myLinks[i].onclick = function(e) { + e.preventDefault(); + var linkData = e.target.getAttribute('data-page'); + getData(linkData); + } +}; + +function getData(pageId) { + console.log(pageId); + var myRequest = new Request(pageId + '.txt'); + fetch(myRequest).then(function(response) { + return response.text().then(function(text) { + myArticle.innerHTML = text; + }); + }); +}</pre> + +<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-text','text()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Body.text")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/de/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/de/web/api/cache/add/index.html b/files/de/web/api/cache/add/index.html new file mode 100644 index 0000000000..778820ca66 --- /dev/null +++ b/files/de/web/api/cache/add/index.html @@ -0,0 +1,106 @@ +--- +title: Cache.add() +slug: Web/API/Cache/add +translation_of: Web/API/Cache/add +--- +<p>{{APIRef("Service Workers API")}}</p> + +<p><span class="seoSummary">Die <strong><code>add()</code></strong> Methode des {{domxref("Cache")}} Interface nimmt eine URL, ruft sie ab und fügt das resultierende Objekt zum gegebenen Cache. </span>Die <code>add()</code> Methode gleicht funktional dem folgenden:</p> + +<pre class="brush: js">fetch(url).then(function(response) { + if (!response.ok) { + throw new TypeError('bad response status'); + } + return cache.put(url, response); +})</pre> + +<p>Für komplexere Operationen müssen Sie {{domxref("Cache.put","Cache.put()")}} direkt verwenden.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: <code>add()</code> wird alle zuvor im Cache gespeicherten Schlüssel-Wert-Paare die der Request gleichen überschreiben.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="sytaxbox"><em>cache</em>.add(<em>request</em>).then(function() { + // request wurde dem Cache hinzugefügt +}); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt>request</dt> + <dd>Die Request, die dem Cache hinzugefügt werden soll. Dies kann ein {{domxref("Request")}} Objekt oder eine URL sein.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Eine {{jsxref("Promise")}}, die auf void auflöst.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><strong>Exception</strong></th> + <th scope="col"><strong>Tritt auf wenn</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>TypeError</code></td> + <td> + <p>Das URL-Schema nicht <code>http</code> oder <code>https</code> ist.</p> + + <p>Der Antwortstatus ist nicht im 200 Bereich (d.h. keine erfolgreiche Antwort) Dies tritt auf, wenn die Request nicht erfolgreich zurückgegeben wird aber auch wenn die Request eine <em>cross-origin no-cors</em> Request ist (In diesem Fall ist der Status immer 0.)</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Dieser Codeblock wartet darauf, dass ein {{domxref("InstallEvent")}} ausgelöst wird, ruft dann {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} auf, um den Installationsprozess der Applikation einzuleiten. Dies beinhaltet den Aufruf von {{domxref("CacheStorage.open")}} um einen neuen Cache zu erstellen, um dann mittels {{domxref("Cache.add")}} etwas zu diesem hinzuzufügen.</p> + +<pre class="brush: js">this.addEventListener('install', function(event) { + event.waitUntil( + caches.open('v1').then(function(cache) { + return cache.add('/sw-test/index.html'); + }) + ); +}); +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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('Service Workers', '#dom-cache-add', 'Cache: add')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Erstdefinition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("api.Cache.add")}}</p> +</div> + +<h2 id="Weiterlesen">Weiterlesen</h2> + +<ul> + <li><a href="https://developer.mozilla.org/de/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service-Worker benutzen</a></li> + <li>{{domxref("Cache")}}</li> + <li>{{domxref("WorkerGlobalScope.caches")}}</li> +</ul> diff --git a/files/de/web/api/cache/addall/index.html b/files/de/web/api/cache/addall/index.html new file mode 100644 index 0000000000..78467ff40f --- /dev/null +++ b/files/de/web/api/cache/addall/index.html @@ -0,0 +1,212 @@ +--- +title: Cache.addAll() +slug: Web/API/Cache/addAll +tags: + - Cache + - Experimentell + - Methoden + - Referenz + - Service Worker +translation_of: Web/API/Cache/addAll +--- +<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Die <strong>addAll() </strong>Methode der {{domxref("Cache")}} Schnittstelle nimmt ein Array von URLS, ruft diese ab und fügt die daraus resultierenden Antwortobjekte zum jeweiligen Cache hinzu. Die Antwortobjekte, welche während des Abrufens erzeugt werden, werden zu Schlüsselwerten für die gespeicherten Antwortoperationen. </p> + +<div class="note"> +<p><strong>Hinweis</strong>: <code>addAll()</code> überschreibt jegliche Schlüsselwertpaare im Cache, die der Anfrage entsprechen wird aber scheitern, wenn eine resultierende put() Operation einen früheren Cache-Eintrag, der durch die gleiche addAll() Methode erzeugt wurde, überschreiben würde.</p> +</div> + +<div class="note"> +<p><strong>Hinweis</strong>: Ursprüngliche Cache Implementationen (sowohl in Blink als auch in Gecko) lösen {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, und {{domxref("Cache.put")}} Promises auf, wenn die jeweilige Antwort vollständig in den Speicher geschrieben wurde. Neuere Spezifikationsversionen haben aktualisierte Informationen, welche aussagen, dass der Browser den Promise bereits auflösen kann, wenn der Eintrag in die Datenbank erfolgt, auch wenn die Antwort zu diesem Zeitpunkt noch nicht vollständig geschrieben wurde (sprich der Datenstrom in den Speicher ist noch nicht beendet).</p> +</div> + +<div class="note"> +<p><strong>Hinweis: </strong> Zum Stand von Chrome 46 wird die Cache API nur Anfragen von sicheren Quellen speichern, also solche die via HTTPS angeboten werden.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">cache.addAll(requests[]).then(function() { + //Anfragen wurden zum Cache hinzugefügt +}); +</pre> + +<h3 id="Argumente">Argumente</h3> + +<dl> + <dt>requests</dt> + <dd>Ein Array von {{domxref("Request")}} Objekten, die Sie zum Cache hinzufügen möchten.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein {{jsxref("Promise")}} der mit void auflöst.</p> + +<h3 id="Ausnahmen">Ausnahmen</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><strong>Ausnahme</strong></th> + <th scope="col"><strong>Passiert bei</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>TypeError</code></td> + <td> + <p>Das URL Schama ist nicht http oder https.</p> + + <p>Der Antwortstatus ist nicht im 200er Bereich ( nicht erfolgreiche Antwort ). Dies entsteht, wenn die Anfrage nicht erfolreich zurückgibt, aber auch, wenn die Anfrage eine cross-origin no-cors Anfrage ist (in diesem Fall wird immer 0 als Berichtsstatus gegeben).</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Beispiele"><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Beispiele</strong></h2> + +<p>Dieser Programmblock wartet auf ein abgesetztes {{domxref("InstallEvent")}} , woraufhin ein {{domxref("ExtendableEvent.waitUntil","waitUntil")}} läuft, das den Installationsprozess für die Applikation handhabt. Das beinhaltet das Aufrufen von {{domxref("CacheStorage.open")}} um einen neuen Cache zu erstellen. Anschließend wird addAll() benutzt um diesem eine Reihe von Ressourcen (in diesem Fall html, css und Bild-Ressourcen) hinzuzufügen.</p> + +<pre class="brush: js">this.addEventListener('install', function(event) { + event.waitUntil( + caches.open('v1').then(function(cache) { + return cache.addAll([ + '/sw-test/', + '/sw-test/index.html', + '/sw-test/style.css', + '/sw-test/app.js', + '/sw-test/image-list.js', + '/sw-test/star-wars-logo.jpg', + '/sw-test/gallery/', + '/sw-test/gallery/bountyHunters.jpg', + '/sw-test/gallery/myLittleVader.jpg', + '/sw-test/gallery/snowTroopers.jpg' + ]); + }) + ); +}); +</pre> + +<h3 id="Spezifikationen">Spezifikationen</h3> + +<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('Service Workers', '#cache', 'Cache')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Erste Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserunterstützung">Browserunterstützung</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(46.0)}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>24</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Require HTTPS</td> + <td>{{CompatChrome(46.0)}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>TypeError</code> if request is not successful</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(47.0)}}<sup>[1]</sup></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>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</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>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}}</td> + </tr> + <tr> + <td>Require HTTPS</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}}</td> + </tr> + <tr> + <td><code>TypeError</code> if request is not successful</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Service workers (und <a href="/en-US/docs/Web/API/Push_API">Push</a>) wurden in <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.) abgeschaltet.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> + <li>{{domxref("Cache")}}</li> + <li>{{domxref("WorkerGlobalScope.caches")}}</li> +</ul> diff --git a/files/de/web/api/cache/index.html b/files/de/web/api/cache/index.html new file mode 100644 index 0000000000..3043baa825 --- /dev/null +++ b/files/de/web/api/cache/index.html @@ -0,0 +1,288 @@ +--- +title: Cache +slug: Web/API/Cache +tags: + - API + - Cache + - Draft + - Experimental + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - Storage + - TopicStub +translation_of: Web/API/Cache +--- +<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> + +<p>The <strong><code>Cache</code></strong> interface provides a storage mechanism for <code><a href="http://fetch.spec.whatwg.org/#request">Request</a></code> / <code><a href="http://fetch.spec.whatwg.org/#response">Response</a></code> object pairs that are cached, for example as part of the {{domxref("ServiceWorker")}} life cycle. Note that the <code>Cache</code> interface is exposed to windowed scopes as well as workers. You don't have to use it in conjunction with service workers, even though it is defined in the service worker spec.</p> + +<p>An origin can have multiple, named <code>Cache</code> objects. You are responsible for implementing how your script (e.g. in a {{domxref("ServiceWorker")}}) handles <code>Cache</code> updates. Items in a <code>Cache</code> do not get updated unless explicitly requested; they don’t expire unless deleted. Use {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} to open a specific named <code>Cache</code> object and then call any of the <code>Cache</code> methods to maintain the <code>Cache</code>.</p> + +<p>You are also responsible for periodically purging cache entries. Each browser has a hard limit on the amount of cache storage that a given origin can use. The browser does its best to manage disk space, but it may delete the Cache storage for an origin. The browser will generally delete all of the data for an origin or none of the data for an origin. Make sure to version caches by name and use the caches only from the version of the script that they can safely operate on. See <a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers#Deleting_old_caches">Deleting old caches</a> for more information.</p> + +<div class="note"> +<p><strong>Note</strong>: {{domxref("Cache.put")}}, {{domxref("Cache.add")}}, and {{domxref("Cache.addAll")}} only allow <code>GET</code> requests to be stored in the cache.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to storage. More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> As of Chrome 46, the Cache API will only store requests from secure origins, meaning those served over HTTPS.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: The key matching algorithm depends on the <a href="https://www.fastly.com/blog/best-practices-for-using-the-vary-header">VARY header</a> in the value. So matching a new key requires looking at both key and value for entries in the Cache.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> The caching API doesn't honor HTTP caching headers.</p> +</div> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Cache.match", "Cache.match(request, options)")}}</dt> + <dd>Returns a {{jsxref("Promise")}} that resolves to the response associated with the first matching request in the {{domxref("Cache")}} object.</dd> + <dt>{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}}</dt> + <dd>Returns a {{jsxref("Promise")}} that resolves to an array of all matching requests in the {{domxref("Cache")}} object.</dd> + <dt>{{domxref("Cache.add", "Cache.add(request)")}}</dt> + <dd>Takes a URL, retrieves it and adds the resulting response object to the given cache. This is fuctionally equivalent to calling fetch(), then using Cache.put() to add the results to the cache.</dd> + <dt>{{domxref("Cache.addAll", "Cache.addAll(requests)")}}</dt> + <dd>Takes an array of URLs, retrieves them, and adds the resulting response objects to the given cache.</dd> + <dt>{{domxref("Cache.put", "Cache.put(request, response)")}}</dt> + <dd>Takes both a request and its response and adds it to the given cache.</dd> + <dt>{{domxref("Cache.delete", "Cache.delete(request, options)")}}</dt> + <dd>Finds the {{domxref("Cache")}} entry whose key is the request, and if found, deletes the {{domxref("Cache")}} entry and returns a {{jsxref("Promise")}} that resolves to <code>true</code>. If no {{domxref("Cache")}} entry is found, it returns <code>false</code>.</dd> + <dt>{{domxref("Cache.keys", "Cache.keys(request, options)")}}</dt> + <dd>Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Cache")}} keys.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">service worker selective caching sample</a>. (see <a href="https://googlechrome.github.io/samples/service-worker/selective-caching/">selective caching live</a>) The code uses {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} to open any {{domxref("Cache")}} objects with a Content-Type header that starts with <code>font/</code>.</p> + +<p>The code then uses {{domxref("Cache.match", "Cache.match(request, options)")}} to see if there's already a matching font in the cache, and if so, returns it. If there isn't a matching font, the code fetches the font from the network and uses {{domxref("Cache.put","Cache.put(request, response)")}} to cache the fetched resource.</p> + +<p>The code handles exceptions thrown from the {{domxref("Globalfetch.fetch","fetch()")}} operation. Note that a HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set.</p> + +<p>The code snippet also shows a best practice for versioning caches used by the service worker. Though there's only one cache in this example, the same approach can be used for multiple caches. It maps a shorthand identifier for a cache to a specific, versioned cache name. The code also deletes all caches that aren't named in <code>CURRENT_CACHES</code>.</p> + +<div class="note"><strong>Note:</strong> In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">service-worker.js</a> script is performing.</div> + +<pre class="brush: js">var CACHE_VERSION = 1; + +// Shorthand identifier mapped to specific versioned cache. +var CURRENT_CACHES = { + font: 'font-cache-v' + CACHE_VERSION +}; + +self.addEventListener('activate', function(event) { + var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) { + return CURRENT_CACHES[key]; + }); + + // Active worker won't be treated as activated until promise resolves successfully. + event.waitUntil( + caches.keys().then(function(cacheNames) { + return Promise.all( + cacheNames.map(function(cacheName) { + if (expectedCacheNames.indexOf(cacheName) == -1) { + console.log('Deleting out of date cache:', cacheName); + + return caches.delete(cacheName); + } + }) + ); + }) + ); +}); + +self.addEventListener('fetch', function(event) { + console.log('Handling fetch event for', event.request.url); + + event.respondWith( + + // Opens Cache objects that start with 'font'. + caches.open(CURRENT_CACHES['font']).then(function(cache) { + return cache.match(event.request).then(function(response) { + if (response) { + console.log(' Found response in cache:', response); + + return response; + } + }).catch(function(error) { + + // Handles exceptions that arise from match() or fetch(). + console.error(' Error in fetch handler:', error); + + throw error; + }); + }) + ); +});</pre> + +<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('Service Workers', '#cache', 'Cache')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{CompatGeckoDesktop(39)}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>24</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>add()</td> + <td>{{CompatChrome(44.0)}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>addAll()</td> + <td>{{CompatChrome(46.0)}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>matchAll()</td> + <td>{{CompatChrome(47.0)}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Require HTTPS for <code>add()</code>, <code>addAll()</code>, and <code>put()</code></td> + <td>{{CompatChrome(46.0)}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></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>Firefox OS</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>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(39)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(40.0)}}</td> + </tr> + <tr> + <td>add()</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(44.0)}}</td> + </tr> + <tr> + <td>addAll()</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}}</td> + </tr> + <tr> + <td>matchAll()</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}}</td> + </tr> + <tr> + <td>Require HTTPS for <code>add()</code>, <code>addAll()</code>, and <code>put()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li> + <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> + <li>{{jsxref("Promise")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> +</ul> diff --git a/files/de/web/api/canvasrenderingcontext2d/canvas/index.html b/files/de/web/api/canvasrenderingcontext2d/canvas/index.html new file mode 100644 index 0000000000..47b01c8f72 --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/canvas/index.html @@ -0,0 +1,56 @@ +--- +title: CanvasRenderingContext2D.canvas +slug: Web/API/CanvasRenderingContext2D/canvas +translation_of: Web/API/CanvasRenderingContext2D/canvas +--- +<div>{{APIRef}}</div> + +<p>Die <code><strong>CanvasRenderingContext2D.canvas</strong></code> Eigenschaft, Teil der <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a>, ist eine Nurlese-Referenz auf das {{domxref("HTMLCanvasElement")}} Objekt, das mit einem gegebenen Kontext assoziiert ist. Sie kann {{jsxref("null")}} sein, wenn kein assoziiertes {{HTMLElement("canvas")}} Element existiert.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><var><em>ctx</em></var>.canvas;</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Wenn dieses {{HTMLElement("canvas")}} Element gegeben ist:</p> + +<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +</pre> + +<p>... kannst du eine Referenz auf das Canvas-Element innerhalb von <code>CanvasRenderingContext2D</code> herstellen, indem du die <code>canvas</code> Eigenschaft verwendest.</p> + +<pre class="brush: js notranslate">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +ctx.canvas // HTMLCanvasElement +</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">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird mit strukturierten Daten generiert. Wenn du an diesen Daten mitwirken möchtest, schau dir <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> an und sende uns einen Pull Request.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.canvas")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("CanvasRenderingContext2D")}} interface</li> + <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></li> +</ul> diff --git a/files/de/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/de/web/api/canvasrenderingcontext2d/fillrect/index.html new file mode 100644 index 0000000000..178a861f4e --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/fillrect/index.html @@ -0,0 +1,177 @@ +--- +title: CanvasRenderingContext2D.fillRect() +slug: Web/API/CanvasRenderingContext2D/fillRect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Methode(2) + - Reference + - Referenz +translation_of: Web/API/CanvasRenderingContext2D/fillRect +--- +<div>{{APIRef}}</div> + +<p>Die Methode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillRect()</code></strong> der Canvas 2D API zeichnet ein ausgefülltes Rechteck an der Position <em>(<code>x</code>, <code>y</code>)</em>. Die Größe wird über die Parameter <code><em>width</em></code> und <code><em>height</em></code> bestimmt. Die Füllfarbe wird über das Attribut <code>fillStyle</code> des Context-Objekts festgelegt.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.fillRect(x, y, width, height);</var> +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Die Koordinate auf der x-Achse als horizontaler Startpunkt des Rechtecks.</dd> + <dt><code>y</code></dt> + <dd>Die Koordinate auf der y-Achse als vertikaler Startpunkt des Rechtecks.</dd> + <dt><code>width</code></dt> + <dd>Die Breite des Rechtecks.</dd> + <dt><code>height</code></dt> + <dd>Die Höhe des Rechtecks.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Benutzung_der_Methode_fillRect">Benutzung der Methode <code>fillRect</code></h3> + +<p>Dies ist ein einfaches Code-Beispiel, welches die <code>fillRect</code> Methode nutzt.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.fillStyle = "green"; +ctx.fillRect(10, 10, 100, 100); + +// fill the whole canvas +// ctx.fillRect(0, 0, canvas.width, canvas.height); +</pre> + +<p>Ändern Sie den unten gezeigten Code und sehen Sie Ihre Änderungen live im Canvas-Element:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.fillStyle = "green"; +ctx.fillRect(10, 10, 100, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</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('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}</td> + <td>{{Spec2('HTML WHATWG')}}</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>Das zugehörige Interface, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillStyle")}}</li> + <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li> +</ul> diff --git a/files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html new file mode 100644 index 0000000000..c8b6bdf2be --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html @@ -0,0 +1,142 @@ +--- +title: CanvasRenderingContext2D.getImageData() +slug: Web/API/CanvasRenderingContext2D/getImageData +translation_of: Web/API/CanvasRenderingContext2D/getImageData +--- +<div>{{APIRef}}</div> + +<p>Die <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.getImageData()</code></strong> Methode der Canvas 2D API gibt ein Objekt des Types {{domxref("ImageData")}} zurück. Dieses Objekt repräsentiert die jeweiligen Pixel-Daten im Bereich des Rechtecks mit den Startkoordinaten <em>(</em><em>sx</em><em>,</em><em>sy</em><em>) </em> und den Dimensionen <em>sw </em> in der Breite und<em> sy </em> in der Höhe. </p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">ImageData <var><em>ctx</em>.getImageData(sx, sy, sw, sh);</var> +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>sx</code></dt> + <dd>Die x Koordinate der oberen linken Ecke des Rechtecks, aus welchem die Pixel-Daten gelesen werden.</dd> + <dt><code>sy</code></dt> + <dd>Die y Koordinate der oberen linken Ecke des Rechtecks, aus welchem die Pixel-Daten gelesen werden.</dd> + <dt><code>sw</code></dt> + <dd>Die Breite des Rechtecks aus dem die Pixel-Daten gelesen werden.</dd> + <dt><code>sh</code></dt> + <dd>Die Höhe des Rechtecks aus dem die Pixel-Daten gelesen werden. </dd> +</dl> + +<h3 id="Rückgabewerte">Rückgabewerte</h3> + +<p>Ein Objekt vom Typ {{domxref("ImageData")}} das die Pixeldaten im angegeben bereich des Canvas-Elements beinhaltet.</p> + +<h3 id="Fehlertypen">Fehlertypen</h3> + +<dl> + <dt><code>IndexSizeError</code></dt> + <dd>Tritt ein, wenn entweder das Höhen oder das Breiten Argument null ist.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Benutzung_der_getImageData_Funktion">Benutzung der <code>getImageData</code> Funktion</h3> + +<p>Das ist ein einfaches Code-Beispiel zur Benutzung der <code>getImageData</code> Funktion. Für mehr Informationen siehe <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation with canvas</a> und die Referenz zum {{domxref("ImageData")}} Objekt.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +ctx.rect(10, 10, 100, 100); +ctx.fill(); + +console.log(ctx.getImageData(50, 50, 100, 100)); +// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] } +</pre> + +<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('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilitä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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</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>Edge</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}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Ab {{GeckoRelease("5.0")}} unterstützt <code>getImageData()</code> die Angabe von Rechtecken, die die Ränder des <em>Canvas-</em>Elements überschreiten. Die Pixel, die außerhalb des Elementes liegen, werden als transparentes Schwarz zurückgegeben. Auch wenn die größe des Rechtecks kleiner als eins ist wird jetzt mindestens ein Pixel als Pixel-Daten zurückgegeben.</p> + +<h2 id="Sehen_Sie_auch">Sehen Sie auch</h2> + +<ul> + <li>Das Interface zur Definition, {{domxref("CanvasRenderingContext2D")}}.</li> + <li>{{domxref("ImageData")}}</li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation with canvas</a></li> +</ul> diff --git a/files/de/web/api/canvasrenderingcontext2d/index.html b/files/de/web/api/canvasrenderingcontext2d/index.html new file mode 100644 index 0000000000..aa9c1ea07a --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/index.html @@ -0,0 +1,432 @@ +--- +title: CanvasRenderingContext2D +slug: Web/API/CanvasRenderingContext2D +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Graphics + - Image + - Shape +translation_of: Web/API/CanvasRenderingContext2D +--- +<div>{{APIRef}}</div> + +<p>Das <code><strong>CanvasRenderingContext2D</strong></code>-Interface stellt den 2D-Renderkontext für die Zeichenoberfläche eines {{ HTMLElement("canvas") }} zur Verfügung. Es wird zum Zeichnen von Formen, Text, Bildern und anderen Objekten benutzt.</p> + +<p>Eigenschaften und Methoden finden Sie in der Sidebar und weiter unten. Das <a href="/en-US/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">Canvas-Tutorial</a> bietet Ihnen außerdem weitere Informationen, Beispiele und Ressourcen.</p> + +<h2 id="Ein_einfaches_Beispiel">Ein einfaches Beispiel</h2> + +<p>Um eine <code>CanvasRenderingContext2D</code> Instanz zu erhalten, muss man erst ein HTML <code><canvas></code> Element haben, mit dem man arbeiten kann:</p> + +<pre class="brush: html"><canvas id="my-house" width="300" height="300"></canvas></pre> + +<p>Um ein Objekt dieses Interfaces zu erhalten, benutzen Sie die Methode {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} eines <code><canvas></code>, mit "2d" als Argument:</p> + +<pre class="brush: js">const canvas = document.getElementById('my-house'); +const ctx = canvas.getContext('2d'); +</pre> + +<p>Sobald Sie den Kontext der Zeichenoberfläche haben, können Sie darin zeichnen, was immer Sie möchten. Dieser Code zeichnet ein Haus:</p> + +<pre class="brush: js">// Die Lininestärke festlegen +ctx.lineWidth = 10; + +// Wand +ctx.strokeRect(75, 140, 150, 110); + +// Tür +ctx.fillRect(130, 190, 40, 60); + +// Dach +ctx.moveTo(50, 140); +ctx.lineTo(150, 60); +ctx.lineTo(250, 140); +ctx.closePath(); +ctx.stroke(); +</pre> + +<p>Die enstandene Zeichnung sieht so aus:</p> + +<p>{{EmbedLiveSample("Basic_example", 700, 330)}}</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="Rechtecke_zeichnen">Rechtecke zeichnen</h3> + +<p>Es gibt drei Methoden, die sofort Rechtecke innerhalb des Canvas zu zeichnen.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt> + <dd>Setzt alle Pixel im Rechteck mit Startpunkt <em>(x, y)</em> und Größe <em>(width, height)</em> auf schwarz und transparent wodurch jeglicher vorheriger Inhalt gelöscht wird.</dd> + <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt> + <dd>Zeichnet ein gefülltes Rechteck mit Startpunkt <em>(x, y)</em> und Größe <em>(width, height)</em>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt> + <dd>Zeichnet ein Rechteck mit Startpunkt <em>(x, y)</em> und Größe <em>(width, height),</em> verwendet dabei den aktuellem <em>stroke style</em>.</dd> +</dl> + +<h3 id="Text_darstellen">Text darstellen</h3> + +<p>Die folgenden Methoden zeichnen Text auf dem Canvas. Siehe auch das {{domxref("TextMetrics")}} - Objekt für die Texteigenschaften.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt> + <dd>Zeichnet einen gegebenen Text (gefüllt) an die gegebene Position <em>(x, y)</em>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt> + <dd>Zeichnet einen gegebenen Text (Umrisse) an die gegebene Position <em>(x, y)</em>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt> + <dd>Gibt ein {{domxref("TextMetrics")}}-Objekt zurück.</dd> +</dl> + +<h3 id="Linienstile">Linienstile</h3> + +<p>Die folgenden Methoden und Eigenschaften beeinflussen die Art und Weise, wie Linien gezeichnet werden.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt> + <dd>Linienbreite. Standard: <code>1.0</code></dd> + <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt> + <dd>Typ des Linienabschlusses. Mögliche Werte: <code>butt</code> (default), <code>round</code>, <code>square</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt> + <dd>Definiert den Typ der Ecken, wo sich zwei Linien treffen. Mögliche Werte: <code>round</code>, <code>bevel</code>, <code>miter</code> (default).</dd> + <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt> + <dd>Verbindungsecken-Größe. Standard: <code>10</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt> + <dd>Gibt das aktuelle Linienstrich-Array zurück, welches eine gerade Anzahl positiver Zahlen enthält.</dd> + <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt> + <dd>Setzt das aktuelle Linienstrich-Array auf einen neuen Wert.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt> + <dd>Spezifiziert, wo auf einer Linie ein Strich-Array beginnt.</dd> +</dl> + +<h3 id="Textstile">Textstile</h3> + +<p>Die folgenden Eigenschaften bestimmen, wie Text dargestellt wird.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt> + <dd>Font-Einstellung. Standard: <code>10px sans-serif</code></dd> + <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt> + <dd>Ausrichtungs-Einstellung. Mögliche Werte: <code>start</code> (default), <code>end</code>, <code>left</code>, <code>right</code> oder <code>center</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt> + <dd>Ausrichtungseinstellung zur Basislinie. Mögliche Werte: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (default), <code>ideographic</code>, <code>bottom</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt> + <dd>Direktionalität. Mögliche Werte: <code>ltr, rtl, </code><code>inherit</code> (default).</dd> +</dl> + +<h3 id="Füll-_und_Linienfarbe">Füll- und Linienfarbe</h3> + +<p>Die Füllfarbe (<code>fillStyle</code>) wird innerhalb von Formen angewendet, die Linienfarbe (<code>strokeStyle</code>) auf die Randlinie von Formen. Beides kann statt einer Farbe auch ein Farbverlauf oder ein Muster sein.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt> + <dd>Farbe oder Stil für innerhalb von Formen. Standardwert <code>#000</code> (schwarz).</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt> + <dd>Farbe oder Stil für die Randlinie von Formen. Standardwert <code>#000</code> (schwarz).</dd> +</dl> + +<h3 id="Farbverläufe_und_Muster">Farbverläufe und Muster</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt> + <dd>Erzeugt einen linearen Farbverlauf entlang der Linie gegeben durch die Koordinaten, die als Parameter übergeben werden.</dd> + <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt> + <dd>Erzeugt einen radialen (kreisförmigen) Farbverlauf entlang der Linie gegeben durch die Koordinaten, die als Parameter übergeben werden.</dd> + <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt> + <dd>Erzeugt ein Muster aus dem angegebenen Bild (ein {{domxref("CanvasImageSource")}}). Es wiederholt das Bild in den Richtungen, die mit dem <code>repetition</code> Parameter definiert werden. Diese Methode gibt ein {{domxref("CanvasPattern")}} zurück.</dd> +</dl> + +<h3 id="Schatten">Schatten</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt> + <dd>Definiert den <span class="short_text" id="result_box" lang="de"><span>Unschärfe</span><span>-Effekt</span></span>. Standardwert <code>0</code></dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt> + <dd>Farbe des Schattens. Standardwert: komplett transparentes Schwarz.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt> + <dd>Horizontale Entfernung des Schattens. Standardwert 0.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt> + <dd>Vertikale Entfernung des Schattens. Standardwert 0.</dd> +</dl> + +<h3 id="Pfade">Pfade</h3> + +<p>Die folgende Methoden können verwendet werden, um Pfade von Objekten zu manipulieren.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt> + <dd>Startet einen neuen Pfad, indem die Liste mit allen Unterpfaden geleert wird. Rufe diese Methode auf, wenn du einen neuen Pfad starten willst.</dd> + <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt> + <dd>Sorgt dafür, dass die Stiftspitze zum Start des aktuellen Unterpfades zurückwandert. Es wird versucht eine greade Linie von der aktuellen Position zum Beginn der Linie zu zeichen. Wenn die Form schon geschlossen wurde oder nur einen Punkt enthält, macht diese Funktion nichts.</dd> + <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt> + <dd>Bewegt den Anfangspunkt für einen neuen Unterpfad zu den übergebenen <strong>(x, y)</strong> Koordinaten.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt> + <dd>Verbindet den letzten Punkt im Unterpfad mit den übergebenen <strong>(x, y)</strong> Koordinaten in einer geraden Linie.</dd> + <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt> + <dd>Fügt eine kubische Bézierkurve zum Pfad hinzu. Diese benötigt drei Punkte. Die ersten zwei sind Kontrollpunkte für die Krümmung, der dritte ist das Ende der Kurve. Die Kurve beginnt am letzten Punkt im aktuellen Pfad, dieser kann davor mit <code>moveTo()</code> geändert werden.</dd> + <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt> + <dd>Fügt eine quadratische Bézierkurve zum aktuellen Pfad hinzu.</dd> + <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt> + <dd>Fügt einen Kreisbogen zum Pfad hinzu, mit Kreismittelpunkt <em>(x, y)</em> und Radius <em>r</em>. Der Startwinkel ist <em>startAngle</em>, der Endwinkel <em>endAngle</em>, Richtung gegen den Uhrzeigersinn.</dd> + <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt> + <dd>Fügt einen Kreisbogen zum Pfad mit den gegebenen Kontrollpunkten und Radius hinzu, verbunden mit dem letzten Punkt im Pfad durch eine gerade Linie.</dd> + <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt> + <dd>Fügt eine Ellipse zum Pfad hinzu, mit dem Zentrum <em>(x, y)</em> und den Radien <em>radiusX</em> und <em>radiusY</em>, beginnend bei <em>startAngle</em> und endend bei <em>endAngle</em>, Richtung gegen den Uhrzeigersinn.</dd> + <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt> + <dd>Erzeugt einen Pfad mit einem Rechteck an der Position <em>(x, y)</em> und den Dimensionen <em>width</em> und <em>height</em>.</dd> +</dl> + +<h3 id="Pfade_zeichnen">Pfade zeichnen</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt> + <dd>Füllt den Unterpfad mit der aktuellen Füllfarbe (bzw. Farbverlauf, Muster).</dd> + <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt> + <dd>Zeichnet die Linien des Unterpfades mit der aktuellen Linienfarbe (bzw. Farbverlauf, Muster).</dd> + <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt> + <dd>Wenn ein gegebenes Element fokussiert wird, zeichnet diese Methode einen Fokusring um den aktuellen Pfad.</dd> + <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt> + <dd>Scrollt den aktuellen Pfad oder einen bestimmten Pfad in Sicht.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt> + <dd>Erzeugt einen zugeschnittenen Pfad aus den aktuellen Unterpfaden. Alles, was nach <code>clip()</code> gezeichnet wird, erscheint nur im zugeschnittenen Pfad. Für ein Beispiel, siehe <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Clipping paths</a> im Canvas Tutorial.</dd> + <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt> + <dd>Gibt zurück, ob der angegebene Punkt im aktuellen Pfad enthalten ist oder nicht.</dd> + <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt> + <dd>Gibt zurück, ob der angegebene Punkt innerhalb des bemalten Bereichs im Pfad ist oder nicht.</dd> +</dl> + +<h3 id="Transformationen">Transformationen</h3> + +<p>Objekte im <code>CanvasRenderingContext2D</code>-Renderkontext haben eine aktuelle Transformationsmatrix und Methoden, um diese zu manipulieren. Die Transformationsmatrix wird angewendet, wenn der aktuelle Pfad erzeugt wird und wenn Text, Formen oder {{domxref("Path2D")}} Objekte gemalt werden. Folgende Methoden sind hier für historische und Kompatibilitätszwecke aufgelistet, da heutzutage meistens {{domxref("SVGMatrix")}} Objekte verwendet werden und in Zukunft diese Methoden ersetzen werden.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}} {{experimental_inline}}</dt> + <dd>Die momentane Transformationsmatrix ({{domxref("SVGMatrix")}} object).</dd> + <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt> + <dd>Fügt eine Drehung zur Transformationsmatrix hinzu. Der <em>angle</em>-Parameter stellt einen Drehwinkel im Uhrzeigersinn dar und wird in radians ausgedrückt.</dd> + <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt> + <dd>Fügt eine skalierende Transformation zu den Längeneinheiten des canvas hinzu (horizontal um Faktor <em>x</em>, vertikal um Faktor <em>y</em>). Was nach <code>scale()</code> auf das canvas gezeichnet wird, wird also dementsprechend gestaucht oder gestreckt.</dd> + <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt> + <dd>Fügt eine übersetzende Transformation hinzu, die die Position des canvas relativ zu seinem Koordinatensystem verschiebt (horizontal um <em>x</em>, vertikal um <em>y</em>). Was nach <code>translate()</code> gezeichnet wird, ist also um <strong>(x, y)</strong> verschoben.</dd> + <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt> + <dd>Multipliziert die aktuelle Transformationsmatrix mit der Matrix, die durch die Parameter dieser Funktion beschrieben wird.</dd> + <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt> + <dd>Setzt die aktuellen Transformationen zurück und ruft dann die <code>transform()</code> Methode mit den selben Parametern auf.</dd> + <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt> + <dd>Setzt die aktuellen Transformationen zurück.</dd> +</dl> + +<h3 id="Compositing">Compositing</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt> + <dd>Alpha-Wert bzw. Deckkraft, die auf alle Formen und Bilder angewendet wird, bevor diese auf dem canvas gezeichnet werden. Standardwert <code>1.0</code> (undurchsichtig).</dd> + <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt> + <dd>Zusammen mit <code>globalAlpha</code> legt dieser Wert fest, wie Formen und Bilder abhängig vom Hintergrund auf das canvas gezeichnet werden sollen.</dd> +</dl> + +<h3 id="Bilder_zeichnen">Bilder zeichnen</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt> + <dd>Zeichnet das übergebene Bild. Diese Methode ist in diversen Formaten verfügbar, wodurch sie große Flexibilität in der Nutzung bietet.</dd> +</dl> + +<h3 id="Pixelmanipulation">Pixelmanipulation</h3> + +<p>Siehe auch das {{domxref("ImageData")}} Objekt.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt> + <dd>Erzeugt ein neues, leeres {{domxref("ImageData")}} Objekt mit den angegebenen Dimensionen. Alle Pixel in diesem Objekt sind transparent schwarz.</dd> + <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt> + <dd>Gibt ein {{domxref("ImageData")}} Objekt zurück, das die dem canvas zugrunde liegenden Pixeldaten enthält. Die Methode wird auf einen bestimmten Ausschnitt des canvas angewendet, beginnend bei <em>(sx, sy)</em>, mit Breite <em>sw</em> und Höhe <em>sh</em>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt> + <dd>Malt Pixeldaten des {{domxref("ImageData")}} Objekts auf das canvas. Wenn ein dreckiges Rechteck angegeben wird, werden nur die Pixel dieses Rechtecks gemalt.</dd> +</dl> + +<h3 id="Bildglättung">Bildglättung</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt> + <dd>Bildglättungsmodus; wenn deaktiviert, werden Bilder beim Skalieren nicht geglättet.</dd> +</dl> + +<h3 id="Der_Leinwand-Zustand">Der Leinwand-Zustand</h3> + +<p>Der <code>CanvasRenderingContext2D</code>-Renderkontext enthält eine Vielzahl an Zeichnungszuständen (Attribute für Linienstile, Füllstile, Schattenstile, Textstile). Die folgenden Methoden helfen Ihnen mit diesen Zuständen zu arbeiten:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt> + <dd>Saves the current drawing style state using a stack so you can revert any change you make to it using <code>restore()</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt> + <dd>Restores the drawing style state to the last element on the 'state stack' saved by <code>save()</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt> + <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd> +</dl> + +<h3 id="Trefferregionen">Trefferregionen</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt> + <dd>Fügt eine Trefferregion (hit region) zur Leinwand hinzu.</dd> + <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt> + <dd>Entfernt eine Trefferregion mit gegebener <code>id</code> von der Leinwand.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt> + <dd>Entfernt alle Trefferregionen von der Leinwand.</dd> +</dl> + +<h3 id="Filter">Filter</h3> + +<dl> + <dt>{{experimental_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt> + <dd>Applies a CSS or SVG filter to the canvas, e.g., to change its brightness or bluriness.</dd> +</dl> + +<h2 id="Unstandardisierte_APIs">Unstandardisierte APIs</h2> + +<h3 id="Blink_and_WebKit">Blink and WebKit</h3> + +<p>Die meisten dieser APIs sind <a href="https://code.google.com/p/chromium/issues/detail?id=363198">veraltet und wurden kurz nach Chrome 36 entfernt</a>.</p> + +<dl> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt> + <dd>Entfernt alle Schatteneinstellungen wie {{domxref("CanvasRenderingContext2D.shadowColor")}} und {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt> + <dd>Das ist redundant zum equivalenten Überladung von <code>drawImage</code>.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt> + <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.globalAlpha")}} anstelle dieser Methode.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt> + <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} anstelle dieser Methode.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt> + <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.lineWidth")}} anstelle dieser Methode.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt> + <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.lineJoin")}} anstelle dieser Methode.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt> + <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.lineCap")}} anstelle dieser Methode.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt> + <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.miterLimit")}} anstelle dieser Methode.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt> + <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.strokeStyle")}} anstelle dieser Methode.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt> + <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.fillStyle")}} anstelle dieser Methode.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt> + <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.shadowColor")}} und {{domxref("CanvasRenderingContext2D.shadowBlur")}} anstelle dieser Methode.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt> + <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.getLineDash()")}} und {{domxref("CanvasRenderingContext2D.setLineDash()")}} anstelle dieser Methode.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt> + <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.lineDashOffset")}} anstelle dieser Methode.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt> + <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} anstelle dieser Methode.</dd> +</dl> + +<h3 id="Blink_only">Blink only</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.getContextAttributes()</code></dt> + <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns an <code>Canvas2DContextAttributes</code> object that contains the attributes "storage" to indicate which storage is used ("persistent" by default) and the attribute "alpha" (<code>true</code> by default) to indicate that transparency is used in the canvas.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt> + <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns <code>true</code> if the Canvas context has been lost, or <code>false</code> if not.</dd> +</dl> + +<h3 id="WebKit_only">WebKit only</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt> + <dd>The backing store size in relation to the canvas element. See <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt> + <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt> + <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> +</dl> + +<dl> +</dl> + +<h3 id="Gecko_only">Gecko only</h3> + +<dl> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt> + <dd><span id="summary_alias_container"><span id="short_desc_nonedit_display">CSS and SVG filters as Canvas APIs</span></span>. Likely to be standardized in a new version of the specification.</dd> +</dl> + +<h4 id="Prefixed_APIs">Prefixed APIs</h4> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt> + <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }}</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt> + <dd>Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }}</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozFillRule</code></dt> + <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt> + <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd> + <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDash</code></dt> + <dd>An array which specifies the lengths of alternating dashes and gaps {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd> + <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDashOffset</code></dt> + <dd>Specifies where to start a dash array on a line. {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd> + <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt> + <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> +</dl> + +<h4 id="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4> + +<dl> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}</dt> + <dd>Renders a region of a XUL element into the <code>canvas</code>.</dd> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt> + <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt> + <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd> +</dl> + +<h3 id="Internet_Explorer">Internet Explorer</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt> + <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</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('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.CanvasRenderingContext2D")}}</p> +</div> + +<ul> + <li>Starting with Gecko 5.0 {{geckoRelease("5.0")}}, specifying invalid values are now silently ignored for the following methods and properties: <code>translate()</code>, <code>transform()</code>, <code>rotate(), </code><code>scale(),</code> <code>rect()</code>, <code>clearRect()</code>, <code>fillRect()</code>, <code>strokeRect()</code>, <code>lineTo()</code>, <code>moveTo()</code>, <code>quadraticCurveTo()</code>, <code>arc()</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>, <code>shadowBlur</code>.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> +</ul> diff --git a/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html b/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html new file mode 100644 index 0000000000..5eac7321fe --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html @@ -0,0 +1,206 @@ +--- +title: CanvasRenderingContext2D.isPointInPath() +slug: Web/API/CanvasRenderingContext2D/isPointInPath +translation_of: Web/API/CanvasRenderingContext2D/isPointInPath +--- +<div>{{APIRef}}</div> + +<p>Die Methode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.isPointInPath()</code></strong> der Canvas 2D API entscheidet darüber, ob ein Punkt in einem gegeben Pfad enthalten ist.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">boolean <var><em>ctx</em>.isPointInPath(x, y); +boolean <var><em>ctx</em>.isPointInPath(x, y, fillRule); + +boolean <var><em>ctx</em>.isPointInPath(path, x, y); +boolean <var><em>ctx</em>.isPointInPath(path, x, y, fillRule);</var></var></var></var> +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt>x</dt> + <dd>Die X-Koordinate des zu prüfenden Punktes.</dd> + <dt>y</dt> + <dd>Die Y-Koordinate des zu prüfenden Punktes.</dd> + <dt><code>fillRule</code></dt> + <dd>Der Algorithmus, der prüft, ob der Punkt innerhalb oder außerhalb des Pfades liegt.<br> + Mögliche Werte: + <ul> + <li><code><strong>"nonzero</strong></code>": Die <a href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero winding Regel</a>, sie ist standardmäßig eingestellt.</li> + <li><code><strong>"evenodd"</strong></code>: Die <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd winding Regel</a>.</li> + </ul> + </dd> + <dt><code>path</code></dt> + <dd>Ein {{domxref("Path2D")}} Objekt.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<dl> + <dt>{{jsxref("Boolean")}}</dt> + <dd>Ein Boolean, welcher <code>true</code> ist, wenn der gegebene Punkt innerhalb des gegeben Pfades liegt, ansonsten <code>false</code>.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Benutzung_der_Methode_isPointInPath">Benutzung der Methode <code>isPointInPath</code></h3> + +<p>Dies ist ein einfaches Snippet, welches die <code>isPointinPath</code> Methode nutzt, um zu prüfen, ob ein Punkt in gegebenem Pfad enthalten ist.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.rect(10, 10, 100, 100); +ctx.stroke(); +console.log(ctx.isPointInPath(10, 10)); // true +</pre> + +<p>Editieren Sie den folgenden Quelltext. Die Änderungen werden in Echtzeit übernommen und Log-Ausgaben in die <a href="/en-US/docs/Tools/Browser_Console">console</a> ausgegeben:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.rect(10, 10, 100, 100); +ctx.stroke(); +console.log(ctx.isPointInPath(10, 10)); // true</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<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('HTML WHATWG', "scripting.html#dom-context-2d-ispointinpath", "CanvasRenderingContext2D.isPointInPath")}}</td> + <td>{{Spec2('HTML WHATWG')}}</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>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Path parameter</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop(31) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatVersionUnknown() }}</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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Path parameter</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile(31) }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Compatibility_notes">Compatibility notes</h2> + +<ul> + <li>Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), this method incorrectly failed to multiply the specified point's coordinates by the current transformation matrix before comparing it to the path. Now this method works correctly even if the context is rotated, scaled, or otherwise transformed.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/de/web/api/canvasrenderingcontext2d/scale/index.html b/files/de/web/api/canvasrenderingcontext2d/scale/index.html new file mode 100644 index 0000000000..b26824a51e --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/scale/index.html @@ -0,0 +1,223 @@ +--- +title: CanvasRenderingContext2D.scale() +slug: Web/API/CanvasRenderingContext2D/scale +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Referenz +translation_of: Web/API/CanvasRenderingContext2D/scale +--- +<div>{{APIRef}}</div> + +<p>Die Methode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.scale()</code></strong> der Canvas 2D API skaliert das Canvas-Element um den Faktor x horizontal und um den Faktor y vertikal.</p> + +<p>Normalerweise ist eine Einheit auf dem Canvas genau ein Pixel. Wenn wir zum Beispiel einen Skalierungsfaktor von 0,5 Pixeln anwenden, ist eine Einheit 0,5 Pixel und alle Objekte werden mit der halben Größe gezeichnet. Analog dazu vergößert der Skalierungsfaktor 2,0 die Längeneinheit auf zwei Pixel. Die Objekte werden dann doppelt so groß gezeichnet.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.scale(x, y);</var> +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Skalierungsfaktor in horizontaler Richtung.</dd> + <dt><code>y</code></dt> + <dd>Skalierungsfaktor in vertikaler Richtung</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Die_Methode_scale_verwenden">Die Methode <code>scale</code> verwenden</h3> + +<p>Dies ist nur ein kurzes Beispiel, das die Methode <code>scale</code> benutzt.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.scale(10, 3); +ctx.fillRect(10, 10, 10, 10); + +// reset current transformation matrix to the identity matrix +ctx.setTransform(1, 0, 0, 1, 0, 0); +</pre> + +<p>Editieren Sie den folgenden Code und sehen Sie die Änderungen sofort im Canvas:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.scale(10, 3); +ctx.fillRect(10,10,10,10); +ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h3 id="scale_verwenden_um_horizontal_oder_vertikal_zu_spiegeln"><code>scale</code> verwenden, um horizontal oder vertikal zu spiegeln</h3> + +<p>Sie können <code>ctx.scale(-1, 1)</code> benutzen, um den Inhalt horizontal zu spiegeln und <code>ctx.scale(1, -1)</code>, um ihn vertikal zu spiegeln.</p> + +<div style="display: none;"> +<h6 id="Playable_code2">Playable code2</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.scale(-1, 1); +ctx.font = "48px serif"; +ctx.fillText("Hello world!", -320, 120); +ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code2', 700, 360) }}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompabilität">Browserkompabilitä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>Grundlegende 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> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{ CompatVersionUnknown() }}</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>Das Interface, durch das es definiert wird, {{domxref("CanvasRenderingContext2D")}}</li> +</ul> diff --git a/files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html new file mode 100644 index 0000000000..a7d5bd82c3 --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html @@ -0,0 +1,179 @@ +--- +title: CanvasRenderingContext2D.setLineDash() +slug: Web/API/CanvasRenderingContext2D/setLineDash +translation_of: Web/API/CanvasRenderingContext2D/setLineDash +--- +<div>{{APIRef}}</div> + +<p>The <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.setLineDash()</code></strong> method of the Canvas 2D API sets the line dash pattern.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.setLineDash(segments);</var> +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>segments</code></dt> + <dd>An {{jsxref("Array")}}. A list of numbers that specifies distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, <code>[5, 15, 25]</code> will become <code>[5, 15, 25, 5, 15, 25]</code>. An empty array clears the dashes, so that a solid line will be drawn.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_the_setLineDash_method">Using the <code>setLineDash</code> method</h3> + +<p>This is just a simple code snippet which uses the <code>setLineDash</code> method to draw a dashed line.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.setLineDash([5, 15]); + +ctx.beginPath(); +ctx.moveTo(0,100); +ctx.lineTo(400, 100); +ctx.stroke(); +</pre> + +<p>Edit the code below and see your changes update live in the canvas:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.setLineDash([5, 15]); +ctx.beginPath(); +ctx.moveTo(0,100); +ctx.lineTo(400, 100); +ctx.stroke();</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<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('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}</td> + <td>{{Spec2('HTML WHATWG')}}</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>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(27) }}</td> + <td>{{ CompatIE(11) }}</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>{{ CompatGeckoMobile(27) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Gecko-specific_notes">Gecko-specific notes</h2> + +<ul> + <li>Starting with Gecko 7.0 {{geckoRelease("7.0")}}, the non-standard and deprecated property <code>mozDash</code> has been implemented to set and get a dash list. This property will be deprecated and removed in the future, see {{bug(931643)}}. Use <code>setLineDash()</code> instead.</li> +</ul> + +<h2 id="WebKit-specific_notes">WebKit-specific notes</h2> + +<ul> + <li>In WebKit-based browsers (e.g. Safari), the non-standard and deprecated property <code>webkitLineDash</code> is implemented besides this method. Use <code>setLineDash()</code> instead.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</li> +</ul> diff --git a/files/de/web/api/canvasrenderingcontext2d/textalign/index.html b/files/de/web/api/canvasrenderingcontext2d/textalign/index.html new file mode 100644 index 0000000000..1f1651f456 --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/textalign/index.html @@ -0,0 +1,128 @@ +--- +title: CanvasRenderingContext2D.textAlign +slug: Web/API/CanvasRenderingContext2D/textAlign +translation_of: Web/API/CanvasRenderingContext2D/textAlign +--- +<div>{{APIRef}}</div> + +<p>Die <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textAlign</code></strong> Eigenschaft der Canvas 2D API spezifiert die aktuelle Textausrichtung welche beim zeichnen von Text verwendet wird.</p> + +<p>Nehmen Sie in Acht, dass die Ausrichtung auf dem x Wert der {{domxref("CanvasRenderingContext2D.fillText", "fillText()")}} Methode basiert. Wenn <code>textAlign</code> <code>"center"</code> ist, dann würde der Text an der Stelle <code>x - (width / 2)</code> gezeichnet werden.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.textAlign = "left" || "right" || "center" || "start" || "end";</var> +</pre> + +<h3 id="Optionen">Optionen</h3> + +<p>Mögliche Werte:</p> + +<dl> + <dt><code>left</code></dt> + <dd>Der Text wird linksbündig ausgerichtet.</dd> + <dt><code>right</code></dt> + <dd>Der Text wird rechtsbündig ausgerichtet.</dd> + <dt><code>center</code></dt> + <dd>Der Text wird zentiert ausgerichtet.</dd> + <dt><code>start</code></dt> + <dd>Der Text wird am normalen Start der Zeile ausgerichtet. (Links -oder rechtsbündig, je nach Sprache).</dd> + <dt><code>end</code></dt> + <dd>Der Text wird am normalen Ende der Zeile ausgerichtet (Links -oder rechtsbündig, je nach Sprache).</dd> +</dl> + +<p>Der Standardwert ist <code>start</code>.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Using_the_textAlign_property" name="Using_the_textAlign_property">Benutzung der <code>textAlign</code> Eigenschaft</h3> + +<p>Ein einfaches Beispiel welches die <code>textAlign</code> Eigenschaft benutzt um die Textausrichtung zu ändern.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.font = '48px serif'; +ctx.textAlign = 'left'; +ctx.strokeText('Hello world', 0, 100); +</pre> + +<p>Ändern Sie den Code um Ihre Änderungen im Canvas zu sehen:</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.font = '48px serif'; +ctx.textAlign = 'left'; +ctx.strokeText('Hello world', 0, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var edit = document.getElementById('edit'); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener('click', function() { + textarea.focus(); +}) + +textarea.addEventListener('input', drawCanvas); +window.addEventListener('load', drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.textAlign")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Das Interface welches es definiert, {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/de/web/api/childnode/index.html b/files/de/web/api/childnode/index.html new file mode 100644 index 0000000000..07dcc1cb33 --- /dev/null +++ b/files/de/web/api/childnode/index.html @@ -0,0 +1,190 @@ +--- +title: ChildNode +slug: Web/API/ChildNode +tags: + - API + - DOM + - Experimental + - Interface + - NeedsTranslation + - Node + - TopicStub +translation_of: Web/API/ChildNode +--- +<div>{{APIRef("DOM")}}</div> + +<p>The <code><strong>ChildNode</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent.</p> + +<p><code>ChildNode</code> is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("DocumentType")}}, and {{domxref("CharacterData")}} objects.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>There are neither inherited, nor specific properties.</em></p> + +<h2 id="Methods">Methods</h2> + +<p><em>There are no inherited methods.</em></p> + +<dl> + <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt> + <dd>Removes this <code>ChildNode</code> from the children list of its parent.</dd> + <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt> + <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just before this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> + <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt> + <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just after this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> + <dt>{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}</dt> + <dd>Replaces this <code>ChildNode</code> in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</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('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Split the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}} and <code>ChildNode</code>. <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. Added the <code>remove()</code>, <code>before()</code>, <code>after()</code> and <code>replaceWith()</code> methods.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Polyfill">Polyfill</h2> + +<p>External on github: <a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></p> + +<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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support (on {{domxref("Element")}})</td> + <td>{{CompatChrome(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(23)}}</td> + <td>9.0</td> + <td>10.0</td> + <td>4.0</td> + </tr> + <tr> + <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td> + <td>{{CompatChrome(23.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(23)}}</td> + <td>{{CompatNo}}</td> + <td>16.0</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>remove()</code>{{experimental_inline}}</td> + <td>{{CompatChrome(29.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(23)}}</td> + <td>{{CompatNo}}</td> + <td>16.0</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td> + <td>{{CompatChrome(54.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(49)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(39)}}</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>Android Webview</th> + <th>Edge</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 (on {{domxref("Element")}})</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(23)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>10.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(23)}}</td> + <td>{{CompatNo}}</td> + <td>16.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>remove()</code>{{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(23)}}</td> + <td>{{CompatNo}}</td> + <td>16.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(54.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(49)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOperaMobile(39)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(54.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{domxref("ParentNode")}} pure interface.</li> + <li> + <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, {{domxref("Element")}}, and {{domxref("DocumentType")}}.</div> + </li> +</ul> diff --git a/files/de/web/api/childnode/remove/index.html b/files/de/web/api/childnode/remove/index.html new file mode 100644 index 0000000000..bae33f75c0 --- /dev/null +++ b/files/de/web/api/childnode/remove/index.html @@ -0,0 +1,97 @@ +--- +title: ChildNode.remove() +slug: Web/API/ChildNode/remove +tags: + - API + - ChildNode + - DOM + - Experimentell + - Méthode +translation_of: Web/API/ChildNode/remove +--- +<div>{{APIRef("DOM")}}</div> + +<p>Die <code><strong>ChildNode.remove()</strong></code> Methode entfernt ein Objekt aus der Baumstruktur ("tree") zu der es gehört.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>node</em>.remove(); +</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="Benutzung_von_remove()">Benutzung von <code>remove()</code></h3> + +<pre class="brush: html"><div id="div-01">Dies ist div-01</div> +<div id="div-02">Dies ist div-02</div> +<div id="div-03">Dies ist div-03</div> +</pre> + +<pre class="brush: js">var el = document.getElementById('div-02'); +el.remove(); // Entfernt das div Element mit der id 'div-02' +</pre> + +<h3 id="ChildNode.remove()_kann_nicht_gescopet_werden"><code>ChildNode.remove()</code> kann nicht gescopet werden</h3> + +<p>Die <code>remove()</code> Methode kann nicht mit dem <code>with</code> Statement gescopet werden. {{jsxref("Symbol.unscopables")}} enthält mehr Informationen darüber.</p> + +<pre class="brush: js">with(node) { + remove(); +} +// Erzeught einen ReferenceError</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Ein Polyfill der <code>remove()</code> Methode in Internet Explorer 9 und höher sieht folgendermaßen aus:</p> + +<pre class="brush: js">// von:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md +(function (arr) { + arr.forEach(function (item) { + if (item.hasOwnProperty('remove')) { + return; + } + Object.defineProperty(item, 'remove', { + configurable: true, + enumerable: true, + writable: true, + value: function remove() { + if (this.parentNode !== null) + this.parentNode.removeChild(this); + } + }); + }); +})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> + +<h2 id="Specifikationen">Specifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Erste Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.ChildNode.remove")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Das reine {{domxref("ChildNode")}} Interface.</li> + <li> + <div class="syntaxbox">Objekttypen die dieses Interface implementieren: {{domxref("CharacterData")}}, {{domxref("Element")}} und {{domxref("DocumentType")}}.</div> + </li> +</ul> diff --git a/files/de/web/api/console/assert/index.html b/files/de/web/api/console/assert/index.html new file mode 100644 index 0000000000..834e253ce5 --- /dev/null +++ b/files/de/web/api/console/assert/index.html @@ -0,0 +1,98 @@ +--- +title: Console.assert() +slug: Web/API/Console/assert +translation_of: Web/API/console/assert +--- +<div>{{APIRef("Console API")}}</div> + +<p>Schreibt eine Fehlermeldung in die Konsole, wenn eine Behauptung falsch ist. Wenn die Behauptung wahr ist, passiert nichts.</p> + +<p>{{AvailableInWorkers}}</p> + +<p>Die Methode <code>console.assert()</code> wurde in älteren Node.js Versionen anders implementiert als in Browsern. In Browsern wird durch den Aufruf von <code>console.assert()</code> mit einer falschen Behauptung <code>message</code> in die Konsole ausgegeben, <em>ohne</em> die Ausführung des nachfolgenden Codes zu unterbrechen. Vor Node.js v10.0.0 bewirkt eine falsche Behauptung jedoch auch, dass ein <code>AssertionError</code> ausgelöst wird. Diese Diskrepanz wurde mit Node v10 behoben, so dass <code>console.assert()</code> jetzt sowohl in Node als auch im Browser gleich funktioniert.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">console.assert(<var>assertion</var>, <var>obj1</var> [, <var>obj2</var>, ..., <var>objN</var>]); +console.assert(<var>assertion</var>, <var>msg</var> [, <var>subst1</var>, ..., <var>substN</var>]); // c-ähnliche Formatierung +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>assertion</code></dt> + <dd>Jeder boolesche Ausdruck. Wenn die Behauptung falsch ist, wird <code>message</code> in der Console ausgegeben.</dd> + <dt><code>obj1</code> ... <code>objN</code></dt> + <dd>Eine Liste der auszugebenden JavaScript-Objekte. Die String-Darstellungen jedes dieser Objekte werden in der angegebenen Reihenfolge zusammengefügt und ausgegeben.</dd> + <dt><code>msg</code></dt> + <dd>Ein JavaScript-String, der keine oder mehrere Ersetzungsstrings enthält.</dd> + <dt><code>subst1</code> ... <code>substN</code></dt> + <dd>JavaScript-Objekte, mit denen Ersetzungsstrings in msg ersetzt werden sollen. Dieser Parameter gibt Ihnen zusätzliche Kontrolle über das Format der Ausgabe.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Im folgenden Codebeispiel wird die Verwendung eines JavaScript-Objekts nach der Behauptung veranschaulicht:</p> + +<pre class="brush: js">const errorMsg = 'the # is not even'; +for (let number = 2; number <= 5; number += 1) { + console.log('the # is ' + number); + console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg}); + // oder mit ES2015 Object Property Shorthand: + // console.assert(number % 2 === 0, {number, errorMsg}); +} +// Ausgabe: +// the # is 2 +// the # is 3 +// Assertion failed: {number: 3, errorMsg: "the # is not even"} +// the # is 4 +// the # is 5 +// Assertion failed: {number: 5, errorMsg: "the # is not even"}</pre> + +<p>Beachten Sie, dass ein String, der einen Ersatzstring enthält, als Parameter für <code>console.log()</code> in Node und vielen, wenn nicht allen Browsern, funktioniert...</p> + +<pre class="brush: js">console.log('the word is %s', 'foo'); +// Ausgabe: the word is foo</pre> + +<p>...die Verwendung eines solchen Strings als Parameter für <code>console.assert()</code> jedoch derzeit nicht in allen Browsern wie erwartet funktioniert:</p> + +<pre class="brush: js">console.assert(false, 'the word is %s', 'foo'); +// korrekte Ausgabe in Node (e.g. v8.10.0) und einigen Browsern +// (z. B. Firefox v60.0.2): +// Assertion failed: the word is foo +// inkorrekte Ausgabe in einigen Browsern +// (z. B. Chrome v67.0.3396.87): +// Assertion failed: the word is %s foo</pre> + +<p>Weitere Informationen finden Sie in der Dokumentation von {{domxref("console")}} unter <a href="/de/docs/Web/API/console#Outputting_text_to_the_console">Text in der Konsole ausgeben</a>.</p> + +<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("Console API", "#assert", "console.assert()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("api.Console.assert")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://console.spec.whatwg.org/#assert-condition-data">WHATWG Console Standard: console.assert</a></li> + <li><a href="https://docs.microsoft.com/de-de/microsoft-edge/devtools-guide/console/console-api">Console API - Microsoft Edge Development | Microsoft Docs</a></li> + <li><a href="https://developers.google.com/web/tools/chrome-devtools/console/api#assert">Chrome Developer Tools: Using the Console</a></li> +</ul> diff --git a/files/de/web/api/console/clear/index.html b/files/de/web/api/console/clear/index.html new file mode 100644 index 0000000000..3ff370c14b --- /dev/null +++ b/files/de/web/api/console/clear/index.html @@ -0,0 +1,49 @@ +--- +title: Console.clear() +slug: Web/API/Console/clear +translation_of: Web/API/Console/clear +--- +<div>{{APIRef("Console API")}}</div> + +<p>Leert die Konsole.</p> + +<p>Der Inhalt der Konsole wird mit einer informativen Nachricht wie "Konsole wurde geleert" ersetzt.</p> + +<p>Beachten Sie, dass der Aufruf <code>console.clear()</code> in Google Chrome keine Wirkung hat, wenn der Benutzer in den <a href="https://developers.google.com/web/tools/chrome-devtools/console/#preserve-log">Einstellungen</a> die Option "Log bei Navigation nicht leeren" aktiviert hat.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">console.clear(); +</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("Console API", "#clear", "console.clear()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Console.clear")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://docs.microsoft.com/de-de/microsoft-edge/devtools-guide/console/console-api">Console API - Microsoft Edge Development | Microsoft Docs</a></li> + <li><a href="https://developers.google.com/web/tools/chrome-devtools/console/#working_with_the_console_history">Chrome Developer Tools: Using the Console</a></li> +</ul> diff --git a/files/de/web/api/console/count/index.html b/files/de/web/api/console/count/index.html new file mode 100644 index 0000000000..4fdcf42299 --- /dev/null +++ b/files/de/web/api/console/count/index.html @@ -0,0 +1,103 @@ +--- +title: Console.count() +slug: Web/API/Console/count +translation_of: Web/API/Console/count +--- +<div>{{APIRef("Console API")}}</div> + +<p><span class="seoSummary">Die Methode <code>count()</code> protokolliert, wie oft sie an einer Stelle oder mit einem Bezeichner aufgerufen wurde. Sie nimmt ein optionales Argument <code>label</code> entgegen.</span></p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">console.count(<var>[label]</var>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>label</code> {{optional_inline}}</dt> + <dd>Ein {{jsxref("String")}}. Wenn angegeben, gibt <code>count()</code> die Anzahl der Aufrufe mit diesem Label aus, ansonsten mit der Bezeichnung "default".</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Nehmen wir folgenden Code als Beispiel:</p> + +<pre class="brush: js">let user = ""; + +function greet() { + console.count(); + return "hi " + user; +} + +user = "bob"; +greet(); +user = "alice"; +greet(); +greet(); +console.count();</pre> + +<p>Sieht die Ausgabe in der Konsole in etwa so aus:</p> + +<pre class="eval">"default: 1" +"default: 2" +"default: 3" +"default: 4" +</pre> + +<p>Das Label wird als <code>default</code> angezeigt, da kein explizites Label angegeben wurde.</p> + +<p>Wenn wir die Variable <code>user</code> als das Argument <code>label</code> an den ersten Aufruf von <code>count()</code> übergeben und den String "alice" an den zweiten:</p> + +<pre class="brush: js">let user = ""; + +function greet() { + console.count(user); + return "hi " + user; +} + +user = "bob"; +greet(); +user = "alice"; +greet(); +greet(); +console.count("alice");</pre> + +<p>Sieht die Ausgabe so aus:</p> + +<pre>"bob: 1" +"alice: 1" +"alice: 2" +"alice: 3"</pre> + +<p>Wir führen jetzt separate Zählungen ein, die nur auf dem Wert von <code>label</code> basieren.</p> + +<dl> +</dl> + +<h2 id="Spezifikation">Spezifikation</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("Console API", "#count", "console.count()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Console.count")}}</p> diff --git a/files/de/web/api/console/debug/index.html b/files/de/web/api/console/debug/index.html new file mode 100644 index 0000000000..15d8e258fc --- /dev/null +++ b/files/de/web/api/console/debug/index.html @@ -0,0 +1,63 @@ +--- +title: Console.debug() +slug: Web/API/Console/debug +translation_of: Web/API/Console/debug +--- +<div>{{APIRef("Console API")}}</div> + +<p><span class="seoSummary">Die Methode <strong><code>debug()</code></strong> gibt eine Nachricht der Protokollstufe "debug" auf der Konsole aus. Die Nachricht wird dem Benutzer nur angezeigt, wenn die Konsole für die Anzeige von Debug-Ausgaben konfiguriert ist.</span></p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">console.debug(<var>obj1</var> [, <var>obj2</var>, ..., <var>objN</var>]); +console.debug(<var>msg</var> [, <var>subst1</var>, ..., <var>substN</var>]); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>obj1</code> ... <code>objN</code> {{optional_inline}}</dt> + <dd>Eine Liste der auszugebenden JavaScript-Objekte. Die String-Darstellungen jedes dieser Objekte werden in der angegebenen Reihenfolge zusammengefügt und an die Konsole ausgegeben.</dd> + <dt><code>msg</code> {{optional_inline}}</dt> + <dd>Ein JavaScript String, die keine oder mehrere Stringersetzungen enthält, die in aufeinanderfolgender Reihenfolge durch <code>subst1</code> bis <code>substN</code> ersetzt werden.</dd> + <dt><code>subst1</code> ... <code>substN</code> {{optional_inline}}</dt> + <dd>JavaScript-Objekte, mit denen Stringersetzungen in <code>msg</code> ersetzt werden sollen. Dies gibt Ihnen zusätzliche Kontrolle über das Format der Ausgabe. Eine Beschreibung der Funktionsweise von Ersetzungen finden Sie unter {{SectionOnPage("/de-de/docs/Web/API/Console", "Verwenden von Ersatzstrings")}}.</dd> +</dl> + +<p>Weitere Informationen finden Sie unter <a href="/de/docs/Web/API/console#Outputting_text_to_the_console">Text in der Konsole ausgeben</a> in der Dokumentation des Objekts {{domxref("console")}}.</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("Console API", "#debug", "console.debug()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initiale definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("api.Console.debug")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://docs.microsoft.com/de-de/microsoft-edge/devtools-guide/console/console-api">Console API - Microsoft Edge Development | Microsoft Docs</a></li> + <li><a href="https://developers.google.com/web/tools/chrome-devtools/console/api#debug">Chrome Developer Tools: Using the Console</a></li> +</ul> diff --git a/files/de/web/api/console/dir/index.html b/files/de/web/api/console/dir/index.html new file mode 100644 index 0000000000..bd54b88c46 --- /dev/null +++ b/files/de/web/api/console/dir/index.html @@ -0,0 +1,56 @@ +--- +title: Console.dir() +slug: Web/API/Console/dir +translation_of: Web/API/Console/dir +--- +<div>{{APIRef("Console API")}}</div> + +<p>Zeigt eine interaktive Liste der Eigenschaften des angegebenen JavaScript-Objekts an. Die Ausgabe wird als hierarchische Liste mit Aufklapp-Dreiecken angezeigt, in denen Sie den Inhalt untergeordneter Objekte sehen können.</p> + +<p>Mit anderen Worten: Mit <code>console.dir()</code> können Sie alle Eigenschaften eines angegebenen JavaScript-Objekts in der Konsole anzeigen und problemlos abrufen.</p> + +<p>{{AvailableInWorkers}}</p> + +<p><img alt="console-dir.png" class="default internal" src="/@api/deki/files/6081/=console-dir.png"></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">console.dir(<var>object</var>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>object</code></dt> + <dd>Ein JavaScript-Objekt, dessen Eigenschaften angezeigt werden sollen.</dd> +</dl> + +<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("Console API", "#consoledirobject", "console.dir()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("api.Console.dir")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://docs.microsoft.com/de-de/microsoft-edge/devtools-guide/console/console-api">Console API - Microsoft Edge Development | Microsoft Docs</a></li> + <li><a href="https://developers.google.com/web/tools/chrome-devtools/console/api#dir">Chrome Console API reference</a></li> +</ul> diff --git a/files/de/web/api/console/index.html b/files/de/web/api/console/index.html new file mode 100644 index 0000000000..4f045815f1 --- /dev/null +++ b/files/de/web/api/console/index.html @@ -0,0 +1,296 @@ +--- +title: Console +slug: Web/API/Console +tags: + - API + - DOM + - Debugging + - Reference + - web console +translation_of: Web/API/Console +--- +<div>{{APIRef("Console API")}}</div> + +<p>Das <strong><code>Console</code></strong> Objekt bietet Zurgiff auf die Debugging-Konsole des Browsers (z. B. die <a href="/de/docs/Tools/Web_Console">Web-Konsole</a> in Firefox). Die Einzelheiten der Funktionsweise sind von Browser zu Browser unterschiedlich, es gibt jedoch <em>de facto</em> eine Reihe von Funktionen, die normalerweise bereitgestellt werden.</p> + +<p>Auf das <code>Console</code> Objekt kann von jedem globalen Objekt aus zugegriffen werden. {{domxref("Window")}} im Browser und {{domxref("WorkerGlobalScope")}} als spezifische Varianten in Workern über die Property-Konsole. Es wird unter {{domxref("Window.console")}} zur Verfügung gestellt und kann als einfache Konsole referenziert werden. Zum Beispiel:</p> + +<pre class="brush: js">console.log("Failed to open the specified link")</pre> + +<p>Diese Seite dokumentiert die {{anch("Methods", "Methoden")}}, die für das <code>Console</code> Objekt verfügbar sind und enthält einige {{anch("Usage", "Anwendungsbeispiele")}}.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Methoden">Methoden</h2> + +<dl> + <dt>{{domxref("Console.assert()")}}</dt> + <dd>Protokolliert eine Nachricht und eine Stack-Ablaufverfolgung in der Konsole, wenn das erste Argument <code>false</code> ist.</dd> + <dt>{{domxref("Console.clear()")}}</dt> + <dd>Leert die Konsole.</dd> + <dt>{{domxref("Console.count()")}}</dt> + <dd>Protokolliert, wie oft diese Zeile mit dem angegebenen Label aufgerufen wurde.</dd> + <dt>{{domxref("Console.countReset()")}}</dt> + <dd>Setzt den Wert des Zählers mit der angegebenen Bezeichnung zurück.</dd> + <dt>{{domxref("Console.debug()")}}</dt> + <dd>Gibt eine Nachricht mit der Protokollebene <code>"debug"</code> in der Konsole aus. + <div class="note"><strong>Hinweis:</strong> Ab Chromium 58 wird diese Methode nur in Chromium-Browserkonsolen angezeigt, wenn die Stufe "Verbose" ausgewählt ist.</div> + </dd> + <dt>{{domxref("Console.dir()")}}</dt> + <dd>Zeigt eine interaktive Auflistung der Eigenschaften eines angegebenen JavaScript-Objekts an. In dieser Auflistung können Sie Offenlegungsdreiecke verwenden, um den Inhalt untergeordneter Objekte zu untersuchen.</dd> + <dt>{{domxref("Console.dirxml()")}}</dt> + <dd> + <p>Zeigt eine XML/HTML-Elementdarstellung des angegebenen Objekts an, falls möglich, oder die JavaScript-Objektansicht, falls dies nicht möglich ist.</p> + </dd> + <dt>{{domxref("Console.error()")}}</dt> + <dd>Gibt eine Fehlermeldung aus. Sie können <a href="/de/docs/Web/API/console#Using_string_substitutions">Stringersetzung</a> und zusätzliche Argumente mit dieser Methode verwenden.</dd> + <dt>{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Ein Alias für <code>error()</code>.</dd> + <dt>{{domxref("Console.group()")}}</dt> + <dd>Erstellt eine neue Inline-<a href="/de/docs/Web/API/console#Using_groups_in_the_console">Gruppe</a>, in der alle folgenden Ausgaben von einer anderen Ebene eingerückt werden. Um eine Ebene wieder zu verlassen, rufen Sie <code>groupEnd()</code> auf.</dd> + <dt>{{domxref("Console.groupCollapsed()")}}</dt> + <dd>Erstellt eine neue Inline-<a href="/de/docs/Web/API/console#Using_groups_in_the_console">Gruppe</a>, in der alle folgenden Ausgaben von einer anderen Ebene eingerückt werden. Anders als bei <code>group()</code> beginnt die Inline-Gruppe eingeklappt und muss über einen Button erst aufgeklappt werden. Um eine Ebene wieder zu verlassen, rufen Sie <code>groupEnd()</code> auf.</dd> + <dt>{{domxref("Console.groupEnd()")}}</dt> + <dd>Verlässt die aktuelle Inline-<a href="/de/docs/Web/API/console#Using_groups_in_the_console">Gruppe</a>.</dd> + <dt>{{domxref("Console.info()")}}</dt> + <dd>Informative Protokollierung von Informationen. Sie können <a href="/de/docs/Web/API/console#Using_string_substitutions">Stringersetzung</a> und zusätzliche Argumente mit dieser Methode verwenden.</dd> + <dt>{{domxref("Console.log()")}}</dt> + <dd>Zur allgemeinen Ausgabe von Protokollinformationen. Sie können <a href="/de/docs/Web/API/console#Using_string_substitutions">Stringersetzung</a> und zusätzliche Argumente mit dieser Methode verwenden.</dd> + <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt> + <dd>Startet den integrierten Profiler des Browsers (z. B. das <a href="/de/docs/Tools/Performance">Firefox-Leistungstool</a>). Sie können einen optionalen Namen für das Profil angeben.</dd> + <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt> + <dd>Stoppt den Profiler. Das resultierende Profil wird im Leistungstool des Browsers angezeigt (z. B. im <a href="/de/docs/Tools/Performance">Firefox-Leistungstool</a>).</dd> + <dt>{{domxref("Console.table()")}}</dt> + <dd>Zeigt tabellarische Daten als Tabelle an.</dd> + <dt>{{domxref("Console.time()")}}</dt> + <dd>Startet einen <a href="/de/docs/Web/API/console#Timers">Timer</a> mit einem als Eingabeparameter angegebenen Namen. Auf einer Seite können bis zu 10.000 gleichzeitige Timer ausgeführt werden.</dd> + <dt>{{domxref("Console.timeEnd()")}}</dt> + <dd>Stoppt den angegebenen <a href="/de/docs/Web/API/console#Timers">Timer</a> und protokolliert die abgelaufene Zeit in Sekunden seit dem Start.</dd> + <dt>{{domxref("Console.timeLog()")}}</dt> + <dd>Protokolliert den Wert des angegebenen <a href="/de/docs/Web/API/console#Timers">Timers</a> in der Konsole.</dd> + <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt> + <dd>Fügt der <a href="https://developer.chrome.com/devtools/docs/timeline">Zeitleiste</a> oder dem <a href="/de/docs/Tools/Performance/Waterfall">Wasserfallwerkzeug</a> des Browsers eine Markierung hinzu.</dd> + <dt>{{domxref("Console.trace()")}}</dt> + <dd>Gibt eine <a href="/de/docs/Web/API/console#Stack_traces">Stapelablaufverfolgung</a> (stack trace) aus.</dd> + <dt>{{domxref("Console.warn()")}}</dt> + <dd>Gibt eine Warnmeldung aus. Sie können <a href="/de/docs/Web/API/console#Using_string_substitutions">Stringersetzung</a> und zusätzliche Argumente mit dieser Methode verwenden.</dd> +</dl> + +<h2 id="Usage" name="Usage">Benutzung</h2> + +<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Text auf der Konsole ausgeben</h3> + +<p>Die am häufigsten verwendete Funktion der Konsole ist das Protokollieren von Text und anderen Daten. Sie können vier Ausgabekategorien erstellen, die Sie mit den Methoden {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}} und {{domxref("console.error()")}} generieren können. Jedes dieser Ergebnisse hat eine unterschiedliche Ausgabe im Protokoll. Sie können die von Ihrem Browser bereitgestellten Filtersteuerelemente verwenden, um nur die Arten von Ausgaben anzuzeigen, die Sie interessieren.</p> + +<p>Es gibt zwei Möglichkeiten, jede der Ausgabemethoden zu verwenden. Sie können einfach eine Liste von Objekten übergeben, deren Stringdarstellungen zu einem String verkettet werden, dann an die Konsole ausgegeben werden, oder Sie können einen String übergeben, der keine oder mehrere Ersatzstrings enthält, gefolgt von einer Liste von Objekten, um diese zu ersetzen.</p> + +<h4 id="Ein_einzelnes_Objekt_ausgeben">Ein einzelnes Objekt ausgeben</h4> + +<p>Die einfachsten Methoden zur Verwendung der Protokollierungsmethoden sind die Ausgabe eines einzelnen Objekts:</p> + +<pre class="brush: js">var someObject = { str: "Some text", id: 5 }; +console.log(someObject); +</pre> + +<p>Die Ausgabe sieht ungefähr so aus:</p> + +<pre>[09:27:13.475] ({str:"Some text", id:5})</pre> + +<h4 id="Mehrere_Objekte_ausgeben">Mehrere Objekte ausgeben</h4> + +<p>Sie können auch mehrere Objekte ausgeben, indem Sie sie beim Aufrufen der Protokollierungsmethode einfach nacheinander auflisten:</p> + +<pre class="brush: js">var car = "Dodge Charger"; +var someObject = { str: "Some text", id: 5 }; +console.info("My first car was a", car, ". The object is:", someObject);</pre> + +<p>Diese Ausgabe sieht folgendermaßen aus:</p> + +<pre>[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5}) +</pre> + +<h4 id="String-Ersetzungen_verwenden">String-Ersetzungen verwenden</h4> + +<p>Wenn Sie einen String an eine der Methoden des Konsolenobjekts übergeben, die einen String akzeptiert (z. B. <code>log()</code>), können Sie folgende Ersatzstrings verwenden:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Ersatzstring</td> + <td class="header">Beschreibung</td> + </tr> + <tr> + <td>%o ode %O</td> + <td>Gibt ein JavaScript-Objekt aus. Durch Klicken auf den Objektnamen werden weitere Informationen dazu im Inspektor geöffnet.</td> + </tr> + <tr> + <td>%d oder %i</td> + <td> + <p>Gibt eine Ganzzahl aus. Zahlenformatierung wird unterstützt, z. B. gibt <code>console.log("Foo %.2d", 1.1)</code> die Zahl als zwei signifikante Ziffern mit einer führenden 0 aus: <code>Foo 01</code></p> + </td> + </tr> + <tr> + <td>%s</td> + <td>Gibt einen String aus.</td> + </tr> + <tr> + <td>%f</td> + <td> + <p>Gibt einen Gleitkommawert aus. Die Formatierung wird unterstützt, zum Beispiel gibt <code>console.log("Foo %.2f", 1.1)</code> die Zahl mit 2 Dezimalstellen aus: <code>Foo 1.10</code></p> + </td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Hinweis:</strong> Die Präzisionsformatierung funktioniert in Chrome nicht</p> +</div> + +<p>Jedes dieser Elemente zieht das nächste Argument nach dem Formatstring aus der Parameterliste. Zum Beispiel:</p> + +<pre>for (var i=0; i<5; i++) { + console.log("Hello, %s. You've called me %d times.", "Bob", i+1); +} +</pre> + +<p>Die Ausgabe sieht folgendermaßen aus:</p> + +<pre>[13:14:13.481] Hello, Bob. You've called me 1 times. +[13:14:13.483] Hello, Bob. You've called me 2 times. +[13:14:13.485] Hello, Bob. You've called me 3 times. +[13:14:13.487] Hello, Bob. You've called me 4 times. +[13:14:13.488] Hello, Bob. You've called me 5 times. +</pre> + +<h4 id="Konsolenausgaben_stylen">Konsolenausgaben stylen</h4> + +<p>Sie können die <code>%c</code> Direktive verwenden, um einen CSS-Stil auf die Konsolenausgabe anzuwenden:</p> + +<pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");</pre> + +<div>Der Text vor der Direktive wird nicht beeinflusst. Der Text nach der Direktive wird jedoch mit den CSS-Deklarationen im Parameter formatiert.</div> + +<div> </div> + +<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div> + +<div> </div> + +<div class="note"> +<p><strong>Hinweis:</strong> Es werden etliche CSS-Eigenschaften von diesem Stil unterstützt. Sie sollten experimentieren und sehen, welche sich als nützlich erweisen.</p> +</div> + +<div> </div> + +<div>{{h3_gecko_minversion("Gruppen in der Konsole verwenden", "9.0")}}</div> + +<p>Sie können verschachtelte Gruppen verwenden, um Ihre Ausgabe zu organisieren, indem Sie verwandtes Material visuell kombinieren. Um einen neuen verschachtelten Block zu erstellen, rufen Sie <code>console.group()</code> auf. Die Methode <code>console.groupCollapsed()</code> ist ähnlich, erstellt den neuen Block jedoch zusammengeklappt und erfordert die Verwendung einer Schaltfläche zum Öffnen.</p> + +<div class="note"><strong>Hinweis:</strong> Minimierte Gruppen werden in Gecko noch nicht unterstützt. Die Methode <code>groupCollapsed()</code> ist zu diesem Zeitpunkt die gleiche wie <code>group()</code>.</div> + +<p>Um die aktuelle Gruppe zu verlassen, rufen Sie einfach <code>console.groupEnd()</code> auf. Zum Beispiel mit diesem Code:</p> + +<pre class="brush: js">console.log("This is the outer level"); +console.group(); +console.log("Level 2"); +console.group(); +console.log("Level 3"); +console.warn("More of level 3"); +console.groupEnd(); +console.log("Back to level 2"); +console.groupEnd(); +console.debug("Back to the outer level"); +</pre> + +<p>Die Ausgabe sieht folgendermaßen aus:</p> + +<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p> + +<div>{{h3_gecko_minversion("Timer", "10.0")}}</div> + +<p>Um die Dauer einer bestimmten Operation zu berechnen, hat Gecko 10 die Unterstützung von Timern im <code>console</code>-Objekt eingeführt. Um einen Timer zu starten, rufen Sie die Methode <code>console.time</code><code>()</code> auf und geben Sie ihm als einzigen Parameter einen Namen. Um den Timer zu stoppen und die verstrichene Zeit in Millisekunden abzurufen, rufen Sie einfach die Methode <code>console.timeEnd()</code> auf und übergeben den Namen des Timers erneut als Parameter. Auf einer Seite können bis zu 10.000 Timer gleichzeitig ausgeführt werden.</p> + +<p>Zum Beispiel mit diesem Code:</p> + +<pre class="brush: js">console.time("answer time"); +alert("Click to continue"); +console.timeLog("answer time"); +alert("Do a bunch of other stuff..."); +console.timeEnd("answer time"); +</pre> + +<p>Protokolliert die Zeit, die der Benutzer zum Deaktivieren des Alert-Felds benötigt, schreibt die benötigte Zeit in der Konsole, wartet, bis der Benutzer die zweite Alert-Nachricht wegklickt und protokolliert dann die Endzeit in der Konsole:</p> + +<p><img alt="timerresult.png" class="default internal" src="https://mdn.mozillademos.org/files/16113/console-timeLog.png" style="border: 1px solid black; height: 102px; margin: 0 auto; width: 318px;"></p> + +<p>Beachten Sie, dass der Name des Timers sowohl beim Start als auch beim Stoppen des Timers angezeigt wird.</p> + +<div class="blockIndicator note"> +<p><strong>Hinweis:</strong> Es ist wichtig zu beachten, dass der Timer die Gesamtzeit für die Transaktion angibt, wenn Sie das Timing für den Netzwerkverkehr protokollieren. Die im Netzwerkbereich aufgeführte Zeit ist nur die Zeit, die der Header benötigt. Wenn Sie die Antwort-Body-Protokollierung aktiviert haben, sollte die angegebene Zeit für den Antwortheader und den Nachrichtentext der Anzeige in der Konsolenausgabe entsprechen.</p> +</div> + +<h3 id="Stapelverfolgung_(Strack_Traces)">Stapelverfolgung (Strack Traces)</h3> + +<p>Das Konsolenobjekt unterstützt auch die Ausgabe eines Stack-Trace. Daraufhin wird der Anrufpfad angezeigt, mit dem Sie den Punkt erreichen, an dem Sie {{domxref("console.trace()")}} aufrufen. Gegebener Code wie folgt:</p> + +<pre class="brush: js">function foo() { + function bar() { + console.trace(); + } + bar(); +} + +foo(); +</pre> + +<p>Die Ausgabe in der Konsole sieht ungefähr so aus:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Spezifikationen">Spezifikationen</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('Console API')}}</td> + <td>{{Spec2('Console API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Console")}}</p> + +<h2 id="Hinweise">Hinweise</h2> + +<ul> + <li>Wenn in Firefox auf einer Seite ein <code>console</code>-Objekt definiert ist, wird das in Firefox integrierte Objekt überschrieben.</li> + <li>Vor {{Gecko("12.0")}} funktionieren die Methoden des <code>console</code>-Objekts nur, wenn die Webkonsole geöffnet ist. Beginnend mit {{Gecko("12.0")}} wird die Ausgabe zwischengespeichert, bis die Webkonsole geöffnet wird. Anschließend wird sie angezeigt.</li> + <li>Es ist erwähnenswert, dass das in Firefox integrierte <code>Console</code>-Objekt mit dem von <a href="http://getfirebug.com/">Firebug</a> bereitgestellten kompatibel ist.</li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Tools" title="Tools">Tools</a></li> + <li><a href="/de/docs/Tools/Web_Console" title="Web Console">Web-Konsole</a> — Wie die Web-Konsole Konsolen-API-Aufrufe in Firefox verarbeitet</li> + <li><a href="/de/docs/Tools/Remote_Debugging">Remote-Debugging</a> — Anzeigen der Konsolenausgabe, wenn das Debugging-Ziel ein mobiles Gerät ist</li> + <li><a href="/de/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">Protokollierung der Konsole auf dem Gerät</a> — So protokollieren Sie auf Firefox OS-Geräten</li> +</ul> + +<h3 id="Andere_Implementierungen">Andere Implementierungen</h3> + +<ul> + <li><a href="https://developers.google.com/web/tools/chrome-devtools/console/api">Google Chrome DevTools</a></li> + <li><a href="http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li> + <li><a href="https://support.apple.com/de-de/guide/safari-developer/log-messages-with-the-console-dev4e7dedc90/mac">Safari</a></li> +</ul> diff --git a/files/de/web/api/console/log/index.html b/files/de/web/api/console/log/index.html new file mode 100644 index 0000000000..3f26aec9c3 --- /dev/null +++ b/files/de/web/api/console/log/index.html @@ -0,0 +1,180 @@ +--- +title: Console.log() +slug: Web/API/Console/log +tags: + - API + - Debugging + - NeedsBrowserCompatibility + - Web Entwicklung + - Web Konsole + - console + - console.dir + - console.log +translation_of: Web/API/Console/log +--- +<div>{{APIRef("Console API")}}</div> + +<p>Gibt eine Nachricht auf der Web-Konsole aus.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">console.log(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); +console.log(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); +</pre> + +<h2 id="Parameter">Parameter</h2> + +<dl> + <dt><code>obj1</code> ... <code>objN</code></dt> + <dd>Eine Liste von auszugebenden JavaScript-Objekten. Die Zeichenfolgedarstellungen der Objekte werden in der angegebenen Reihenfolge aneinandergehängt und ausgegeben.</dd> + <dt><code>msg</code></dt> + <dd>Eine JavaScript-Zeichenfolge, die Null oder mehr Ersatzzeichefolgen enthält.</dd> + <dt><code>subst1</code> ... <code>substN</code></dt> + <dd>JavaScript-Objekte durch die die Ersatzzeichenfolgen in <code>msg</code> ersetzt werden sollen. Dies gibt Ihnen zusätzliche Kontrolle über die Formatierung der Ausgabe.</dd> +</dl> + +<p>Weitere Details finden Sie im Abschnitt <a href="https://developer.mozilla.org/de/docs/Web/API/Console#Outputting_text_to_the_console">Outputting text to the console</a> in der Dokumentation zu {{domxref("console")}}.</p> + +<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("Console API", "#log", "console.log()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Erste Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilitä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>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>8</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Ersatzzeichenfolgen</td> + <td>{{CompatVersionUnknown}}<br> + {{CompatChrome(28)}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>10<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Verfügbar in Workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("38.0")}}</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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Ersatzzeichenfolgen</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Verfügbar in Workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Weisst man <code>%d</code> einen negativen Wert zu, wird dieser zur nächsten negative Ganzzahl abgerundet; z. B. wird -0.1 zu -1.</p> + +<p>[2] <code>%c</code> wird nicht unterstützt; <code>%d</code> wird als 0 angezeigt, falls der Wert keine Nummer ist.</p> + +<h2 id="Unterschied_zu_console.dir()">Unterschied zu console.dir()</h2> + +<p>In Firefox generieren beide Kommandos dieselbe Ausgabe, wenn als Parameter ein DOM-Element mitgegeben wird: Man erhält in beiden Fällen eine JSON-artige Baumstruktur.</p> + +<p>In Chrome besteht aber bei gleicher Eingabe ein nützlicher Unterschied:</p> + +<p><img alt="" src="https://i.imgur.com/DozDcYR.png"></p> + +<p>Bemerkung:</p> + +<ul> + <li><code>console.log</code> gibt das Element als HTML-artige Baumstruktur aus</li> + <li><code>console.dir</code> gibt das Element als JSON-artige Baumstruktur aus</li> +</ul> + +<p>Mit <code>console.log</code> werden DOM-Elemente also speziell behandelt. Bei <code>console.dir</code> ist dies nicht der Fall. Dies ist oft dann nützlich, wenn man die vollständige Darstellung des DOM-JS-Objekts ansehen möchte.</p> + +<p>Mehr Informationen dazu finden Sie unter <a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a>.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> + <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> + <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug wiki: Console API</a> - FireBug unterstützt noch weitere Features in seiner console.log()-Implementation, wie z. B. <a href="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/">styled logging</a>.</li> + <li><a href="http://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS: Console API</a></li> +</ul> diff --git a/files/de/web/api/console/table/index.html b/files/de/web/api/console/table/index.html new file mode 100644 index 0000000000..c641bf0c6f --- /dev/null +++ b/files/de/web/api/console/table/index.html @@ -0,0 +1,214 @@ +--- +title: Console.table() +slug: Web/API/Console/table +tags: + - Konsole + - Tabelle + - log + - tabellarisch +translation_of: Web/API/Console/table +--- +<div>{{APIRef("Console API")}}</div> + +<p><span class="seoSummary">Zeigt tabellarische Daten als Tabelle im Log an.</span></p> + +<p>Diese Funktion benötigt einen Parameter <code>data</code>, welcher ein Array oder ein Objekt sein muss und außerdem einen optionalen Parameter <code>columns</code>.</p> + +<p>Die Funktion zeigt <code>data</code> als Tabelle im Log an. Jedes Element im Array (bzw. jede zählbare Eigenschaft im <code>data</code> Objekt) wird als Tabellenzeile angezeigt.</p> + +<p>Die erste Tabellenspalte wird mit <code>(index)</code> bezeichnet. Wenn <code>data</code> ein Array ist, dann erscheinen in dieser Spalte die Arrayindizes. Wenn <code>data</code> ein Objekt ist, dann erscheinen in dieser Spalte die Eigenschaftsnamen. Beachten Sie, dass (bei Firefox) <code>console.table</code> maximal 1000 Zeilen anzeigt. (Die erste Zeile ist die Überschriftszeile mit der Bezeichnung index).</p> + +<p>{{AvailableInWorkers}}</p> + +<h3 id="Sammlungen_(Collections)_mit_primitiven_Datentypen">Sammlungen (Collections) mit primitiven Datentypen</h3> + +<p>Der <code>data</code> Parameter kann ein Array oder ein Objekt sein.</p> + +<pre class="brush: js">// Ein String-Array + +console.table(["apples", "oranges", "bananas"]);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8567/console-table-array.png"></p> + +<pre class="brush: js">// Ein Objekt mit Eigenschaften, die Strings sind + +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +var me = new Person("John", "Smith"); + +console.table(me);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8559/console-table-simple-object.png"></p> + +<h3 id="Sammlungen_(Collections)_mit_zusammengesetzen_Typen">Sammlungen (Collections) mit zusammengesetzen Typen</h3> + +<p>Wenn die Arrayinhalte oder die Objekteigenschaften selbt Arrays oder Objekte sind, dann werden deren Elemente einzeln in jeder Spalte dargestellt:</p> + +<pre class="brush: js">// Ein Array, welches Arrays enthält + +var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]] +console.table(people);</pre> + +<p><img alt="Table displaying array of arrays" src="https://mdn.mozillademos.org/files/8561/console-table-array-of-array.png"></p> + +<pre class="brush: js">// Ein Array mit Objekten + +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +var john = new Person("John", "Smith"); +var jane = new Person("Jane", "Doe"); +var emily = new Person("Emily", "Jones"); + +console.table([john, jane, emily]);</pre> + +<p>Beachten Sie: Wenn das Array Objekte enthält, dann werden die Spalten mit dem Eigenschaftsnamen beschriftet.</p> + +<p><img alt="Table displaying array of objects" src="https://mdn.mozillademos.org/files/8563/console-table-array-of-objects.png"></p> + +<pre class="brush: js">// Ein Objekt mit Eigenschaften, welche wiederum ein +// Objekt sind + +var family = {}; + +family.mother = new Person("Jane", "Smith"); +family.father = new Person("John", "Smith"); +family.daughter = new Person("Emily", "Smith"); + +console.table(family);</pre> + +<p><img alt="Table displaying object of objects" src="https://mdn.mozillademos.org/files/8565/console-table-object-of-objects.png"></p> + +<h3 id="Auswahl_der_anzuzeigenden_Spalten">Auswahl der anzuzeigenden Spalten</h3> + +<p>Nromalerweise zeigt <code>console.table()</code> alle Elemente in jeder Zeile an. Sie können aber den optionalen Parameter <code>columns</code> verwenden, um nur bestimmte Spalten anzuzeigen:</p> + +<pre class="brush: js">// Ein Array mit Objekten, nur der "firstName" +// wird angezeigt. + +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +var john = new Person("John", "Smith"); +var jane = new Person("Jane", "Doe"); +var emily = new Person("Emily", "Jones"); + +console.table([john, jane, emily], ["firstName"]);</pre> + +<p><img alt="Table displaying array of objects with filtered output" src="https://mdn.mozillademos.org/files/8569/console-table-array-of-objects-firstName-only.png"></p> + +<h3 id="Tabelle_sortieren">Tabelle sortieren</h3> + +<p>Sie können die Tabelle durch einen Klick auf den jeweiligen Spaltenkopf umsortieren.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">console.table(data [, <em>columns</em>]); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>data</code></dt> + <dd>Die anzuzeigenden Daten. Diese müssen ein Array oder ein Objekt sein.</dd> + <dt><code>columns</code></dt> + <dd>Ein Array mit den anzuzeigenden Spalten.</dd> +</dl> + +<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("Console API", "#table", "console.table()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("34.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</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>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("34.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/api/console/time/index.html b/files/de/web/api/console/time/index.html new file mode 100644 index 0000000000..850c459e99 --- /dev/null +++ b/files/de/web/api/console/time/index.html @@ -0,0 +1,56 @@ +--- +title: Console.time() +slug: Web/API/Console/time +translation_of: Web/API/Console/time +--- +<div>{{APIRef("Console API")}}</div> + +<p>Startet einen Timer, den man benutzen kann, um zu überprüfen wie lange eine bestimmte Operation. Man kann jedem Timer einen einzigartigen Namen geben und kann bis zu 10000 Timer gleichzeitig auf einer Seite laufen lassen. Wenn man {{domxref("console.timeEnd()")}} mit dem selben Namen aufruft, gibt der Browser die Zeit in Millisekunden zurück, die seit dem Starten des Timers verstrichen ist.</p> + +<p>Siehe auch <a href="/en-US/docs/Web/API/console#Timers">Timer</a> in der {{domxref("console")}} Dokumentation für weitere Details und Beispiele.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">console.time(<em>Bezeichnung</em>); +</pre> + +<h2 id="Parameter">Parameter</h2> + +<dl> + <dt><code>Bezeichnung</code></dt> + <dd>Der Name des neuen Timers. Dieser wird den Timer identifizieren; Der selbe Name sollte beim aufrufen von {{domxref("console.timeEnd()")}} genutzt werden, um den Timer zu stoppen und das Ergebnis in die Konsole zu drucken.</dd> +</dl> + +<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("Console API", "#time", "console.time()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Console.time")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Console.timeEnd()")}}</li> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> +</ul> diff --git a/files/de/web/api/console/timeend/index.html b/files/de/web/api/console/timeend/index.html new file mode 100644 index 0000000000..65c6242a83 --- /dev/null +++ b/files/de/web/api/console/timeend/index.html @@ -0,0 +1,57 @@ +--- +title: Console.timeEnd() +slug: Web/API/Console/timeEnd +translation_of: Web/API/Console/timeEnd +--- +<div>{{APIRef("Console API")}}</div> + +<p>Stopt einen Timer, der zuvor mit {{domxref("console.time()")}} gestartet wurde.</p> + +<p>Siehe auch <a href="/en-US/docs/Web/API/console#Timers">Timer</a> in der Dokumentation für mehr Details und Beispiele</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">console.timeEnd(<em>Bezeichnung</em>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>Bezeichnung</code></dt> + <dd>Der Name des zu stoppenden Timers. Nachdem der Timer gestoppt wurde, wird die verstrichene Zeit automatisch in der <a href="/en-US/docs/Tools/Web_Console">Web Konsole</a> ausgegeben.</dd> +</dl> + +<h2 id="Specifications">Specifications</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("Console API", "#timeend", "console.timeEnd()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.Console.timeEnd")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> +</ul> diff --git a/files/de/web/api/console/warn/index.html b/files/de/web/api/console/warn/index.html new file mode 100644 index 0000000000..a481fda12b --- /dev/null +++ b/files/de/web/api/console/warn/index.html @@ -0,0 +1,147 @@ +--- +title: Console.warn() +slug: Web/API/Console/warn +translation_of: Web/API/Console/warn +--- +<div>{{APIRef("Console API")}}{{non-standard_header}}</div> + +<p>Ausgabe einer Warnmeldung in der Web-Konsole.</p> + +<p>{{AvailableInWorkers}}</p> + +<p>{{Note("In Firefox haben Warnungen in der Web-Console ein kleines Ausrufzeichen Symbol neben dem Meldungstext.")}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">console.warn(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); +console.warn(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); +</pre> + +<h2 id="Parameter">Parameter</h2> + +<dl> + <dt><code>obj1</code> ... <code>objN</code></dt> + <dd>Eine Liste von JavaScript Objecten, die ausgegeben werden sollen. Die String-Darstellung jedes einzelnen Objekts wird in der angegebenen Reihenfolge aneinander gehangen und ausgegeben.</dd> + <dt><code>msg</code></dt> + <dd>Ein JavaScript String der keinen oder mehrere Platzhalter-Strings enthält.</dd> + <dt><code>subst1</code> ... <code>substN</code></dt> + <dd>JavaScript Objekte, die in die Platzhalter-Strings in <code>msg</code> eingesetzt werden. Dadurch kann das Ausgabeformat der Meldung zusätzlich beeinflusst werden.</dd> +</dl> + +<p>Sie <a href="/en-US/docs/Web/API/console#Outputting_text_to_the_console">Textausgabe in der Konsole</a> in der Dokumentation von {{domxref("console")}} für weitere Details.</p> + +<h2 id="Spekifikationen">Spekifikationen</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("Console API", "#consolewarnobject--object-", "console.warn()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilitä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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>8</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Substitution strings</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("38.0")}}</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>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Substitution strings</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> + <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> +</ul> diff --git a/files/de/web/api/crypto/index.html b/files/de/web/api/crypto/index.html new file mode 100644 index 0000000000..0bf9eb23fc --- /dev/null +++ b/files/de/web/api/crypto/index.html @@ -0,0 +1,68 @@ +--- +title: Crypto +slug: Web/API/Crypto +tags: + - API + - Interface + - Referenz + - Schnittstelle + - Web Crypto API +translation_of: Web/API/Crypto +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p>Die <code><strong>Crypto</strong></code>-Schnittstelle bietet grundlegende kryptographische Funktionen, die im aktuellen Kontext verfügbar sind. Sie ermöglicht den Zugriff auf kryptographische Primitive wie z.B. einen verschlüsselungstechnisch starken Zufallszahlengenerator.</p> + +<p>Ein Objekt mit dieser Schnittstelle ist im Web-Kontext über die Eigenschaft {{domxref("Window.crypto")}} verfügbar.</p> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<p><em>Diese Schnittstelle implementiert Eigenschaften, die unter {{domxref("RandomSource")}} definiert sind.</em></p> + +<dl> + <dt>{{domxref("Crypto.subtle")}} {{readOnlyInline}}</dt> + <dd>Gibt ein {{domxref("SubtleCrypto")}}-Objekt zurück, das Zugriff auf einfache kryptographische Methoden wie Hash-Funktionen, Signierung, Ver- und Entschlüsselung ermöglicht.</dd> + <dt> </dt> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<p><em>Diese Schnittstelle implementiert Methoden, die unter {{domxref("RandomSource")}} beschrieben sind.</em></p> + +<dl> + <dt>{{domxref("Crypto.getRandomValues()")}}</dt> + <dd>Füllt das übergebene {{ jsxref("TypedArray") }} mit kryptographisch sinnvollen Zufallswerten.</dd> +</dl> + +<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("Web Crypto API", "#crypto-interface", "Crypto")}}</td> + <td>{{Spec2("Web Crypto API")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div> + + +<p>{{Compat("api.Crypto")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> +</ul> diff --git a/files/de/web/api/css/escape/index.html b/files/de/web/api/css/escape/index.html new file mode 100644 index 0000000000..904da32560 --- /dev/null +++ b/files/de/web/api/css/escape/index.html @@ -0,0 +1,79 @@ +--- +title: CSS.escape() +slug: Web/API/CSS/escape +tags: + - API + - CSS + - CSSOM + - Méthode + - Referenz + - Statisch + - escape() + - maskieren +translation_of: Web/API/CSS/escape +--- +<p>{{APIRef("CSSOM")}}{{SeeCompatTable}}</p> + +<p>Die statische Methode <code><strong>CSS.escape()</strong></code><strong> </strong>gibt ein {{DOMxRef("CSSOMString")}} zurück, das die maskierte Zeichenfolge des übergebenen String Parameters enthält, hauptsächlich zur Verwendung als Teil eines CSS Selektors.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><var>escapedStr</var> = CSS.escape(<var>str</var>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><em>str</em></dt> + <dd>Die zu maskierende Zeichenfolge {{DOMxRef("CSSOMString")}}.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Grundlegende_Ergebnisse"><span class="tlid-translation translation" lang="de"><span title="">Grundlegende Ergebnisse</span></span></h3> + +<pre class="brush: js notranslate">CSS.escape(".foo#bar") // "\.foo\#bar" +CSS.escape("()[]{}") // "\(\)\[\]\\{\\}" +CSS.escape('--a') // "--a" +CSS.escape(0) // "\30 ", the Unicode code point of '0' is 30 +CSS.escape('\0') // "\ufffd", the Unicode REPLACEMENT CHARACTER</pre> + +<h3 id="Verwendung_im_Kontext">Verwendung im Kontext</h3> + +<p>Um einen String als Teil eines Selektors zu maskieren kann die <code>escape()</code> Methode verwendet werden:</p> + +<pre class="brush: js; notranslate">var element = document.querySelector('#' + CSS.escape(id) + ' > img');</pre> + +<p>Die <code>escape()</code> Methode kann auch verwendet werden um Strings zu maskieren. Die Maskierung wird dabei auf Zeichen angewendet, die streng genommen nicht maskiert werden müssen.</p> + +<pre class="brush: js; notranslate">var element = document.querySelector('a[href="#' + CSS.escape(fragment) + '"]');</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('CSSOM', '#the-css.escape()-method', 'CSS.escape()')}}</td> + <td>{{Spec2('CSSOM')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.CSS.escape")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Das {{DOMxRef("CSS")}} Interface das die statischen Methoden beinhaltet.</li> + <li><a href="https://github.com/mathiasbynens/CSS.escape/blob/master/css.escape.js">Ein Polyfill für CSS.escape</a></li> +</ul> diff --git a/files/de/web/api/css/index.html b/files/de/web/api/css/index.html new file mode 100644 index 0000000000..fe659bba03 --- /dev/null +++ b/files/de/web/api/css/index.html @@ -0,0 +1,90 @@ +--- +title: CSS +slug: Web/API/CSS +tags: + - API + - CSSOM + - Interface + - NeedsTranslation + - Painting + - Reference + - TopicStub +translation_of: Web/API/CSS +--- +<div>{{APIRef("CSSOM")}}</div> + +<p>The <code><strong>CSS</strong></code> interface holds useful CSS-related methods. No objects with this interface are implemented: it contains only static methods and is therefore a utilitarian interface.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>The CSS interface is a utility interface and no object of this type can be created: only static properties are defined on it.</em></p> + +<h3 id="Static_properties">Static properties</h3> + +<dl> + <dt>{{DOMxRef("CSS.paintWorklet")}} {{Experimental_Inline}}{{SecureContext_Inline}}</dt> + <dd>Provides access to the Worklet responsible for all the classes related to painting.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>The CSS interface is a utility interface and no object of this type can be created: only static methods are defined on it.</em></p> + +<h3 id="Static_methods">Static methods</h3> + +<p><em>No inherited static methods</em>.</p> + +<dl> + <dt>{{DOMxRef("CSS.registerProperty()")}}</dt> + <dd>Registers {{cssxref('--*', 'custom properties')}}, allowing for property type checking, default values, and properties that do or do not inherit their value.</dd> + <dt>{{DOMxRef("CSS.supports()")}}</dt> + <dd>Returns a {{JSxRef("Boolean")}} indicating if the pair <em>property-value</em>, or the condition, given in parameter is supported.</dd> + <dt>{{DOMxRef("CSS.escape()")}}</dt> + <dd>Can be used to escape a string mostly for use as part of a CSS selector.</dd> + <dt>{{DOMxRef("CSS.factory_functions", 'CSS factory functions')}}</dt> + <dd>Can be used to return a new <code><a href="/en-US/docs/Web/API/CSSUnitValue">CSSUnitValue</a></code> with a value of the parameter number of the units of the name of the factory function method used.</dd> + <dd> + <pre class="notranslate">CSS.em(3) // CSSUnitValue {value: 3, unit: "em"}</pre> + </dd> +</dl> + +<h2 id="Specifications">Specifications</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('CSS Painting API','#dom-css-paintworklet','paintWorklet')}}</td> + <td>{{Spec2('CSS Painting API')}}</td> + <td>Adds the <code>paintWorklet</code> static property.</td> + </tr> + <tr> + <td>{{SpecName('CSSOM', '#the-css.escape()-method', 'CSS')}}</td> + <td>{{Spec2('CSSOM')}}</td> + <td>Adds the <code>escape()</code> static method.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.CSS", 1)}}</p> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> +</ul> diff --git a/files/de/web/api/css_painting_api/guide/index.html b/files/de/web/api/css_painting_api/guide/index.html new file mode 100644 index 0000000000..536040de4e --- /dev/null +++ b/files/de/web/api/css_painting_api/guide/index.html @@ -0,0 +1,534 @@ +--- +title: Die CSS Painting API verwenden +slug: Web/API/CSS_Painting_API/Guide +translation_of: Web/API/CSS_Painting_API/Guide +--- +<p>Die CSS Paint API wurde entworfen, um Entwicklern zu ermöglichen, programmatisch Bilder festzulegen, die überall dort verwendet werden können, wo ein CSS Bild aufgerufen werden kann, wie in CSS <code><a href="/en-US/docs/Web/CSS/background-image">background-image</a></code>, <code><a href="/en-US/docs/Web/CSS/border-image-source">border-image</a></code>, <code><a href="/en-US/docs/Web/CSS/mask-image">mask-image</a></code>, etc.</p> + +<p>Um programmatisch ein Bild zu erstellen, das von einem CSS stylesheet verwendet wird, müssen wir folgende Schritte abarbeiten:</p> + +<ol> + <li>Lege ein "paint worklet" mit der <code><a href="/en-US/docs/Web/API/PaintWorklet/registerPaint">registerPaint()</a></code> Funktion fest.</li> + <li>Melde das worklet an.</li> + <li>Binde mit Include die <code>{{cssxref('paint()','paint()')}}</code> CSS Funktion ein.</li> +</ol> + +<p>Zum besseren Verständnis dieser einzelnen Schritte werden wir eine halbhohe farbliche Markierung wie in folgender Titelzeile erstellen:</p> + +<p><img alt="Text reading 'My Cool Header' with a solid yellow background image block on the bottom left two thirds of the header" src="https://mdn.mozillademos.org/files/16774/mycoolheader.png" style="height: 54px; width: 239px;"></p> + +<h2 id="CSS_paint_worklet">CSS paint worklet</h2> + +<p>In einer externen Skript-Datei nutzen wir die <code><a href="/en-US/docs/Web/API/PaintWorklet/registerPaint">registerPaint()</a></code> Funktion, um unser <a href="/en-US/docs/Web/API/PaintWorklet">CSS Paint worklet</a> zu benennen. Diese benötigt zwei Parameter. Der erste ist der Name, den wir dem worklet geben — diesen Namen werden wir als einen Parameter von der paint() Funktion verwenden, wenn wir das Bild einem Element hinzufügen wollen. Der zweite Parameter ist die Klasse, die die ganze Magie ausführt: die die Kontext-Entscheidungen festlegt und natürlich das Bild, das wir auf unsere Oberfläche malen wollen.</p> + +<pre class="brush: js notranslate">registerPaint('headerHighlight', class { + + /* + definiere dies, wenn die Alphatransparenz erlaubt ist; + alpha ist standardmäßig true; wenn auf false gesetzt, sind + alle Farben, die auf der Canvas genutzt werden, opak + */ + static get contextOptions() { + return { alpha: true }; + } + + /* + <strong>ctx</strong> ist der 2D Zeichen Kontext + eine Untermenge der <a href="/en-US/docs/Web/API/Canvas_API">HTML5 Canvas API</a>. + */ + paint(ctx) { + ctx.fillStyle = 'hsla(55, 90%, 60%, 1.0)'; + ctx.fillRect(0, 15, 200, 20); /* order: x, y, w, h */ + } +});</pre> + +<p>In diesem Klassenbeispiel haben wir die Umstände (options) eines einzelnen Kontexts mit der <code>contextOptions()</code> Funktion festgelegt: wir haben ein einfaches Objekt zurückgegeben, das aussagt, dass die Alphatransparenz erlaubt ist.</p> + +<p>Wir haben dann die <code>paint()</code> Funktion verwendet, um unser Objekt auf die Canvas zu zeichnen.</p> + +<p>Die <code>paint()</code> Funktion kann drei Parameter aufnehmen. Hier übergeben wir nur ein Argument: den Rendering Kontext (wir schauen uns das im weiteren Verlauf noch genauer an), der oftmals mit dem Variablennamen <code>ctx</code> bezeichnet wird. Der 2D Rendering Context ist eine Untermenge der <a href="/en-US/docs/Web/API/Canvas_API">HTML5 Canvas API</a>; die Version, die für CSS Houdini verfügbar is (auch <code>PaintRenderingContext2D genannt</code>), ist eine weitere Untermenge, die über die meisten Zusätze verfügt, die auch in der Canvas API vorhanden sind, mit Ausnahme von <code>CanvasImageData</code>, <code>CanvasUserInterface</code>, <code>CanvasText</code>, und <code>CanvasTextDrawingStyles</code> APIs.</p> + +<p>Wir weisen mit <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> den Wert <code>hsla(55, 90%, 60%, 1.0)</code> zu, ein blasses Gelb, und rufen dann <code>fillRect()</code> auf, um ein farbiges Rechteck zu erstellen. Die Parameter von <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect">fillRect()</a></code> sind, in der Abfolge, x-Achse und y-Achse (und zugleich die feste Koordinate), Breite und Höhe. <code>fillRect(0, 15, 200, 20)</code> erstellt ein Rechteck von 200 Einheiten Breite und 20 Einheiten Höhe, die 0 Einheiten von der linken und 15 Einheiten von der oberen Seite der Box entfernt sind, in der das Rechteck eingezeichnet wird.</p> + +<p>Wir können die CSS <code><a href="/en-US/docs/Web/CSS/background-size">background-size</a></code> and <code><a href="/en-US/docs/Web/CSS/background-position">background-position</a></code> Eigenschaften (properties) verwenden, um das Hintergrundbild in seiner Größe und Position zu verändern, aber die oben festgelegten Werte sind die Standardwerte der gelben Box, die wir in unserem paint worklet definiert haben.</p> + +<p>Wir haben dieses Beispiel einfach gehalten. Für mehr Möglichkeiten werfen Sie bitte einen Blick in die <a href="/en-US/docs/Web/HTML/Element/canvas">Canvas Dokumentation</a>. Wir werden weiter unten im Tutorial auch komplexere Beispiele nutzen.</p> + +<h2 id="Das_paint_worklet_verwenden">Das paint worklet verwenden</h2> + +<p>Um das paint worklet zu verwenden, müssen wir dies mit <code><a href="/en-US/docs/Web/API/Worklet/addModule">addModule()</a></code> anmelden und in unsere CSS einfügen, wobei wir sicherstellen müssen, dass der CSS Selektor zu einem DOM Knoten in unserem HTML-Code passt.</p> + +<h3 id="Das_worklet_anmelden">Das worklet anmelden</h3> + +<p>Wir haben unser paint worklet in einer externen script-Datei erstellt, wie oben geziegt. Wir müssen jetzt unser <a href="/en-US/docs/Web/API/PaintWorklet">worklet</a> in unserer Hauptanwendung anmelden:</p> + +<pre class="brush: js notranslate">CSS.paintWorklet.addModule('nameOfPaintWorkletFile.js');</pre> + +<p>Dazu benutzen wir die von Paint Worklet bereitgestellte Funktion <code>addModule()</code> in einem <code><script></code>-Block innerhalb unseres HTML oder in einer externen JavaScript-Datei, die dann seinerseits von der Hauptanwendung aufgerufen werden muss.</p> + +<p>In unserem Beispiel ist das worklet auf GitHub gespeichert.</p> + +<div id="paintapi"> +<pre class="brush: js notranslate">CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/01partOne/header-highlight.js');</pre> + +<h3 id="Auf_das_paint_worklet_in_CSS_verweisen">Auf das paint worklet in CSS verweisen</h3> + +<p>Haben wir das paint worklet angemeldet, können wir es in CSS benutzen. Dabei kann man die Funktion <code>paint()</code> so benutzen, wie man auch jeden anderen <code><image></code> Typ verwendet. In <code>paint()</code> wird als Parameter derselbe Name des worklets übergeben, den wir bei <code>registerPaint()</code> eingetragen haben.</p> + +<pre class="brush: css notranslate">.fancy { + background-image: paint(headerHighlight); +}</pre> + +<h3 id="Alles_zusammensetzen">Alles zusammensetzen</h3> + +<p>Nun können wir die fancy-Klasse aus CSS einem HTML-Element ganz normal in der Property class übergeben, um die gelbe Box als Hintergrundbild erscheinen zu lassen:</p> + +<pre class="brush: html notranslate"><h1 class="fancy">My Cool Header</h1></pre> + +<p>Das folgende Beispiel wird wie das obige Beispiel in einem <a href="/Web/API/CSS/paintWorklet#Browser_compatibility">Browsers, der die CSS Painting API unterstützt</a>, aussehen.</p> +</div> + +<p>{{EmbedLiveSample("paintapi", 120, 120)}}</p> + +<p>Während Sie vom HTML aus das worklet nicht mehr (innerlich) verändern können, können Sie trotzdem mit CSS über <code>background-size</code> und <code>background-position</code> Größe und Position des Bildes anpassen.</p> + +<h2 id="PaintSize">PaintSize</h2> + +<p>Im Beispiel oben haben wir eine Box aus 20x200 Einheiten erstellt, die 15 Einheiten vom oberen Rand der umgebenen Box - eines HTML-Elements - entfernt liegt, gleichgültig, welche Größe die umhüllende Box selbst hat. Ist der Text klein, sieht die Box wie eine große Unterstreichung aus, ist er groß und lang, ist die Box gleich einem Balken unter den ersten Buchstaben. Günstiger wäre aber, wenn das Hintergrundbild relativ zur Größe des umhüllenden Elementes wäre. Dafür können wir die <code>paintSize</code> Property, bzw. <code>size.width</code> und <code>size.height</code>, verwenden. Diese übernimmt die Breite und Höhe des umliegenden Elements und rechnet die Größe des worklets dafür aus.</p> + +<p><img alt="The background is 50% of the height and 60% of the width of the element" src="https://mdn.mozillademos.org/files/16783/mycoolheadersized.png" style="height: 148px; width: 554px;"></p> + +<p>In diesem Beispiel-Bild ist der Hintergrund proportional zu der Größe des umhüllenden Elements. Das dritte Beispiel hat als Breite <code>width: 50%</code>; das Hintergrundbild passt sich in den ersten beiden Beispielen der Größe der Schrift an und damit der Höhe des Blocks, im dritten Beispiel sieht man aber auch deutlich, dass die Breite ebenfalls passend gemacht wird.</p> + +<p>Der Code, mit dem das möglich ist, sieht dann folgendermaßen aus:</p> + +<pre class="brush: js notranslate">registerPaint('headerHighlight', class { + + static get contextOptions() { + return { alpha: true }; + } + + /* + <strong>ctx</strong> is the 2D drawing context + <strong>size</strong> is the paintSize, the dimensions (height and width) of the box being painted + */ + + paint(ctx, size) { + ctx.fillStyle = 'hsla(55, 90%, 60%, 1.0)'; + ctx.fillRect( 0, size.height / 3, size.width * 0.4, size.height * 0.6 ); + } +});</pre> + +<p>Der Code unterscheidet sich an zwei Stellen vom ersten Beispiel:</p> + +<ol> + <li>Wir haben ein zweites Argument in <code>paint()</code> eingefügt, die Größe <code>size</code>.</li> + <li>Wir berechnen die Dimensionen und die Position unseres Rechtecks relativ zu dieser Größe <code>size</code> und nicht mehr mit absoluten Werten, mit Hilfe der Properties <code>.width</code> und <code>.height</code>.</li> +</ol> + +<p>Unsere HTML-Elemente haben nur ein Hintergrundbild, welches sich in Größe und Breite ändert.</p> + +<div class="hidden" id="example2"> +<pre class="brush: js notranslate">CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/02partTwo/header-highlight.js');</pre> + +<pre class="brush: css notranslate">.fancy { + background-image: paint(headerHighlight); +} +.half { + width: 50%; +}</pre> + +<pre class="brush: html notranslate"><h1 class="fancy">Largest Header</h1> +<h6 class="fancy">Smallest Header</h6> +<h3 class="fancy half">50% width header</h3> +</pre> +</div> + +<p>Wenn du mit diesem worklet herumspielst, kannst du dessen Größe über die Eigenschaften <code>font-size</code> und <code>width</code> des umhüllenden Elements ändern.</p> + +<p>In Browsern, die CSS Paint API unterstützen, erscheint das unten aufgeführte Beispielt wie das Bild oben.</p> + +<p>{{EmbedLiveSample("example2", 300, 300)}}</p> + +<h2 id="Properties_anpassen">Properties anpassen</h2> + +<p>Zusätzlich zu der Größe des Elements kann ein worklet auch auf andere CSS-Eigenschaften zugreifen.</p> + +<pre class="brush: js notranslate">registerPaint('cssPaintFunctionName', class { + static get inputProperties() { return ['PropertyName1', '--customPropertyName2']; } + static get inputArguments() { return ['<color>']; } + static get contextOptions() { return {alpha: true}; } + + paint(drawingContext, elementSize, styleMap) { + // Paint code goes here. + } +}); +</pre> + +<p>Die drei Parameter der Funktion <code>paint()</code> enthalten den Zeichenkontext, die Größe des Malgrundes (meist des umgebenden Elements) und Eigenschaften (properties). Um auf die Eigenschaften zugreifen zu können, muss man die statische Methode <code>inputProperties()</code> aufrufen, die den Zugriff auf die CSS properties ermöglicht, sowohl der regulären als auch <a href="/en-US/docs/Web/CSS/CSS_Variables">angepasster Eigenschaften</a>. Diese liefert ein <code><a href="/en-US/docs/Glossary/array">array</a></code> mit den Namen der Eigenschaften zurück (wir werfen im letzten Abschnitt einen näheren Blick auf <code>inputArguments).</code></p> + +<h3 id="Example">Example</h3> + +<div id="example3"> +<p>Legen wir dazu eine Liste an, deren Hintergrundbild zwischen drei verschiedenen Farben und drei unterschiedlichen Breiten wechselt.</p> + +<p><img alt="The width and color of the background image changes based on the custom properties" src="https://mdn.mozillademos.org/files/16784/boxbg.png" style="height: 255px; width: 739px;"></p> + +<p>In unserer CSS weisen wir verschiedene Farben und eine Anpassung der Breite des worklets über die <code>--boxColor</code> und <code>--widthSubtractor</code> Eigenschaften zu.</p> + +<pre class="brush: html; hidden notranslate"><ul> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + <li>item 5</li> + <li>item 6</li> + <li>item 7</li> + <li>item 8</li> + <li>item 9</li> + <li>item 10</li> + <li>item 11</li> + <li>item 12</li> + <li>item 13</li> + <li>item 14</li> + <li>item 15</li> + <li>item 16</li> + <li>item 17</li> + <li>item</li> +</ul> +</pre> + +<pre class="brush: js; hidden notranslate">CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/boxbg.js');</pre> + +<pre class="brush: css notranslate">li { + background-image: paint(boxbg); + --boxColor: hsla(55, 90%, 60%, 1.0); +} + +li:nth-of-type(3n) { + --boxColor: hsla(155, 90%, 60%, 1.0); + --widthSubtractor: 20; +} + +li:nth-of-type(3n+1) { + --boxColor: hsla(255, 90%, 60%, 1.0); + --widthSubtractor: 40; +}</pre> +</div> + +<p>Beachte, dass wir im CSS Eigenschaften verwenden, die nicht zum normalen CSS gehören, sondern von uns selbst definiert worden sind: <code>boxColor</code> und <code>widthSubtractor</code>. Auf diese können wir im worklet zugreifen, wenn wir diese über <code>inputProperties()</code> zugänglich machen.</p> + +<pre class="brush: js notranslate">registerPaint('boxbg', class { + + static get contextOptions() { return {alpha: true}; } + + /* + use this function to retrieve any custom properties (or regular properties, such as 'height') + defined for the element, return them in the specified array + */ + <strong>static get inputProperties() { return ['--boxColor', '--widthSubtractor']; }</strong> + + paint(ctx, size, props) { + /* + ctx -> drawing context + size -> paintSize: width and height + props -> properties: get() method + */ + + ctx.fillStyle = <strong>props.get('--boxColor')</strong>; + ctx.fillRect(0, size.height/3, size.width*0.4 - <strong>props.get('--widthSubtractor')</strong>, size.height*0.6); + } +});</pre> + +<p>Wir haben die Methode <code>inputProperties()</code> in der <code>registerPaint()</code> Klasse verwendet, um die Werte der beiden von uns definierten Eigenschaften zu erhalten, die das worklet <code>boxbg</code> anwenden. Mit <code>inputProperties()</code> legen wir uns einen Array an, der normale CSS-Eigenschaften wie auch selbst definierte erhalten kann.</p> + +<p>In unserem <code><script></code>-Block melden wir das worklet an:</p> + +<div id="paintapi"> +<pre class="brush: js notranslate">CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklet/boxbg.js');</pre> +</div> + +<p>{{EmbedLiveSample("example3", 300, 300)}}</p> + +<p>In der Anwendung können wir zwar nicht das Script des worklets verändern, aber alle Werte, die über CSS übergeben werden und die vom worklet verarbeitet werden.</p> + +<h2 id="Komplexität_hinzufügen">Komplexität hinzufügen</h2> + +<p>Das obenstehende Beispiel ist nicht sonderlich aufregend, da man es ebenso mit CSS in wenigen Schritten und ohne den Aufwand eines worklets programmieren kann, etwa, indem man <a href="/en-US/docs/Learn/CSS/Howto/Generated_content">dekorative Inhalte</a> mit <code><a href="/en-US/docs/Web/CSS/::before">::before</a> hinzufügt</code> oder mit <code>background: linear-gradient(yellow, yellow) 0 15px / 200px 20px no-repeat;</code> - Was die CSS Painting API so interessant und machtvoll macht, ist die Möglichkeit, komplexe Bilder zu erstellen und Variablen zu übergeben.</p> + +<p>Werfen wir einen Blick auf ein komplexeres Beispiel.</p> + +<pre class="brush: js notranslate">registerPaint('headerHighlight', class { + static get inputProperties() { return ['--highColour']; } + static get contextOptions() { return {alpha: true}; } + + paint(ctx, size, props) { + + /* set where to start the highlight & dimensions */ + const x = 0; + const y = size.height * 0.3; + const blockWidth = size.width * 0.33; + const highlightHeight = size.height * 0.85; + const color = props.get('--highColour'); + + ctx.fillStyle = color; + + ctx.beginPath(); + ctx.moveTo( x, y ); + ctx.lineTo( blockWidth, y ); + ctx.lineTo( blockWidth + highlightHeight, highlightHeight ); + ctx.lineTo( x, highlightHeight ); + ctx.lineTo( x, y ); + ctx.closePath(); + ctx.fill(); + + /* create the dashes */ + for (let i = 0; i < 4; i++) { + let start = i * 2; + ctx.beginPath(); + ctx.moveTo( (blockWidth) + (start * 10) + 10, y ); + ctx.lineTo( (blockWidth) + (start * 10) + 20, y ); + ctx.lineTo( (blockWidth) + (start * 10) + 20 + (highlightHeight), highlightHeight ); + ctx.lineTo( (blockWidth) + (start * 10) + 10 + (highlightHeight), highlightHeight ); + ctx.lineTo( (blockWidth) + (start * 10) + 10, y ); + ctx.closePath(); + ctx.fill(); + } + } // paint +});</pre> + +<div id="example4"> +<p>Wir können dann einige Zeilen HTML mit der entsprechenden Klasse aus CSS schreiben:</p> + +<pre class="brush: html notranslate"><h1 class="fancy">Largest Header</h1> +<h3 class="fancy">Medium size header</h3> +<h6 class="fancy">Smallest Header</h6></pre> + +<p>Dann geben wir den einzelnen HTML-Elementen je einen verschiedenen Wert für die <a href="/en-US/docs/Web/CSS/CSS_Variables">von uns definierte Eigenschaft</a> <code>--highColour:</code></p> + +<pre class="brush: css notranslate">.fancy { + background-image: paint(headerHighlight); +} +h1 { --highColour: hsla(155, 90%, 60%, 0.7); } +h3 { --highColour: hsla(255, 90%, 60%, 0.5); } +h6 { --highColour: hsla(355, 90%, 60%, 0.3); }</pre> + +<p>Und wir melden das worklet an:</p> + +<pre class="brush: js notranslate">CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/03partThree/header-highlight.js');</pre> + +<p>{{EmbedLiveSample("example4", 300, 300)}}</p> + +<p>Während man das worklet selbst nicht ändern kann, kann man mit CSS und HTML jedoch herumspielen. Vielleicht probieren Sie mal <code><a href="/en-US/docs/Web/CSS/float">float</a></code> und <code><a href="/en-US/docs/Web/CSS/clear">clear</a></code> bei den Titelzeilen <code><h1></code>, <code><h3></code> und <code><h6></code> aus.</p> + +<p>Man kann natürlich auch Hintergrundbilder ohne CSS paint API erstellen. Das kann allerdings zu einem großen Mehraufwand und wesentlich mehr Code führen. Mit CSS Paint API kann ein worklet immer wieder verwendet werden und über eine Parameter-Übergabe rasch angepasst werden.</p> +</div> + +<h2 id="Parameter_übergeben">Parameter übergeben</h2> + +<p>Mit der CSS Paint API können wir nicht nur auf selbstdefinierte Eigenschaften zugreifen, sondern auch über die CSS-Funktion <code>paint()</code> auch Parameter übergeben.</p> + +<p>Nehmen wir an, wir wollen ab und zu den Hintergrund nur mit einem Strich statt vollständig füllen. Dafür können wir ein Extra-Argument übergeben, welches dann im worklet abgefragt und entsprechend verarbeitet wird.</p> + +<pre class="brush: css notranslate">li { + background-image: paint(hollowHighlights, stroke); +} +</pre> + +<p>Mit der Methode <code>inputArguments()</code> in der Klasse <code>registerPaint()</code> machen wir das zusätzliche Argument aus der CSS-Funktion <code>paint()</code> zugänglich:</p> + +<pre class="brush: js notranslate">static get inputArguments() { return ['*']; } +</pre> + +<p>Und wenn wir darauf zugreifen wollen:</p> + +<pre class="brush:js notranslate">paint(ctx, size, props, args) { + + // use our custom arguments + const hasStroke = args[0].toString(); + + // if stroke arg is 'stroke', don't fill + if (hasStroke === 'stroke') { + ctx.fillStyle = 'transparent'; + ctx.strokeStyle = colour; + } + ... +} +</pre> + +<p>Wir können auch mehr als ein Argument übergeben:</p> + +<pre class="brush: css notranslate">li { + background-image: paint(hollowHighlights, stroke, 10px); +} +</pre> + +<p>Wir können auch den Datentyp genau angeben. Wenn wir die Werte der Argumente mit <code>get</code> holen, fragen wir dann speziell nach einer <code><length></code> Einheit.</p> + +<pre class="brush: js notranslate">static get inputArguments() { return ['*', '<length>']; }</pre> + +<p>In diesem Fall haben wir spezifisch nach einem <code><length></code> Attribut gefragt. Das erste Element des Arrays wird dann als <code><a href="/en-US/docs/Web/API/CSSUnparsedValue">CSSUnparsedValue</a></code>, das zweite als <code><a href="/en-US/docs/Web/API/CSSStyleValue">CSSStyleValue</a></code> übergeben.</p> + +<p>Wenn das selbstdefinierte Argument ein CSS-Wert ist, zum Beispiel eine Maßeinheit, können wir die Typed OM CSSStyleValue Klasse (und deren Unterklassen) aufrufen, indem wir das Schlüsselwort für diesen Typen in der Methode <code>inputArguments()</code> nutzen.</p> + +<p>Fügen wir einfach ein weiteres Argument für die Pixel-Breite unserer Hintergrundlinie hinzu:</p> + +<pre class="brush: css notranslate">li { + background-image: paint(hollowHighlights, stroke, 10px); +} +</pre> + +<p>Wenn wir mit <code>get</code> unsere Argumentenliste holen, können wir direkt nach der <code><length></code> Einheit fragen.</p> + +<pre class="brush: js notranslate">static get inputArguments() { return ['*', '<length>']; } +</pre> + +<p>Nun können wir Typen und Werte der Properties übergeben, was bedeutet: wir können die Anzahl der Pixel und den Typ Nummer direkt verwenden (zugegeben nimmt <code>ctx.lineWidth</code> einen Float als Wert und eigentlich keinen Wert mit Längeneinheiten, aber um des Beispiels willen ...).</p> + +<pre class="brush: js notranslate">paint(ctx, size, props, args) { + + const strokeWidth = args[1]; + + if (strokeWidth.unit === 'px') { + ctx.lineWidth = strokeWidth.value; + } else { + ctx.lineWidth = 1.0; + } + + ... +} +</pre> + +<p>Es ist wichtig, hier den Unterschied zwischen selbsterstellten Properties und den Argumenten zu erwähnen. Selbsterstellte Properties (und auch alle Properties für einen bestimmten Selektor) sind global - sie können überall in unserem CSS und JS verwendet werden.</p> + +<p>Wenn Sie zum Beispiel ein <code>--mainColor</code> definiert haben, der dazu dient, eine Farbe mit der Funktion <code>paint()</code> zu setzen, kann dieser auch dazu verwendet werden, anderswo im CSS Farben zu setzen. Wenn Sie diesen Wert speziell für paint ändern wollen, kann sich das als schwierig erweisen. Hier kommt dann das angepasste Argument ins Spiel. Argumente dienen dazu, das zu kontrollieren, was man aktuell zeichnet, während Properties dazu dienen, den Stil zu kontrollieren.</p> + +<p><img alt="The list items have a background image that is either pink, purple or green, with different stroke widths, and the green one being filled." src="https://mdn.mozillademos.org/files/16786/hollowfilled.png" style="height: 292px; width: 327px;"></p> + +<p>Nun können wir die Vorteile dieser API sehen: wir können zahlreiche selbsterstellte Properties und Argumente dafür verwenden, um wiederverwendbare und vollkommen kontrollierbare Styling-Funktionen zu erstellen.</p> + +<pre class="brush: js notranslate">registerPaint('hollowHighlights', class { + + static get inputProperties() { return ['--boxColor']; } + // Input arguments that can be passed to the `paint` function + static get inputArguments() { return ['*','']; } + + static get contextOptions() { return {alpha: true}; } + + paint(ctx, size, props, args) { + // ctx -> drawing context + // size -> size of the box being painted + // props -> list of custom properties available to the element + // args -> list of arguments set when calling the paint() function in the css + + // where to start the highlight & dimensions + const x = 0; + const y = size.height * 0.3; + const blockWidth = size.width * 0.33; + const blockHeight = size.height * 0.85; + + // the values passed in the paint() function in the CSS + const colour = props.get( '--boxColor' ); + const strokeType = args[0].toString(); + const strokeWidth = parseInt(args[1]); + + + // set the stroke width + if ( strokeWidth ) { + ctx.lineWidth = strokeWidth; + } else { + ctx.lineWidth = 1.0; + } + // set the fill type + if ( strokeType === 'stroke' ) { + ctx.fillStyle = 'transparent'; + ctx.strokeStyle = colour; + } else if ( strokeType === 'filled' ) { + ctx.fillStyle = colour; + ctx.strokeStyle = colour; + } else { + ctx.fillStyle = 'none'; + ctx.strokeStyle = 'none'; + } + + // block + ctx.beginPath(); + ctx.moveTo( x, y ); + ctx.lineTo( blockWidth, y ); + ctx.lineTo( blockWidth + blockHeight, blockHeight ); + ctx.lineTo( x, blockHeight ); + ctx.lineTo( x, y ); + ctx.closePath(); + ctx.fill(); + ctx.stroke(); + // dashes + for (let i = 0; i < 4; i++) { + let start = i * 2; + ctx.beginPath(); + ctx.moveTo( blockWidth + (start * 10) + 10, y); + ctx.lineTo( blockWidth + (start * 10) + 20, y); + ctx.lineTo( blockWidth + (start * 10) + 20 + blockHeight, blockHeight); + ctx.lineTo( blockWidth + (start * 10) + 10 + blockHeight, blockHeight); + ctx.lineTo( blockWidth + (start * 10) + 10, y); + ctx.closePath(); + ctx.fill(); + ctx.stroke(); + } + + } // paint +}); +</pre> + +<p>Wir können verschiedene Farbe und Strichstärken setzen und entscheiden, ob das Hintergrundbild gefüllt oder leer ist:</p> + +<div id="example5"> +<pre class="brush: css notranslate">li { + --boxColor: hsla(155, 90%, 60%, 0.5); + background-image: paint(hollowHighlights, stroke, 5px); +} + +li:nth-of-type(3n) { + --boxColor: hsla(255, 90%, 60%, 0.5); + background-image: paint(hollowHighlights, filled, 3px); +} + +li:nth-of-type(3n+1) { + --boxColor: hsla(355, 90%, 60%, 0.5); + background-image: paint(hollowHighlights, stroke, 1px); +}</pre> + +<pre class="brush: html; hidden notranslate"><ul> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + <li>item 5</li> + <li>item 6</li> + <li>item 7</li> + <li>item 8</li> + <li>item 9</li> + <li>item 10</li> + <li>item 11</li> + <li>item 12</li> + <li>item 13</li> + <li>item 14</li> + <li>item 15</li> + <li>item 16</li> + <li>item 17</li> + <li>item</li> +</ul> +</pre> + +<p>In unserem <code><script></code>-Block melden wir das Worklet an:</p> + +<pre class="brush: js notranslate">CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hollow.js');</pre> +</div> + +<p>{{EmbedLiveSample("example5", 300, 300)}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/CSS_Painting_API">CSS Painting API </a></li> + <li><a href="/en-US/docs/Web/Houdini/CSS_Typed_OM">CSS Typed Object Model API</a></li> +</ul> diff --git a/files/de/web/api/css_painting_api/index.html b/files/de/web/api/css_painting_api/index.html new file mode 100644 index 0000000000..799979f66b --- /dev/null +++ b/files/de/web/api/css_painting_api/index.html @@ -0,0 +1,199 @@ +--- +title: CSS Painting API +slug: Web/API/CSS_Painting_API +tags: + - API + - CSS + - CSS Paint API + - Houdini + - NeedsTranslation + - Painting + - Reference + - TopicStub +translation_of: Web/API/CSS_Painting_API +--- +<div>{{DefaultAPISidebar("CSS Painting API")}}</div> + +<p>The CSS Painting API — part of the <a href="/en-US/docs/Web/Houdini">CSS Houdini</a> umbrella of APIs — allows developers to write JavaScript functions that can draw directly into an element's background, border, or content.</p> + +<h2 id="Concepts_and_usage">Concepts and usage</h2> + +<p>Essentially, the CSS Painting API contains functionality allowing developers to create custom values for {{cssxref('paint', 'paint()')}}, a CSS <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> function. You can then apply these values to properties like {{cssxref("background-image")}} to set complex custom backgrounds on an element.</p> + +<p>For example:</p> + +<pre class="brush: css notranslate">aside { + background-image: paint(myPaintedImage); +}</pre> + +<p>The API defines {{domxref('PaintWorklet')}}, a {{domxref('worklet')}} that can be used to programmatically generate an image that responds to computed style changes. To find out more about how this is used, consult <a href="/en-US/docs/Web/API/CSS_Painting_API/Guide">Using the CSS Painting API</a>.</p> + +<h2 id="Interfaces">Interfaces</h2> + +<dl> + <dt>{{domxref('PaintWorklet')}}</dt> + <dd>Programmatically generates an image where a CSS property expects a file. Access this interface through <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS/paintWorklet" title="paintWorklet is a static, read-only property of the CSS interface that provides access to the PaintWorklet, which programmatically generates an image where a CSS property expects a file. "><code>CSS.paintWorklet</code></a>.</dd> + <dt>{{domxref('PaintWorkletGlobalScope')}}</dt> + <dd>The global execution context of the <code>paintWorklet</code>.</dd> + <dt>{{domxref('PaintRenderingContext2D')}}</dt> + <dd> + <p>Implements a subset of the <a href="/en-US/docs/Web/API/CanvasRenderingContext2D">CanvasRenderingContext2D API</a>. It has an output bitmap that is the size of the object it is rendering to.</p> + </dd> + <dt>{{domxref('PaintSize')}}</dt> + <dd>Returns the read-only values of the output bitmap's width and height.</dd> +</dl> + +<h2 id="Dictionaries">Dictionaries</h2> + +<dl> + <dt>{{domxref('PaintRenderingContext2DSettings')}}</dt> + <dd>A dictionary providing a subset of <a href="/en-US/docs/Web/API/CanvasRenderingContext2D">CanvasRenderingContext2D</a> settings.</dd> +</dl> + +<h2 id="Examples" name="Examples">Examples</h2> + +<p>To draw directly into an element's background using JavaScript in our CSS, we define a paint worklet using the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/PaintWorklet/registerPaint">registerPaint()</a></code> function, tell the document to include the worklet using the paintWorklet addModule() method, then include the image we created using the CSS <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/paint()" title="The documentation about this has not yet been written; please consider contributing!"><code>paint()</code></a></code> function.</p> + +<p>We create our PaintWorklet called 'hollowHighlights' using the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/PaintWorklet/registerPaint">registerPaint()</a></code> function:</p> + +<pre class="brush: js notranslate">registerPaint('hollowHighlights', class { + + static get inputProperties() { return ['--boxColor']; } + + static get inputArguments() { return ['*','<length>']; } + + static get contextOptions() { return {alpha: true}; } + + paint(ctx, size, props, args) { + const x = 0; + const y = size.height * 0.3; + const blockWidth = size.width * 0.33; + const blockHeight = size.height * 0.85; + + const theColor = props.get( '--boxColor' ); + const strokeType = args[0].toString(); + const strokeWidth = parseInt(args[1]); + + console.log(theColor); + + if ( strokeWidth ) { + ctx.lineWidth = strokeWidth; + } else { + ctx.lineWidth = 1.0; + } + + if ( strokeType === 'stroke' ) { + ctx.fillStyle = 'transparent'; + ctx.strokeStyle = theColor; + } else if ( strokeType === 'filled' ) { + ctx.fillStyle = theColor; + ctx.strokeStyle = theColor; + } else { + ctx.fillStyle = 'none'; + ctx.strokeStyle = 'none'; + } + + + ctx.beginPath(); + ctx.moveTo( x, y ); + ctx.lineTo( blockWidth, y ); + ctx.lineTo( blockWidth + blockHeight, blockHeight ); + ctx.lineTo( x, blockHeight ); + ctx.lineTo( x, y ); + ctx.closePath(); + ctx.fill(); + ctx.stroke(); + + for (let i = 0; i < 4; i++) { + let start = i * 2; + ctx.beginPath(); + ctx.moveTo( blockWidth + (start * 10) + 10, y); + ctx.lineTo( blockWidth + (start * 10) + 20, y); + ctx.lineTo( blockWidth + (start * 10) + 20 + blockHeight, blockHeight); + ctx.lineTo( blockWidth + (start * 10) + 10 + blockHeight, blockHeight); + ctx.lineTo( blockWidth + (start * 10) + 10, y); + ctx.closePath(); + ctx.fill(); + ctx.stroke(); + } + } +});</pre> + +<div id="hollowExample"> +<p>We then include the paintWorklet:</p> + +<pre class="brush: html hidden notranslate"><ul> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + <li>item 5</li> + <li>item 6</li> + <li>item 7</li> + <li>item 8</li> + <li>item 9</li> + <li>item 10</li> + <li>item 11</li> + <li>item 12</li> + <li>item 13</li> + <li>item 14</li> + <li>item 15</li> + <li>item 16</li> + <li>item 17</li> + <li>item 18</li> + <li>item 19</li> + <li>item 20</li> +</ul></pre> + +<pre class="brush: js notranslate"> CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js'); +</pre> + +<p>Then we can use the {{cssxref('<image>')}} with the CSS {{cssxref('paint()')}} function:</p> + +<pre class="brush: css notranslate">li { + --boxColor: hsla(55, 90%, 60%, 1.0); + background-image: paint(hollowHighlights, stroke, 2px); +} + +li:nth-of-type(3n) { + --boxColor: hsla(155, 90%, 60%, 1.0); + background-image: paint(hollowHighlights, filled, 3px); +} + +li:nth-of-type(3n+1) { + --boxColor: hsla(255, 90%, 60%, 1.0); + background-image: paint(hollowHighlights, stroke, 1px); +}</pre> +</div> +<p>We've included a custom property in the selector block defining a boxColor. Custom properties are accessible to the PaintWorklet.</p> + +<p>{{EmbedLiveSample("hollowExample", 300, 300)}}</p> + +<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('CSS Painting API')}}</td> + <td>{{Spec2('CSS Painting API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>See the browser compatibility data for each CSS Painting API Interfaces.</p> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Houdini/Learn/CSS_Painting_API">Using the CSS Painting API</a></li> + <li><a href="/en-US/docs/Web/CSS_Typed_OM">CSS Typed Object Model API</a></li> + <li><a href="/en-US/docs/Web/Houdini">CSS Houdini</a></li> +</ul> diff --git a/files/de/web/api/cssmediarule/index.html b/files/de/web/api/cssmediarule/index.html new file mode 100644 index 0000000000..cf00ea0100 --- /dev/null +++ b/files/de/web/api/cssmediarule/index.html @@ -0,0 +1,120 @@ +--- +title: CSSMediaRule +slug: Web/API/CSSMediaRule +tags: + - API + - CSSOM + - Referenz + - Schnittstelle +translation_of: Web/API/CSSMediaRule +--- +<p>{{ APIRef("CSSOM") }}</p> + +<p>Die <strong>CSSMediaRule</strong> ist eine Schnittstelle, die eine einzelne CSS-Regel darstellt. Sie implementiert die {{domxref("CSSConditionRule")}}-Schnittstelle und somit auch die {{domxref("CSSGroupingRule")}}- sowie die {{domxref("CSSRule")}}-Schnittstelle mit einem Typwert von <code>4</code> (<code>CSSRule.MEDIA_RULE</code>).</p> + +<h2 id="Syntax">Syntax</h2> + +<p>Die Syntax wird mittels der <a href="http://dev.w3.org/2006/webapi/WebIDL/" title="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL</a> definiert.</p> + +<pre>interface CSSMediaRule : CSSConditionRule { + readonly attribute MediaList media; +} +</pre> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<p>Als eine {{ domxref("CSSConditionRule") }}, und somit der {{domxref("CSSGroupingRule")}} und {{ domxref("CSSRule") }}, implementiert die <code>CSSMediaRule</code> auch gleichzeitig die Eigenschaften dieser Schnittstellen. Darüber hinaus hat sie die folgende spezielle Eigenschaft<code>:</code></p> + +<dl> + <dt>{{domxref("CSSMediaRule.media")}} {{readonlyinline()}}</dt> + <dd>Definiert {{domxref("MediaList")}}, welches das zugedachte Zielmedium für die Style-Informationen wiedergibt.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<p>Wie eine {{ domxref("CSSConditionRule") }} und daher eine {{domxref("CSSGroupingRule")}} als auch eine {{ domxref("CSSRule") }}, implementiert <code>CSSMediaRule</code> auch die Methoden dieser Schnittstelle. Sie selbst hat keine speziellen Methoden.</p> + +<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('CSS3 Conditional', '#the-cssmediarule-interface', 'CSSMediaRule') }}</td> + <td>{{ Spec2('CSS3 Conditional')}}</td> + <td>Als Ableitung von {{domxref("CSSConditionRule")}}.</td> + </tr> + <tr> + <td>{{ SpecName('CSSOM', '#the-cssmediarule-interface', 'CSSMediaRule') }}</td> + <td>{{ Spec2('CSSOM') }}</td> + <td>Keine Abweichungen von {{SpecName('DOM2 Style')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSMediaRule', 'CSSMediaRule') }}</td> + <td>{{ Spec2('DOM2 Style') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität </h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{ CompatChrome(45.0) }}</td> + <td>{{ CompatVersionUnknown }} [1]</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>Merkmal</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatChrome(45.0) }}</td> + <td>{{ CompatGeckoMobile("17") }} [1]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatChrome(45.0) }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Das Setzen des Werts von <code>conditionText</code> in Gecko ist nur ab Firefox 20 möglich.</p> diff --git a/files/de/web/api/csspagerule/index.html b/files/de/web/api/csspagerule/index.html new file mode 100644 index 0000000000..c6a30fc95e --- /dev/null +++ b/files/de/web/api/csspagerule/index.html @@ -0,0 +1,129 @@ +--- +title: CSSPageRule +slug: Web/API/CSSPageRule +tags: + - API + - CSSOM + - Referenz +translation_of: Web/API/CSSPageRule +--- +<p>{{ APIRef("CSSOM") }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p><strong><code>CSSPageRule</code></strong> ist eine Schnittstelle, die eine einzelne CSS {{cssxref("@page")}} Regel repräsentiert. Sie implementiert die {{domxref("CSSRule")}} Schnittstelle mit dem Typwert <code>6</code> (<code>CSSRule.PAGE_RULE</code>).</p> + +<h2 id="Syntax">Syntax</h2> + +<p>Die Syntax wird im <a href="http://dev.w3.org/2006/webapi/WebIDL/" title="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL</a> Format beschrieben.</p> + +<pre>interface CSSPageRule : CSSRule { + attribute DOMString selectorText; + readonly attribute CSSStyleDeclaration style; +}; +</pre> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<p>Als eine {{ domxref("CSSRule") }} implementiert <code>CSSPageRule</code> auch die Eigenschaften dieser Schnittstelle. Sie hat die folgenden speziellen Eigenschaften:</p> + +<dl> + <dt>{{domxref("CSSPageRule.selectorText")}}</dt> + <dd>Repräsentiert den Text eines zur At-Regel gehörenden Seitenselektors.</dd> + <dt>{{domxref("CSSPageRule.style")}} {{readonlyinline()}}</dt> + <dd>Gibt den zur At-Regel gehörenden Deklarationsblock zurück.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<p>Als eine {{ domxref("CSSRule") }} implementiert <code>CSSPageRule</code> auch die Methoden dieser Schnittstelle. Sie hat keine speziellen Methoden.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSSOM', '#the-csspagerule-interface', 'CSSPageRule') }}</td> + <td>{{ Spec2('CSSOM') }}</td> + <td>Keine Änderungen bezüglich {{SpecName('DOM2 Style')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSPageRule', 'CSSPageRule') }}</td> + <td>{{ Spec2('DOM2 Style') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatGeckoDesktop("19") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + </tr> + <tr> + <td><code>selectorText</code></td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{CompatNo}}</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>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("19") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>selectorText</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/api/cssrule/csstext/index.html b/files/de/web/api/cssrule/csstext/index.html new file mode 100644 index 0000000000..789cd7519a --- /dev/null +++ b/files/de/web/api/cssrule/csstext/index.html @@ -0,0 +1,31 @@ +--- +title: CSSRule.cssText +slug: Web/API/CSSRule/cssText +tags: + - API + - CSSOM + - Eigenschaft + - Referenz +translation_of: Web/API/CSSRule/cssText +--- +<div> + {{ APIRef() }}</div> +<h2 id="Summary" name="Summary">Übersicht</h2> +<p><strong>cssText</strong> gibt den eigentlichen Text der Styleregel zurück. Um eine Stylesheet Regel dynamisch setzen zu können, siehe <a href="/de/docs/Web/API/CSS_Object_Model/Dynamische_Stylinginformationen_verwenden" title="DOM/Using_dynamic_styling_information">Dynamische Stylinginformationen verwenden.</a></p> +<h2 id="Syntax" name="Syntax">Syntax</h2> +<pre class="syntaxbox"><em>string</em> = cssRule.cssText +</pre> +<h2 id="Example" name="Example">Beispiel</h2> +<pre class="brush:html;"><style> +body { background-color: darkblue; } +</style> +<script> + var stylesheet = document.styleSheets[0]; + alert(stylesheet.cssRules[0].cssText); // body { background-color: darkblue; } +</script> + +</pre> +<h2 id="Specification" name="Specification">Spezifikation</h2> +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRule">DOM Level 2 Style CSS - Interface CSSStyleRule (introduced in DOM Level 2)</a></li> +</ul> diff --git a/files/de/web/api/cssrule/index.html b/files/de/web/api/cssrule/index.html new file mode 100644 index 0000000000..eeca8828cf --- /dev/null +++ b/files/de/web/api/cssrule/index.html @@ -0,0 +1,258 @@ +--- +title: CSSRule +slug: Web/API/CSSRule +tags: + - CSSOM +translation_of: Web/API/CSSRule +--- +<div>{{APIRef("CSSOM")}}</div> + +<p>An object implementing the <strong><code>CSSRule</code></strong> DOM interface represents a single CSS at-rule. References to a <code>CSSRule</code>-implementing object may be obtained by looking at a <a href="/en-US/docs/Web/API/CSSStyleSheet">CSS style sheet's</a> {{domxref("CSSStyleSheet","cssRules")}} list.</p> + +<p>There are several kinds of rules. The <code>CSSRule</code> interface specifies the properties common to all rules, while properties unique to specific rule types are specified in the more specialized interfaces for those rules' respective types.</p> + +<h2 id="Properties" name="Properties">Syntax</h2> + +<p>The syntax is described using the <a href="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL</a> format.</p> + +<pre>interface CSSRule { + const unsigned short STYLE_RULE = 1; + const unsigned short CHARSET_RULE = 2; + const unsigned short IMPORT_RULE = 3; + const unsigned short MEDIA_RULE = 4; + const unsigned short FONT_FACE_RULE = 5; + const unsigned short PAGE_RULE = 6; + const unsigned short KEYFRAMES_RULE = 7; + const unsigned short KEYFRAME_RULE = 8; + const unsigned short NAMESPACE_RULE = 10; + const unsigned short COUNTER_STYLE_RULE = 11; + const unsigned short SUPPORTS_RULE = 12; + const unsigned short DOCUMENT_RULE = 13; + const unsigned short FONT_FEATURE_VALUES_RULE = 14; + const unsigned short VIEWPORT_RULE = 15; + const unsigned short REGION_STYLE_RULE = 16; + readonly attribute unsigned short type; + attribute DOMString cssText; + readonly attribute CSSRule? parentRule; + readonly attribute CSSStyleSheet? parentStyleSheet; +};</pre> + +<h2 id="Properties_common_to_all_CSSRule_instances">Properties common to all CSSRule instances</h2> + +<dl> + <dt id="cssText">{{domxref("CSSRule.cssText")}}</dt> + <dd>Represents the textual representation of the rule, e.g. <code>"h1,h2 { font-size: 16pt }"</code></dd> + <dt id="parentRule">{{domxref("CSSRule.parentRule")}} {{readonlyinline}}</dt> + <dd>Returns the containing rule, otherwise <code>null</code>. E.g. if this rule is a style rule inside an {{cssxref("@media")}} block, the parent rule would be that {{domxref("CSSMediaRule")}}.</dd> + <dt id="parentStyleSheet">{{domxref("CSSRule.parentStyleSheet")}} {{readonlyinline}}</dt> + <dd>Returns the {{domxref("CSSStyleSheet")}} object for the style sheet that contains this rule</dd> + <dt id="type">{{domxref("CSSRule.type")}} {{readonlyinline}}</dt> + <dd>One of the {{anch("Type constants")}} indicating the type of CSS rule.</dd> +</dl> + +<h2 id="CSSRule" name="CSSRule">Constants</h2> + +<h3 id="Type_constants">Type constants</h3> + +<p>The <code>CSSRule</code> interface specifies integer constants that can be used in conjunction with a <code>CSSRule</code>'s {{domxref("cssRule/type","type")}} property to discern the rule type (and therefore, which specialized interface it implements). The relationships between these constants and the interfaces are:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Type</th> + <th>Value</th> + <th>Rule-specific interface</th> + </tr> + <tr> + <td><code>CSSRule.STYLE_RULE</code></td> + <td style="text-align: center;"><code>1</code></td> + <td>{{domxref("CSSStyleRule")}}</td> + </tr> + <tr> + <td><code>CSSRule.MEDIA_RULE</code></td> + <td style="text-align: center;"><code>4</code></td> + <td>{{domxref("CSSMediaRule")}}</td> + </tr> + <tr> + <td><code>CSSRule.FONT_FACE_RULE</code></td> + <td style="text-align: center;"><code>5</code></td> + <td>{{domxref("CSSFontFaceRule")}}</td> + </tr> + <tr> + <td><code>CSSRule.PAGE_RULE</code></td> + <td style="text-align: center;"><code>6</code></td> + <td>{{domxref("CSSPageRule")}}</td> + </tr> + <tr> + <td><code>CSSRule.IMPORT_RULE</code></td> + <td style="text-align: center;"><code>3</code></td> + <td>{{domxref("CSSImportRule")}} : <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/css/nsIDOMCSSImportRule.idl#9">IDL: nsIDOMCSSImportRule</a></td> + </tr> + <tr> + <td><code>CSSRule.CHARSET_RULE</code></td> + <td style="text-align: center;"><code>2</code></td> + <td>{{domxref("CSSCharsetRule")}} {{obsolete_inline}}</td> + </tr> + <tr> + <td><code>CSSRule.UNKNOWN_RULE</code></td> + <td style="text-align: center;"><code>0</code></td> + <td>{{domxref("CSSUnknownRule")}}{{obsolete_inline}}</td> + </tr> + <tr> + <td><code>CSSRule.KEYFRAMES_RULE</code></td> + <td style="text-align: center;"><code>7</code></td> + <td>{{domxref("CSSKeyframesRule")}} [1] {{experimental_inline}}</td> + </tr> + <tr> + <td><code>CSSRule.KEYFRAME_RULE</code></td> + <td style="text-align: center;"><code>8</code></td> + <td>{{domxref("CSSKeyframeRule")}} [1] {{experimental_inline}}</td> + </tr> + <tr> + <td><em>Reserved for future use</em></td> + <td style="text-align: center;"><code>9</code></td> + <td>Should be used to define color profiles in the future</td> + </tr> + <tr> + <td><code>CSSRule.NAMESPACE_RULE</code></td> + <td style="text-align: center;"><code>10</code></td> + <td>{{domxref("CSSNamespaceRule")}} {{experimental_inline}}</td> + </tr> + <tr> + <td><code>CSSRule.COUNTER_STYLE_RULE</code></td> + <td style="text-align: center;"><code>11</code></td> + <td>{{domxref("CSSCounterStyleRule")}} {{experimental_inline}}</td> + </tr> + <tr> + <td><code>CSSRule.SUPPORTS_RULE</code></td> + <td style="text-align: center;"><code>12</code></td> + <td>{{domxref("CSSSupportsRule")}}</td> + </tr> + <tr> + <td><code>CSSRule.DOCUMENT_RULE</code></td> + <td style="text-align: center;"><code>13</code></td> + <td>{{domxref("CSSDocumentRule")}} {{experimental_inline}}</td> + </tr> + <tr> + <td><code>CSSRule.FONT_FEATURE_VALUES_RULE</code></td> + <td style="text-align: center;"><code>14</code></td> + <td>{{domxref("CSSFontFeatureValuesRule")}}</td> + </tr> + <tr> + <td><code>CSSRule.VIEWPORT_RULE</code></td> + <td style="text-align: center;"><code>15</code></td> + <td>{{domxref("CSSViewportRule")}} {{experimental_inline}}</td> + </tr> + <tr> + <td><code>CSSRule.REGION_STYLE_RULE</code></td> + <td style="text-align: center;"><code>16</code></td> + <td>{{domxref("CSSRegionStyleRule")}} {{experimental_inline}}</td> + </tr> + </tbody> +</table> + +<p>An up-to-date informal list of constants can be found on the <a href="http://wiki.csswg.org/spec/cssom-constants">CSSWG Wiki</a>.</p> + +<p>[1] On Gecko, before Firefox 19, the keyframe-related constants existed only in their prefixed version: <code>CSSRule.MOZ_KEYFRAMES_RULE</code> and <code>CSSRule.MOZ_KEYFRAME_RULE.</code> From Firefox 20 onwards, both versions are available. The prefixed version will be removed in the future.</p> + +<h2 id="Specification" name="Specification">Specifications</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('CSSOM', '#css-rules', 'CSSRule')}}</td> + <td>{{Spec2('CSSOM')}}</td> + <td>Obsoleted values <code>CHARSET_RULE</code> and <code>UNKNOWN_RULE</code>. Added value <code>NAMESPACE_RULE</code>.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Animations",'#cssrule', 'CSSRule')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td>Added values <code>KEYFRAMES_RULE</code> and <code>KEYFRAME_RULE</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Fonts', '#om-fontfeaturevalues', 'CSSRule')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Added value <code>FONT_FEATURE_VALUES_RULE</code>.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Counter Styles", "#extentions-to-cssrule-interface", 'CSSRule')}}</td> + <td>{{Spec2("CSS3 Counter Styles")}}</td> + <td>Added value <code>COUNTER_STYLE_RULE</code>.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Conditional", '#extentions-to-cssrule-interface', 'CSSRule')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td>Added value <code>SUPPORTS_RULE</code>. (<code>DOCUMENT_RULE</code> has been pushed to CSS Conditional Rules Level 4)</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSRule', 'CSSRule')}}</td> + <td>{{Spec2('DOM2 Style')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>To get browser compatibility information about the different type constant value, please consult the compatibility table of the associated interface.</p> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9</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>Firefox Mobile (Gecko)</th> + <th>IE Phone</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> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/DOM/Using_dynamic_styling_information">Using dynamic styling information</a></li> +</ul> diff --git a/files/de/web/api/customelementregistry/define/index.html b/files/de/web/api/customelementregistry/define/index.html new file mode 100644 index 0000000000..b51ed46c37 --- /dev/null +++ b/files/de/web/api/customelementregistry/define/index.html @@ -0,0 +1,241 @@ +--- +title: CustomElementRegistry.define() +slug: Web/API/CustomElementRegistry/define +tags: + - API + - CustomElementRegistry + - Method + - Reference + - Web Components + - Webkomponente + - benutzerdefiniert + - custom elements + - define +translation_of: Web/API/CustomElementRegistry/define +--- +<p>{{APIRef("CustomElementRegistry")}}</p> + +<p>Die <code><strong>define()</strong></code> Methode der {{domxref("CustomElementRegistry")}} Schnittstelle beschreibt ein neues benutzerdefiniertes Element.</p> + +<p>Es gibt zwei Arten von benutzerdefinierten Elementen, die erstellt werden können:</p> + +<ul> + <li><strong>Autonomes benutzerdefiniertes Element:</strong> Eigenständige Elemente; Sie erben nicht von eingebauten HTML-Elementen.</li> + <li><strong>Angepasstes integriertes Element:</strong> Diese Elemente erben und erweitern eingebaute HTML-Elemente.</li> +</ul> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">customElements.define(<em>name</em>, <em>constructor</em>, <em>options</em>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt>name</dt> + <dd>Name des neuen benutzerdefinierten Elements. Beachte, dass Namen von benutzerdefinierten Elementen einen Bindestrich enthalten müssen.</dd> + <dt>constructor</dt> + <dd>Konstruktor für das neue, benutzerdefinierte Element.</dd> + <dt>options {{optional_inline}}</dt> + <dd>Objekt, das steuert, wie das Element definiert ist. Eine Option wird derzeit unterstützt: + <ul> + <li><code>extends</code>: String des Namens eines integrierten Elements das erweitert werden soll. Wird verwendet um ein <em>angepasstes integriertes Element</em> zu erzeugen<em>.</em></li> + </ul> + </dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>Void.</p> + +<h3 id="Ausnahmebehandlung">Ausnahmebehandlung</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Exception</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>NotSupportedError</code></td> + <td> + <p>Das {{domxref("CustomElementRegistry")}} enthält bereits einen Eintrag mit dem gleichen Namen oder dem gleichen Konstruktor (oder ist auf andere Weise bereits definiert), oder <code>extends</code> ist angegeben und es ist ein <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name">gültiger benutzerdefinierter Elementname</a> oder <code>extends</code> ist angegeben, aber das Element, das es zu erweitern versucht, ist ein unbekanntes Element.</p> + </td> + </tr> + <tr> + <td><code>SyntaxError</code></td> + <td>Der angegebene Name ist kein <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name">gültiger benutzerdefinierter Elementname</a>.</td> + </tr> + <tr> + <td><code>TypeError</code></td> + <td>Der referenzierte Konstruktor ist kein Konstruktor.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Hinweis</strong>: Du wirst oftmals <code>NotSupportedError</code>s geworfen bekommen, die so erscheinen als würde <code>define()</code> fehlschlagen, aber stattdessen wahrscheinlich ein Problem mit {domxref("Element.attachShadow()")}} sind.</p> +</div> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Autonomes_benutzerdefiniertes_Element">Autonomes benutzerdefiniertes Element</h3> + +<p>Der folgende Code entstammt dem <a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component">popup-info-box-web-component</a> Beispiel (<a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/">siehe Live</a>).</p> + +<pre class="brush: js">// Create a class for the element +class PopUpInfo extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + + // Create a shadow root + var shadow = this.attachShadow({mode: 'open'}); + + // Create spans + var wrapper = document.createElement('span'); + wrapper.setAttribute('class','wrapper'); + var icon = document.createElement('span'); + icon.setAttribute('class','icon'); + icon.setAttribute('tabindex', 0); + var info = document.createElement('span'); + info.setAttribute('class','info'); + + // Take attribute content and put it inside the info span + var text = this.getAttribute('text'); + info.textContent = text; + + // Insert icon + var imgUrl; + if(this.hasAttribute('img')) { + imgUrl = this.getAttribute('img'); + } else { + imgUrl = 'img/default.png'; + } + var img = document.createElement('img'); + img.src = imgUrl; + icon.appendChild(img); + + // Create some CSS to apply to the shadow dom + var style = document.createElement('style'); + + style.textContent = '.wrapper {' + + 'position: relative;' + + '}' + + + '.info {' + + 'font-size: 0.8rem;' + + 'width: 200px;' + + 'display: inline-block;' + + 'border: 1px solid black;' + + 'padding: 10px;' + + 'background: white;' + + 'border-radius: 10px;' + + 'opacity: 0;' + + 'transition: 0.6s all;' + + 'position: absolute;' + + 'bottom: 20px;' + + 'left: 10px;' + + 'z-index: 3;' + + '}' + + + 'img {' + + 'width: 1.2rem' + + '}' + + + '.icon:hover + .info, .icon:focus + .info {' + + 'opacity: 1;' + + '}'; + + // attach the created elements to the shadow dom + + shadow.appendChild(style); + shadow.appendChild(wrapper); + wrapper.appendChild(icon); + wrapper.appendChild(info); + } +} + +// Define the new element +customElements.define('popup-info', PopUpInfo); +</pre> + +<pre class="brush: html"><popup-info img="img/alt.png" text="Your card validation code (CVC) is an extra + security feature — it is the last 3 or 4 + numbers on the back of your card."></pre> + +<div class="note"> +<p><strong>Hinweis</strong>: Konstruktoren für autonome benutzerdefinierte Elemente müssen {{domxref("HTMLElement")}} extenden.</p> +</div> + +<h3 id="Benutzerdefiniertes_integriertes_Element">Benutzerdefiniertes integriertes Element</h3> + +<p>Der folgende Code entstammt dem <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> Beispiel (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">siehe Live</a>).</p> + +<pre class="brush: js">// Create a class for the element +class WordCount extends HTMLParagraphElement { + constructor() { + // Always call super first in constructor + super(); + + // count words in element's parent element + var wcParent = this.parentNode; + + function countWords(node){ + var text = node.innerText || node.textContent + return text.split(/\s+/g).length; + } + + var count = 'Words: ' + countWords(wcParent); + + // Create a shadow root + var shadow = this.attachShadow({mode: 'open'}); + + // Create text node and add word count to it + var text = document.createElement('span'); + text.textContent = count; + + // Append it to the shadow root + shadow.appendChild(text); + + + // Update count when element content changes + setInterval(function() { + var count = 'Words: ' + countWords(wcParent); + text.textContent = count; + }, 200) + + } +} + +// Define the new element +customElements.define('word-count', WordCount, { extends: 'p' });</pre> + +<pre class="brush: html"><p is="word-count"></p></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("HTML WHATWG", "custom-elements.html#dom-customelementregistry-define", "customElements.define()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("api.CustomElementRegistry.define")}}</p> +</div> diff --git a/files/de/web/api/customelementregistry/index.html b/files/de/web/api/customelementregistry/index.html new file mode 100644 index 0000000000..db8bc5b464 --- /dev/null +++ b/files/de/web/api/customelementregistry/index.html @@ -0,0 +1,106 @@ +--- +title: CustomElementRegistry +slug: Web/API/CustomElementRegistry +tags: + - API + - CustomElementRegistry + - Experimental + - Interface + - Landing + - NeedsTranslation + - Reference + - TopicStub + - Web Components + - custom elements +translation_of: Web/API/CustomElementRegistry +--- +<p>{{DefaultAPISidebar("Web Components")}}</p> + +<p><span class="seoSummary">The <strong><code>CustomElementRegistry</code></strong> interface provides methods for registering custom elements and querying registered elements. To get an instance of it, use the {{domxref("window.customElements")}} property. </span></p> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("CustomElementRegistry.define()")}}</dt> + <dd>Defines a new <a href="/en-US/docs/Web/Web_Components/Custom_Elements">custom element</a>.</dd> + <dt>{{domxref("CustomElementRegistry.get()")}}</dt> + <dd>Returns the constuctor for the named custom element, or <code>undefined</code> if the custom element is not defined.</dd> + <dt>{{domxref("CustomElementRegistry.upgrade()")}}</dt> + <dd>Upgrades a custom element directly, even before it is connected to its shadow root.</dd> + <dt>{{domxref("CustomElementRegistry.whenDefined()")}}</dt> + <dd>Returns an empty {{jsxref("Promise", "promise")}} that resolves when a custom element becomes defined with the given name. If such a custom element is already defined, the returned promise is immediately fulfilled.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>The following code is taken from our <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> example (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">see it live also</a>). Note how we use the {{domxref("CustomElementRegistry.define()")}} method to define the custom element after creating its class.</p> + +<pre class="brush: js">// Create a class for the element +class WordCount extends HTMLParagraphElement { + constructor() { + // Always call super first in constructor + super(); + + // count words in element's parent element + var wcParent = this.parentNode; + + function countWords(node){ + var text = node.innerText || node.textContent + return text.split(/\s+/g).length; + } + + var count = 'Words: ' + countWords(wcParent); + + // Create a shadow root + var shadow = this.attachShadow({mode: 'open'}); + + // Create text node and add word count to it + var text = document.createElement('span'); + text.textContent = count; + + // Append it to the shadow root + shadow.appendChild(text); + + + // Update count when element content changes + setInterval(function() { + var count = 'Words: ' + countWords(wcParent); + text.textContent = count; + }, 200) + + } +} + +// Define the new element +customElements.define('word-count', WordCount, { extends: 'p' });</pre> + +<div class="note"> +<p>Note: The CustomElementRegistry is available through the {{domxref("Window.customElements")}} property.</p> +</div> + +<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("HTML WHATWG", "custom-elements.html#customelementregistry", "CustomElementRegistry")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p> </p> + + + +<p>{{Compat("api.CustomElementRegistry")}}</p> + +<p> </p> diff --git a/files/de/web/api/dedicatedworkerglobalscope/index.html b/files/de/web/api/dedicatedworkerglobalscope/index.html new file mode 100644 index 0000000000..2aaef1f2e7 --- /dev/null +++ b/files/de/web/api/dedicatedworkerglobalscope/index.html @@ -0,0 +1,114 @@ +--- +title: DedicatedWorkerGlobalScope +slug: Web/API/DedicatedWorkerGlobalScope +translation_of: Web/API/DedicatedWorkerGlobalScope +--- +<p>{{APIRef("Web Workers API")}}</p> + +<p>Auf das <strong><code>DedicatedWorkerGlobalScope</code></strong> Objekt (Der globale Scope des {{domxref("Worker")}}) kann durch das Schlüsselwort {{domxref("window.self","self")}} zugegriffen werden. Einzelne weitere globale Funktionen, namespace Objekte und Konstruktoren, die nicht typischerweise mit dem Scope des Workers in Verbindung stehen, jedoch darauf verfügbar sind, können in der <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Reference</a> gefunden werden. Siehe auch: <a href="/en-US/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Functions available to workers</a>.</p> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<p><em>Dieses Interface erbt seine Eigenschaften aus dem Interface <em>{{domxref("WorkerGlobalScope")}} und seinem übergeordneten Interface {{domxref("EventTarget")}}. Deshalbt implementiert es die Eigenschaften {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, und {{domxref("WindowEventHandlers")}}.</em></em></p> + +<dl> + <dt>{{domxref("DedicatedWorkerGlobalScope.name")}} {{readOnlyinline}}</dt> + <dd>Der dem {{domxref("Worker")}} (optional) gegebene Name, als er im Konstruktor {{domxref("Worker.Worker", "Worker()")}} erzeugt wurde. Hauptsächlich nützlich für Debuggin.</dd> +</dl> + +<h3 id="Von_WorkerGlobal_Scope_geerbte_Eigenschaften">Von WorkerGlobal Scope geerbte Eigenschaften</h3> + +<dl> + <dt>{{domxref("WorkerGlobalScope.self")}}</dt> + <dd>Gibt eine Objektreferenz auf das <code>DedicatedWorkerGlobalScope</code> Objekt selbst zurück.</dd> + <dt>{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}}</dt> + <dd>Gibt das mit dem Worker verbundene {{domxref("Console")}} Objekt zurück.</dd> + <dt>{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}</dt> + <dd>Gibt das mit dem Worker verbundene {{domxref("WorkerLocation")}} Objekt zurück. Bei <code>WorkerLocation</code> handelt es sich um ein spezifisches location Objekt, welches aus Teilen des {{domxref("Location")}} Objekts des Browserscope besteht, jedoch für den Worker angepasst wurde.</dd> + <dt>{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}</dt> + <dd>Git das mit dem Worker verbundene {{domxref("WorkerNavigator")}} Objekt zurück. Bei <code>WorkerNavigator </code>handelt es sich um ein spezifisches navigations Objekt, welches aus Teilen des {{domxref("Navigator")}} Objekts des Browserscope besteht, jedoch für den Worker angepasst wurde.</dd> + <dt>{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}</dt> + <dd>Git das mit dem Worker verbunde {{domxref("Performance")}} Objekt zurück. Dabei handelt es sich um ein reguläres performance Objekt, welches jedoch nur teile der Eigenschaften und Methoden umfasst.</dd> +</dl> + +<h3 id="Eventhandler">Eventhandler</h3> + +<p><em>Dieses Interface erbt seine Eventhandler aus dem Interface {domxref("WorkerGlobalScope")}} und seinen übergeordneten Interface {{domxref("EventTarget")}}. Deshalb sind Eventhandler {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, und {{domxref("WindowEventHandlers")}} implementiert.</em></p> + +<dl> + <dt>{{domxref("DedicatedWorkerGlobalScope.onmessage")}}</dt> + <dd>Der entsprechende Code eines {{domxref("EventHandler")}} der beim Aufruf des Events {{event("message")}} aufgerufen wird. Diese Events sind vom Typ {{domxref("MessageEvent")}} und werden aufgerufen, wenn der Worker eine Nachricht aus dem Dokument erhält, welcher Ihn gestartet hat (Beispiel: {{domxref("Worker.postMessage")}} Methode.) </dd> + <dt>{{domxref("DedicatedWorkerGlobalScope.onmessageerror")}}</dt> + <dd>Der entsprechende Code eines {{domxref("EventHandler")}} der beim Aufruf des Events {{event("messageerror")}} aufgerufen wird.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<p><em>Dieses Interface erbt seine Methoden aus dem Interface {{domxref("WorkerGlobalScope")}} und seinen übergordneten Interface {{domxref("EventTarget")}}. Dementsprechend implementiert es Methoden von {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, und {{domxref("WindowEventHandlers")}}.</em></p> + +<dl> + <dt>{{domxref("DedicatedWorkerGlobalScope.close()")}}</dt> + <dd>Verwirft alle im <code>WorkerGlobalScope</code>'s Eventloop eingereihten Aufgaben und schließt den entsprechenden Scope.</dd> + <dt>{{domxref("DedicatedWorkerGlobalScope.postMessage()")}}</dt> + <dd>Sendet eine Nachricht — welche aus Javascript Objecten vom Typ <code>any</code> bestehen — zum übergeordneten Dokument, welches den Worker gestartet hat.</dd> +</dl> + +<h3 id="Geerbt_vom_WorkerGlobalScope">Geerbt vom WorkerGlobalScope</h3> + +<dl> + <dt>{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}</dt> + <dd>Gibt eine Nachricht in der Konsole aus.</dd> + <dt>{{domxref("WorkerGlobalScope.importScripts()")}}</dt> + <dd>Importiert ein oder mehrere Skripte in den Worker Scope. Es ist möglich beliebig viele, durch Kommas getrennt, zu spezifizieren. Beispiel: <code>importScripts('foo.js', 'bar.js');</code></dd> +</dl> + +<h3 id="Aus_verschiedenen_Orten_implementiert">Aus verschiedenen Orten implementiert</h3> + +<dl> + <dt>{{domxref("WindowBase64.atob()")}}</dt> + <dd>Dekodiert einen String von Daten welcher mit base-64 codiert wurde.</dd> + <dt>{{domxref("WindowBase64.btoa()")}}</dt> + <dd>Erzeugt einen base-64 codierten ASCII String aus einem String von Binärdaten.</dd> + <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> + <dd>Bricht die wiederholte Ausführung mit {{domxref("WindowTimers.setInterval()")}} ab.</dd> + <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> + <dd>Bricht die wiederholte Ausführung mit {{domxref("WindowTimers.setTimeout()")}} ab.</dd> + <dt>{{domxref("WindowTimers.setInterval()")}}</dt> + <dd>Plant die Ausführung einer Funktion alle X Millisekunden</dd> + <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> + <dd>Setzt eine X Millisekunden Verzögerung für die Ausführung einer Funktion</dd> +</dl> + +<h2 id="Spezifikationen">Spezifikationen</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('HTML WHATWG', '#dedicatedworkerglobalscope', 'DedicatedWorkerGlobalScope')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div> + + +<p>{{Compat("api.DedicatedWorkerGlobalScope")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("Worker")}}</li> + <li>{{domxref("WorkerGlobalScope")}}</li> + <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> + <li><a href="/en-US/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Functions available to workers</a></li> +</ul> diff --git a/files/de/web/api/dedicatedworkerglobalscope/message_event/index.html b/files/de/web/api/dedicatedworkerglobalscope/message_event/index.html new file mode 100644 index 0000000000..8e457d414a --- /dev/null +++ b/files/de/web/api/dedicatedworkerglobalscope/message_event/index.html @@ -0,0 +1,83 @@ +--- +title: 'DedicatedWorkerGlobalScope: message event' +slug: Web/API/DedicatedWorkerGlobalScope/message_event +translation_of: Web/API/DedicatedWorkerGlobalScope/message_event +--- +<div>{{APIRef}}</div> + +<p><font><font>Das </font></font><code>message</code><font><font>Ereignis wird auf ein </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/DedicatedWorkerGlobalScope"><code>DedicatedWorkerGlobalScope</code></a><font><font>Objekt </font><font>ausgelöst, </font><font>wenn der Worker eine Nachricht von seinem übergeordneten Objekt empfängt (dh wenn der übergeordnete Benutzer eine Nachricht sendet mit </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage">Worker.postMessage()</a></code><font><font>).</font></font></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("MessageEvent")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td><code><a href="/en-US/docs/Web/API/DedicatedWorkerGlobalScope/onmessage">onmessage</a></code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<p>Dieser Code erstellt einen neuen Worker und sendet ihm eine Nachricht mit <code><a href="/en-US/docs/Web/API/Worker/postMessage">Worker.postMessage()</a></code>:</p> + +<pre class="brush: js notranslate">const worker = new Worker("static/scripts/worker.js"); + +worker.addEventListener('message', (event) => { + console.log(`Received message from worker: ${event.data}`) +});</pre> + +<p>Der Worker kann auf diese Nachricht warten, indem er <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> verwendet:</p> + +<pre class="brush: js notranslate">// inside static/scripts/worker.js + +self.addEventListener('message', (event) => { + console.log(`Received message from parent: ${event.data}`); +});</pre> + +<p>Alternativ könnte er es mit der <code><a href="/en-US/docs/Web/API/DedicatedWorkerGlobalScope/onmessage">onmessage</a></code> <font>Event-Handler-Eigenschaft </font><font>abhören</font>:</p> + +<pre class="brush: js notranslate">// static/scripts/worker.js + +self.onmessage = (event) => { + console.log(`Received message from parent: ${event.data}`); +};</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'indices.html#event-message')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.DedicatedWorkerGlobalScope.message_event")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Verwandte Ereignisse: <code><a href="/docs/Web/API/DedicatedWorkerGlobalScope/messageerror_event">messageerror</a></code>.</li> + <li><code><a href="/en-US/docs/Web/API/Worker/postMessage">Worker.postMessage()</a></code>.</li> +</ul> diff --git a/files/de/web/api/document/adoptnode/index.html b/files/de/web/api/document/adoptnode/index.html new file mode 100644 index 0000000000..c996e689c5 --- /dev/null +++ b/files/de/web/api/document/adoptnode/index.html @@ -0,0 +1,53 @@ +--- +title: Document.adoptNode() +slug: Web/API/Document/adoptNode +translation_of: Web/API/Document/adoptNode +--- +<div>{{ ApiRef("DOM") }}</div> + +<div> </div> + +<p>Überträgt einen Knoten. Der Knoten und sein Unterbaum werden aus dem Dokument, in dem sie sich befinden entfernt (so vorhanden), und sein <code><a href="/en-US/docs/DOM/Node.ownerDocument" title="DOM/Node.ownerDocument">ownerDocument</a></code> wird zu dem aktuellen Dokument geändert. Der Knoten kann dann in das aktuelle Dokument eingefügt werden.</p> + +<p><strong>Unterstützt seit Gecko 1.9 (Firefox 3)</strong></p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>knoten</var> = <em>document</em>.adoptNode(<var>externerKnoten</var>); +</pre> + +<dl> + <dt><code><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span>knoten</code></dt> + <dd>Ist der übertragene Knoten, welcher nun dieses Dokument als sein <code><a href="/en-US/docs/DOM/Node.ownerDocument" title="DOM/Node.ownerDocument">ownerDocument</a> </code>hat. Der Elternknoten (<code><a href="/en-US/docs/DOM/Node.parentNode">parentNode</a></code>) is <code>null</code>, da er noch nicht in den Dokumentenbaum eingefügt wurde. Zu beachten ist, dass <code>knoten</code> und <code>externerKnoten</code> nach dem Funktionsaufruf das gleiche Objekt sind.<span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></dd> + <dt><code>externerKnoten</code></dt> + <dd>Ist der Knoten eines anderes Dokumentes, der übertragen werden soll.</dd> +</dl> + +<h2 id="Example" name="Example">Beispiel</h2> + +<p>{{todo}}</p> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p>Es kann oassieren, dass der Aufruf von <code>adoptNode</code> fehlschlägt, wenn der Ursprungsknoten von einer anderen Implementierung kommt, was aber bei Browser-Implementierungen kein Problem darstellen sollte.</p> + + +<p></p><p>Nodes from external documents should be cloned using <a href="/de/docs/Web/API/Document/importNode" title="Die Document-Methode importNode() erzeugt eine neue Kopie eines konkreten Knotens (Node) oder Dokumenten-Fragments (DocumentFragment) eines anderen Dokuments, so dass diese dann in das aktuelle Dokument eingefügt werden kann. "><code>document.importNode()</code></a> (or adopted using <a href="/de/docs/Web/API/Document/adoptNode" title="Überträgt einen Knoten. Der Knoten und sein Unterbaum werden aus dem Dokument, in dem sie sich befinden entfernt (so vorhanden), und sein ownerDocument wird zu dem aktuellen Dokument geändert. Der Knoten kann dann in das aktuelle Dokument eingefügt werden."><code>document.adoptNode()</code></a>) before they + can be inserted into the current document. For more on the <a class="new" href="/de/docs/Web/API/Node/ownerDocument" rel="nofollow" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>Node.ownerDocument</code></a> issues, see the + <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p> + + <p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many + sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for + improved future compatibility.</p><p></p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-adoptNode">DOM Level 3 Core: Document.adoptNode</a></li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/DOM/document.importNode">document.importNode</a></li> +</ul> diff --git a/files/de/web/api/document/alinkcolor/index.html b/files/de/web/api/document/alinkcolor/index.html new file mode 100644 index 0000000000..0c656de5cc --- /dev/null +++ b/files/de/web/api/document/alinkcolor/index.html @@ -0,0 +1,30 @@ +--- +title: Document.alinkColor +slug: Web/API/Document/alinkColor +translation_of: Web/API/Document/alinkColor +--- +<p>{{APIRef("DOM")}} {{ Deprecated_header() }}</p> + +<p>Gibt das Farbattribut eines aktiven Links im Dokumenten body wieder oder setzt es. Ein Link wird in der Zeit eines <code>mousedown</code> und <code>mouseup</code> Events als "aktiv" bezeichnet .</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval"><em>color</em> = document.alinkColor +document.alinkColor =<em>color</em> +</pre> + +<p><code>color</code> ist ein String der den Namen der Farbe (z.B., <code>"blue"</code>, <code>"darkblue"</code>, etc.) oder den Hexadezimalwert der Farbe(z.B., <code>#0000FF</code>) enthält. Die Farben samt zugehöriger Hexadezimalcodes können zum Teil hier oder auf ähnlichen Seiten eingesehen werden: <a href="https://html-color-codes.info/">https://html-color-codes.info/ </a></p> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p>Der Default Wert dieser Eigenschaft in Mozilla Firefox ist rot (<code>#ee0000</code> in hexadezimal).</p> + +<p><code>document.alinkColor</code> ist laut <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a> veraltet. Eine Alternative wäre der CSS Selektor {{ Cssxref(":active") }}.</p> + +<p>Eine weitere Alternative ist <code>document.body.aLink</code>, obwohl diese laut<a class="external" href="http://www.w3.org/TR/html401/struct/global.html#adef-alink"> HTML 4.01</a> ebenfalls veraltet ist und der CSS Selektor präferiert wird.</p> + +<p><a href="en/Gecko">Gecko</a> unterstützt sowohl <code>alinkColor</code>/<code>:active</code> als auch{{ Cssxref(":focus") }}. Der Internet Explorer 6 und 7 unterstützen lediglich <code>alinkColor</code>/<code>:active</code> für <a href="en/HTML/Element/a"> HTML anchor (<a>) links</a> und verhält sich ähnlich wie <code>:focus</code> bei Gecko. <code>:focus</code> wird im IE nicht unterstützt.</p> + +<h2 id="Specification" name="Specification">Browser compatibility</h2> + +<p>{{Compat("api.Document.alinkColor")}}</p> diff --git a/files/de/web/api/document/body/index.html b/files/de/web/api/document/body/index.html new file mode 100644 index 0000000000..cc546cb0ae --- /dev/null +++ b/files/de/web/api/document/body/index.html @@ -0,0 +1,140 @@ +--- +title: Document.body +slug: Web/API/Document/body +translation_of: Web/API/Document/body +--- +<div>{{APIRef("DOM")}}</div> + +<p>Gibt den {{HTMLElement("body")}} oder {{HTMLElement("frameset")}} Knoten des aktuellen Dokuments wieder, oder <code>null</code> falls keines dieser Elemente existiert.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>var objRef</em> = document.body; +document.body = <em>objRef;</em></pre> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:js">// in HTML: <body id="oldBodyElement"></body> +alert(document.body.id); // "oldBodyElement" + +var aNewBodyElement = document.createElement("body"); + +aNewBodyElement.id = "newBodyElement"; +document.body = aNewBodyElement; +alert(document.body.id); // "newBodyElement" +</pre> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p><code>document.body</code> ist das Element, welches den Inhalt eines Dokuments enthält. In Dokumenten mit <code><body></code> Inhalt, gibt das <code><body></code> Element den Inhalt aus, in Frameset Dokumenten wiederum, wird das äußerste <code><frameset></code> Element ausgegeben.</p> + +<p>Da <code>body</code> setzbar ist, wird das Setzen eines neuen Body Elements alle aktuellen Elemente des existierenden <code><body></code> Elements entfernen.</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML','html.html#ID-56360201','Document.body')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-html.html#attribute-body','Document.body')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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>1</td> + <td>{{CompatVersionUnknown}}</td> + <td>2</td> + <td>6</td> + <td>9.6 (möglicherweise früher)</td> + <td>4 (möglicherweise früher)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<p> </p> + +<div class="warning"> +<ol> + <li> + <p>Obwohl <code>document.body</code> eine sehr gute Methode ist, um das <code><body></code> Element in HTML anzusprechen, wird es von Firefox nicht unterstützt, wenn der <code>Content-Type</code> nicht <code>text/html</code> oder <code>application/xhtml+xml</code> ist. Eine sicherere Methode um das <code><body></code> Element anzusprechen ist es, <code>document.getElementsByTagName("body")</code> zu verwenden, welches einen Array mit einem einzigen Item ausgibt. Das ist übertragbar auf HTML und XHTML. Bei denen ist der <code>Content-Type</code> nicht im HTTP response header angegeben.</p> + </li> +</ol> +</div> + +<p> </p> + +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</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>5 (probably earlier)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("document.head")}}</li> +</ul> diff --git a/files/de/web/api/document/createattribute/index.html b/files/de/web/api/document/createattribute/index.html new file mode 100644 index 0000000000..009c6c898d --- /dev/null +++ b/files/de/web/api/document/createattribute/index.html @@ -0,0 +1,76 @@ +--- +title: Document.createAttribute() +slug: Web/API/Document/createAttribute +tags: + - API + - DOM + - Méthode + - Referenz +translation_of: Web/API/Document/createAttribute +--- +<div>{{ ApiRef("DOM") }}</div> + +<p><strong>createAttribute</strong> erstellt einen neuen Attributsknoten und gibt ihn zurück.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>attribute</em> = document.createAttribute(name) +</pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<ul> + <li><code>attribute</code> ist ein Attributsknoten.</li> + <li><code>name</code> ist ein String, der den Namen des Attributs enthält.</li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:js"><html> + +<head> +<title> create/set/get Attribut Beispiel</title> + +<script type="text/javascript"> + +function doAttrib() { + var node = document.getElementById("div1"); + var a = document.createAttribute("my_attrib"); + a.value = "newVal"; + node.setAttributeNode(a); + alert(node.getAttribute("my_attrib")); // "newVal" +} + +// Alternative form ohne die Verwendung von createAttribute +//function doAttrib() { +// var node = document.getElementById("div1"); +// node.setAttribute("my_attrib", "newVal"); +// alert(node.getAttribute("my_attrib")); // "newVal" +//} + +</script> +</head> + +<body onload="doAttrib();"> +<div id="div1"> +<p>Some content here</p> +</div> +</body> +</html> +</pre> + +<h2 id="Notes" name="Notes">Bemerkungen</h2> + +<p>Der Rückgabewert ist ein Knoten des Typs <code>attribute</code>. Sobald man diesen wie im vorangegangenen Beispiel hat, kann man ihren Wert festlegen, indem man der <code>nodeValue</code> <em>property</em> einen String zuweist, oder in der alternativen Form durch Benutzung der <a href="/en-US/docs/DOM/element.setAttribute" title="DOM/element.setAttribute">setAttribute()</a> Methode. Der DOM beschränkt auf diese Art nicht, welche Arten von Attributen an das jeweilige Element zugewiesen werden dürfen.</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1084891198">createAttribute </a></li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("document.createElement")}}</li> +</ul> diff --git a/files/de/web/api/document/createdocumentfragment/index.html b/files/de/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..e7ba848e49 --- /dev/null +++ b/files/de/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,137 @@ +--- +title: Document.createDocumentFragment() +slug: Web/API/Document/createDocumentFragment +tags: + - API + - DOM + - Document + - DocumentFragment + - Method + - Reference +translation_of: Web/API/Document/createDocumentFragment +--- +<div>{{ApiRef("DOM")}}</div> + +<p>Erzeugt ein neues {{domxref("DocumentFragment")}} Objekt.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>fragment</var> = document.createDocumentFragment(); +</pre> + +<p><code>fragment</code> ist hierbei eine Referenz zu einem neu erstellten, leeren {{domxref("DocumentFragment")}} Objekt.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><code>DocumentFragment</code>s sind DOM Knoten (DOM Nodes). Sie sind nicht Teil des Haupt- oder Seiten-DOM-Baums. Üblicherweise werden sie verwendet, um einen Teilbaum mit Objekten und Unterobjekten zu erstellen und das Ergebnis anschließend in den Seiten-DOM-Baum einzufügen. In dem DOM-Baum wird das document fragment dann ersetzt mit allen Kindelementen.</p> + +<p>Da das gesamte DocumentFragment <strong>nur im Speicher</strong> vorliegt ("in memory"<strong>)</strong> und nicht Teil des Seiten-DOM-Baums ist, führen Veränderungen in dem DocumentFragment, wie etwa das Hinzufügen von Elementen, nicht zu einem page <a href="https://developers.google.com/speed/articles/reflow?csw=1">reflow</a> (die Berechnung der Element Positionen und Geometrie). Dementsprechend führt die Nutzung von DocumentFragments zu einer <a href="http://ejohn.org/blog/dom-documentfragments/">besseren Performance</a>.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Dieses Beispiel erzeugt eine Liste gängiger Browser.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul id="ul"> +</ul></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var element = document.getElementById('ul'); // assuming ul exists +var fragment = document.createDocumentFragment(); +var browsers = ['Firefox', 'Chrome', 'Opera', + 'Safari', 'Internet Explorer']; + +browsers.forEach(function(browser) { + var li = document.createElement('li'); + li.textContent = browser; + fragment.appendChild(li); +}); + +element.appendChild(fragment); +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample("Example", 600, 140)}}</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">Anmerkungen</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initiale Definition in der DOM 1 Spezifikation</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Edge</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> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>Edge</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li> + <li>{{domxref("documentFragment")}}</li> +</ul> diff --git a/files/de/web/api/document/createelement/index.html b/files/de/web/api/document/createelement/index.html new file mode 100644 index 0000000000..8b053c1379 --- /dev/null +++ b/files/de/web/api/document/createelement/index.html @@ -0,0 +1,153 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Document + - Method + - Méthode +translation_of: Web/API/Document/createElement +--- +<div>{{APIRef("DOM")}}</div> + + + +<p>In einem <a href="/de/docs/Web/HTML">HTML </a>Dokument erstellt die <strong><code>Document.createElement()</code></strong> Methode ein spezifiziertes HTML Element oder ein {{domxref("HTMLUnknownElement")}} wenn der gegebene Elementname ein unbekannter ist.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>var <em>element</em></var> = <var>document</var>.createElement(<em><var>tagName</var></em>, [optionen]); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><strong><code>tagName</code></strong></dt> + <dd>Ein String der den Typ des zu erstellenden Elements spezifiziert. Der/Die/Das {{domxref("Node.nodeName", "nodeName")}} des erstellten Elements ist mit dem Wert von <code>tagName</code> initialisiert. Benutze keine qualifizierten Namen (wie "html:a") mit dieser Methode.</dd> + <dt><code>optionen</code> {{optional_inline}}</dt> + <dd>Ein optionales <code>ElementCreationOptions</code>-Objekt, welches eine einzige Eigenschaft namens <code>is</code> besitzt, deren Wert der Name des Tags für ein benutzerdefiniertes Element ist. Dieses benutzerdefinierte Element muss vorher mit <code>customElements.define()</code> definiert werden. Für mehr Informationen siehe {{anch("Web component example")}}.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Das neue <code><a href="/de/docs/Web/API/Element">Element</a></code>.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Grundlegendes_Beispiel">Grundlegendes Beispiel</h3> + +<p>Dies erstellt ein neues <code><div></code> und fügt es vor dem Element mit der ID <code>div1</code> ein.</p> + +<div> +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>||Arbeiten mit Elementen||</title> +</head> +<body> + <div id="div1">Der obere Text wurde dynamisch erstellt.</div> +</body> +</html></pre> +</div> + +<h4 id="JavaScript"><span style="line-height: normal;">JavaScript</span></h4> + +<pre class="brush:js">document.body.onload = addElement; + +function addElement () { + // erstelle ein neues div Element + // und gib ihm etwas Inhalt + var newDiv = document.createElement("div"); + var newContent = document.createTextNode("Hi there and greetings!"); + newDiv.appendChild(newContent); // füge den Textknoten zum neu erstellten div hinzu. + + // füge das neu erstellte Element und seinen Inhalt ins DOM ein + var currentDiv = document.getElementById("div1"); + document.body.insertBefore(newDiv, currentDiv); +} +</pre> + +<p>{{EmbedLiveSample("Basic_example", 500, 50)}}</p> + +<h3 id="Web-Komponentenbeispiel">Web-Komponentenbeispiel </h3> + +<p>Das folgende Beispiel wurde aus dem Beispiel expanding-list-web-component entnommen (Siehe es live). In diesem Fall erweitert unser Custom-Element die {{domxref("HTMLUListElement")}}, welche das {{htmlelement("ul")}} Element repräsentiert. </p> + +<pre><code>// Erstelle eine Klasse für das Element +class ExpandingList extends HTMLUListElement { + constructor() { + // Rufe immer super() in einem Konstruktor auf. + super(); + + // Konstruktordefinition wurde der kürze halber weggelassen + ... + } +} + +// Definiere das neue Element +customElements.define('expanding-list', ExpandingList, { extends: "ul" });</code></pre> + +<p>Würden wir eine Instanz dieses Elements programmatisch erstellen wollen, so würden wir einen Aufruf über den folgenden Ausschnitt machen: </p> + +<pre><code>let expandingList = document.createElement('ul', { is : 'expanding-list' })</code></pre> + +<p>Dem neuen Element wird ein <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is">is</a></code> Attribut hinzugefügt, dessen Wert das Custom-Element's Tag-Name ist. </p> + +<div class="note"> +<p><strong>Notiz:</strong> Für Backwards-Kompatiblität mit früheren Versionen der Spezifikationen des Custom-Elements, erlauben einige Browser einen String, statt einem Objekt, als Parameter zu übergeben, wobei der Wert des Strings der Tag-Name des Custom-Elements ist. </p> +</div> + +<h2 id="Notizen">Notizen</h2> + +<ul> + <li>Beim Aufruf auf ein als Dokument-Objekt gekennzeichnetes HTML-Dokument schreibt <code>createElement()</code> seine Argumente in Kleinbuchstaben, bevor es das diese erstellt.</li> + <li>Um ein Element mit qualifizierem Namen und namespace URl zu erstellen nutze {{ domxref("document.createElementNS()") }} stattessen .</li> + <li>Vor Gecko 2.0 {{ geckoRelease("2.0") }}, konntest du abgewinkelte Klammern (< und >) um <code>tagName</code> im Quirks-Modus setzen; seit Gecko 2.0 verhält sich die Funktion im Quirks-Modus und im Standard-Modus gleich.</li> + <li>Seit Gecko 19.0 {{geckoRelease("19.0")}} <code>createElement(null)</code> hat das gleiche bewirkt wie <code>createElement("null")</code>. Bemerke, dass Opera funktioniert mit null ebenfalls, während Chrome und Internet Explorer beide Fehler ausgeben würden.</li> + <li>Seit Gecko 22.0 {{geckoRelease("22.0")}} benutzt <code>createElement()</code> nicht mehr die {{domxref("HTMLSpanElement")}} Schnittstelle, wenn das Argument "bgsounds", "multicol", oder "image" ist. Stattdessen wird <code>HTMLUnknownElement</code> für"bgsound" und "multicol" verwendet, und {{domxref("HTMLElement")}} <code>HTMLElement</code> wird für "image" verwendet.</li> + <li>Die Gecko Implementierung von <code>createElement</code> ist nicht konform mit der DOM Spezifikation für XUL und XHTML Dokumente: <code>localName</code> und <code>namespaceURI</code> werden beim erstellten Element nicht auf <code>null</code> gesetzt.<code>.</code> Siehe auch {{ Bug(280692) }} für weitere Details.</li> +</ul> + +<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('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-2141741547">DOM 2 Core: createElement</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML5: APIs in HTML documents</a></li> +</ul> + +<h2 id="Browser-Kompatibiltät">Browser-Kompatibiltät</h2> + +<p>{{Compat("api.Document.createElement")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + + + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> + <li>{{domxref("document.createElementNS()")}} — um die Namespace-URL explizit anzugeben.</li> +</ul> diff --git a/files/de/web/api/document/createelementns/index.html b/files/de/web/api/document/createelementns/index.html new file mode 100644 index 0000000000..3f310fdb49 --- /dev/null +++ b/files/de/web/api/document/createelementns/index.html @@ -0,0 +1,175 @@ +--- +title: Document.createElementNS() +slug: Web/API/Document/createElementNS +translation_of: Web/API/Document/createElementNS +--- +<div>{{ApiRef("DOM")}}</div> + +<div>Erzeugt ein Element mit der angegebenen Namespace-URL und einem Namen.</div> + +<div> </div> + +<div>Um ein Element zu definieren, ohne eine Namespace-URL anzugeben, verwenden Sie die Methode <a href="createElement" title="createElement">createElement</a>.</div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush: js"><var>var element</var> = <var>document</var>.createElementNS(<var>namespaceURI</var>, <var>qualifiedName</var>[, options]); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>namespaceURI</code></dt> + <dd>Ein String, der die mit dem Element verknüpfte <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI">Namespace-URL</a> angibt. Die Eigenschaft <a href="/en-US/docs/DOM/element.namespaceURI">namespaceURI</a> des neu erstellten Elements wird mit dem Wert von <code>namespaceURI</code> initialisiert (siehe <a href="#Valid Namespace URIs">Gültige Namespace-URLs</a>).</dd> + <dt><code>qualifiedName</code></dt> + <dd>Ein String, der den Namen des Elements angibt. Die Eigenschaft <a href="/en-US/docs/DOM/element.nodeName">nodeName</a> des neu erstellten Elements wird mit dem Wert von <code>qualifiedName</code> initialisiert.</dd> + <dt><code>options</code><span class="inlineIndicator optional optionalInline">Optional</span></dt> + <dd>Das optionale Objekt <code>ElementCreationOptions</code> enthält eine einzelne Eigenschaft mit Namen <code>is</code>, dessen Wert der Tag-Name eines zuvor mit <code>customElements.define()</code> definierten angepassten Elements ist. Aus Gründen der Abwärtskompatibilität erlauben einige Browser hier auch die Übergabe eines Strings mit dem Taf-Namen (s. <a class="external external-icon" href="https://www.w3.org/TR/custom-elements/">Custom Elements specification</a>). Siehe <a class="external external-icon" href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extending native HTML elements</a> für weitere Informationen zur Verwendung dieses Parameters.</dd> + <dd>Das neue Element erhält ein Attribut mit Namen <code>is</code> dessen Wert den Tag-Namen des Elements enthält. Angepasste Elemente sind ein experimentelles Feature, das nich in allen Browsern verfügbar ist.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Das neu erstelle <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element" title="The Element interface represents an object of a Document. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from Element but add additional functionality."><code>Element</code></a>.</p> + +<h2 id="Example" name="Example"><a id="Valid Namespace URIs" name="Valid Namespace URIs">Gültige Namespace-URLs</a></h2> + +<ul> + <li>HTML - <code>http://www.w3.org/1999/xhtml</code></li> + <li>SVG - <code>http://www.w3.org/2000/svg</code></li> + <li>XBL - <code>http://www.mozilla.org/xbl</code></li> + <li>XUL - <code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code></li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<p>Dies erstellt ein neues Element vom Typ <div> im <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a>-Namespace und fügt es dem vbox-Element hinzu. Obwohl dies kein besonders sinnvolles <a href="/en-US/docs/XUL" title="XUL">XUL</a>-Document ist, demonstriert es die Verwendung von Elementen verschiedener Namespaces innerhalb eines Dokuments:</p> + +<pre class="brush:xml"><?xml version="1.0"?> +<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml" + title="||Working with elements||" + onload="init()"> + +<script type="text/javascript"><![CDATA[ + var container; + var newdiv; + var txtnode; + + function init(){ + container = document.getElementById("ContainerBox"); + newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div"); + txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild."); + newdiv.appendChild(txtnode); + container.appendChild(newdiv); + } + +]]></script> + + <vbox id='ContainerBox' flex='1'> + <html:div> + The script on this page will add dynamic content below: + </html:div> + </vbox> + +</page> +</pre> + +<div class="note"> +<p>Das obige Beispiel verwendet ein Inline-Skript, was für XHTML-Dokumente nicht empfohlen wird. Dieses Beispiel ist eigentlich ein XUL-Dokument mit eingebettetem XHTML. Nichts desto trotz bleibt die Empfehlung bestehen.</p> +</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezigikation</th> + <th scope="col">Status</th> + <th scope="col">Kpmmentar</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilitä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 (WebKit)</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><code>options</code> argument</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(50)}}<sup>[2][3]</sup></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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</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> + +<p>[1] In vorangegangenen Versionen dieser Spezifikation war dieses Argument ein einfacher String, dessen Wert der Tag-Name eines angepassten Elements ist. Aus Gründen der Abwärtskompatibilität akzeptiert Chrome hier beide Formate</p> + +<p>[2] Siehe [1] oben: Wie Chrome, akzeptiert hier auch Firefox einen String anstelle eines Objekts. Allerdings erst ab Version 51 aufwärts. In Version 50 muss <code>options</code> ein Objekt sein.</p> + +<p>[3] Um in Firefox mit angepassten Elementen zu experimentieren müssen die Einstellungen <code>dom.webcomponents.enabled</code> und <code>dom.webcomponents.customelements.enabled</code> auf <code>true</code> gesetzt werden.</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="createElement">document.createElement</a></li> + <li><a href="createTextNode">document.createTextNode</a></li> + <li><a href="../Node/namespaceURI">Node.namespaceURI</a></li> + <li><a class="external" href="http://www.w3.org/TR/1999/REC-xml-names-19990114">Namespaces in XML</a></li> +</ul> diff --git a/files/de/web/api/document/createtextnode/index.html b/files/de/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..53fae2cc1c --- /dev/null +++ b/files/de/web/api/document/createtextnode/index.html @@ -0,0 +1,131 @@ +--- +title: Document.createTextNode() +slug: Web/API/Document/createTextNode +tags: + - API + - DOM + - Méthode + - Referenz + - Textknoten + - Textnode +translation_of: Web/API/Document/createTextNode +--- +<div>{{APIRef("DOM")}}</div> + +<p>Erzeugt einen Textknoten.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>var text</var> = document.createTextNode(<var>data</var>); +</pre> + +<ul> + <li><code>text</code> ist ein Textknoten</li> + <li><code>data</code> ist eine Zeichenkette oder ein Ausdruck, der eine Zeichenkette erzeugt. Entity-Definitionen (&...;) werden nicht umgesetzt.</li> +</ul> + +<h2 id="Example">Example</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>createTextNode example</title> +<script> +function addTextNode(text) { + var newtext = document.createTextNode(text), + p1 = document.getElementById("p1"); + + p1.appendChild(newtext); +} +</script> +</head> + +<body> + <button onclick="addTextNode('JA! ');">JA!</button> + <button onclick="addTextNode('NEIN! ');">NEIN!</button> + <button onclick="addTextNode('WIR SCHAFFEN DAS! ');">WIR SCHAFFEN DAS!</button> + + <hr /> + + <p id="p1">Erste Zeile des Absatzes.</p> +</body> +</html> +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilitä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 (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/api/document/createtreewalker/index.html b/files/de/web/api/document/createtreewalker/index.html new file mode 100644 index 0000000000..61e526b92c --- /dev/null +++ b/files/de/web/api/document/createtreewalker/index.html @@ -0,0 +1,241 @@ +--- +title: Document.createTreeWalker() +slug: Web/API/Document/createTreeWalker +tags: + - API + - DOM + - DOM-Referenz + - Document + - Dokument + - Méthode +translation_of: Web/API/Document/createTreeWalker +--- +<div>{{ApiRef("Document")}}</div> + +<p>Die Methode <strong><code>Document.createTreeWalker()</code></strong> erzeugt ein neues {{domxref("TreeWalker")}} Objekt und gibt dieses zurück.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>treeWalker</em> = <em>document</em>.createTreeWalker(<em>wurzel</em>, <em>anzeigeFilter</em>, <em>filter</em>, <em>entityReferenceExpansion</em>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><em>wurzel</em></dt> + <dd>Ist der Ursprungs- oder Wurzelknoten {{domxref("Node")}} des {{domxref("TreeWalker")}}-Durchlaufens. Normalerweise ist dies ein Element, das zum Dokument gehört.</dd> + + <dt><em>anzeigeFilter {{optional_inline}}</em></dt> + <dd>Optionale <code>unsigned long</code>Bitmaske, erstellt durch bitweise ODER-Verknüpfung der Konstanten von <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>. Erlaubt eine bequeme Filterung auf bestimmte Knotentypen. Der Standardwert ist <code>0xFFFFFFFF</code>, auch repräsentiert durch die <code>SHOW_ALL</code>-Konstante. + <table class="standard-table"> + <tbody> + <tr> + <td class="header">Konstante</td> + <td class="header">numerischer Wert</td> + <td class="header">Beschreibung</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ALL</code></td> + <td><code>-1</code> (Maximalwert von <code>unsigned long</code>)</td> + <td>Zeigt alle Knoten.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td> + <td><code>2</code></td> + <td>Zeigt Attribut-Knoten {{domxref("Attr")}}. Das ist nur sinnvoll, wenn der {{domxref("TreeWalker")}} mit einem {{domxref("Attr")}}-Knoten als Wurzel erzeugt wird. In diesem Fall erscheint der Attribut-Knoten an der ersten Position bei der Durchquerung. Da Attribute nie Kind-Knoten anderer Knoten sind, erscheinen sie nicht, wenn der Dokumentenbaum durchlaufen wird.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td> + <td><code>8</code></td> + <td>Zeigt {{domxref("CDATASection")}}-Knoten.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_COMMENT</code></td> + <td><code>128</code></td> + <td>Zeigt {{domxref("Comment")}}-Knoten.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT</code></td> + <td><code>256</code></td> + <td>Zeigt {{domxref("Document")}}-Knoten.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td> + <td><code>1024</code></td> + <td>Zeigt {{domxref("DocumentFragment")}}-Knoten.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td> + <td><code>512</code></td> + <td>Zeigt {{domxref("DocumentType")}}-Knoten.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ELEMENT</code></td> + <td><code>1</code></td> + <td>Zeigt {{domxref("Element")}}-Knoten.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td> + <td><code>32</code></td> + <td>Zeigt {{domxref("Entity")}}-Knoten. Dies ist nur sinnvoll, wenn ein {{domxref("TreeWalker")}} mit einem {{domxref("Entity")}}-Knoten als Wurzel erzeugt wird. In diesem Fall erscheint der {{domxref("Entity")}}-Knoten an der ersten Position bei der Durchquerung. Da Entity-Knoten nie Kind-Knoten anderer Knoten sind, erscheinen sie nicht, wenn der Dokumentenbaum durchlaufen wird.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td> + <td><code>16</code></td> + <td>Shows {{domxref("EntityReference")}} nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td> + <td><code>2048</code></td> + <td>Zeigt {{domxref("Notation")}}-Knoten. Dies ist nur sinnvoll, wenn ein {{domxref("TreeWalker")}} mit einem {{domxref("Notation")}}-Knoten als Wurzel erzeugt wird. In diesem Fall erscheint der {{domxref("Notation")}}-Knoten an der ersten Position bei der Durchquerung. Da Entity-Knoten nie Kind-Knoten anderer Knoten sind, erscheinen sie nicht, wenn der Dokumentenbaum durchlaufen wird.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td> + <td><code>64</code></td> + <td>Zeigt {{domxref("ProcessingInstruction")}}-Knoten.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_TEXT</code></td> + <td><code>4</code></td> + <td>Zeigt {{domxref("Text")}}-Knoten.</td> + </tr> + </tbody> + </table> + </dd> + + <dt><em>filter <em>{{optional_inline}}</em></em></dt> + <dd>Ein optionaler {{domxref("NodeFilter")}}. Muss ein ein Objekt mit einer Methode namens <code>acceptNode</code> sein, die vom {{domxref("TreeWalker")}} aufgerufen wird. Diese Methode entscheidet, ob ein übergebener Knoten, der schon von <code>anzeigeFilter</code> durchgelassen wurde, ausgegeben wird oder nicht.</dd> + + <dt><em>entityReferenceExpansion<em> {{optional_inline}}</em></em> <em>{{obsolete_inline}}</em></dt> + <dd>Optionaler {{domxref("Boolean")}}-Schalter. Entscheidet, ob der Teilbaum unter einer {{domxref("EntityReference")}} ausgelassen werden soll, wenn das Element ausgelassen wird.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Das folgende Beispiel läuft über alle Knoten im <code>body</code>, filtert die Menge auf Elementknoten und gibt im <code>filter</code> jeden Knoten als durchlässig an (die Filterung auf die Elementknoten hätte auch in der <code>acceptNode()</code>-Methode erfolgen können). +Mithilfe des <code>treeWalker</code> werden alle durchgelassenen Knoten in ein Array gesammelt.</p> + +<pre class="brush: js">var treeWalker = document.createTreeWalker( + document.body, + NodeFilter.SHOW_ELEMENT, + { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } }, + false +); + +var nodeList = []; + +while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode); +</pre> + +<h2 id="Spezfikationen">Spezfikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezfikation</th> + <th scope="col">Status</th> + <th scope="col">Bemerkung</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td><code>expandEntityReferences</code>-Parameter wurde entfernt. <code>whatToShow</code>- und <code>filter</code>-Parameter wurden als optional markiert.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilitä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>grundsätzliche Unterstützung</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>9.0</td> + <td>9.0</td> + <td>3.0</td> + </tr> + <tr> + <td><code>whatToShow</code> und <code>filter</code> optional</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("12")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.0</td> + </tr> + <tr> + <td><code>expandEntityReferences</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.8.1")}}<br> + In {{CompatGeckoDesktop("12")}} entfernt.</td> + <td>9.0</td> + <td>9.0</td> + <td>3.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>grundsätzliche Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9.0</td> + <td>3.0</td> + </tr> + <tr> + <td><code>whatToShow</code> und <code>filter</code> optional</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("12")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.0</td> + </tr> + <tr> + <td><code>expandEntityReferences</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}<br> + In {{CompatGeckoDesktop("12")}} entfernt</td> + <td>{{CompatVersionUnknown}}</td> + <td>9.0</td> + <td>3.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Schnittstelle des Ergebnis-Objekts: {{domxref("TreeWalker")}}.</li> + <li><a href="http://msdn.microsoft.com/en-us/library/ie/ff975302(v=vs.85).aspx">createTreeWalker auf MSDN</a></li> +</ul> diff --git a/files/de/web/api/document/dir/index.html b/files/de/web/api/document/dir/index.html new file mode 100644 index 0000000000..532837e9dd --- /dev/null +++ b/files/de/web/api/document/dir/index.html @@ -0,0 +1,95 @@ +--- +title: Document.dir +slug: Web/API/Document/dir +translation_of: Web/API/Document/dir +--- +<p>{{ApiRef("")}}</p> + +<p>Die <code><strong>Document.dir</strong></code> Eigenschaft ist ein {{domxref("DOMString")}}, welcher die direktionaler Bedeutung von einem Text eines Dokuments repräsentiert. Entweder von links nach rechts (Standard) oder rechts nach links. Mögliche Werte sind <code>'rtl'</code> rechts nach links, und <code>'ltr',</code> links nach rechts.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>dirStr</em> = <em>document.</em>dir; +<em>document.dir</em> = <em>dirStr;</em> +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikationen</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#the-dir-attribute:dom-dir", "Document.dir")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initiale Spezifikation</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 (WebKit)</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatVersionUnknown}}</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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Vor Firefox 23, hat die <code>Document.dir</code> Eigenschaft "ltr" wiedergegeben. unabhängig der Einstellung von dem dir-Attribut im Haupt-Element (root) {{htmlelement("html")}}. Und wenn eine Richtung im <code><html></code> gesetzt war, hatte die Veränderung der Sichtbarkeit keinen Effekt (obwohl der spätere Abruf des <code>Document.dir</code> wird behaupten, dass die Direktionalität geändert wurde). Wenn ein solches Attribut nicht im <code><html></code> gesetzt ist und die Eigenschaft geändert wurde, werden beide sichtbaren direktionale geändert und die <code>document.dir</code> Eigenschaft wird die Änderung korrekt wiedergeben.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533731.aspx" rel="freelink">http://msdn.microsoft.com/en-us/library/ms533731.aspx</a></li> +</ul> diff --git a/files/de/web/api/document/document/index.html b/files/de/web/api/document/document/index.html new file mode 100644 index 0000000000..ce3bddf174 --- /dev/null +++ b/files/de/web/api/document/document/index.html @@ -0,0 +1,45 @@ +--- +title: Document() +slug: Web/API/Document/Document +tags: + - API + - DOM + - Document + - Dokument + - Méthode + - Reference +translation_of: Web/API/Document/Document +--- +<div>{{APIRef}}</div> + +<p>Die <strong><code>Document</code></strong> Methode erstellt ein neues {{domxref("Document")}} Objekt das als Webseite im Browser geladen werden kann und bietet Möglichkeiten auf diese Inhalte zuzugreifen.</p> + +<h2 id="Konstruktor">Konstruktor</h2> + +<pre class="syntaxbox notranslate">new Document(); +</pre> + +<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('DOM WHATWG','#dom-document-document','Document')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + + + +<div>{{Compat("api.Document.Document")}}</div> diff --git a/files/de/web/api/document/documentelement/index.html b/files/de/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..aac46ae3ea --- /dev/null +++ b/files/de/web/api/document/documentelement/index.html @@ -0,0 +1,42 @@ +--- +title: document.documentElement +slug: Web/API/Document/documentElement +translation_of: Web/API/Document/documentElement +--- +<p>{{ApiRef}}</p> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p><strong>Lesbar, nicht schreibbar</strong></p> + +<p>Gibt das <a href="/en-US/docs/DOM/element"><code>Element</code></a> zurück, das die Wurzel des <code><a href="/en-US/docs/DOM/document">document</a></code> ist (zum Beispiel, das <code><html></code> Element für HTML Dokumente).</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>element</em> = document.documentElement; +</pre> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:js">var rootElement = document.documentElement; +var firstTier = rootElement.childNodes; + +// firstTier ist die NodeList von direkten Kindern des Wurzel-Elementes +for (var i = 0; i < firstTier.length; i++) { + // hier irgendwas mit den direkten Kindern des Wurzel-Elementes mit Hilfe + // von firstTier[i] erledigen +}</pre> + +<h2 id="Notes" name="Notes">Beobachtungen</h2> + +<p>Dieses Objekt ist lesbar aber nicht schreibbar. Es ist praktisch um auf die Wurzel eines beliebigen Dokumentes zuzugreifen.</p> + +<p>HTML Dokumente enthalten typischerweise ein einziges Tochter-Element<span style="line-height: 1.5;">, </span><code style="font-style: normal; line-height: 1.5;"><html></code><span style="line-height: 1.5;">, manchmal mit einem DOCTYPE. XML-Doumente enthalten oft mehrere Tochter-Elemente, einen DOCTYPE und </span><a href="/en-US/docs/DOM/ProcessingInstruction" style="line-height: 1.5;">Verarbeitungshinweise</a><span style="line-height: 1.5;">.</span></p> + +<p>Deswegen sollte <code>document.documentElement</code> statt <code>{{Domxref("document.firstElementChild")}}</code> benutzt werden, um auf das Wurzel-Element zuzugreifen.</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-87CD092">DOM Level 2 Core: Document.documentElement</a></li> +</ul> diff --git a/files/de/web/api/document/fullscreenchange_event/index.html b/files/de/web/api/document/fullscreenchange_event/index.html new file mode 100644 index 0000000000..7c8026858c --- /dev/null +++ b/files/de/web/api/document/fullscreenchange_event/index.html @@ -0,0 +1,87 @@ +--- +title: fullscreenchange +slug: Web/API/Document/fullscreenchange_event +translation_of: Web/API/Document/fullscreenchange_event +--- +<p>Das <code>onfullscreenchange</code> Event wird gesendet, wenn der Browser den Vollbildmodus startet oder beendet.</p> + +<h2 id="Allgemeine_Information">Allgemeine Information</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Speifikation</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Fullscreen</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Schnittstelle</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">Blubbert</dt> + <dd style="margin: 0 0 0 120px;">Ja</dd> + <dt style="float: left; text-align: right; width: 120px;">Abbrechbar</dt> + <dd style="margin: 0 0 0 120px;">Nein</dd> + <dt style="float: left; text-align: right; width: 120px;">Ziel</dt> + <dd style="margin: 0 0 0 120px;">Dokument</dd> + <dt style="float: left; text-align: right; width: 120px;">Standardaktion</dt> + <dd style="margin: 0 0 0 120px;">Keine</dd> +</dl> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:js;">// Diese API hat noch immer Vendor Prefixe in den Browsern, die sie implementieren +document.addEventListener("fullscreenchange", function( event ) { + + // Das Event selber hat keine Informationen über darüber, ob sich der Browser + // im Vollbildmodus befindet, aber man kann diesen über die Fullscreen API + // erhalten + if ( document.fullscreen ) { + + // Das Ziel des Events ist immer das Dokument, + // aber man kann das eigentliche Element im Vollbildmodus über die API + // abrufen + document.fullscreenElement; + } + +});</pre> + +<h2 id="Verwandte_Events">Verwandte Events</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla_event_reference/fullscreenerror"><code>fullscreenerror</code></a></li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de-DE/docs/Web/API/Fullscreen_API">Fullscreen API</a></li> +</ul> diff --git a/files/de/web/api/document/getelementbyid/index.html b/files/de/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..dfb6cc0d36 --- /dev/null +++ b/files/de/web/api/document/getelementbyid/index.html @@ -0,0 +1,131 @@ +--- +title: Document.getElementById() +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - Méthode + - Referenz +translation_of: Web/API/Document/getElementById +--- +<div>{{ ApiRef("DOM") }}</div> + +<div> </div> + +<div>Gibt eine Referenz zu einem Element anhand seiner <a href="/en-US/docs/DOM/element.id" title="en-US/docs/DOM/element.id">ID</a> zurück.</div> + +<div> </div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval"><em>element</em> = document.getElementById(<em>id</em>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<ul> + <li><code>element </code>ist eine Referenz zu einem <a href="/en-US/docs/DOM/element" title="en-US/docs/DOM/element">Element</a>-Objekt oder <code>null</code> wenn sich kein Element mit der angegebenen ID im Dokument befindet.</li> + <li><code>id </code>ist ein String, der auf Groß- und Kleinschreibung achtet und die einmalige ID des gesuchten Elements darstellt.</li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>getElementById Beispiel</title> + <script> + function changeColor(newColor) { + var elem = document.getElementById("para1"); + elem.style.color = newColor; + } + </script> +</head> +<body> + <p id="para1">Irgendein Text</p> + <button onclick="changeColor('blue');">Blau</button> + <button onclick="changeColor('red');">Rot</button> +</body> +</html> +</pre> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p>Neue Benutzer sollten beachten, dass die Groß- und Kleinschreibung bei "Id" im Namen der Methode korrekt sein <em>muss</em>, damit der Code funktioniert - 'getElementByID' funktioniert <em>nicht</em>, auch wenn es richtig zu sein scheint.</p> + +<p>Wenn kein Element mit der angegebenen id existiert, gibt die Funktion <code>null </code>zurück. Beachte, dass der ID-Parameter auf Groß- und Kleinschreibung achtet. Daraus folgt, dass <code>document.getElementById("<strong>M</strong>ain") </code>anstatt des Elements <code><div id="main"></code> <code>null</code> zurückgibt, weil "M" und "m" für den Zweck der Methode unterschiedlich sind.</p> + +<p><strong>Elemente die sich nicht im Dokument befinden </strong>werden nicht von <code>getElementById </code>gesucht. Wenn man ein Element erstellt und ihm eine ID zuweist, so muss man das Element mit <code><a href="https://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore" title="en-US/docs/DOM/Node.insertBefore">insertBefore</a></code> oder einer ähnlichen Methode in den Dokumentenbaum einfügen, bevor man darauf mit <code>getElementById</code> zugreifen kann.</p> + +<pre class="brush: js">var element = document.createElement("div"); +element.id = 'testqq'; +var el = document.getElementById('testqq'); // el wird null! +</pre> + +<p><strong>Nicht-HTML-Dokumente. </strong>Die DOM-Implementierung muss eine Information enthalten, welche angibt, welches Attribut vom Typ ID ist. Attribute mit dem Namen "id" sind solange nicht vom Typ ID bis sie in der Dokumenttypdefinition als solche definiert werden. Das <code>id</code>-Attribut ist in gebräuchlichen Fällen wie bei <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a> und anderen als ID-Typ definiert. Implementierungen, die nicht wissen, ob ein Attribut vom Typ ID ist oder nicht geben erwartungsgemäß <code>null </code>zurück.</p> + +<p><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 1;">Browserkompatibilität</strong></p> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>5.5</td> + <td>7.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile(1.0) }}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<p><code>getElementById</code> wurde in DOM Level 1 für HTML Dokumente eingeführt und in DOM Level 2 zu allen Dokumenten verschoben. </p> + +<ul> + <li>DOM Level 2 Spezifikation: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBId">getElementById</a></li> +</ul> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/DOM/document" title="en-US/docs/DOM/document">document</a> Referenz für andere Methoden und Eigenschaften, die man benutzen kann um Referenzen zu Elementen im Dokument zu bekommen.</li> + <li><a href="/en-US/docs/Web/API/document.querySelector">document.querySelector()</a> für Selektoren mit Abfragen wie <code>'div.myclass'</code></li> + <li><a href="/en-US/docs/xml/xml:id" title="en-US/docs/xml/id">xml:id</a> - hat eine Hilfsmethode, die es <code>getElementById </code>erlaubt, "xml:id" in XML-Dokumenten zu erhalten (wie es z.B. von Ajax-Aufrufen zurückgegeben wird)</li> +</ul> diff --git a/files/de/web/api/document/getelementsbyclassname/index.html b/files/de/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..182fef2f42 --- /dev/null +++ b/files/de/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,105 @@ +--- +title: Document.getElementsByClassName() +slug: Web/API/Document/getElementsByClassName +tags: + - API + - DOM + - DOM Element Methoden + - Gecko + - Gecko DOM Referenz + - HTML5 + - Méthode + - Referenz +translation_of: Web/API/Document/getElementsByClassName +--- +<p id="Summary">{{APIRef("DOM")}}</p> + +<p>Gibt ein Array-ähnliches Objekt von allen Kindelementen welche den gegebenen Klassennamen besitzen. Wenn dies auf das document-Objekt ausgeführt wird, wird das gesamte Dokument durchsucht, inklusive des root-Knoten. Man kann ebenfalls {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} mit jedem Element aufrufen; es werden nur Nachfolgende Elemente des gegebenenen root-Element zurückgegeben.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>var elements</var> = document.getElementsByClassName(<em>names</em>); // oder: +<var>var elements</var> = rootElement.getElementsByClassName(<em>names</em>);</pre> + +<ul> + <li><var>elements</var> ist eine live {{ domxref("HTMLCollection") }} von gefunden Elementen.</li> + <li><var>names</var> ist ein String der eine Liste der gefundenen Klassennamen repräsentiert; Klassennamen sind durch Leerzeichen getrennt.</li> + <li>getElementsByClassName kann auf jedes Element aufgerufen werden und nicht nur auf <em>document</em>. Das Element, auf dass diese Funktion aufgerufen wird, wird als root-Element genutzt.</li> +</ul> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<p>Alle Elemente der Klasse 'test' holen:</p> + +<pre class="brush: js">document.getElementsByClassName('test');</pre> + +<p>Alle Elemente die sowohl die Klassen 'red' und 'test' verwenden selektieren:</p> + +<pre class="brush: js">document.getElementsByClassName('red test');</pre> + +<p>Alle Elemente der Klasse 'test' die innerhalb eines Elements mit der ID 'main' selektieren:</p> + +<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre> + +<p>Man kann auch Methoden von Array.prototype auf {{ domxref("HTMLCollection") }} anwenden, in dem die <var>HTMLCollection</var> in dem sie an die <var>this</var> Werte der Methoden übergeben wird. Hier finden wir alle div-Elemente der Klasse 'test':</p> + +<pre class="brush: js">var testElements = document.getElementsByClassName('test'); +var testDivs = Array.prototype.filter.call(testElements, function(testElement){ + return testElement.nodeName === 'DIV'; +});</pre> + +<h2 id="Browserkompabilität">Browserkompabilitä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>3.0</td> + <td>9.0</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>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>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname"><span class="external">W3C: getElementsByClassName</span></a></li> +</ul> diff --git a/files/de/web/api/document/head/index.html b/files/de/web/api/document/head/index.html new file mode 100644 index 0000000000..63b389112d --- /dev/null +++ b/files/de/web/api/document/head/index.html @@ -0,0 +1,73 @@ +--- +title: Document.head +slug: Web/API/Document/head +tags: + - Referenz +translation_of: Web/API/Document/head +--- +<p>{{APIRef("DOM")}}</p> + +<p class="syntaxbox">Gibt das {{HTMLElement("head")}} Element des aktuellen Dokuments aus. Ist mehr als ein <code><head></code> Element vorhanden, wird das erste Element ausgegeben.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>var objRef</em> = document.head; +</pre> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: js">// in HTML: <head id="my-document-head"> +var aHead = document.head; + +alert(aHead.id); // "my-document-head"; + +alert( document.head === document.querySelector("head") ); // true +</pre> + +<h2 id="Example" name="Example">Anmerkungen</h2> + +<p><code>document.head</code> ist nur lesbar. Der Versuch dieser Eigenschaft einen Wert zu zuweisen, wird ohne Ausgabe einer Fehlermeldung fehlschlagen, oder, bei verwendetem<br> + <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">ECMAScript Strict Mode</a> in einem Gecko Browser, mit einem <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError">TypeError</a></code> quittiert.</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p> </p> + + + +<p>{{Compat("api.Document.head")}}</p> + +<p> </p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("document.body")}}</li> +</ul> diff --git a/files/de/web/api/document/importnode/index.html b/files/de/web/api/document/importnode/index.html new file mode 100644 index 0000000000..8420b6f794 --- /dev/null +++ b/files/de/web/api/document/importnode/index.html @@ -0,0 +1,93 @@ +--- +title: Document.importNode() +slug: Web/API/Document/importNode +tags: + - API + - DOM + - Dokument + - Knoten + - Kopie + - Méthode + - Referenz + - importNode +translation_of: Web/API/Document/importNode +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">Die {{domxref("Document")}}-Methode <code><strong>importNode()</strong></code> erzeugt eine neue Kopie eines konkreten Knotens ({{domxref("Node")}}) oder Dokumenten-Fragments ({{domxref("DocumentFragment")}}) eines anderen Dokuments, so dass diese dann in das aktuelle Dokument eingefügt werden kann. </span> An dieser Stelle ist es noch nicht im Dokumentenbaum eingefügt, um das zu erreichen, muss eine Methode wie {{domxref("Node.appendChild", "appendChild()")}} oder {{domxref("Node.insertBefore", "insertBefore()")}} aufgerufen werden.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>knoten</em> = <em>document</em>.importNode(<em>externerKnoten</em>, <em>deep</em>); +</pre> + +<dl> + <dt><code>externerKnoten</code></dt> + <dd>Der neue Knoten oder das neue Dokumenten-Fragment, welches in das aktuelle Dokument importiert werden soll. Nach dem Import ist der Elternknoten <code>null</code>, da der neue Knoten noch nicht in den Dokumentenbaum eingefügt wurde.</dd> + <dt><code>deep</code></dt> + <dd>Ein boolscher Wert der anzeigt, ob der komplette Unterbaum von<code>externalNode </code>importiert werden soll. Ist dieser Parameter <code>true</code>, werden <code>externalNode</code> so wie all seine Nachfahren kopiert; Ist er <code>false</code>, wird nur der einzelne Knoten, <code>externalNode</code>, importiert.</dd> +</dl> + +<div class="note"> +<p>In der DOM4-Spezifikation, ist <code>deep</code> als optionales Argument angeführt. Wird es weggelassen, verhält sich die Methode als ob der Wert von <code>deep</code><strong><code>true </code></strong>wäre, was zu standardmäßigen tiefen Kopieren führt. Um flach zu kopieren, muss <code>deep</code> explizit auf <code>false</code> gesetzt werden.</p> + +<p>Dieses Verhalten wurde in der letzten Spezifikation geändert, der Wert von <code>deep</code> wird bei Weglassen auf <strong><code>false </code></strong>gesetzt. Obwohl es immer noch optional ist, empfehlen wir für Vorwärts- und Rückwärtskompatibilität das <code>deep</code>-Argument immer explizit anzugeben. Seit Gecko 28.0 {{geckoRelease(28)}} ist eine Konsolenwarnung implementiert, wenn das Argument weggelassen wird. Seit Gecko 29.0 {{geckoRelease(29)}}) ist flaches Kopieren das Standardverhalten.</p> +</div> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: js">var iframe = document.getElementsByTagName("iframe")[0]; +var oldNode = iframe.contentWindow.document.getElementById("myNode"); +var newNode = document.importNode(oldNode, true); +document.getElementById("container").appendChild(newNode); +</pre> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p>Der Originalknoten wird nicht aus dem Ursprungsdokument entfernt. Der importierte Knoten ist des Weiteren eine Kopie des ursprünglichen.</p> + +<p> </p> + +<p>Nodes from external documents should be cloned using <a href="/de/docs/Web/API/Document/importNode" title="Die Document-Methode importNode() erzeugt eine neue Kopie eines konkreten Knotens (Node) oder Dokumenten-Fragments (DocumentFragment) eines anderen Dokuments, so dass diese dann in das aktuelle Dokument eingefügt werden kann. "><code>document.importNode()</code></a> (or adopted using <a href="/de/docs/Web/API/Document/adoptNode" title="Überträgt einen Knoten. Der Knoten und sein Unterbaum werden aus dem Dokument, in dem sie sich befinden entfernt (so vorhanden), und sein ownerDocument wird zu dem aktuellen Dokument geändert. Der Knoten kann dann in das aktuelle Dokument eingefügt werden."><code>document.adoptNode()</code></a>) before they can be inserted into the current document. For more on the <a class="new" href="/de/docs/Web/API/Node/ownerDocument" rel="nofollow" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>Node.ownerDocument</code></a> issues, see the <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p> + +<p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.</p> + +<p> </p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikationen</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("api.Document.importNode")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("document.adoptNode()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> +</ul> diff --git a/files/de/web/api/document/index.html b/files/de/web/api/document/index.html new file mode 100644 index 0000000000..f9b00cacfc --- /dev/null +++ b/files/de/web/api/document/index.html @@ -0,0 +1,405 @@ +--- +title: Document +slug: Web/API/Document +tags: + - DOM + - Gecko + - Gecko DOM Referenz +translation_of: Web/API/Document +--- +<div>{{ ApiRef("DOM") }}</div> + +<div></div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Jede im Browswer geladene Webseite hat ihr eigenen <code>document</code> Objekt. Das <code>Document</code> Interface dient als Einstiegspunkt in den Inhalt der Webseite (der <a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="Using_the_W3C_DOM_Level_1_Core">DOM tree</a>, beinhaltet Elemente wie {{HTMLElement("body")}} und {{HTMLElement("table")}}) und unterstützt Funktionen, die global für das Dokument gelten(z.B. das Aufrufen der URL der Seite und das Erstellen neuer Elemente im Dokument).</p> + +<p>Ein Dokument-Objekt kann von verschiedenen APIs bezogen werden:</p> + +<ul> + <li>Meistens arbeiten Sie mit dem Dokument, in dem das Skript läuft, indem Sie <code>document</code> in den <a href="/en-US/docs/HTML/Element/Script" title="HTML/Element/Script">scripts</a> des Dokuments verwenden. (Dasselbe Dokument kann auch als {{domxref("window.document")}} bezeichnet werden.)</li> + <li>Das Dokument eines Iframes über die <code><a href="/en-US/docs/Web/API/HTMLIFrameElement#Properties" title="DOM/HTMLIFrameElement#Properties">contentDocument</a></code> Eigenschaften des Iframes.</li> + <li>Die <a href="/en-US/docs/Web/API/XMLHttpRequest#responseXML" title="XMLHttpRequest#responseXML"><code>responseXML</code> of an <code>XMLHttpRequest</code> object</a>.</li> + <li>Das Dokument, zu dem ein bestimmter Knoten oder ein Element gehört, kann über die {{domxref("Node.ownerDocument","ownerDocument")}} -Eigenschaft des Knotens abgerufen werden.</li> +</ul> + +<p>Depending on the kind of the document (e.g. <a href="/en-US/docs/HTML" title="HTML">HTML</a> or <a href="/en-US/docs/XML" title="XML">XML</a>), different APIs may be available on the document object.</p> + +<ul> + <li>All document objects implement the <a href="http://dom.spec.whatwg.org/#interface-document"><code>Document</code></a> interface (and hence the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces). Thus, the "core" properties and methods documented on this page are available for all kinds of documents.</li> + <li>In contemporary browsers, some documents (e.g. those served with the <code>text/html</code> content type) also implement the {{domxref("HTMLDocument")}} interface.</li> + <li>In heutigen Browsern, SVG Dokumente implementieren das {{domxref("SVGDocument")}} Interface.</li> +</ul> + +<p>In der Zukunft, alle diese Interfaces werden zusammengefasst zum <code>Document</code> Interface.</p> + +<h2 id="Properties" name="Properties">Eigenschaften</h2> + +<div class="note"> +<p><strong>Hinweis:</strong> Das <code>Document</code> Interface erbt auch vom {{domxref("Node")}} und {{domxref("EventTarget")}} Interface.</p> +</div> + +<dl> + <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt> + <dd>Provides access to all elements with an id. This is a legacy non-standard interface, you should use the {{domxref("Document.getElementById()")}} method instead.</dd> + <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt> + <dd>Used with {{domxref("document.load")}} to indicate an asynchronous request.</dd> + <dt>{{domxref("Document.characterSet")}} {{experimental_inline}}</dt> + <dd>Returns the character set being used by the document.</dd> + <dt>{{domxref("Document.compatMode")}} {{experimental_inline}}</dt> + <dd>Indicates whether the document is rendered in Quirks or Strict mode.</dd> + <dt>{{domxref("Document.contentType")}} {{experimental_inline}}</dt> + <dd>Returns the Content-Type from the MIME Header of the current document.</dd> + <dt>{{domxref("Document.doctype")}}</dt> + <dd>Returns the Document Type Definition (DTD) of the current document.</dd> + <dt>{{domxref("Document.documentElement")}}</dt> + <dd>Returns the Element that is a direct child of the document. For HTML documents, this is normally the HTML element.</dd> + <dt>{{domxref("Document.documentURI")}}</dt> + <dd>Returns the document URL.</dd> + <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt> + <dd>Should return a {{domxref("DOMConfiguration")}} object.</dd> + <dt>{{domxref("Document.implementation")}}</dt> + <dd>Returns the DOM implementation associated with the current document.</dd> + <dt>{{domxref("Document.inputEncoding")}} {{Deprecated_inline}}</dt> + <dd>Returns the encoding used when the document was parsed.</dd> + <dt>{{domxref("Document.lastStyleSheetSet")}}</dt> + <dd>Returns the name of the style sheet set that was last enabled. Has the value <code>null</code> until the style sheet is changed by setting the value of {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd> + <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt> + <dd><code>true</code> if this document is synthetic, such as a standalone image, video, audio file, or the like.</dd> + <dt>{{domxref("Document.mozFullScreen")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd><code>true</code> when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd> + <dt>{{domxref("Document.mozFullScreenElement")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd>The element that's currently in full screen mode for this document.</dd> + <dt>{{domxref("Document.mozFullScreenEnabled")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd><code>true</code> if calling {{domxref("element.mozRequestFullscreen()")}} would succeed in the curent document.</dd> + <dt>{{domxref("Document.pointerLockElement")}} {{experimental_inline}}</dt> + <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd> + <dt>{{domxref("Document.preferredStyleSheetSet")}}</dt> + <dd>Returns the preferred style sheet set as specified by the page author.</dd> + <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt> + <dd>Returns which style sheet set is currently in use.</dd> + <dt>{{domxref("Document.styleSheets")}}</dt> + <dd>Returns a list of the style sheet objects on the current document.</dd> + <dt>{{domxref("Document.styleSheetSets")}}</dt> + <dd>Returns a list of the style sheet sets available on the document.</dd> + <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt> + <dd>Returns the encoding as determined by the XML declaration.</dd> + <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns <code>true</code> if the XML declaration specifies the document to be standalone (<em>e.g.,</em> An external part of the DTD affects the document's content), else <code>false</code>.</dd> + <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns the version number as specified in the XML declaration or <code>"1.0"</code> if the declaration is absent.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p> + +<h3 id="Erweiterung_für_HTML_Dokumente">Erweiterung für HTML Dokumente</h3> + +<p>Das <code>Document</code> Interface für HTML Dokumente erbt vom {{domxref("HTMLDocument")}} Interface oder, ist seit HTML5 erweitert für solche Dokumente:</p> + +<dl> + <dt>{{domxref("Document.activeElement")}}</dt> + <dd>Returns the currently focused element.</dd> + <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt> + <dd>Returns or sets the color of active links in the document body.</dd> + <dt>{{domxref("Document.anchors")}}</dt> + <dd>Returns a list of all of the anchors in the document.</dd> + <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt> + <dd>Returns an ordered list of the applets within a document.</dd> + <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the background color of the current document.</dd> + <dt>{{domxref("Document.body")}}</dt> + <dd>Returns the {{HTMLElement("body")}} element of the current document.</dd> + <dt>{{domxref("Document.cookie")}}</dt> + <dd>Returns a semicolon-separated list of the cookies for that document or sets a single cookie.</dd> + <dt>{{domxref("Document.defaultView")}}</dt> + <dd>Returns a reference to the window object.</dd> + <dt>{{domxref("Document.designMode")}}</dt> + <dd>Gets/sets the ability to edit the whole document.</dd> + <dt>{{domxref("Document.dir")}}</dt> + <dd>Gets/sets directionality (rtl/ltr) of the document.</dd> + <dt>{{domxref("Document.domain")}}</dt> + <dd>Returns the domain of the current document.</dd> + <dt>{{domxref("Document.embeds")}}</dt> + <dd>Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.</dd> + <dt>{{domxref("Document.fgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the foreground color, or text color, of the current document.</dd> + <dt>{{domxref("Document.forms")}}</dt> + <dd>Returns a list of the {{HTMLElement("form")}} elements within the current document.</dd> + <dt>{{domxref("Document.head")}}</dt> + <dd>Returns the {{HTMLElement("head")}} element of the current document.</dd> + <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Gets/sets the height of the current document.</dd> + <dt>{{domxref("Document.images")}}</dt> + <dd>Returns a list of the images in the current document.</dd> + <dt>{{domxref("Document.lastModified")}}</dt> + <dd>Returns the date on which the document was last modified.</dd> + <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of hyperlinks in the document.</dd> + <dt>{{domxref("Document.links")}}</dt> + <dd>Returns a list of all the hyperlinks in the document.</dd> + <dt>{{domxref("Document.location")}}</dt> + <dd>Returns the URI of the current document.</dd> + <dt>{{domxref("Document.plugins")}}</dt> + <dd>Returns a list of the available plugins.</dd> + <dt>{{domxref("Document.readyState")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns loading status of the document.</dd> + <dt>{{domxref("Document.referrer")}}</dt> + <dd>Returns the URI of the page that linked to this page.</dd> + <dt>{{domxref("Document.scripts")}}</dt> + <dd>Returns all the {{HTMLElement("script")}} elements on the document.</dd> + <dt>{{domxref("Document.title")}}</dt> + <dd>Returns the title of the current document.</dd> + <dt>{{domxref("Document.URL")}}</dt> + <dd>Returns a string containing the URL of the current document.</dd> + <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of visited hyperlinks.</dd> + <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the width of the current document.</dd> +</dl> + +<h3 id="Event_handlers" name="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt> + <dd>Returns the event handling code for the {{event("pointerlockchange")}} event.</dd> + <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt> + <dd>Returns the event handling code for the {{event("pointerlockerror")}} event.</dd> + <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the event handling code for the <code>readystatechange</code> event.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methoden</h2> + +<div class="note"> +<p><strong>Hinweis:</strong> Das <code>Document</code> Interface erbt auch vom {{domxref("Node")}} und {{domxref("EventTarget")}} Interface.</p> +</div> + +<dl> + <dt>{{domxref("Document.adoptNode","Document.adoptNode(Node node)")}}</dt> + <dd>Adopt node from an external document.</dd> + <dt>{{domxref("Document.captureEvents","Document.captureEvents(String eventName)")}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("window.captureEvents")}}.</dd> + <dt>{{domxref("Document.caretPositionFromPoint","Document.caretPositionFromPoint(Number x, Number y)")}}</dt> + <dd>Gets a {{domxref("CaretPosition")}} based on two coordinates.</dd> + <dt>{{domxref("Document.createAttribute","Document.createAttribute(String name)")}}</dt> + <dd>Creates a new {{domxref("Attr")}} object and returns it.</dd> + <dt>{{domxref("Document.createAttributeNS","Document.createAttributeNS(String namespace, String name)")}}</dt> + <dd>Creates a new attribute node in a given namespace and returns it.</dd> + <dt>{{domxref("Document.createCDATASection","Document.createCDATASection(String data)")}}</dt> + <dd>Creates a new CDATA node and returns it.</dd> + <dt>{{domxref("Document.createComment","Document.createComment(String comment)")}}</dt> + <dd>Creates a new comment node and returns it.</dd> + <dt>{{domxref("Document.createDocumentFragment()")}}</dt> + <dd>Creates a new document fragment.</dd> + <dt>{{domxref("Document.createElement","Document.createElement(String name)")}}</dt> + <dd>Creates a new element with the given tag name.</dd> + <dt>{{domxref("Document.createElementNS","Document.createElementNS(String namespace, String name)")}}</dt> + <dd>Creates a new element with the given tag name and namespace URI.</dd> + <dt>{{domxref("Document.createEntityReference","Document.createEntityReference(String name)")}} {{obsolete_inline}}</dt> + <dd>Creates a new entity reference object and returns it.</dd> + <dt>{{domxref("Document.createEvent","Document.createEvent(String interface)")}}</dt> + <dd>Creates an event object.</dd> + <dt>{{domxref("Document.createNodeIterator","Document.createNodeIterator(Node root[, Number whatToShow[, NodeFilter filter]])")}}</dt> + <dd>Creates a {{domxref("NodeIterator")}} object.</dd> + <dt>{{domxref("Document.createProcessingInstruction","Document.createProcessingInstruction(String target, String data)")}}</dt> + <dd>Creates a new {{domxref("ProcessingInstruction")}} object.</dd> + <dt>{{domxref("Document.createRange()")}}</dt> + <dd>Creates a {{domxref("Range")}} object.</dd> + <dt>{{domxref("Document.createTextNode","Document.createTextNode(String text)")}}</dt> + <dd>Creates a text node.</dd> + <dt>{{domxref("Document.createTreeWalker","Document.createTreeWalker(Node root[, Number whatToShow[, NodeFilter filter]])")}}</dt> + <dd>Creates a {{domxref("TreeWalker")}} object.</dd> + <dt>{{domxref("Document.elementFromPoint","Document.elementFromPoint(Number x, Number y)")}}</dt> + <dd>Returns the element visible at the specified coordinates.</dd> + <dt>{{domxref("Document.enableStyleSheetsForSet","Document.enableStyleSheetsForSet(String name)")}}</dt> + <dd>Enables the style sheets for the specified style sheet set.</dd> + <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt> + <dd>Release the pointer lock.</dd> + <dt>{{domxref("Document.getElementsByClassName","Document.getElementsByClassName(String className)")}}</dt> + <dd>Returns a list of elements with the given class name.</dd> + <dt>{{domxref("Document.getElementsByTagName","Document.getElementsByTagName(String tagName)")}}</dt> + <dd>Returns a list of elements with the given tag name.</dd> + <dt>{{domxref("Document.getElementsByTagNameNS","Document.getElementsByTagNameNS(String namespace, String tagName)")}}</dt> + <dd>Returns a list of elements with the given tag name and namespace.</dd> + <dt>{{domxref("Document.importNode","Document.importNode(Node node, Boolean deep)")}}</dt> + <dd>Returns a clone of a node from an external document.</dd> + <dt>{{domxref("document.mozSetImageElement")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Allows you to change the element being used as the background image for a specified element ID.</dd> + <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt> + <dd>Replaces entities, normalizes text nodes, etc.</dd> + <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Releases the current mouse capture if it's on an element in this document.</dd> + <dt>{{domxref("Document.releaseEvents")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("window.releaseEvents")}}.</dd> + <dt>{{domxref("document.routeEvent")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt> + <dd>See {{domxref("window.routeEvent")}}.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<dl> + <dt>{{domxref("Document.getElementById","Document.getElementById(String id)")}}</dt> + <dd>Returns an object reference to the identified element.</dd> + <dt>{{domxref("Document.querySelector","Document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns the first Element node within the document, in document order, that matches the specified selectors.</dd> + <dt>{{domxref("Document.querySelectorAll","Document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns a list of all the Element nodes within the document that match the specified selectors.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("XPathEvaluator")}} interface:</p> + +<dl> + <dt>{{domxref("Document.createExpression","Document.createExpression(String expression, XPathNSResolver resolver)")}}</dt> + <dd>Compiles an <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> which can then be used for (repeated) evaluations.</dd> + <dt>{{domxref("Document.createNSResolver","Document.createNSResolver(Node resolver)")}}</dt> + <dd>Creates an {{domxref("XPathNSResolver")}} object.</dd> + <dt>{{domxref("Document.evaluate","Document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt> + <dd>Evaluates an XPath expression.</dd> +</dl> + +<h3 id="Erweiterung_für_HTML_Dokumente_2">Erweiterung für HTML Dokumente</h3> + +<p>Das <code>Document</code> Interface für HTML Dokumente erbt vom {{domxref("HTMLDocument")}} Interface oder ist seit HTML5 erweitert für solche Dokumente:</p> + +<dl> + <dt>{{domxref("Document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd> + <dt>{{domxref("Document.close()")}}</dt> + <dd>Closes a document stream for writing.</dd> + <dt>{{domxref("Document.execCommand","Document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt> + <dd>On an editable document, executes a formating command.</dd> + <dt>{{domxref("Document.getElementsByName","Document.getElementsByName(String name)")}}</dt> + <dd>Returns a list of elements with the given name.</dd> + <dt>{{domxref("Document.getSelection()")}}</dt> + <dd>Returns a {{domxref("Selection")}} object related to text selected in the document.</dd> + <dt>{{domxref("Document.hasFocus()")}}</dt> + <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd> + <dt>{{domxref("Document.open()")}}</dt> + <dd>Opens a document stream for writing.</dd> + <dt>{{domxref("Document.queryCommandEnabled","Document.queryCommandEnabled(String command)")}}</dt> + <dd>Returns true if the formating command can be executed on the current range.</dd> + <dt>{{domxref("Document.queryCommandIndeterm","Document.queryCommandIndeterm(String command)")}}</dt> + <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd> + <dt>{{domxref("Document.queryCommandState","Document.queryCommandState(String command)")}}</dt> + <dd>Returns true if the formating command has been executed on the current range.</dd> + <dt>{{domxref("Document.queryCommandSupported","Document.queryCommandSupported(String command)")}}</dt> + <dd>Returns true if the formating command is supported on the current range.</dd> + <dt>{{domxref("Document.queryCommandValue","Document.queryCommandValue(String command)")}}</dt> + <dd>Returns the current value of the current range for a formatting command.</dd> + <dt>{{domxref("Document.registerElement","Document.registerElement(String tagname[, Object options])")}}</dt> + <dd>Registers a new custom element in the browser and returns a constructor for the new element.</dd> + <dt>{{domxref("Document.write","Document.write(String text)")}}</dt> + <dd>Writes text in a document.</dd> + <dt>{{domxref("Document.writeln","Document.writeln(String text)")}}</dt> + <dd>Writes a line of text in a document.</dd> +</dl> + +<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('DOM1','#i-Document','Document')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition for the interface</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Supersede DOM 1</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Supersede DOM 2</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Intend to supersede DOM 3</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Turn the {{domxref("HTMLDocument")}} interface into a <code>Document</code> extension.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td> + <td>{{Spec2('DOM3 XPath')}}</td> + <td>Define the {{domxref("XPathEvaluator")}} interface which extend <code>Document</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<h3 id="Firefox_Hinweise">Firefox Hinweise</h3> + +<p>Mozilla defines a set of non-standard properties made only for XUL content:</p> + +<dl> + <dt>{{domxref("document.currentScript")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd> + <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd> + <dt>{{domxref("document.popupNode")}}</dt> + <dd>Returns the node upon which a popup was invoked.</dd> + <dt>{{domxref("document.tooltipNode")}}</dt> + <dd>Returns the node which is the target of the current tooltip.</dd> +</dl> + +<p>Mozilla also define some non-standard methods:</p> + +<dl> + <dt>{{domxref("Document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> + <dt>{{domxref("Document.getBoxObjectFor")}} {{obsolete_inline}}</dt> + <dd>Use the {{domxref("Element.getBoundingClientRect()")}} method instead.</dd> + <dt>{{domxref("Document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt> + <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd> + <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> +</dl> + +<h3 id="Internet_Explorer_Hinweise">Internet Explorer Hinweise</h3> + +<p>Microsoft defines some non-standard properties:</p> + +<dl> + <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd> + <dt><span style="font-weight: normal; line-height: 1.5;">Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</span></dt> +</dl> + +<dl> + <dt>{{domxref("document.contains")}}</dt> + <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd> +</dl> diff --git a/files/de/web/api/document/queryselector/index.html b/files/de/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..7fadcd87ce --- /dev/null +++ b/files/de/web/api/document/queryselector/index.html @@ -0,0 +1,129 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - DOM + - Funktion + - Methode(2) + - Méthode + - Referenz + - Selektor + - Selektoren +translation_of: Web/API/Document/querySelector +--- +<div>{{ApiRef("DOM")}}</div> + +<p>Die Methode <code><strong>querySelector()</strong></code> von {{domxref("Document")}} gibt das erste {{domxref("Element")}} innerhalb eines Dokuments zurück, welches dem angegebenen Selektor bzw. Selektoren entspricht. Wurden keine Übereinstimmungen gefunden wird <code>null</code> zurückgegeben.</p> + +<div class="blockIndicator note"> +<p><strong>Hinweis:</strong> Der Abgleich erfolgt indem sämtliche Knoten des Dokuments und deren Unterknoten der Reihe nach mittels Tiefensuche in Hauptreihenfolge (<em>depth-first pre-order</em>) durchlaufen werden.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>element</var> = document.querySelector(<var>selectors</var>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>selectors</code></dt> + <dd>Ein {{domxref("DOMString")}} mit einem oder mehreren Selektoren die abgeblichen werden sollen. Dieser String muss ein gültiger CSS-Selektor-String sein. Ist dies nicht der Fall, wird eine <code>SYNTAX_ERR</code> Exception ausgelöst. Weitere Informationen zu Selektoren und deren Verwaltung finden Sie unter <a href="/de/docs/Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln">DOM Elemente mittels Selektoren ermitteln</a>.</dd> +</dl> + +<div class="note"> +<p><strong>Hinweis:</strong> Zeichen, die nicht zur Standard-CSS-Syntax gehören, müssen mit einem Backslash-Zeichen maskiert werden. Da JavaScript auch Backslash-Escape-Anweisungen verwendet, müssen Sie beim Schreiben von String-Literalen mit diesen Zeichen besonders vorsichtig sein. Weitere Informationen finden Sie unter {{anch("Sonderzeichen maskieren")}}.</p> +</div> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein {{domxref("Element")}}-Objekt, das das erste Element des Dokuments darstellt, das der angegebenen Gruppe von <a href="/de/docs/Web/CSS/CSS_Selectors">CSS-Selektoren</a> entspricht, oder <code>null</code>, wenn keine Übereinstimmungen vorhanden sind.</p> + +<p>Wenn Sie eine Liste aller Elemente benötigen, die mit den angegebenen Selektoren übereinstimmen, verwenden Sie stattdessen {{domxref("document.querySelectorAll()", "querySelectorAll()")}}.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><code>SYNTAX_ERR</code></dt> + <dd>Die Syntax der angegebenen Selektoren ist ungültig.</dd> +</dl> + +<h2 id="Nutzungshinweise">Nutzungshinweise</h2> + +<p>Wenn der angegebene Selektor mit einer ID übereinstimmt, die im Dokument fälschlicherweise mehrmals vorkommt, wird das erste Element mit dieser ID zurückgegeben.</p> + +<p><a href="/de/docs/Web/CSS/Pseudo-elements">CSS-Pseudoelemente</a> geben niemals Elemente zurück, wie in der <a href="https://www.w3.org/TR/selectors-api/#grammar">Selektoren-API</a> angegeben.</p> + +<h3 id="Sonderzeichen_maskieren">Sonderzeichen maskieren</h3> + +<p>Um mit einer ID oder Selektoren abzugleichen, die nicht der Standard-CSS-Syntax entsprechen (z. B. durch einen unzulässigen Doppelpunkt oder Leerzeichen), müssen Sie das Zeichen mit einem Backslash ("<code>\</code>") maskieren. Da der Backslash selbst ebenfalls ein Maskierungszeichen in JavaScript ist, müssen Sie ihn bei der Eingabe eines Stringliterals <em>zweimal</em> maskieren (einmal für den JavaScript String und einmal für <code>querySelector()</code>):</p> + +<pre class="brush: html"><div id="foo\bar"></div> +<div id="foo:bar"></div> + +<script> + console.log('#foo\bar'); // "#fooar" (\b is the backspace control character) + document.querySelector('#foo\bar'); // Does not match anything + + console.log('#foo\\bar'); // "#foo\bar" + console.log('#foo\\\\bar'); // "#foo\\bar" + document.querySelector('#foo\\bar'); // Match the first div + + document.querySelector('#foo:bar'); // Does not match anything + document.querySelector('#foo\\:bar'); // Match the second div +</script></pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Erstes_Element_ermitteln_das_mit_einer_Klasse_übereinstimmt">Erstes Element ermitteln, das mit einer Klasse übereinstimmt</h3> + +<p>In diesem Beispiel wird das erste Element im Dokument mit der Klasse "<code>myclass</code>" zurückgegeben:</p> + +<pre class="brush: js">var el = document.querySelector(".myclass"); +</pre> + +<h3 id="Ein_komplexerer_Selektor">Ein komplexerer Selektor</h3> + +<p>Selektoren können auch sehr mächtig sein, wie das folgende Beispiel zeigt. Hier wird das erste {{HTMLElement("input")}}-Element mit dem Namen "login" (<code><input name="login"/></code>) innerhalb eines {{HTMLElement("div")}}, dessen Klasse "user-panel main" ist (<code><div class="user-panel main"></code>), im Dokument zurückgegeben:</p> + +<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name='login']"); +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<div>{{Compat("api.Document.querySelector")}}</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln">DOM Elemente mittels Selektoren ermitteln</a></li> + <li>{{domxref("Element.querySelector()")}}</li> + <li>{{domxref("Document.querySelectorAll()")}}</li> + <li>{{domxref("Element.querySelectorAll()")}}</li> + <li><a href="/de/docs/Code_snippets/QuerySelector">Code-Ausschnitte für querySelector</a></li> +</ul> diff --git a/files/de/web/api/document/queryselectorall/index.html b/files/de/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..80ab2a83c2 --- /dev/null +++ b/files/de/web/api/document/queryselectorall/index.html @@ -0,0 +1,172 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - Document + - querySelectorAll +translation_of: Web/API/Document/querySelectorAll +--- +<div>{{APIRef("DOM")}}</div> + +<p>Die Methode <code><strong>querySelectorAll()</strong></code> von {{domxref("Document")}} gibt eine statische (nicht live) {{domxref("NodeList")}} zurück, die eine Liste der Elemente des Dokuments darstellt, die mit der angegebenen Selektorgruppe übereinstimmen.</p> + +<div class="blockIndicator note"> +<p><strong>Hinweis:</strong> Diese Methode wird basierend auf dem Mixin der Methode {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} von {{domxref("ParentNode")}} implementiert.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>selectors</code></dt> + <dd>Ein {{domxref("DOMString")}} der einen oder mehrere Selektoren zum Abgleich enthält. Dieser String muss ein valider <a href="/de/docs/Web/CSS/CSS_Selectors">CSS-Selektor</a>-String sein, andernfalls wird eine <code>SyntaxError</code> Exception ausgelöst. Weitere Informationen zu Selektoren und deren Verwaltung finden Sie unter <a href="https://developer.mozilla.org/de/docs/Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln">DOM Elemente mittels Selektoren ermitteln</a>. Es können mehrere durch Kommata getrennte Selektoren angegeben werden.</dd> +</dl> + +<div class="note"> +<p><strong>Hinweis:</strong> Zeichen, die nicht zur Standard-CSS-Syntax gehören, müssen mit einem Backslash-Zeichen maskiert werden. Da JavaScript auch Backslash-Escape-Anweisungen verwendet, müssen Sie beim Schreiben von String-Literalen mit diesen Zeichen besonders vorsichtig sein. Weitere Informationen finden Sie unter {{anch("Sonderzeichen maskieren")}}.</p> +</div> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Eine statische (nicht-live) {{domxref("NodeList")}} mit je einem {{domxref("Element")}}-Objekt für jedes Element das mind. einem der angegebenen Selektoren entspricht oder eine leere {{domxref("NodeList")}} im Falle keiner Übereinstimmungen.</p> + +<div class="blockIndicator note"> +<p><strong>Hinweis:</strong> Wenn <code>selectors</code> ein <a href="/de/docs/Web/CSS/Pseudo-elements">CSS Pseudo-Element</a> enthält ist die zurückgegebene Liste immer leer.</p> +</div> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>Die Syntax des <code>selectors</code>-String ist ungültig.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Eine_Liste_von_Übereinstimmungen_erhalten">Eine Liste von Übereinstimmungen erhalten</h3> + +<p>Um eine {{domxref("NodeList")}} aller {{HTMLElement("p")}}-Elemente des Dokuments zu erhalten:</p> + +<pre class="brush: js">var matches = document.querySelectorAll("p");</pre> + +<p>Das folgende Beispiel gibt eine Liste aller {{HTMLElement("div")}}-Elemente innerhalb des Dokuments zurück, deren Klasse entweder <code>"note"</code> oder <code>"alert"</code> ist:</p> + +<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert"); +</pre> + +<p>Hier erhalten wir eine Liste von <code><p></code>-Elementen, deren unmittelbares übergeordnetes Element ein {{HTMLElement("div")}} mit der Klasse <code>"highlighted"</code> ist und die sich in einem Container befinden, dessen ID <code>"test"</code> ist.</p> + +<pre class="brush: js">var container = document.querySelector("#test"); +var matches = container.querySelectorAll("div.highlighted > p");</pre> + +<p>Das folgende Beispiel nutzt einen <a href="/de/docs/Web/CSS/Attribute_selectors">Attribut-Selektor</a>, um eine Liste von {{HTMLElement("iframe")}}-Elementen im Dokument zurückzugeben, die ein <code>"data-src"</code> Attribut besitzen:</p> + +<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre> + +<p>Hier wird ein Attribut-Selektor verwendet, um eine Aufzählung der Listenelemente zurückzugeben, die in einer Liste mit der ID <code>"userlist"</code> enthalten sind und deren Attribut <code>"data-active"</code> den Wert <code>"1"</code> hat:</p> + +<pre class="brush: js">var container = document.querySelector("#userlist"); +var matches = container.querySelectorAll("li[data-active='1']");</pre> + +<h3 id="Auf_Übereinstimmungen_zugreifen">Auf Übereinstimmungen zugreifen</h3> + +<p>Sobald die {{domxref("NodeList")}} der übereinstimmenden Elemente zurückgegeben wird, können Sie sie wie jedes Array untersuchen. Wenn das Array leer ist (d. h. die Eigenschaft <code>length</code> 0 ist), wurden keine Übereinstimmungen gefunden.</p> + +<p>Ansonsten können Sie einfach die Standard-Array-Notation verwenden, um auf den Inhalt der Liste zuzugreifen. Sie können jede allgemeine Schleifenanweisung verwenden, wie etwa:</p> + +<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted"); + +highlightedItems.forEach(function(userItem) { + deleteUser(userItem); +});</pre> + +<h2 id="Benutzerhinweise">Benutzerhinweise</h2> + +<p><code>querySelectorAll()</code> verhält sich anders als die meisten JavaScript-DOM-Bibliotheken, was zu unerwarteten Ergebnissen führen kann.</p> + +<h3 id="HTML">HTML</h3> + +<p>Betrachten Sie dieses HTML mit seinen drei geschachtelten {{HTMLElement("div")}} Blöcken.</p> + +<pre class="brush: html"><div class="outer"> + <div class="select"> + <div class="inner"> + </div> + </div> +</div></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll('.outer .inner'); +inner.length; // 1, not 0! +</pre> + +<p>Wenn Sie in diesem Beispiel <code>".outer .inner"</code> im Kontext des <code><div></code> mit der Klasse <code>"select"</code> auswählen, wird das Element mit der Klasse <code>".inner"</code> immer noch gefunden, obwohl <code>.outer</code> kein Nachkomme des Basis-Elements ist, auf dem die Suche durchgeführt wird (<code>".select"</code>). Standardmäßig überprüft <code>querySelectorAll()</code> nur, ob sich das letzte Element im Selektor im Suchbereich befindet.</p> + +<p>Die {{cssxref(":scope")}} Pseudo-Klasse stellt das erwartete Verhalten wieder her, bei dem Selektoren nur mit Nachkommen des Basis-Elements übereinstimmen:</p> + +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll(':scope .outer .inner'); +inner.length; // 0 +</pre> + +<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("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Lebender Standard</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Initiale Definition</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>Originale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("api.Document.querySelectorAll")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://developer.mozilla.org/de/docs/Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln">DOM Elemente mittels Selektoren ermitteln</a></li> + <li><a href="/de/docs/Web/CSS/Attribute_selectors">Attribut-Selektoren</a> im CSS-Leitfaden</li> + <li><a href="/de/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribut-Selektoren</a> im MDN Lernbereich</li> + <li>{{domxref("Element.querySelector()")}} und {{domxref("Element.querySelectorAll()")}}</li> + <li>{{domxref("Document.querySelector()")}}</li> + <li>{{domxref("DocumentFragment.querySelector()")}} und {{domxref("DocumentFragment.querySelectorAll()")}}</li> + <li>{{domxref("ParentNode.querySelector()")}} und {{domxref("ParentNode.querySelectorAll()")}}</li> + <li><a class="new" href="/de/docs/Code_snippets/QuerySelector" rel="nofollow">Code-Ausschnitte für <code>querySelector()</code></a></li> +</ul> diff --git a/files/de/web/api/document/readystate/index.html b/files/de/web/api/document/readystate/index.html new file mode 100644 index 0000000000..da2593e9c7 --- /dev/null +++ b/files/de/web/api/document/readystate/index.html @@ -0,0 +1,111 @@ +--- +title: Document.readyState +slug: Web/API/Document/readyState +tags: + - API + - HTML DOM + - Property + - Referenz +translation_of: Web/API/Document/readyState +--- +<div>{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}</div> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p>Die Eigenschaft <strong>Document.readyState</strong> eines {{ domxref("document") }}-Objektes beschreibt dessen Ladezustand.</p> + +<h3 id="Werte">Werte</h3> + +<p>Die Eigenschaft <strong>readyState</strong> kann folgende Werte haben:</p> + +<dl> + <dt>loading</dt> + <dd>Das Dokument wird noch geladen.</dd> + <dt>interactive</dt> + <dd>Das Dokument selbst wurde vollständig eingelesen und verarbeitet, aber das Laden weiterer Bestandteile wie Bilder, Stylesheets und Frames ist noch nicht abgeschlossen.<br> + Dieser Status zeigt an, dass das Ereignis {{event("DOMContentLoaded")}} ausgelöst wurde.</dd> + <dt>complete</dt> + <dd>Das Dokument und seine Bestandteile wurden geladen.<br> + Dieser Status zeigt an, dass das Ereignis {{event("load")}} ausgelöst wurde.</dd> +</dl> + +<p>Ändert sich der Wert dieser Eigenschaft, wird das Ereignis {{event("readystatechange")}} des zugehörigen {{domxref("document") }}-Objekts augelöst.</p> + +<h2 id="Syntax"><span>Syntax</span></h2> + +<pre class="brush: js"><em>var string</em> = document.readyState; +</pre> + +<h2 id="Beispiele"><span>Beispiele</span></h2> + +<h3 id="Verschiedene_Ladezustände">Verschiedene Ladezustände</h3> + +<pre class="brush: js"><span>switch (document.readyState) { + case "loading": + // Das Dokument wird noch geladen. + break; + case "interactive": + // Das Dokument wurde geladen. Wir können nun die DOM-Elemente ansprechen. + var span = document.createElement("span"); + span.textContent = "A <span> element."; + document.body.appendChild(span); + break; + case "complete": + // Die Seite ist komplett geladen. + console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText); + break; +}</span> +</pre> + +<h3 id="readystatechange_als_eine_Alternative_zum_Ereignis_DOMContentLoaded">readystatechange als eine Alternative zum Ereignis DOMContentLoaded</h3> + +<pre class="brush:js">// Alternative zum Ereignis DOMContentLoaded +document.onreadystatechange = function () { + if (document.readyState == "interactive") { + initApplication(); + } +}</pre> + +<h3 id="readystatechange_als_eine_Alternative_zum_Ereignis_load">readystatechange als eine Alternative zum Ereignis load</h3> + +<pre class="brush: js">// Alternative zum Ereignis load +document.onreadystatechange = function () { + if (document.readyState == "complete") { + initApplication(); + } +}</pre> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initiale Spezifikation.</td> + </tr> + </tbody> +</table> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{event("readystatechange")}}</li> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("load")}}</li> +</ul> diff --git a/files/de/web/api/document/referrer/index.html b/files/de/web/api/document/referrer/index.html new file mode 100644 index 0000000000..8c1cd8d888 --- /dev/null +++ b/files/de/web/api/document/referrer/index.html @@ -0,0 +1,46 @@ +--- +title: Document.referrer +slug: Web/API/Document/referrer +tags: + - Referenz +translation_of: Web/API/Document/referrer +--- +<div>{{APIRef("DOM")}}</div> + +<p>Gibt den <a href="http://www.w3.org/Addressing/#background">URI</a> der Seite aus, von der die aktuelle Seite aufgerufen wurde.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">var <var>string</var> = <var>document</var>.referrer; +</pre> + +<h3 id="Wert">Wert</h3> + +<p>Der Wert ist eine leere Zeichenkette, wenn der Benutzer direkt auf die Seite navigiert ist (nicht über einen Link, sondern z.B. über ein Lesezeichen). Da es sich bei dieser Eigenschaft lediglich um einen String handelt, ist der Zugriff auf das DOM der referenzierenden Seite nicht möglich.</p> + +<p>Innerhalb eines {{HTMLElement("iframe")}}, wird der <code>Document.referrer</code> anfänglich auf den identischen Wert wie {{domxref("HTMLHyperlinkElementUtils/href", "href")}} der {{domxref("Window/location", "Window.location")}} des übergeordneten Fensters gesetzt.</p> + +<h2 id="Specification" name="Specification">Spezifikation</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('HTML WHATWG', '#dom-document-referrer-dev', 'document.referrer')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten erstellt. Wenn Sie einen Beitrag zu den Daten leisten möchten, dann laden Sie sich bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> herunter und senden Sie uns eine Pull-Anfrage.</div> + +<p>{{Compat("api.Document.referrer")}}</p> diff --git a/files/de/web/api/document/registerelement/index.html b/files/de/web/api/document/registerelement/index.html new file mode 100644 index 0000000000..f563250e8e --- /dev/null +++ b/files/de/web/api/document/registerelement/index.html @@ -0,0 +1,113 @@ +--- +title: Document.registerElement() +slug: Web/API/Document/registerElement +tags: + - API + - DOM + - Veraltet + - Web Components +translation_of: Web/API/Document/registerElement +--- +<p>{{APIRef("DOM")}}</p> + +<div class="warning"> +<p><strong>Warnung: </strong>document.registerElement() läuft zu Gunsten von <a href="/en-US/docs/Web/API/CustomElementRegistry/define">customElements.define()</a> aus.</p> +</div> + +<p>{{draft}}</p> + +<p>Die <code><strong>document.registerElement()</strong></code>-Methode registriert ein neues <a href="/en-US/docs/Web/Web_Components/Custom_Elements">benutzerdefiniertes Element</a> im Browser und gibt einen Konstruktor für das neue Element zurück.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Dies ist eine experimentelle Technologie. Der Browser, der sie benutzen soll, muss Web Components unterstützen. Siehe <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Web Components in Firefox erlauben</a>.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>constructor</em> = document.registerElement(<em>tag-name</em>, <em>options</em>);</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><em>tag-name</em></dt> + <dd>Der Name des benutzerdefinierten Elements. Der Name muss einen Bindestrich (-) enthalten, zum Beispiel <code>my-tag</code>.</dd> + <dt><em>options {{optional_inline}}</em></dt> + <dd> + <p>Ein Objekt mit den Eigenschaften <strong>prototype</strong>, auf dem das benutzerdefinierte Element basieren soll, und <strong>extends</strong>, einem bestehenden Tag, der erweitert werden soll. Beide sind optional.</p> + </dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Hier ist ein einfaches Beispiel:</p> + +<pre class="brush: js">var Mytag = document.registerElement('my-tag'); +</pre> + +<p>Der Tag ist num im Browser registriert. Die <code>Mytag</code>-Variable enthält einen Konstruktor, der benutzt werden kann, um ein <code>my-tag</code>-Element wie folgt im Dokument zu erzeugen:</p> + +<pre class="brush: js">document.body.appendChild(new Mytag());</pre> + +<p>Das fügt ein leeres <code>my-tag</code>-Element ein, dass sichtbar wird, wenn die Entwicklerwerkzeuge des Browsers benutzt werden aber nicht, wenn mit Hilfe des Brwoser der Quellcode betrachtet wird. So lange dem Tag kein Inhalt beigefügt wird, wird es auch in der normalen Browser-Ansicht nicht sichtbar sein. Inhalt kann beispielsweise folgendermaßen hinzugefügt werden:</p> + +<pre class="brush: js">var mytag = document.getElementsByTagName("my-tag")[0]; +mytag.textContent = "I am a my-tag element."; +</pre> + +<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>Grundlegende Unterstützung</td> + <td>35</td> + <td>31<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>25</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>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>4.4.4</td> + <td>31<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Diese API ist hinter einer Einstellung versteckt.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a dir="ltr" href="/en-US/docs/Web/Web_Components/Custom_Elements">Custom Elements</a></li> +</ul> diff --git a/files/de/web/api/document/title/index.html b/files/de/web/api/document/title/index.html new file mode 100644 index 0000000000..9c54e274a6 --- /dev/null +++ b/files/de/web/api/document/title/index.html @@ -0,0 +1,70 @@ +--- +title: Document.title +slug: Web/API/Document/title +translation_of: Web/API/Document/title +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">Die Eigenschaft <strong><code>document.title</code></strong> holt oder setzt den aktuellen <a href="/en-US/docs/Web/HTML/Element/title">Titel</a> des Dokuments.</span></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>docTitle</var> = <var>document</var>.title; +</pre> + +<p><em>docTitle</em> ist eine Zeichenfolge, die den Titel des Dokuments enthält. Wenn der Titel durch das Setzen von <code>document.title</code> überschrieben wurde, enthält er diesen Wert. Andernfalls enthält er den im Markup angegebenen Titel (siehe {{Anch("Anmerkungen")}} unten).</p> + +<pre class="syntaxbox"><em>document</em>.title = <em>newTitle</em>; +</pre> + +<p><code>newTitle</code> ist der neue Titel des Dokuments. Die Zuweisung beeinflusst den Rückgabewert von <code>document.title</code>, den für das Dokument angezeigten Titel (z.B. in der Titelleiste des Fensters oder Tabs), und sie beeinflusst auch das DOM des Dokuments (z.B. den Inhalt des Elements <code><title></code> in einem HTML-Dokument).</p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:js"><!DOCTYPE html> +<html> +<head> + <title>Hallo Welt!</title> +</head> +<body> + + <script> + alert(document.title); // zeigt "Hallo Welt!" + document.title = "Tschüss Welt!"; + alert(document.title); // zeigt "Tschüss Welt!" + </script> + +</body> +</html> +</pre> + +<h2 id="Anmerkungen">Anmerkungen</h2> + +<p>Diese Eigenschaft gilt für HTML-, SVG-, XUL- und andere Dokumente in Gecko.</p> + +<p>Bei HTML-Dokumenten ist der Anfangswert von <code>document.title</code> der Textinhalt des Elements <code><title></code>. Bei XUL ist es der Wert des {{XULAttr("title")}} Attributs des {{XULElem("window")}} oder eines anderen XUL-Elements der obersten Ebene.</p> + +<p>In XUL hat der Zugriff auf <code>document.title</code>, bevor das Dokument vollständig geladen ist, ein undefiniertes Verhalten: <code>document.title</code> gibt möglicherweise eine leere Zeichenfolge zurück, und das Setzen von <code>document.title</code> hat möglicherweise keine Wirkung.</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('HTML WHATWG','#document.title','document.title')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + + + +<p>{{Compat("api.Document.title")}}</p> diff --git a/files/de/web/api/document/url/index.html b/files/de/web/api/document/url/index.html new file mode 100644 index 0000000000..29770925ee --- /dev/null +++ b/files/de/web/api/document/url/index.html @@ -0,0 +1,19 @@ +--- +title: Document.URL +slug: Web/API/Document/URL +translation_of: Web/API/Document/URL +--- +<div>{{APIRef("DOM")}}</div> + +<p>Die schreibgeschützte Eigenschaft <code><strong>URL</strong></code> des {{domxref("Document")}} interface gibt den Ort des Dokuments als String zurück.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush: js">var <em>string</em> = document.URL +</pre> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-46183437">DOM Level 2 HTML: URL</a></li> +</ul> diff --git a/files/de/web/api/document/width/index.html b/files/de/web/api/document/width/index.html new file mode 100644 index 0000000000..5fc3e1c80a --- /dev/null +++ b/files/de/web/api/document/width/index.html @@ -0,0 +1,45 @@ +--- +title: Document.width +slug: Web/API/Document/width +translation_of: Web/API/Document/width +--- +<div>{{APIRef("DOM")}} {{Obsolete_header}}</div> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("6.0")}},<code> document.width </code>is no longer supported. Instead, use <code>document.body.clientWidth</code>. See {{domxref("element.clientWidth")}}.</p> +</div> + +<p>Gibt die Breite des {{HTMLElement("body")}} Elements des aktuellen Dokuments in Pixeln zurück.</p> + +<p>Wird nicht vom Internet Explorer unterstützt.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>pixels</em> = document.width; +</pre> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:js">function init() { + alert("Die Breite des Dokuments beträgt " + document.width + " Pixel."); +} +</pre> + +<h2 id="Alternatives" name="Alternatives">Alternativen</h2> + +<pre class="syntaxbox">document.body.clientWidth /* Breite des <body> */ +document.documentElement.clientWidth /* Breite des <html> */ +window.innerWidth /* Breite des Browserfensters */ +</pre> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<p>HTML5</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{domxref("document.height")}}</li> + <li>{{domxref("Element.clientWidth")}}</li> + <li>{{domxref("Element.scrollWidth")}}</li> +</ul> diff --git a/files/de/web/api/document/write/index.html b/files/de/web/api/document/write/index.html new file mode 100644 index 0000000000..3b25f6b658 --- /dev/null +++ b/files/de/web/api/document/write/index.html @@ -0,0 +1,85 @@ +--- +title: Document.write() +slug: Web/API/Document/write +tags: + - API + - DOM + - Document + - Méthode + - Referenz +translation_of: Web/API/Document/write +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>Schreibt eine Zeichenfolge in einen Dokument-Stream, der zuvor mittels <a href="/en-US/docs/Web/API/document.open">document.open()</a> geöffnet wurde.</p> + +<div class="note">Hinweis: da <code>document.write</code> in einen Dokument-<strong>Stream </strong>schreibt, wird beim Aufruf von <code>document.write</code> auf ein geschlossenes (fertig geladenes) Dokument dieses automatisch wieder mittels <code>document.open</code> geöffnet, <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.open#Notes">wodurch das Dokument geleert wird</a>.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">document.write(<em>markup</em>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>markup</code></dt> + <dd>Ein String, der in das Dokument geschrieben wird.</dd> +</dl> + +<h3 id="Beispiel">Beispiel</h3> + +<pre class="brush: html"><html> + +<head> + <title>write example</title> + + <script> + function newContent() { + alert("load new content"); + document.open(); + document.write("<h1>Raus mit dem Alten - rein mit dem Neuen!</h1>"); + document.close(); + } + </script> +</head> + +<body onload="newContent();"> + <p>originaler Dokumenten-Inhalt</p> +</body> + +</html> +</pre> + +<h2 id="Hinweise">Hinweise</h2> + +<p>Wird die Ausgabe auf ein Dokument angewendet, das zuvor nicht mittels <a href="/en-US/docs/Web/API/document.open"><code>document.open()</code></a> geöffnet wurde, löst dies ein implizites <code>document.open</code> aus. Sobald Sie den Schreibvorgang beendet haben, empfiehlt es sich <a href="/en-US/docs/Web/API/document.close"><code>document.close()</code></a> aufzurufen, um dem Browser mitzuteilen, dass das Dokument vollständig geladen werden kann. Der geschriebene Text wird in das Strukturmodell des Dokuments eingelesen. Im vorherigen Beispiel wird das <code>h1</code>-Element automatisch in einen Knoten im Dokument umgewandelt.</p> + +<p>Wird der <code>document.write()</code> Aufruf in ein im HTML eingeschlossenes <code><script></code> Tag eingebunden, wird <code>document.open()</code> nicht aufgerufen. Zum Beispiel:</p> + +<pre class="brush: html"><script> + document.write("<h1>Main title</h1>") +</script> +</pre> + +<div class="note"><strong>Hinweis:</strong> <code>document.write</code> und <code>document.writeln</code> <a href="/en-US/docs/Archive/Web/Writing_JavaScript_for_HTML">funktionieren nicht in XHTML Documenten</a> (Sie erhalten einen "Operation is not supported" [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] Fehler in der Fehlerkonsole). Dies tritt auf, sobald Sie eine lokale Datei mit der Erweiterung .xhtml laden oder eine Datei öffnen, die mit dem <code>application/xhtml+xml</code>-<a href="/en-US/docs/Glossary/MIME_type">MIME-Typ</a> vom Server gesendet wurde. Weitere Informationen erhalten Sie in der <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div> + +<div class="note"><strong>Hinweis:</strong> <code>document.write</code> in <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer">verzögert geladenen</a> oder <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async">asynchronen</a> Scripten wird ignoriert und Sie erhalten eine Nachricht ähnlich dieser in der Fehlerkonsole: "A call to <code>document.write()</code> from an asynchronously-loaded external script was ignored".</div> + +<div class="note"><strong>Hinweis </strong>(Nur Microsoft Edge): ein wiederholter Aufruf von<code>document.write</code> in einem <code><iframe></code> erzeugt den Fehler "SCRIPT70: Permission denied".</div> + +<div class="note"><strong>Hinweis </strong>(Chrome Version 55+): per <code>document.write()</code> injizierte <code><script></code>-Elemente werden bei einer 2G Verbindung nach einem HTTP Cache Miss nicht ausgeführt.</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75233634">DOM Level 2 HTML: <code>write()</code> Methode</a></li> + <li><a class="external" href="http://www.w3.org/TR/2011/WD-html5-author-20110705/apis-in-html-documents.html#dynamic-markup-insertion">Dynamische Markup-Einfügung in HTML</a></li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{ domxref("element.innerHTML") }}</li> + <li>{{ domxref("document.createElement()") }}</li> +</ul> diff --git a/files/de/web/api/document/writeln/index.html b/files/de/web/api/document/writeln/index.html new file mode 100644 index 0000000000..6581924105 --- /dev/null +++ b/files/de/web/api/document/writeln/index.html @@ -0,0 +1,60 @@ +--- +title: Document.writeln() +slug: Web/API/Document/writeln +translation_of: Web/API/Document/writeln +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>Schreibt eine Textfolge, gefolgt von einem Zeilenumbruchzeichen, in ein Dokument.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval notranslate">document.writeln(<em>line</em>); +</pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<ul> + <li><code>line</code> ist eine Zeichenfolge welche eine Textzeile enthält.</li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="notranslate">document.writeln("<p>enter password:</p>"); +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p><strong>document.writeln</strong> ist dasselbe wie {{domxref("document.write")}} aber fügt einen Zeilenumbruch hinzu.</p> + +<div class="note"><strong>Note:</strong> <strong>document.writeln</strong> (like <strong>document.write</strong>) does not work in XHTML documents (you'll get a "Operation is not supported" (<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>) error on the error console). This is the case if opening a local file with a .xhtml file extension or for any document served with an application/xhtml+xml MIME type. More information is available in the <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite" title="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Bemerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "#dom-document-writeln", "document.writeln()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-35318390", "document.writeln()")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("api.Document.writeln")}}</p> diff --git a/files/de/web/api/documentfragment/index.html b/files/de/web/api/documentfragment/index.html new file mode 100644 index 0000000000..8dc6abcceb --- /dev/null +++ b/files/de/web/api/documentfragment/index.html @@ -0,0 +1,258 @@ +--- +title: DocumentFragment +slug: Web/API/DocumentFragment +tags: + - API + - DOM + - DocumentFragment + - Documents + - Interface + - Reference + - Web Components +translation_of: Web/API/DocumentFragment +--- +<div>{{ APIRef("DOM") }}</div> + +<p>Das <strong><code>DocumentFragment</code></strong> interface stellt ein einfaches Objekt dar, welches ohne Bezug zu einem parent erstellt und verwendet werden kann. Es kann somit verstanden werden als eine leichtgewichtige Variante des {{domxref("Document")}}, die einen Ausschnitt einer Dokumentstruktur aus Element-Knoten abbildet. Der zentrale Unterschied dabei ist jedoch, dass das Fragment nicht Bestandteil der aktiven Seitenstruktur und des DOM-Baums ist. Dadurch haben Änderungen an dem Fragment keine Auswirkungen auf das aktive Dokument, wodurch unerwünschte Seiteneffekte von DOM-Änderungen wie {{Glossary("reflow")}} oder Performanceeinbußen verhindert werden können.</p> + +<p>Üblicherweise wird das <code>DocumentFragment</code> dazu verwendet, um einen neuen DOM-Teilbaum für eine Seite zu erzeugen und darin beliebig Fragmente und Knoten vorbereiten zu können, diese über das {{domxref("Node")}} interface mittels Methoden wie {{domxref("Node.appendChild", "appendChild()")}} und {{domxref("Node.insertBefore", "insertBefore()")}} hinzuzufügen. Wenn das Frament schließlich in die aktive Dokumentstruktur und deren DOM eingefügt wird, bleibt ein leeres <code>DocumentFragment </code>zurück. Da alle Knoten auf einmal in das aktive Dokument hinzugefügt werden, wird lediglich ein einzelner reflow und render Prozess ausgelöst, anstelle von potentiell unzähligen für jeden einzelnen, separat eingefügten Knoten.</p> + +<p>Das interface wird ebenso bei Web components verwendet: {{HTMLElement("template")}}-Elemente beinhalten ein <code>DocumentFragment</code> in ihrer {{domxref("HTMLTemplateElement.content")}} Eigenschaft.</p> + +<p>Ein leeres <code>DocumentFragment</code> kann jederzeit erzeugt werden über {{domxref("document.createDocumentFragment()")}} oder über den constructor.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Specification" name="Specification">Eigenschaften</h2> + +<p><em>Das interface hat keine spezifischen Eigenschaften, erhält jedoch über Vererbung die des übergeordneten </em><em>{{domxref("Node")}} und implementiert darüber hinaus jene des {{domxref("ParentNode")}} interfaces zusätzlich.</em></p> + +<dl> + <dt>{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Stellt eine aktuelle {{domxref("HTMLCollection")}} bereit mit allen {{domxref("Element")}} Objekten, die dem <code>DocumentFragment</code> angehören.</dd> + <dt>{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Stellt das {{domxref("Element")}} bereit, welches aktuell das erste Kind des <code>DocumentFragment</code> ist. <code>null</code> falls es keines gibt.</dd> + <dt>{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Stellt das {{domxref("Element")}} bereit, welches aktuell das letzte Kind des <code>DocumentFragment</code> ist. <code>null</code> falls es keines gibt.</dd> + <dt>{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Stellt als <code>unsigned long</code> die Anzahl der Kindelemente des <code>DocumentFragment </code>bereit.</dd> +</dl> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}</dt> + <dd>Erzeugt ein neues, leeres <code>DocumentFragment</code> Objekt.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<p><em>Das interface erbt die Methoden von {{domxref("Node")}}<em>, u</em>nd implementiert darüber hinaus jene des {{domxref("ParentNode")}} interfaces zusätzlich.</em></p> + +<dl> + <dt>{{domxref("DocumentFragment.find()")}} {{experimental_inline}}</dt> + <dd>Liefert das erste zutreffende {{domxref("Element")}} innerhalb des Baums des <code>DocumentFragment</code>.</dd> + <dt>{{domxref("DocumentFragment.findAll()")}} {{experimental_inline}}</dt> + <dd>Liefert eine {{domxref("NodeList")}} mit allen zutreffenden {{domxref("Element")}} innerhalb des Baums des <code>DocumentFragment</code>.</dd> + <dt>{{domxref("DocumentFragment.querySelector()")}}</dt> + <dd>Liefert den {{domxref("Element")}} Knoten im <code>DocumentFragment</code>, der in der Reihenfolge im document als erstes zu dem Selektor passt.</dd> + <dt>{{domxref("DocumentFragment.querySelectorAll()")}}</dt> + <dd>Liefert eine {{domxref("NodeList")}} mit allen {{domxref("Element")}} Knoden im <code>DocumentFragment</code>, die zu dem angegebenen Selektor passen.</dd> +</dl> + +<dl> + <dt>{{domxref("DocumentFragment.getElementById()")}}</dt> + <dd>Liefert den ersten {{domxref("Element")}} Knoten im <code style="font-size: 14px;">DocumentFragment</code>, dem in der document Reihenfolge zuerst die angegebene ID zugeordnet ist.</dd> +</dl> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkungen</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Added the constructor and the implementation of {{domxref("ParentNode")}}.</td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 2', '#the-apis', 'DocumentFragment')}}</td> + <td>{{Spec2('Selectors API Level 2')}}</td> + <td>Added the <code>find()</code> and <code>findAll()</code> methods.</td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td>Added the <code>querySelector()</code> and <code>querySelectorAll()</code> methods.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>No change from {{SpecName('DOM2 Core')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>No change from {{SpecName('DOM1')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}</td> + <td>{{Spec2('DOM1')}}</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>querySelector()</code> and <code>querySelectorAll()</code></td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>8.0</td> + <td>10.0</td> + <td>3.2 (525.3)</td> + </tr> + <tr> + <td><code>findAll()</code> and <code>find() </code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>DocumentFragment()</code> constructor {{experimental_inline}}</td> + <td>28.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("24.0")}}</td> + <td>{{CompatNo}}</td> + <td>15.0</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>ParentNode</code> properties {{experimental_inline}}</td> + <td>28.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("25.0")}}</td> + <td>{{CompatNo}}</td> + <td>15.0</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>ParentNode</code> methods {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</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>Edge</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>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>querySelector()</code> and <code>querySelectorAll()</code></td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>8.0</td> + <td>10.0</td> + <td>3.2 (525.3)</td> + </tr> + <tr> + <td><code>findAll()</code> and <code>find() </code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>DocumentFragment()</code> constructor {{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("24.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ParentNode</code> properties {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("25.0")}}</td> + <td>{{CompatNo}}</td> + <td>5.0</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>ParentNode</code> methods {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index.</a></li> +</ul> diff --git a/files/de/web/api/domerror/index.html b/files/de/web/api/domerror/index.html new file mode 100644 index 0000000000..1251609ed3 --- /dev/null +++ b/files/de/web/api/domerror/index.html @@ -0,0 +1,189 @@ +--- +title: DOMError +slug: Web/API/DOMError +tags: + - API + - DOM + - Fehler + - Interface + - Referenz +translation_of: Web/API/DOMError +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Das <strong><code>DOMError-</code></strong>Interface beschreibt ein Fehler-Objekt, welches ein Fehlername enthält.</p> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<dl> + <dt>{{domxref("DOMError.name")}} {{readOnlyInline}}</dt> + <dd>Gibt ein {{ domxref("DOMString") }} zurück, welcher einer der folgenden Fehlertypnamen repäsentiert (siehe unten).</dd> +</dl> + +<h2 id="Fehlertypen">Fehlertypen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Typ</td> + <td>Beschreibung</td> + </tr> + <tr> + <td><code>IndexSizeError</code></td> + <td>Der Index ist ausserhalb des gültigen Bereichs (z. B. bei einem {{ domxref("range") }}-Objekt).</td> + </tr> + <tr> + <td><code>HierarchyRequestError</code></td> + <td>Die Knoten-Baum-Hierarchie ist nicht korrekt.</td> + </tr> + <tr> + <td><code>WrongDocumentError</code></td> + <td>Das Objekt ist im falschen {{ domxref("document") }}.</td> + </tr> + <tr> + <td><code>InvalidCharacterError</code></td> + <td>Der String beeinhaltet unglütige Charakter.</td> + </tr> + <tr> + <td><code>NoModificationAllowedError</code></td> + <td>Das Objekt kann nicht modifiziert werden.</td> + </tr> + <tr> + <td><code>NotFoundError</code></td> + <td>Das Objekt kann nicht gefunden werden.</td> + </tr> + <tr> + <td><code>NotSupportedError</code></td> + <td>Die Operation wird nicht unterstützt</td> + </tr> + <tr> + <td><code>InvalidStateError</code></td> + <td>Das Objekt hat einen ungültigen Status.</td> + </tr> + <tr> + <td><code>SyntaxError</code></td> + <td><span class="hps">Der String entspricht </span><span class="hps">nicht den erwarteten</span> <span class="hps">Muster.</span></td> + </tr> + <tr> + <td><code>InvalidModificationError</code></td> + <td>Das Objekt kann nicht in dieser Art modifiziert werden.</td> + </tr> + <tr> + <td><code>NamespaceError</code></td> + <td>Die Operation ist nicht erlaubt in XML-Namespaces.</td> + </tr> + <tr> + <td><code>InvalidAccessError</code></td> + <td>Das Objekt unterstützt diese Operation oder dieses Argument nicht.</td> + </tr> + <tr> + <td><code>TypeMismatchError</code></td> + <td>Der Typ des Objekts entspricht nicht dem erwarteten Typ.</td> + </tr> + <tr> + <td><code>SecurityError</code></td> + <td>Diese Operation ist unsicher.</td> + </tr> + <tr> + <td><code>NetworkError</code></td> + <td>Ein Netzwerkfehler ist aufgetreten.</td> + </tr> + <tr> + <td><code>AbortError</code></td> + <td>Die Operation wurde abgebrochen.</td> + </tr> + <tr> + <td><code>URLMismatchError</code></td> + <td>Die angegebene URL entspricht nicht einer anderen URL.</td> + </tr> + <tr> + <td><code>QuotaExceededError</code></td> + <td>Das Kontingent wurde überschritten.</td> + </tr> + <tr> + <td><code>TimeoutError</code></td> + <td>Timeout bei der Operation.</td> + </tr> + <tr> + <td><code>InvalidNodeTypeError</code></td> + <td>Der Knoten ist nicht korrekt oder hat falsche Vorfahren für die Operation.</td> + </tr> + <tr> + <td><code>DataCloneError</code></td> + <td>Das Objekt kann nicht geklont werden.</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('DOM4', '#interface-domerror', 'DOMError')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatiblität">Browser-Kompatiblitä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>Basissupport</td> + <td>{{CompatUnknown}}</td> + <td>12.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</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>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basissupport</td> + <td>{{CompatUnknown}}</td> + <td>12.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{ domxref("DOMException") }}</li> +</ul> diff --git a/files/de/web/api/domparser/index.html b/files/de/web/api/domparser/index.html new file mode 100644 index 0000000000..8082197658 --- /dev/null +++ b/files/de/web/api/domparser/index.html @@ -0,0 +1,181 @@ +--- +title: DOMParser +slug: Web/API/DOMParser +translation_of: Web/API/DOMParser +--- +<p>{{APIRef("DOM")}}{{SeeCompatTable}}</p> + +<p>Der DOMParser kann XML oder HTML aus einem String in ein DOM-<a href="/en-US/docs/DOM/document" title="document">Document</a> parsen. Der DOMParser ist spezifiziert in <a href="http://html5.org/specs/dom-parsing.html" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a>.</p> + +<p><a href="/en-US/docs/DOM/XMLHttpRequest" title="DOM/XMLHttpRequest">XMLHttpRequest</a> unterstützt das parsen von XML- und HTML-Dokumenten auf die über eine URL zugegriffen wird.</p> + +<h2 id="DOMParser_erzeugen">DOMParser erzeugen</h2> + +<p>Um einen neuen <code>DOMParser</code> zu erzeugen benutze einfach <code>new DOMParser()</code>.</p> + +<p>Für mehr Informationen über das Erstellen von einem <code>DOMParser</code> in einer Firefox-Erweiterung, konsultiere die <a href="/en-US/docs/nsIDOMParser" title="nsIDOMParser"><code>nsIDOMParser</code></a>-Dokumentation.</p> + +<h2 id="XML_parsen">XML parsen</h2> + +<p>Nachdem du einmal ein Parser-Objekt erzeugt hast, kannst du XML-Strings mit der <code>parseFromString</code>-Methode parsen.</p> + +<pre class="brush: js">const parser = new DOMParser(); +const doc = parser.parseFromString(stringContainingXMLSource, "application/xml"); +</pre> + +<h3 id="Error_handling" name="Error_handling">Fehlerbehandlung</h3> + +<p>Beachte dass derzeit keine Exception ausgelöst wird, wenn es beim Ausführen des Parser-Prozesses zu einem Fehler kommen sollte. Stattdessen wird ein Fehler-Dokument (s.a. {{Bug(45566)}}) ausgelöst:</p> + +<pre class="brush:xml"><parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml"> +(error description) +<sourcetext>(a snippet of the source XML)</sourcetext> +</parsererror> +</pre> + +<p>Die Parsing-Fehler werden auch in der Error-Console, zusammen mit dem Dokument-URl als Fehlerquelle ausgegeben (s.u.).</p> + +<h2 id="Ein_SVG-_oder_HTML-Dokument_parsen">Ein SVG- oder HTML-Dokument parsen</h2> + +<p>Der <code>DOMParser</code> beherrscht auch SVG {{geckoRelease("10.0")}} und HTML {{geckoRelease("12.0")}}. Es gibt drei mögliche Ergebnisse, die mit der Übergabe eines MIME-Typen ausgewählt werden können. Ist der MIME-Typ <code>text/xml</code>, ist das resultierende Dokument ein <code>XMLDocument</code>, ist er <code>image/svg+xml</code>, wird ein <code>SVGDocument</code> zurückgegeben und für <code>text/html</code> erhält man ein <code>HTMLDocument</code>.</p> + +<pre class="brush: js">const xmlDoc = new DOMParser().parseFromString(stringContainingXMLSource, "application/xml"); +// returns a Document, but not a SVGDocument nor a HTMLDocument + +const svgDoc = new DOMParser().parseFromString(stringContainingXMLSource, "image/svg+xml"); +// returns a SVGDocument, which also is a Document. + +const htmlDoc = new DOMParser().parseFromString(stringContainingHTMLSource, "text/html"); +// returns a HTMLDocument, which also is a Document. +</pre> + +<h3 id="DOMParser_HTML-Erweiterung_für_andere_Browser">DOMParser HTML-Erweiterung für andere Browser</h3> + +<pre class="brush: js">/* inspiriert von https://gist.github.com/1129031 */ +/*global document, DOMParser*/ + +(function(DOMParser) { + "use strict"; + + const proto = DOMParser.prototype; + const nativeParse = <span style="font-size: 1rem;">proto</span><span style="font-size: 1rem;">.parseFromString</span>; + + // Firefox/Opera/IE werfen bei unbekannten Typen Fehler + try { + // WebKit gibt bei bei unbekannten Typen `null` zurück + if (new DOMParser().parseFromString("", "text/html")) { + // text/html wird unterstützt + return; + } + } catch (ex) {} + + <span style="font-size: 1rem;">proto</span><span style="font-size: 1rem;">.parseFromString = function(markup, type) {</span> + if (/^\s*text\/html\s*(?:;|$)/i.test(type)) { + const doc = document.implementation.createHTMLDocument(""); + if (markup.toLowerCase().includes('<!doctype')) { + doc.documentElement.innerHTML = markup; + } else { + doc.body.innerHTML = markup; + } + return doc; + } else { + return <span style="font-size: 1rem;">nativeParse</span><span style="font-size: 1rem;">.apply(this, arguments);</span> + } + }; +}(DOMParser)); +</pre> + +<h3 id="Den_DOMParser_im_ChromeJSMXPCOMPrivileged-Scope_aufrufen">Den DOMParser im Chrome/JSM/XPCOM/Privileged-Scope aufrufen</h3> + +<p>Siehe <a href="/en-US/docs/nsIDOMParser">nsIDOMParser</a></p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>XML support</td> + <td>{{CompatChrome(1)}}</td> + <td>{{CompatGeckoDesktop(1)}}</td> + <td>{{CompatIE(9)}}</td> + <td>{{CompatOpera(8)}}</td> + <td>{{CompatSafari(3.2)}}</td> + </tr> + <tr> + <td>SVG support</td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatGeckoDesktop(10.0)}}</td> + <td>{{CompatIE(10)}}</td> + <td>{{CompatOpera(15)}}</td> + <td>{{CompatSafari(3.2)}}</td> + </tr> + <tr> + <td>HTML support</td> + <td>{{CompatChrome(30)}}</td> + <td>{{CompatGeckoDesktop(12.0)}}</td> + <td>{{CompatIE(10)}}</td> + <td>{{CompatOpera(17)}}</td> + <td>{{CompatSafari(7.1)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>XML support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>SVG support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(10.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>HTML support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(12.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">Parsing and serializing XML</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest" title="DOM/XMLHttpRequest">XMLHttpRequest</a></li> + <li><a href="/en-US/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a></li> + <li><a href="/en-US/Add-ons/Code_snippets/HTML_to_DOM">Parsing HTML to DOM</a></li> +</ul> diff --git a/files/de/web/api/domstring/index.html b/files/de/web/api/domstring/index.html new file mode 100644 index 0000000000..e6b148275c --- /dev/null +++ b/files/de/web/api/domstring/index.html @@ -0,0 +1,57 @@ +--- +title: DOMString +slug: Web/API/DOMString +tags: + - API + - DOM + - DOM Referenz + - DOMString + - Referenz + - String +translation_of: Web/API/DOMString +--- +<p>{{APIRef("DOM")}}</p> + +<p><strong><code>DOMString</code></strong> ist ein UTF-16 String. Obwohl JavaScript bereits solche Strings nutzt wird <code>DOMString</code> direkt zu einem {{jsxref("String")}} gemappt.</p> + +<p>Wird <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code> in einem Parameter oder einer Methode übergeben, so wandelt <code>DOMString<font face="Open Sans, Arial, sans-serif"> dies in den String </font></code><code>"null" um</code>.</p> + +<h2 id="Specification" name="Specification">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('WebIDL', '#idl-DOMString', 'DOMString')}}</td> + <td>{{Spec2('WebIDL')}}</td> + <td>Anpassung der Definition um</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Keine Änderung von {{SpecName('DOM2 Core')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Keine Änderung von {{SpecName('DOM1')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Ursprüngliche Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/Web/API/DOMString">String</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/String_view" title="/en-US/docs/Web/JavaScript/Typed_arrays/String_view"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li> +</ul> diff --git a/files/de/web/api/domtokenlist/add/index.html b/files/de/web/api/domtokenlist/add/index.html new file mode 100644 index 0000000000..2e1b6728c2 --- /dev/null +++ b/files/de/web/api/domtokenlist/add/index.html @@ -0,0 +1,73 @@ +--- +title: DOMTokenList.add() +slug: Web/API/DOMTokenList/add +translation_of: Web/API/DOMTokenList/add +--- +<p>{{APIRef("DOM")}}</p> + +<p>Die <code><strong>add()</strong></code> Methode des {{domxref("DOMTokenList")}} Interfaces, fügt ein <em>token</em> der Liste an.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">tokenList.add(token1[, token2[, ...]]);</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt>token</dt> + <dd>Ein {{domxref("DOMString")}} ,welches das <em>token</em> repräsentiert, welches an die Liste angefügt werden soll.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p><code>undefined</code></p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Im folgenden Beispiel erhalten wir die Liste der Klassen eines {{htmlelement("span")}} Elementes als <code>DOMTokenList</code> , mit Hilfe von {{domxref("Element.classList")}}. Wir fügen der Liste dann ein neues <em>token</em> an und schreiben die Liste als inhalt in das <code><span>.</code></p> + +<p>Das HTML:</p> + +<pre class="brush: html"><span class="a b c"></span></pre> + +<p>Nun das JavaScript:</p> + +<pre class="brush: js">var span = document.querySelector("span"); +var classes = span.classList; +classes.add("d"); +span.textContent = classes; +</pre> + +<p>Die Ausgabe:</p> + +<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p> + +<p>Man kann auch mehrere <em>tokens</em> auf einmal hinzufügen:</p> + +<pre class="brush: js">span.classList.add("d", "e", "f"); +</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('DOM WHATWG','#dom-domtokenlist-add','add()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div> +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite ist aus strukturierten Daten generiert worden. Wenn du helfen willst, den Datenbestand zu erweitern, besuche <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und sende uns einen pull - Request.</div> + +<p>{{Compat("api.DOMTokenList.add")}}</p> +</div> diff --git a/files/de/web/api/domtokenlist/index.html b/files/de/web/api/domtokenlist/index.html new file mode 100644 index 0000000000..c963c053e0 --- /dev/null +++ b/files/de/web/api/domtokenlist/index.html @@ -0,0 +1,125 @@ +--- +title: DOMTokenList +slug: Web/API/DOMTokenList +translation_of: Web/API/DOMTokenList +--- +<p>{{APIRef("DOM")}}{{gecko_minversion_header("1.9.2")}}</p> + +<p>Die <code><strong>DOMTokenList </strong></code>Schnittstelle repräsentiert eine Sammlung von durch Leerzeichen getrennte Zeichen/ Merkmale (Tokens). Solch eine Ansammlung wird wiedergegben von {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}} oder {{domxref("HTMLAreaElement.relList")}}. Deren Index beginnt bei 0 wie bei JavaScript {{jsxref("Array")}} Objekten. <code>DOMTokenList</code> achten immer auf die Groß- und Kleinschreibung.</p> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<p>Die Schnittstelle erbt keine Eigenschaften.</p> + +<dl> + <dt>{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}</dt> + <dd>Ist eine Ganzzahl, die die Anzahl der im Objekt gespeicherten Objekte darstellt.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<p>Diese Schnittstelle erbt keine Methode.</p> + +<dl> + <dt>{{domxref("DOMTokenList.item()")}}</dt> + <dd>Returns an item in the list by its index (or undefined if the number is greater than or equal to the length of the list, prior to {{gecko("7.0")}} returned null)</dd> + <dt>{{domxref("DOMTokenList.contains()")}}</dt> + <dd>Returns <code>true</code> if the underlying string contains <em>token</em>, otherwise <code>false</code></dd> + <dt>{{domxref("DOMTokenList.add()")}}</dt> + <dd>Fügt <em>token </em>der Liste hinzu.</dd> + <dt>{{domxref("DOMTokenList.remove()")}}</dt> + <dd>Removes <em>token</em> from the underlying string</dd> + <dt>{{domxref("DOMTokenList.replace()")}}</dt> + <dd>Replaces an existing <em>token</em> with a new token.</dd> + <dt>{{domxref("DOMTokenList.supports()")}}</dt> + <dd>Returns <code>true</code> if a given <em>token</em> is in the associated attribute's supported tokens.</dd> + <dt>{{domxref("DOMTokenList.toggle()")}}</dt> + <dd>Removes <em>token</em> from string and returns false. If <em>token</em> doesn't exist it's added and the function returns true</dd> + <dt>{{domxref("DOMTokenList.entries()")}}</dt> + <dd>Returns an {{jsxref("Iteration_protocols","iterator")}} allowing to go through all key/value pairs contained in this object.</dd> + <dt>{{domxref("DOMTokenList.forEach()")}}</dt> + <dd>Executes a provided function once per <code>DOMTokenList</code> element.</dd> + <dt>{{domxref("DOMTokenList.keys()")}}</dt> + <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all keys of the key/value pairs contained in this object.</dd> + <dt>{{domxref("DOMTokenList.values()")}}</dt> + <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all values of the key/value pairs contained in this object.</dd> +</dl> + +<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("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>10</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>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("DOMSettableTokenList")}} (object that extends DOMTokenList with settable <em>.value</em> property)</li> +</ul> diff --git a/files/de/web/api/dragevent/index.html b/files/de/web/api/dragevent/index.html new file mode 100644 index 0000000000..4f6ec7b562 --- /dev/null +++ b/files/de/web/api/dragevent/index.html @@ -0,0 +1,239 @@ +--- +title: DragEvent +slug: Web/API/DragEvent +translation_of: Web/API/DragEvent +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>Das <code>drag</code> Event wird ausgelöst, wenn ein Element oder ein Text "gezogen" wird (alle paar hundert Millisekunden).</p> + +<h2 id="Allgemeine_Informationen">Allgemeine Informationen</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spezifikation</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drag">HTML5</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">DragEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">Steigt auf</dt> + <dd style="margin: 0 0 0 120px;">Ja</dd> + <dt style="float: left; text-align: right; width: 120px;">Abbrechbar</dt> + <dd style="margin: 0 0 0 120px;">Ja</dd> + <dt style="float: left; text-align: right; width: 120px;">Ziel</dt> + <dd style="margin: 0 0 0 120px;">Document, Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Standard-Aktion</dt> + <dd style="margin: 0 0 0 120px;">Mit der drag & drop Operation fortfahren.</dd> +</dl> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The element that was underneath the element being dragged.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>dataTransfer</code></td> + <td>DataTransfer</td> + <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: js"><div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> + This div is draggable + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> + +<style> + #draggable { + width: 200px; + height: 20px; + text-align: center; + background: white; + } + + .dropzone { + width: 200px; + height: 20px; + background: blueviolet; + margin-bottom: 10px; + padding: 10px; + } +</style> + +<script> + <span>var dragged; + + /* Event wird vom ge-drag-ten Element ausgelöst */ + document.addEventListener("drag", function( event ) { + + }, false); + + document.addEventListener("dragstart", function( event ) { + // Speichern einer ref auf das drag-bare Element + dragged = event.target; + // Element halb-transparent machen + event.target.style.opacity = .5; + }, false); + + document.addEventListener("dragend", function( event ) { + // Transparenz zurücksetzen + event.target.style.opacity = ""; + }, false); + + /* events fired on the drop targets */ + document.addEventListener("dragover", function( event ) { + // Standard-Aktion verhindern um das drop-Event zu erlauben + event.preventDefault(); + }, false); + + document.addEventListener("dragenter", function( event ) { + // Hintergrund des möglichen Drop-Zeils anfärben, wenn das drag-bare Element auf das Ziel gezogen wird + if ( event.target.className == "dropzone" ) { + event.target.style.background = "purple"; + } + + }, false); + + document.addEventListener("dragleave", function( event ) { + // Hintergrund des möglichen Drop-Ziels, wenn das drag-bare Element vom Ziel wieder weggezogen wird / verlässt + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + } + }, false); + + document.addEventListener("drop", function( event ) { + // Standard-Aktion verhindern (Bei einigen Elementen wäre das das Öffnen als Link) + event.preventDefault(); + // move dragged elem to the selected drop target + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + dragged.parentNode.removeChild( dragged ); + event.target.appendChild( dragged ); + } + + }, false);</span> +</script> +</pre> + +<h2 id="Verwandte_Events">Verwandte Events</h2> + +<p> </p> + +<ul> + <li>{{event("drag")}}</li> + <li>{{event("dragstart")}}</li> + <li>{{event("dragend")}}</li> + <li>{{event("dragover")}}</li> + <li>{{event("dragenter")}}</li> + <li>{{event("dragleave")}}</li> + <li>{{event("dragexit")}}</li> + <li>{{event("drop")}}</li> +</ul> + +<p> </p> diff --git a/files/de/web/api/element/classlist/index.html b/files/de/web/api/element/classlist/index.html new file mode 100644 index 0000000000..4e1f9b25df --- /dev/null +++ b/files/de/web/api/element/classlist/index.html @@ -0,0 +1,300 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +translation_of: Web/API/Element/classList +--- +<div>{{APIRef("DOM")}}</div> + +<p>Das <code><strong>Element.classList</strong></code> ist eine <code>read-only</code> Eigenschaft, welche die aktuelle {{domxref("DOMTokenList")}} Sammlung der Klassen-Attribute des Elements zurückgibt.</p> + +<p>Die Benutzung von <code>classList</code> ist eine angenehme Alternative zum Ansprechen der Klassen eines Elements als die leerzeichengetrennte Zeichenfolge via {{domxref("element.className")}}. </p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">const <var>elementClasses</var> = elementNodeReference.classList; +</pre> + +<p><em>elementClasses</em> ist eine <a href="/en-US/docs/DOM/DOMTokenList">DOMTokenList</a>, welche die Klassen-Attribute der <em>elementNodeReference </em>repräsentiert. Wenn das Klassen-Attribut nicht gesetzt wurde oder <em>elementClasses.length </em>leer ist, wird 0 zurückgegeben. <code>Element.classList</code> selbst ist nur lesbar (read-only), obgleich es modifiziert werden kann, indem die Methoden <code>add()</code> und <code>remove()</code> angewendet werden.</p> + +<h2 id="Methoden">Methoden</h2> + +<dl> + <dt>add( String [, String [, ...]] )</dt> + <dd>Fügt angegebene Klassenwerte hinzu. Wenn diese Klassen bereits im Attribut des Elements vorhanden sind, werden sie ignoriert.</dd> + <dt>remove( String [, String [, ...]] )</dt> + <dd>Ausgewählte Klassenwerte entfernen.<br> + <strong>Bemerkung:</strong> Entfernen eines nicht vorhandenen Klassenwertes wirft keinen Fehler.</dd> + <dt><strong>item</strong> ( Number )</dt> + <dd>Rückgabewert nach Index in der Sammlung.</dd> + <dt><strong>toggle</strong> ( String [, force] )</dt> + <dd>Wenn nur ein Argument vorhanden ist: Klassenwert umschalten; d.h. wenn die Klasse existiert, dann <u>entfernt</u> es diese und gibt <code>false</code> zurück, wenn nicht, dann <u>fügt</u> es diese hinzu und gibt <code>true</code> zurück.</dd> + <dd>Wenn ein zweites Argument vorhanden ist: Wenn das zweite Argument auf <code>true</code> basiert, fügt es den angegebenen Klassenwert hinzu. Wenn es <code>false</code> auswertet, entfernt es ihn.</dd> + <dt>contains( String )</dt> + <dd>Überprüft, ob der angegebene Klassenwert im Klassenattribut des Elements vorhanden ist.</dd> + <dt>replace( oldClass, newClass )</dt> + <dd>Ersetzt einen vorhandenen Klassenwert.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js notranslate">const div = document.createElement('div'); +div.className = 'foo'; + +// Status zum Beginn: <div class="foo"></div> +console.log(div.outerHTML); + +// classList-API zum Entfernen und Ergänzen von Klassen nutzen +div.classList.remove("foo"); +div.classList.add("anotherclass"); + +// <div class="anotherclass"></div> +console.log(div.outerHTML); + +// Wenn visible gesetzt ist entferne es, sonst füge es hinzu +div.classList.toggle("visible"); + +// Hinzufügen/Enfernen von visible, abhängig von der Bedingung, ob i kleiner 10 ist +div.classList.toggle("visible", i < 10 ); + +console.log(div.classList.contains("foo")); + +// Mehrere Klassen hinzufügen / entfernen +div.classList.add("foo", "bar", "baz"); +div.classList.remove("foo", "bar", "baz"); + +// Mehrere Klassen mittels Spread-Syntax hinzufügen / entfernen +const cls = ["foo", "bar"]; +div.classList.add(...cls); +div.classList.remove(...cls); + +// Klasse "foo" durch "bar" ersetzen +div.classList.replace("foo", "bar");</pre> + +<div class="note"> +<p>Firefox-Versionen vor 26 setzen nicht die Nutzung die Nutzung von mehreren Argumenten in den Methoden add/remove/toggle um. Siehe <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p> +</div> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush:js notranslate">// Source: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca +/** + * Element.prototype.classList for IE8/9, Safari. + * @author Kerem Güneş <k-gun@mail.com> + * @copyright Released under the MIT License <https://opensource.org/licenses/MIT> + * @version 1.2 + * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/classList + */ +;(function() { + // Helpers. + var trim = function(s) { + return s.replace(/^\s+|\s+$/g, ''); + }, + regExp = function(name) { + return new RegExp('(^|\\s+)'+ name +'(\\s+|$)'); + }, + forEach = function(list, fn, scope) { + for (var i = 0; i < list.length; i++) { + fn.call(scope, list[i]); + } + }; + + // Class list object with basic methods. + function ClassList(element) { + this.element = element; + } + + ClassList.prototype = { + add: function() { + forEach(arguments, function(name) { + if (!this.contains(name)) { + this.element.className = trim(this.element.className +' '+ name); + } + }, this); + }, + remove: function() { + forEach(arguments, function(name) { + this.element.className = trim(this.element.className.replace(regExp(name), ' ')); + }, this); + }, + toggle: function(name) { + return this.contains(name) ? (this.remove(name), false) : (this.add(name), true); + }, + contains: function(name) { + return regExp(name).test(this.element.className); + }, + item: function(i) { + return this.element.className.split(/\s+/)[i] || null; + }, + // bonus + replace: function(oldName, newName) { + this.remove(oldName), this.add(newName); + } + }; + + // IE8/9, Safari + // Remove this if statements to override native classList. + if (!('classList' in Element.prototype)) { + // Use this if statement to override native classList that does not have for example replace() method. + // See browser compatibility: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility. + // if (!('classList' in Element.prototype) || + // !('classList' in Element.prototype && Element.prototype.classList.replace)) { + Object.defineProperty(Element.prototype, 'classList', { + get: function() { + return new ClassList(this); + } + }); + } + + // For others replace() support. + if (window.DOMTokenList && !DOMTokenList.prototype.replace) { + DOMTokenList.prototype.replace = ClassList.prototype.replace; + } +})(); +</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("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Note within the HTML specification related to the {{htmlattrxref("class")}} attribute.</td> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>8</td> + <td>12</td> + <td>{{CompatGeckoDesktop(1.9.2)}}</td> + <td>10<sup>[1]</sup></td> + <td>11.50</td> + <td>5.1</td> + </tr> + <tr> + <td><code>toggle()</code> method's second argument</td> + <td>24</td> + <td>12</td> + <td>{{CompatGeckoDesktop(24)}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>15</td> + <td>7</td> + </tr> + <tr> + <td>Multiple arguments for <code>add()</code> & <code>remove()</code></td> + <td>28</td> + <td>12</td> + <td>{{CompatGeckoDesktop(26)}}</td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>7</td> + </tr> + <tr> + <td><code>replace()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("49")}}</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>Edge</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>3.0</td> + <td>12</td> + <td>{{CompatGeckoMobile(1.9.2)}}</td> + <td>10<sup>[1]</sup></td> + <td>11.10</td> + <td>5.0</td> + </tr> + <tr> + <td>toggle method's second argument</td> + <td>4.4</td> + <td>12</td> + <td>{{CompatGeckoMobile(24)}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>7.0</td> + </tr> + <tr> + <td>multiple arguments for <code>add()</code> & <code>remove()</code></td> + <td>4.4</td> + <td>12</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>7.0</td> + </tr> + <tr> + <td><code>replace()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("49")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Not supported for SVG elements. See <a href="https://connect.microsoft.com/IE/feedback/details/1046039/classlist-not-working-on-svg-elements">a report at Microsoft about that</a>.<br> + [2] Internet Explorer never implemented this. See <a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">a report at Microsoft about that</a>.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("element.className")}}</li> + <li>{{domxref("DOMTokenList")}}</li> +</ul> diff --git a/files/de/web/api/element/classname/index.html b/files/de/web/api/element/classname/index.html new file mode 100644 index 0000000000..1af7c129f0 --- /dev/null +++ b/files/de/web/api/element/classname/index.html @@ -0,0 +1,128 @@ +--- +title: Element.className +slug: Web/API/Element/className +translation_of: Web/API/Element/className +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p><strong>className</strong> holt und setzt den Wert des Attributs <code>class</code> eines bestimmten Elements.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className; +<var>elementNodeReference</var>.className = <var>cName</var>;</pre> + +<ul> + <li><var>cName</var> ist eine Variable vom Typen string, die eine Klasse oder die, durch Leerzeichen getrennte, Klassen des aktuellen Elements darstellt.</li> +</ul> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: js">let elm = document.getElementById('item'); + +if(elm.className === 'active'){ + elm.className = 'inactive'; +} else { + elm.className = 'active'; +}</pre> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p>Der Name <code>className</code> wird für diese Eigenschaft anstelle von <code>class</code> benutzt, um Komplikationen mit dem Schlüsselwort "class", welches in vielen Sprachen verwendet wird um das DOM zu verändern, zu vermeiden.</p> + +<p><code>className</code> kann auch eine Instanz von {{domxref("SVGAnimatedString")}} wenn das <code>element</code> ein {{domxref("SVGElement")}} ist. Es ist besser das Attribut <code>className</code> eines Elements zu ändern, in dem {{domxref("Element.getAttribute")}} verwendet beziehungsweise {{domxref("Element.setAttribute")}}, wenn man mit SVG Elementen arbeitet.</p> + +<pre class="brush: js">elm.setAttribute('class', elm.getAttribute('class'))</pre> + +<p> </p> + +<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("DOM WHATWG", "#dom-element-classname", "element.className")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompabilität">Browserkompabilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktionalität</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundsätzliche 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> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktionalität</th> + <th>Android webview</th> + <th>Chrome für Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundsätzliche Unterstützung</td> + <td>{{CompatVersionUnknown}}</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">See also</h2> + +<ul> + <li>{{domxref("element.classList")}}</li> +</ul> diff --git a/files/de/web/api/element/getboundingclientrect/index.html b/files/de/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..736314305d --- /dev/null +++ b/files/de/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,62 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +translation_of: Web/API/Element/getBoundingClientRect +--- +<div>{{APIRef("DOM")}}</div> + +<p>Die Methode <strong><code>Element.getBoundingClientRect()</code></strong> gibt die Größe eines Elementes und dessen relative Position zum Viewport zurück.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var domRect = <a href="/de/docs/Web/API/Element">element</a>.getBoundingClientRect(); +</pre> + +<h3 id="Returns" name="Returns">Rückgabe</h3> + +<p>Der zurückgegebene Wert ist ein <a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMClientRect" title="nsIDOMClientRect">DOMRect</a> Objekt, welches die Vereinigungsmenge aller von <code><a href="/en-US/docs/DOM/element.getClientRects" title="DOM/element.getClientRects">getClientRects()</a></code> zurückgegebenen Rechtecken eines Elementes darstellt, das heißt, der CSS border-boxes, die mit dem Element verknüpft sind.</p> + +<p>Der Rückgabewert ist das kleinste Rechteck welches das komplette Element beinhaltet. Es enthält die read-only-Eigenschaften <code>left</code>, <code>top</code>, <code>right</code> ,<code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code> und <code>height</code>, welche die border-box in Pixeln beschreibt. Alle Eigenschaften, abgesehen von <code>width</code> und <code>height</code>, sind realtiv zur linken oberen Ecke des Viewports.</p> + +<div class="note"> +<p><strong>Merke: </strong>{{Gecko("1.9.1")}} fügt die Eigenschaften Breite und Höhe zu dem <code>DOMRect</code> Objekt hinzu.</p> +</div> + +<p>Leere Borderboxen werden vollständig ignoriert. Sind sämtliche Borderboxen eines Elements leer, oder entsprechen die <code>top</code> und <code>left</code> Angaben der Borderbox der ersten CSS-Box (in der Reihenfolge des Inhalts), so wird Null (zero) für <code>top</code> und <code>left</code> zurückgegeben.</p> + +<p>Ein Rechteck mit Breiten- und Höhenwerten von Null wird stattdessen zurückgegeben, und wo <code>top</code> und <code>left</code> den top-left Werten der Border-Box der ersten CSS-Box (in Reihenfolge des Inhaltes) entsprechen.</p> + +<p>Bei der Berechnung des Rechtecks werden sowohl scrollbare Elemente sowie Scrolling an sich (wie viel bereits gescrollt wurde) einbezogen. Das bedeutet, dass die <code>top</code> und <code>left</code> Eigenschaften ihre Werte verändern, sobald sich deren Scrollposition verändert (d.h. ihre Werte sind <code><em>relativ</em> </code>zum <code>Viewport</code> und nicht absolut).</p> + +<p>Will man die Position des Rechtecks in Bezug auf die Linke/Obere Ecke des <code>Dokumentes </code>haben, was der <code><em>absoluten</em></code> Position des Rechteckes entspricht, muss man zu den <code>top</code> und <code>left</code> Positionen, die Werte von <code>window.scrollX</code> und<code> window.scrollY</code>, addieren.</p> + +<p>Um Browserkompabilität zu gewährleisten, nutzen Sie <code>window.pageXOffset</code> und <code>window.pageYOffset</code> statt<code> window.scrollY</code> und <code>window.scrollX</code>. Sollten <code style="font-style: normal;">window.pageXOffset</code>, <code style="font-style: normal;">window.pageYOffset</code>, <code style="font-style: normal;">window.</code><span style="font-family: consolas,monaco,andale mono,monospace;">scrollX and</span> <code style="font-style: normal;">window.</code><span style="font-family: consolas,monaco,andale mono,monospace;">scrollY undefined sein, nutzen Sie </span><code style="font-style: normal;">(((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft</code> and <code style="font-style: normal;">(((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop</code>.</p> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:js">// rect is a DOMRect object with four properties: left, top, right, bottom +var rect = obj.getBoundingClientRect(); +</pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{Compat("api.Element.getBoundingClientRect")}}</div> + +<h2 id="Specification" name="Specification">Specification</h2> + +<ul> + <li><a href="http://www.w3.org/TR/cssom-view/#the-getclientrects%28%29-and-getboundingclientrect%28%29-methods">CSSOM Views: The getClientRects() and getBoundingClientRect() methods </a></li> +</ul> + +<h3 id="Notes" name="Notes">Notes</h3> + +<p><code>getBoundingClientRect()</code> wurde erstmals im DHTML Objektmodell von MS IE implementiert.</p> + +<p>Der Rückgabewert von <code>getBoundingClientRect() </code>ist <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze">konstant</a>, es können keine weiteren Eigenschaften hinzugefügt werden.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li> + <li><a href="/en-US/docs/DOM/element.getClientRects"><code>getClientRects()</code></a></li> +</ul> diff --git a/files/de/web/api/element/hasattribute/index.html b/files/de/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..991e9b9dcc --- /dev/null +++ b/files/de/web/api/element/hasattribute/index.html @@ -0,0 +1,129 @@ +--- +title: Element.hasAttribute() +slug: Web/API/Element/hasAttribute +tags: + - API + - Attribut + - DOM + - Element + - Méthode +translation_of: Web/API/Element/hasAttribute +--- +<div>{{APIRef("DOM")}}</div> + +<p><code>Die Methode </code><strong><code>Element.hasAttribute()</code></strong> nimmt einen <strong>String</strong> als Argument und gibt einen <strong>Boolean</strong> zurück. Der als Argument übergebene <strong>String </strong>spezifiziert das gemeinte Attribut und der Rückabe Wert gibt an, ob dieses Attribut in dem jeweiligen Element vorkommt . </p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>var <em>result</em></var> = <em><var>element</var></em>.hasAttribute(<em><var>name</var></em>); +</pre> + +<dl> + <dt><code>result</code></dt> + <dd>Rückgabewert, wahr oder falsch.</dd> + <dt><code>name</code></dt> + <dd>Ein <strong>String</strong>, der das jeweilige Attribut spezifiziert.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:js">var foo = document.getElementById("foo"); +if (foo.hasAttribute("bar")) { + // do something +} +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush:js">;(function(prototype) { + prototype.hasAttribute = prototype.hasAttribute || function(name) { + return !!(this.attributes[name] && + this.attributes[name].specified); + } +})(Element.prototype); +</pre> + +<h2 id="Notizen">Notizen</h2> + +<div>{{DOMAttributeMethods}}</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('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Von {{SpecName('DOM3 Core')}}, verlegt von {{domxref("Node")}} nach {{domxref("Element")}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Keine Veränderungen zu {{SpecName('DOM2 Core')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilitä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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>8.0</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>Edge</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> diff --git a/files/de/web/api/element/index.html b/files/de/web/api/element/index.html new file mode 100644 index 0000000000..71975f163b --- /dev/null +++ b/files/de/web/api/element/index.html @@ -0,0 +1,522 @@ +--- +title: Element +slug: Web/API/Element +tags: + - DOM + - Interface +translation_of: Web/API/Element +--- +<p>{{ APIRef("DOM") }}</p> + +<p><span class="seoSummary">The <strong><code>Element</code></strong> interface represents an object of a {{domxref("Document")}}. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from <code>Element</code> but add additional functionality.</span> For example, the {{domxref("HTMLElement")}} interface is the base interface for HTML elements, while the {{domxref("SVGElement")}} interface is the basis for all SVG elements.</p> + +<p>Languages outside the realm of the Web platform, like XUL through the <code>XULElement</code> interface, also implement it.</p> + +<h2 id="Properties" name="Properties">Properties</h2> + +<p><em>Inherits properties from its parents {{domxref("Node")}}, and its own parent, {{domxref("EventTarget")}}, and implements those of {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, </em>and {{domxref("Animatable")}}.</p> + +<dl> + <dt>{{ domxref("Element.attributes") }} {{readOnlyInline}}</dt> + <dd>Returns a {{ domxref("NamedNodeMap") }} that lists all attributes associated with the element.</dd> + <dt>{{ domxref("ParentNode.childElementCount") }}</dt> + <dd>Is a {{jsxref("Number")}} representing the number of child nodes that are elements.</dd> + <dt>{{ domxref("ParentNode.children") }}</dt> + <dd>Is a live {{ domxref("HTMLCollection") }} containing all child elements of the element, as a collection.</dd> + <dt>{{ domxref("Element.classList") }} {{readOnlyInline}}</dt> + <dd>Returns a {{ domxref("DOMTokenList") }} containing the list of class attributes.</dd> + <dt>{{ domxref("Element.className") }}</dt> + <dd>Is a {{domxref("DOMString")}} representing the class of the element.</dd> + <dt>{{ domxref("Element.clientHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the inner height of the element.</dd> + <dt>{{ domxref("Element.clientLeft") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the width of the left border of the element.</dd> + <dt>{{ domxref("Element.clientTop") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the width of the top border of the element.</dd> + <dt>{{ domxref("Element.clientWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the inner width of the element.</dd> + <dt>{{ domxref("ParentNode.firstElementChild") }}</dt> + <dd>Is a {{ domxref("Element") }}, the first direct child element of an element, or <code>null</code> if the element has no child elements.</dd> + <dt>{{ domxref("Element.id") }}</dt> + <dd>Is a {{domxref("DOMString")}} representing the id of the element.</dd> + <dt>{{ domxref("Element.innerHTML") }} {{experimental_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the markup of the element's content.</dd> + <dt>{{ domxref("ParentNode.lastElementChild") }}</dt> + <dd>Is a {{ domxref("Element") }}, the last direct child element of an element, or <code>null</code> if the element has no child elements.</dd> + <dt>{{ domxref("NonDocumentTypeChildNode.nextElementSibling") }}</dt> + <dd>Is a {{ domxref("Element") }}, the element immediately following the given one in the tree, or <code>null</code> if there's no sibling node.</dd> + <dt>{{ domxref("Element.outerHTML") }} {{experimental_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.</dd> + <dt>{{ domxref("NonDocumentTypeChildNode.previousElementSibling") }}</dt> + <dd>Is a {{ domxref("Element") }}, the element immediately preceding the given one in the tree, or <code>null</code> if there is no sibling element.</dd> + <dt>{{ domxref("Element.scrollHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the scroll view height of an element.</dd> + <dt>{{ domxref("Element.scrollLeft") }} {{experimental_inline}}</dt> + <dd>Is a {{jsxref("Number")}} representing the left scroll offset of the element.</dd> + <dt>{{ domxref("Element.scrollLeftMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.</dd> + <dt>{{ domxref("Element.scrollTop") }} {{experimental_inline}}</dt> + <dd>Is a {{jsxref("Number")}} representing the top scroll offset the an element.</dd> + <dt>{{ domxref("Element.scrollTopMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt> + <dd>Returns a{{jsxref("Number")}} representing the maximum top scroll offset possible for the element.</dd> + <dt>{{ domxref("Element.scrollWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the scroll view width of the element.</dd> + <dt>{{domxref("Element.shadowRoot") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>...</dd> + <dt>{{ domxref("Element.tagName") }} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("String")}} with the name of the tag for the given element.</dd> + <dt>{{ domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns the {{domxref("UndoManager")}} associated with the element.</dd> + <dt>{{ domxref("Element.undoScope")}} {{experimental_inline}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd> +</dl> + +<h3 id="Handlers" name="Handlers">Event handlers</h3> + +<dl> + <dt>{{ domxref("Element.ongotpointercapture") }}</dt> + <dd>…</dd> + <dt>{{ domxref("Element.onlostpointercapture") }}</dt> + <dd>…</dd> + <dt>{{ domxref("Element.onwheel") }} {{ non-standard_inline() }}</dt> + <dd>Returns the event handling code for the <code>wheel</code> event.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<p><em>Inherits methods from its parents {{domxref("Node")}}, and its own parent, {{domxref("EventTarget")}}<em>, and implements those of {{domxref("ParentNode")}}, {{domxref("ChildNode")}}<em>, {{domxref("NonDocumentTypeChildNode")}}, </em></em>and {{domxref("Animatable")}}.</em></p> + +<dl> + <dt>{{ domxref("EventTarget.addEventListener()") }}</dt> + <dd>Registers an event handler to a specific event type on the element.</dd> + <dt>{{ domxref("Element.closest()")}} {{experimental_inline}}</dt> + <dd>Returns the {{domxref("Element")}}, descendant of this element (or this element itself), that is the closest ancestor of the elements selected by the selectors given in parameter.</dd> + <dt>{{ domxref("Element.createShadowRoot()")}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{ domxref("EventTarget.dispatchEvent()") }}</dt> + <dd>Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates that at least one handler has not canceled it.</dd> + <dt>{{domxref("Element.find()")}}{{experimental_inline}}</dt> + <dd>...</dd> + <dt>{{domxref("Element.findAll()")}}{{experimental_inline}}</dt> + <dd>...</dd> + <dt>{{domxref("Animatable.getAnimationPlayers()")}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{ domxref("Element.getAttribute()") }}</dt> + <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd> + <dt>{{ domxref("Element.getAttributeNS()") }}</dt> + <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd> + <dt>{{ domxref("Element.getAttributeNode()") }} {{obsolete_inline}}</dt> + <dd>Retrievse the node representation of the named attribute from the current node and returns it as an {{ domxref("Attr") }}.</dd> + <dt>{{ domxref("Element.getAttributeNodeNS()") }} {{obsolete_inline}}</dt> + <dd>Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{ domxref("Attr") }}.</dd> + <dt>{{ domxref("Element.getBoundingClientRect()") }}<code> </code>{{experimental_inline}}</dt> + <dd>...</dd> + <dt>{{ domxref("Element.getClientRects()") }} {{experimental_inline}} TYPE of returnvalue????</dt> + <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd> + <dt>{{domxref("Element.getDestinationInsertionPoints()")}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{ domxref("Element.getElementsByClassName()") }}</dt> + <dd>Returns a live {{ domxref("HTMLCollection") }} that contains all descendant of the current element that posses the list of classes given in parameter.</dd> + <dt>{{ domxref("Element.getElementsByTagName()") }}</dt> + <dd>Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name, from the current element.</dd> + <dt>{{ domxref("Element.getElementsByTagNameNS()") }}</dt> + <dd>Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd> + <dt>{{ domxref("Element.hasAttribute()") }}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd> + <dt>{{ domxref("Element.hasAttributeNS()") }}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd> + <dt>{{ domxref("Element.insertAdjacentHTML") }} {{experimental_inline}}</dt> + <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd> + <dt>{{ domxref("Element.matches()") }}<code> </code>{{experimental_inline}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd> + <dt>{{ domxref("Element.querySelector()") }}</dt> + <dd>Returns {{ domxref("Node") }}...</dd> + <dt>{{ domxref("Element.querySelectorAll") }}</dt> + <dd>Returns a {{ domxref("NodeList") }}...</dd> + <dt>{{ domxref("Element.releasePointerCapture")}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{domxref("ChildNode.remove()")}}</dt> + <dd>Removes the element from the children list of its parent.</dd> + <dt>{{ domxref("Element.removeAttribute()") }}</dt> + <dd>Removes the named attribute from the current node.</dd> + <dt>{{ domxref("Element.removeAttributeNS()") }}</dt> + <dd>Removes the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{ domxref("Element.removeAttributeNode()") }} {{obsolete_inline}}</dt> + <dd>Removes the node representation of the named attribute from the current node.</dd> + <dt>{{ domxref("EventTarget.removeEventListener()") }}</dt> + <dd>Removes an event listener from the element.</dd> + <dt>{{ domxref("Element.requestFullscreen()") }} {{experimental_inline}}</dt> + <dd>Asynchronously asks the browser to make the element full-screen.</dd> + <dt>{{ domxref("Element.requestPointerLock()")}} {{experimental_inline}}</dt> + <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd> +</dl> + +<dl> + <dt>{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}</dt> + <dd>Scrolls the page until the element gets into the view.</dd> + <dt>{{ domxref("Element.setAttribute()") }}</dt> + <dd>Sets the value of a named attribute of the current node.</dd> + <dt>{{ domxref("Element.setAttributeNS()") }}</dt> + <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{ domxref("Element.setAttributeNode()") }} {{obsolete_inline}}</dt> + <dd>Sets the node representation of the named attribute from the current node.</dd> + <dt>{{ domxref("Element.setAttributeNodeNS()") }} {{obsolete_inline}}</dt> + <dd>Setw the node representation of the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{ domxref("Element.setCapture()") }} {{non-standard_inline}}</dt> + <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd> + <dt>{{domxref("Element.setPointerCapture()")}}</dt> + <dd>…</dd> +</dl> + +<h2 id="Specifications">Specifications</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("Web Animations", '', '')}}</td> + <td>{{Spec2("Web Animations")}}</td> + <td>Added the <code>getAnimationPlayers()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('Undo Manager', '', 'Element')}}</td> + <td>{{Spec2('Undo Manager')}}</td> + <td>Added the <code>undoScope</code> and <code>undoManager</code> properties.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br> + Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 2', '#interface-definitions', 'Element')}}</td> + <td>{{Spec2('Selectors API Level 2')}}</td> + <td>Added the following methods:<code> matches()</code> (implemented as <code>mozMatchesSelector()</code>), <code>find()</code>, <code>findAll()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td>Added the following methods: <code>querySelector()</code> and <code>querySelectorAll()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Added the <code>requestPointerLock()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Added the <code>requestFullscreen()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>Added the following properties: <code>innerHTML</code>, and <code>outerHTML</code>.<br> + Added the following method: <code>insertAdjacentHTML()</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Added the following properties: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br> + Added the following methods: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, and <code>scrollIntoView()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td>Added inheritance of the {{domxref("ElementTraversal")}} interface.</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Removed the following methods: <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br> + Removed the <code>schemaTypeInfo</code> property.<br> + Modified the return value of <code>getElementsByTag()</code> and <code>getElementsByTagNS()</code>.<br> + Moved <code>hasAttributes()</code> form the <code>Node</code> interface to this one.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Added the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. These methods were never implemented and have been removed in later specifications.<br> + Added the <code>schemaTypeInfo</code> property. This property was never implemented and has been removed in later specifications.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>The <code>normalize()</code> method has been moved to {{domxref("Node")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + <tr> + <td><code>children</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>7.0 with a significant bug [1]<br> + 9.0 according to the spec</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>childElementCount</code>, <code>nextElementSibling</code>, <code>previousElementSibling</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>firstElementChild</code>, <code>lastElementChild</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>classList</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td> </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>outerHTML</code> {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("11")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>clientLeft</code>, <code>clientTop</code> {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>getBoundingClientRect()</code>, <code>getClientRects()</code> {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>querySelector()</code>, <code>querySelectorAll()</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>8.0</td> + <td>10.0</td> + <td>3.2 (525.3)</td> + </tr> + <tr> + <td><code>insertAdjacentHTML()</code> {{experimental_inline}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("8")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>4.0 (527)</td> + </tr> + <tr> + <td><code>setCapture() </code>{{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>oncopy</code>, <code>oncut</code>, <code>onpaste</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td> </td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onwheel</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("17")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code>, <code>setPointerCapture()</code>, and <code>releasePointerCapture()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.0 {{property_prefix("MS")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>matches()</code> {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}} with the non-standard name <code>webkitMatchesSelector</code></td> + <td>{{CompatGeckoDesktop("1.9.2")}} with the non-standard name <code>mozMatchesSelector</code><br> + {{CompatGeckoDesktop("34")}} with the standard name</td> + <td>9.0 with the non-standard name <code>msMatchesSelector</code></td> + <td>11.5 with the non-standard name <code>oMatchesSelector</code><br> + 15.0 with the non-standard name <code>webkitMatchesSelector</code></td> + <td>5.0 with the non-standard name <code>webkitMatchesSelector</code></td> + </tr> + <tr> + <td><code>find()</code> and <code>findAll()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>requestPointerLock()</code></td> + <td>16.0 {{property_prefix("webkit")}}, behind an about:flags<br> + 22.0 {{property_prefix("webkit")}} (with special cases, progressively lifted see [2])</td> + <td>{{CompatGeckoDesktop("14")}}{{property_prefix("moz")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>requestFullscreen()</code></td> + <td>14.0 {{property_prefix("webkit")}}</td> + <td>{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}</td> + <td>11.0 {{property_prefix("ms")}}</td> + <td>12.10<br> + 15.0 {{property_prefix("webkit")}}</td> + <td>5.1 {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td><code>undoManager</code> and <code>undoScope</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}} (behind the <code>dom.undo_manager.enabled</code> pref)</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>attributes</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("22")}}<br> + Before this it was available via the {{domxref("Node")}} interface that any <code>element</code> inherits.</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>scrollTopMax()</code> and <code>scrollLeftMax()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("16")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>closest()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("35")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hasAttributes()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}} (on the {{domxref("Node")}} interface)<br> + {{CompatGeckoDesktop("35")}} (on this interface</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>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + <tr> + <td><code>scrollTopMax()</code> and <code>scrollLeftMax()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("16")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>closest()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("35")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hasAttributes()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}} (on the {{domxref("Node")}} interface)<br> + {{CompatGeckoMobile("35")}} (on this interface</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer 7 and 8 incorrectly return the comments as part of the children of an Element. This is fixed in Internet Explorer 9 and later.</p> + +<p>[2] Chrome 16 allowed <code>webkitRequestPointerLock()</code> only in fullscreen; Chrome 21 for trusted web site (permission asked); Chrome 22 allowed it by default for all same-origin document; Chrome 23 allowed it in sandboxed {{HTMLElement("iframe")}} if the non-standard value <code>webkit-allow-pointer-lock</code> is set to the {{htmlattrxref("sandbox", "iframe")}} attribute.</p> diff --git a/files/de/web/api/element/innerhtml/index.html b/files/de/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..a5d3d3011d --- /dev/null +++ b/files/de/web/api/element/innerhtml/index.html @@ -0,0 +1,204 @@ +--- +title: Element.innerHTML +slug: Web/API/Element/innerHTML +translation_of: Web/API/Element/innerHTML +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">Die {{domxref("Element")}} Eigenschaft <strong><code>innerHTML</code></strong> ruft das im Element enthaltene HTML-oder XML-Markup ab oder legt dieses fest.</span></p> + +<div class="note"><strong>Hinweis: </strong>Wenn ein {{HTMLElement("div")}}, {{HTMLElement("span")}} oder {{HTMLElement("noembed")}}-Knoten einen untergeordneten Textknoten mit den Zeichen <code>&</code>, <code><</code> oder <code>></code> enthält, gibt <code>innerHTML</code> diese Zeichen als ihre entsprechende HTML-Entitäten <code>"&amp;"</code>, <code>"&lt;"</code> bzw. <code>"&gt;"</code> zurück. Verwenden Sie {{domxref("Node.textContent")}}, um eine reine Kopie des Inhalts dieser Textknoten zu erhalten.</div> + +<p>Verwenden Sie die Methode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}, um den HTML-Code in das Dokument einzufügen, anstatt den Inhalt eines Elements zu ersetzen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">const <var>content</var> = <var>element</var>.innerHTML; + +<var>element</var>.innerHTML = <var>htmlString</var>; +</pre> + +<h3 id="Wert">Wert</h3> + +<p>Ein {{domxref("DOMString")}}, das die HTML-Serialisierung der Nachkommen des Elements enthält. Wenn Sie den Wert von <code>innerHTML</code> festlegen, werden alle Nachkommen des Elements entfernt und durch Knoten ersetzt, die durch Analysieren des in <em>htmlString</em> angegebenen HTML-Codes erstellt werden.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>Es wurde versucht, den Wert von <code>innerHTML</code> mit einem nicht ordnungsgemäß formatierten HTML-String festzulegen.</dd> + <dt><code>NoModificationAllowedError</code></dt> + <dd>Es wurde versucht, den HTML-Code in einen Knoten einzufügen, dessen übergeordnetes Element {{domxref("Document")}} ist.</dd> +</dl> + +<h2 id="Nutzungshinweise">Nutzungshinweise</h2> + +<p>Die <code>innerHTML</code>-Eigenschaft kann verwendet werden, um den aktuellen HTML-Quellcode der Seite einschließlich aller Änderungen zu überprüfen, die seit dem erstmaligen Laden der Seite vorgenommen wurden.</p> + +<h3 id="HTML-Inhalte_eines_Elements_auslesen">HTML-Inhalte eines Elements auslesen</h3> + +<p>Das Lesen von <code>innerHTML</code> bewirkt, dass der Benutzer-Agent das HTML- oder XML-Fragment serialisiert, das aus den Nachkommen des Elements besteht. Der resultierende String wird zurückgegeben.</p> + +<pre class="brush: js">let contents = myElement.innerHTML;</pre> + +<p>Auf diese Weise können Sie das HTML-Markup der Inhaltsknoten des Elements anzeigen.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Das zurückgegebene HTML- oder XML-Fragment wird basierend auf dem aktuellen Inhalt des Elements generiert, sodass das Markup und Formatierung des zurückgegebenen Fragments wahrscheinlich nicht mit dem ursprünglichen Seiten-Markup übereinstimmt.</p> +</div> + +<h3 id="Inhalte_eines_Element_ersetzen">Inhalte eines Element ersetzen</h3> + +<p>Durch das Festlegen des Wertes von <code>innerHTML</code> können Sie den vorhandenen Inhalt eines Elements problemlos durch neuen Inhalt ersetzen.</p> + +<p>Beispielsweise können Sie den gesamten Inhalt eines Dokuments löschen, indem Sie den Inhalt des Attributs {{domxref("Document.body", "body")}} löschen:</p> + +<pre class="brush: js">document.body.innerHTML = "";</pre> + +<p>In diesem Beispiel wird das aktuelle HTML-Markup des Dokuments abgerufen und die Zeichen <code>"<"</code> durch die HTML-Entität <code>"&lt;"</code> ersetzt, wodurch der HTML-Code im Wesentlichen in unformatierten Text umgewandelt wird. Dieses wird dann in ein Element {{HTMLElement("pre")}} eingeschlossen. Dann wird der Wert von <code>innerHTML</code> in diesen neuen String geändert. Als Ergebnis wird der Dokumentinhalt durch eine Anzeige des gesamten Quellcodes der Seite ersetzt.</p> + +<pre class="brush: js">document.documentElement.innerHTML = "<pre>" + + document.documentElement.innerHTML.replace(/</g,"&lt;") + + "</pre>";</pre> + +<h4 id="Unter_der_Haube">Unter der Haube</h4> + +<p>Was passiert genau, wenn Sie den Wert von <code>innerHTML</code> festlegen? Der Benutzer-Agent führt dabei die folgenden Schritte aus:</p> + +<ol> + <li>Der angegebene Wert wird als HTML oder XML analysiert (basierend auf dem Dokumenttyp), sodass ein {{domxref("DocumentFragment")}}-Objekt den neuen Satz von DOM-Knoten für die neuen Elemente darstellt.</li> + <li>Wenn das Element, dessen Inhalt ersetzt wird, ein {{HTMLElement("template")}}-Element ist, wird das Attribut {{domxref("HTMLTemplateElement.content", "content")}} des Elements <code><template></code> durch das neue <code>DocumentFragment</code> ersetzt, welches in Schritt 1 erstellt wurde.</li> + <li>Bei allen anderen Elementen wird der Inhalt des Elements durch die Knoten im neuen <code>DocumentFragment</code> ersetzt.</li> +</ol> + +<h3 id="Sicherheitsüberlegungen">Sicherheitsüberlegungen</h3> + +<p>Es ist nicht ungewöhnlich, dass <code>innerHTML</code> zum Einfügen von Text in eine Webseite verwendet wird. Es besteht jedoch die Möglichkeit, dass dies zu einem Angriffsvektor auf einer Website wird, wodurch ein potenzielles Sicherheitsrisiko entsteht.</p> + +<pre class="brush: js">const name = "John"; +// angenommen 'el' ist ein HTML DOM Element +el.innerHTML = name; // in diesem Fall harmlos + +// ... + +name = "<script>alert('Ich bin John in einem störenden Alert!')</script>"; +el.innerHTML = name; // in diesem Fall harmlos</pre> + +<p>Obwohl dies wie ein {{interwiki("wikipedia", "cross-site scripting")}}-Angriff aussieht, ist das Ergebnis harmlos. HTML5 schreibt vor, dass ein mit <code>innerHTML</code> eingefügtes {{HTMLElement("script")}}-Tag <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">nicht ausgeführt werden soll</a>.</p> + +<p>Es gibt jedoch Möglichkeiten, JavaScript auszuführen, ohne {{HTMLElement("script")}}-Elemente zu verwenden. Daher besteht immer ein Sicherheitsrisiko, wenn Sie <code>innerHTML</code> verwenden, um Strings festzulegen, über die Sie keine Kontrolle haben. Zum Beispiel:</p> + +<pre class="brush: js">const name = "<img src='x' onerror='alert(1)'>"; +el.innerHTML = name; // zeigt den alert</pre> + +<p>Aus diesem Grund wird empfohlen, <code>innerHTML</code> nicht zum Einfügen von reinem Text zu verwenden. Verwenden Sie stattdessen {{domxref("Node.textContent", "textContent")}}. Der übergebene Inhalt wird nicht als HTML-Code analysiert, sondern als reiner Text eingefügt.</p> + +<div class="blockIndicator warning"> +<p><strong>Warnung:</strong> Wenn Ihr Projekt einer Sicherheitsüberprüfung unterzogen wird, führt die Verwendung von <code>innerHTML</code> höchstwahrscheinlich dazu, dass Ihr Code abgelehnt wird. <a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation">Wenn Sie beispielsweise <code>innerHTML</code></a> in einer <a href="/de/docs/Mozilla/Add-ons/WebExtensions">Browsererweiterung</a> verwenden und die Erweiterung bei <a href="https://addons.mozilla.org/">addons.mozilla.org</a> einreichen, wird sie den automatisierten Überprüfungsprozess nicht bestehen.</p> +</div> + +<h2 id="Beispiel">Beispiel</h2> + +<p>In diesem Beispiel wird mit <code>innerHTML</code> ein Mechanismus zum Protokollieren von Nachrichten in einem Feld auf einer Webseite erstellt.</p> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function log(msg) { + var logElem = document.querySelector(".log"); + + var time = new Date(); + var timeStr = time.toLocaleTimeString(); + logElem.innerHTML += timeStr + ": " + msg + "<br/>"; +} + +log("Logging mouse events inside this container..."); +</pre> + +<p>Die Funktion <code>log()</code> erstellt die Protokollausgabe, indem sie mithilfe von {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}} die aktuelle Uhrzeit aus einem {{jsxref("Date")}}-Objekt abruft und einen String aus dem Zeitstempel und dem Nachrichtentext erstellt. Dann wird die Nachricht an die Box mit der Klasse <code>"log"</code> angehängt.</p> + +<p>Wir fügen eine zweite Methode hinzu, die Informationen zu auf {{domxref("MouseEvent")}} basierenden Ereignissen protokolliert (z. B. {{event("mousedown")}}, {{event("click")}} und {{event("mouseenter")}}):</p> + +<pre class="brush: js">function logEvent(event) { + var msg = "Event <strong>" + event.type + "</strong> at <em>" + + event.clientX + ", " + event.clientY + "</em>"; + log(msg); +}</pre> + +<p>Dann verwenden wir dies als Ereignishandler für eine Reihe von Mausereignissen in der Box, die unser Protokoll enthält:</p> + +<pre class="brush: js">var boxElem = document.querySelector(".box"); + +boxElem.addEventListener("mousedown", logEvent); +boxElem.addEventListener("mouseup", logEvent); +boxElem.addEventListener("click", logEvent); +boxElem.addEventListener("mouseenter", logEvent); +boxElem.addEventListener("mouseleave", logEvent);</pre> + +<h3 id="HTML">HTML</h3> + +<p>Das HTML für unser Beispiel ist denkbar einfach.</p> + +<pre class="brush: html"><div class="box"> + <div><strong>Log:</strong></div> + <div class="log"></div> +</div></pre> + +<p>Das {{HTMLElement("div")}} mit der Klasse <code>"box"</code> ist nur ein Container für Layoutzwecke, der den Inhalt mit einem Rahmen darstellt. Der <code><div></code>, dessen Klasse <code>"log"</code> ist, ist der Container für den Protokolltext.</p> + +<h3 id="CSS">CSS</h3> + +<p>Das folgende CSS formatiert unseren Beispielinhalt.</p> + +<pre class="brush: css">.box { + width: 600px; + height: 300px; + border: 1px solid black; + padding: 2px 4px; + overflow-y: scroll; + overflow-x: auto; +} + +.log { + margin-top: 8px; + font-family: monospace; +}</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>Der resultierende Inhalt sieht so aus. Sie können die Ausgabe im Protokoll anzeigen, indem Sie die Maus in das Feld hinein- und herausbewegen, darauf klicken und so weiter.</p> + +<p>{{EmbedLiveSample("Example", 640, 350)}}</p> + +<h2 id="Spezifikation">Spezifikation</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('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Element.innerHTML")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("Node.textContent")}} und {{domxref("Node.innerText")}}</li> + <li>{{domxref("Element.insertAdjacentHTML()")}}</li> + <li>HTML in einen DOM-Baum parsen: {{domxref("DOMParser")}}</li> + <li>Serialisieren von XML oder HTML in einen DOM-Baum: {{domxref("XMLSerializer")}}</li> +</ul> diff --git a/files/de/web/api/element/insertadjacenthtml/index.html b/files/de/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..14f05ca474 --- /dev/null +++ b/files/de/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,144 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +tags: + - .textContent() + - Geschwindigkeitsvorteil + - HTML einfügen + - Méthode + - Referenz +translation_of: Web/API/Element/insertAdjacentHTML +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p><code>insertAdjacentHTML()</code> interpretiert den angegebenen Text als HTML oder XML und fügt resultierende Knoten an angegebener Position ins DOM ein. Das Zielobjekt wird nicht erneut interpretiert, wodurch darin enthaltene, bereits existierende Elemente nicht beeinträchtigt werden.<br> + Eine zusätzlich erforderliche Serialisierung wird vermieden, was einen deutlichen Geschwindigkeitsvorteil gegenüber einer <code>innerHTML</code> Manipulation ergibt.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre> + +<p><code>position</code> beschreibt den Einfügepunkt relativ zu einem Element und muss einem der folgenden Schlüsselbegriffe entsprechen:</p> + +<dl> + <dt><code style="color: red;">'beforebegin'</code></dt> + <dd>Vor dem <code>element</code> selbst.</dd> + <dt><code style="color: green;">'afterbegin'</code></dt> + <dd>Innerhalb des <code>element</code>, direkt <em>vor dessen erstem</em> Kind-Objekt. </dd> + <dt><code style="color: blue;">'beforeend'</code></dt> + <dd>Innerhalb des <code>element</code>, direkt <em>nach dessen letztem</em> Kind-Objekt.</dd> + <dt><code style="color: magenta;">'afterend'</code></dt> + <dd>Nach dem <code>element</code> selbst.</dd> +</dl> + +<p><code>text</code> ist die Zeichenfolge, die als HTML oder XML interpretiert und in den DOM-Baum eingesetzt wird.</p> + +<h3 id="Verdeutlichung_der_position_Bezeichner">Verdeutlichung der position Bezeichner</h3> + +<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> +<code style="font-weight: bold;"><p></code> + <!-- <strong><code style="color: green;">afterbegin</code></strong> --> + foo + <!-- <strong><code style="color: blue;">beforeend</code></strong> --> +<code style="font-weight: bold;"></p></code> +<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> + +<div class="note"><strong>Hinweis: </strong> Die <code>beforebegin</code> und <code>afterend</code> Positionierungen wirken nur, wenn der Knoten innerhalb des DOM-Baums steht und ein Eltern-Element hat. </div> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: js">// <div id="one">one</div> +var d1 = document.getElementById('one'); +d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); + +// Danach sieht die neue Struktur so aus: +// <div id="one">one</div><div id="two">two</div></pre> + +<h2 id="Specification" name="Specification">Anmerkungen</h2> + +<h3 id="Sicherheitsaspekte">Sicherheitsaspekte</h3> + +<p>Beim Einfügen von HTML in eine Seite sollten keinesfalls unbehandelte Benutzereingaben genutzt werden (siehe 'Escaping'). </p> + +<p>Für das Einfügen reinen Texts sollte statt <code>insertAdjacentHTML</code> besser <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent" title="The Node.textContent property represents the text content of a node and its descendants.">node.textContent</a></code> benutzt werden. Diese Methode interpretiert Parameter nicht als HTML, sondern fügt puren Text ein.</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Beschreibung</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td> + <td>{{ Spec2('DOM Parsing') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Kompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>grundsätzlich<br> + unterstützt</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("8.0") }}</td> + <td>4.0</td> + <td>7.0</td> + <td>4.0 (527)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>grundsätzlich<br> + unterstützt</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("8.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("Element.insertAdjacentText()")}}</li> + <li><a class="external" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org Gastbeitrag</a><span class="external"> von Henri Sivonen mit Testergebnissen, die Geschwindigkeitsvorteile von insertAdjacentHTML in bestimmten Fällen aufzeigen.</span></li> +</ul> diff --git a/files/de/web/api/element/queryselector/index.html b/files/de/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..a3cf7d9d89 --- /dev/null +++ b/files/de/web/api/element/queryselector/index.html @@ -0,0 +1,89 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +<div>{{APIRef}}</div> + +<p>Gibt das erste Unterelement des Elements, von dem es aufgerufen wird, zurück, auf das die angegebenen Selektoren zutreffen.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>element</var> = baseElement.querySelector(<em>selector</em>s); +</pre> + +<ul> + <li><code>element</code> und <code>baseElement</code> sind {{domxref("element")}}-Objekte.</li> + <li><code>selectors</code> ist eine Gruppe von <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a>.</li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<p>In diesem Beispiel wird das erste <code>style</code> Element aus dem body Element zurückgegeben, das den type <code>text/css</code> oder keinen type hat.</p> + +<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])"); +</pre> + +<h2 id="Notes" name="Notes">Bemerkungen</h2> + +<p>Gibt <code>null</code> zurück, wenn keine Elemente gefunden werden, andernfalls das Element.</p> + +<p>Eine <code>SYNTAX_ERR</code> Ausnahme tritt auf, wenn die angegebenen Selektoren ungültig sind.</p> + +<p><span style="font-family: Courier New;"><span>querySelector()</span></span> wurde in der WebApps API eingeführt.</p> + +<p>Das Argument <code>querySelector</code> muss der CSS Syntax folgen. Siehe {{domxref("document.querySelector")}} für konkrete Beispiele.</p> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Support</th> + <th>Anmerkungen</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>8</td> + <td>Nur CSS 2.1 Selektoren (IE8)</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td><strong>3.5</strong> (1.9.1)</td> + <td> </td> + </tr> + <tr> + <td>Opera</td> + <td>10</td> + <td> </td> + </tr> + <tr> + <td>Chrome</td> + <td>1</td> + <td> </td> + </tr> + <tr> + <td>Safari (webkit)</td> + <td>3.2 (525.3)</td> + <td><a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=16587">webk.it/16587</a></td> + </tr> + </tbody> +</table> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li>{{spec("http://www.w3.org/TR/selectors-api/","Selectors API Level 1","rec")}}</li> + <li>{{spec("http://www.w3.org/TR/selectors-api2/","Selectors API Level 2","wd")}}</li> + <li>{{spec("http://dev.w3.org/2006/webapi/selectors-api2/","Selectors API Level 2","ed")}}</li> +</ul> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/DOM/Element.querySelectorAll"><code>element.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelector"><code>document.querySelector</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelectorAll"><code>document.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector">Codeausschnitte für querySelector</a></li> +</ul> diff --git a/files/de/web/api/element/queryselectorall/index.html b/files/de/web/api/element/queryselectorall/index.html new file mode 100644 index 0000000000..009a105b89 --- /dev/null +++ b/files/de/web/api/element/queryselectorall/index.html @@ -0,0 +1,206 @@ +--- +title: Element.querySelectorAll() +slug: Web/API/Element/querySelectorAll +tags: + - Méthode + - Referenz +translation_of: Web/API/Element/querySelectorAll +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Summary" name="Summary">Summary</h2> + +<p>Gibt eine statische <a href="/en-US/docs/DOM/NodeList" title="DOM/NodeList"><code>NodeList</code></a> aller Elemente absteigend des Elements, auf welchem querySelectorAll ausgeführt wird, die mit den angegebenen CSS Selektoren übereinstimmen.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>); +</pre> + +<p>wobei:</p> + +<dl> + <dt><code>elementList</code></dt> + <dd>ist statische Node Liste [<code> NodeList[elements]</code> <code>] mit</code> <a href="/en-US/docs/DOM/element" title="DOM/Element">element</a> Objekten.</dd> + <dt><code>baseElement</code></dt> + <dd>ist ein <a href="/en-US/docs/DOM/element" title="DOM/element">element</a> Objekt.</dd> + <dt><code>selectors</code></dt> + <dd>ist eine Gruppe von <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">Selektoren</a> die mit dem Element im DOM übereinstimmen soll. </dd> +</dl> + +<h2 id="Example" name="Example">Beispiele</h2> + +<p>Dieses Beispiel gibt eine Liste der <code>p</code> Elementen im HTML body zurück:</p> + +<pre class="brush: js">let matches = document.body.querySelectorAll('p'); +</pre> + +<p>Dieses Beispiel gibt eine Liste der <code>p</code> Unter-Elementen eines Containers, dessen Überobjekt ein <code>div</code> mit der Klasse 'highlighted' ist:</p> + +<pre class="brush:js">let el = document.querySelector('#test'); //return an element with id='test' +let matches = el.querySelectorAll('div.highlighted > p'); // return a NodeList of p wrapped in a div with attribute class "highlighted" +</pre> + +<p>Dieses Beispiel gibt eine Liste der <code>iframe</code> Elementen die ein <strong>data</strong> Attribut 'src' besitzen:</p> + +<pre class="brush: js">let matches = el.querySelectorAll('iframe[data-src]'); +</pre> + +<h2 id="Notes" name="Notes">Bemerkungen</h2> + +<p>If the specified "selectors" are not found inside the DOM of the page, the method <code>queryselectorAll</code> returns an empty NodeList as specified below:</p> + +<pre class="brush: js">> let x = document.body.querySelectorAll('.highlighted'); //case: if the class highlighted doesn't exist in any attribute "class" of the DOM the result is +> [] //empty NodeList</pre> + +<p><code>querySelectorAll()</code> was introduced in the WebApps API.</p> + +<p>The string argument pass to <code>querySelectorAll</code> must follow the CSS syntax. See {{domxref("document.querySelector")}} for a concrete example.</p> + +<p>We could access a single item inside the NodeList in the following way:</p> + +<pre class="brush: js">let x = document.body.querySelectorAll('.highlighted'); +x.length; //return the size of x +x[i_item]; //where i_item has a value between 0 and x.length-1. The operator "[]" return as in an array the element at index "i_item" +</pre> + +<p>We could iterate inside a NodeList with the construct <code>for(....) {...} </code>as in the following code:</p> + +<pre class="brush: js"> let x = document.body.querySelectorAll('.highlighted'); + let index = 0; + for( index=0; index < x.length; index++ ) { + console.log(x[index]); + }</pre> + +<p>So in the above way, it is possible to manage and modify the behaviour of the page.</p> + +<h2 id="Quirks">Quirks</h2> + +<p><code>querySelectorAll()</code> behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results:</p> + +<pre class="brush: html"><div class="outer"> + <div class="select"> + <div class="inner"> + </div> + </div> +</div></pre> + +<pre class="brush: js">let select = document.querySelector('.select'); +let inner = select.querySelectorAll('.outer .inner'); +inner.length; // 1, not 0! +</pre> + +<p>In this example, when selecting <code>.outer .inner</code> in the context of <code>.select</code>, .<code>inner</code> is still found, even though <code>.outer</code> is not a descendant of the baseElement (<code>.select</code>).<br> + <code>querySelectorAll() </code>only verifies that the last element in the selector is within the baseElement.</p> + +<p>The <code><a href="/en-US/docs/Web/CSS/:scope">:scope</a></code> pseudo-class restores the expected behavior, only matching selectors on descendants of the baseElement:</p> + +<pre class="brush: js">let select = document.querySelector('.select'); +let inner = select.querySelectorAll(':scope .outer .inner'); +inner.length; // 0 +</pre> + +<h2 id="Specifications">Specifications</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('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll')}}</td> + <td>{{Spec2('Selectors API Level 2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>8</td> + <td>10</td> + <td>3.2 (525.3)</td> + </tr> + <tr> + <td><code>:scope</code> pseudo-class</td> + <td>{{ CompatVersionUnknown }}</td> + <td>32</td> + <td>{{CompatNo}}</td> + <td>15<sup>[1]</sup></td> + <td>7.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>:scope</code> pseudo-class</td> + <td>{{ CompatUnknown }}</td> + <td>32</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.0</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Supported in Opera 15+ by enabling the "<strong>Enable <style scoped></strong>" or "<strong>Enable experimental Web Platform features</strong>" flag in <code>chrome://flags</code>.</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/DOM/Document.querySelectorAll" title="DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelector" title="DOM/document.querySelector"><code>document.querySelector</code></a></li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Code snippets for <code>querySelector</code></a></li> +</ul> diff --git a/files/de/web/api/element/removeattribute/index.html b/files/de/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..91be13b037 --- /dev/null +++ b/files/de/web/api/element/removeattribute/index.html @@ -0,0 +1,42 @@ +--- +title: Element.removeAttribute() +slug: Web/API/Element/removeAttribute +tags: + - API + - Attribut + - DOM + - Element + - Méthode +translation_of: Web/API/Element/removeAttribute +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code>removeAttribute</code> entfernt ein Attribut vom gegebenen Element.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval"><em>element</em>.removeAttribute(<em>attrName</em>); +</pre> + +<ul> + <li><code>attrName</code> ist der Name des zu entfernenden Attributs (ein String).</li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre>// <div id="div1" align="left" width="200px"> +document.getElementById("div1").removeAttribute("align"); +// now: <div id="div1" width="200px"> +</pre> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p>Man sollte <code>removeAttribute</code> verwenden, statt den Attributswert auf <code>null zu setzen</code> (mit <a href="/en/DOM/element.setAttribute" title="en/DOM/element.setAttribute">setAttribute</a>).</p> + +<p>Der Versuch, ein nicht vorhandenes Attribut zu entfernen, wirft keine Exception.</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core: removeAttribute</a> (eingeführt in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">DOM Level 1 Core</a>)</p> diff --git a/files/de/web/api/element/requestfullscreen/index.html b/files/de/web/api/element/requestfullscreen/index.html new file mode 100644 index 0000000000..01e207e00a --- /dev/null +++ b/files/de/web/api/element/requestfullscreen/index.html @@ -0,0 +1,118 @@ +--- +title: Element.requestFullscreen() +slug: Web/API/Element/requestFullScreen +translation_of: Web/API/Element/requestFullScreen +--- +<div>{{APIRef("Fullscreen API")}}</div> + +<p>Die Funktion <code><strong>Element.requestFullscreen()</strong></code> sendet eine asynchrone Anfrage, um das Element in Vollbild darzustellen.</p> + +<p>Es ist nicht garantiert, dass das Element in Vollbild angezeigt werden wird. Wenn die Berechtigung dazu erteilt wird, erhält das Dokument ein {{event("fullscreenchange")}} Event, um es wissen zu lassen, dass nun etwas in Vollbild angezeigt wird. Wird die Berechtigung jedoch verweigert, erhält das Dokument ein {{event('fullscreenerror')}} Event.</p> + +<div class="note"> +<p>Nur Elemente im HTML Namespace (Standard HTML Elemente), plus die {{HTMLElement("svg")}} und {{HTMLElement("math")}} Elemente, welche sich im Top-Level Dokument oder in einem {{HTMLElement('iframe')}} mit dem {{htmlattrxref("allowfullscreen", "iframe")}} Attribut befinden, können im Vollbildmodus angezeigt werden. Das bedeutet, dass ein {{HTMLElement('frame')}} oder ein {{HTMLElement('object')}} dies nicht kann.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>Element</em>.requestFullscreen(); +</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Bevor <code>requestFullScreen()</code> aufgerufen wird, sollte man Eventhandler für die {{event("fullscreenchange")}} und {{event("fullscreenerror")}} Events erstellen, damit man erfährt, wenn das Dokument in den Vollbildmodus wechselt (oder die entsprechende Berechtigung dazu fehlt).</p> + +<p>tbd</p> + +<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("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegene Unterstütung</td> + <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br> + {{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled</td> + <td>11{{property_prefix("ms")}}<sup>[3]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></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>Chrome Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegene Unterstütung</td> + <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br> + {{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Auch implementiert als <code>webkitRequestFullScreen</code>.</p> + +<p>[2] Implementiert als <code>mozRequestFullScreen</code> (man beachte das große S für Screen). Vor Firefox 44 erlaubte Gecko Elementen innerhalb eines {{HTMLElement('frame')}} oder {{HTMLElement('object')}} fälschlicherweise in den Vollbildmodus zu wechseln. Ab Firefox 44 wurde dieses Verhalten behoben: nur Elemente im Top-Level Dokument oder in einem {{HTMLElement('iframe')}} mit dem {{htmlattrxref("allowfullscreen", "iframe")}} Attribut können in den Vollbildmodus wechseln.</p> + +<p>[3] Siehe <a href="https://msdn.microsoft.com/en-us/library/dn254939%28v=vs.85%29.aspx">Dokumentation auf MSDN</a>.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Fullscreen_API">Full-screen API</a></li> + <li>{{ domxref("Element.requestFullscreen()") }}</li> + <li>{{ domxref("Document.exitFullscreen()") }}</li> + <li>{{ domxref("Document.fullscreen") }}</li> + <li>{{ domxref("Document.fullscreenElement") }}</li> + <li>{{ cssxref(":fullscreen") }}</li> + <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li> +</ul> diff --git a/files/de/web/api/element/scrollintoview/index.html b/files/de/web/api/element/scrollintoview/index.html new file mode 100644 index 0000000000..ccbcc3e6ea --- /dev/null +++ b/files/de/web/api/element/scrollintoview/index.html @@ -0,0 +1,85 @@ +--- +title: Element.scrollIntoView() +slug: Web/API/Element/scrollIntoView +tags: + - API + - CSSOM Views + - Experimentell + - Methode(2) + - Reference +translation_of: Web/API/Element/scrollIntoView +--- +<div>{{ APIRef("DOM")}}{{SeeCompatTable}}</div> + +<p>Die Methode <code><strong>Element.scrollIntoView()</strong></code> scrolled das Element in den sichtbaren Bereich des Browsers.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">element.scrollIntoView(); // Gleich mit<code> element.scrollIntoView(true) +</code>element.scrollIntoView(<em>alignToTop</em>); // Boolean Argument +element.scrollIntoView(<em>scrollIntoViewOptions</em>); // Object Argument +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><em><code>alignToTop</code></em></dt> + <dd>Dies ist ein {{jsxref("Boolean")}} Wert: + <ul> + <li>Bei <code>true</code> wird der obere Rand des Elements an den oberen Rand des sichtbaren Bereichs im Browser gescrolled.</li> + <li>Bei <code>false</code> wird der untere Rand des Elements an den unteren Rand des sichtbaren Bereichs im Browser gescrolled.</li> + </ul> + </dd> + <dt><em><code>scrollIntoViewOptions</code></em></dt> + <dd>Ein Boolean oder Objekt mit den folgenden Optionen:</dd> + <dd> + <pre class="idl notranslate">{ + behavior: <strong>"auto"</strong> | "smooth", + block: <strong>"start"</strong> | "end", +}</pre> + </dd> + <dd>Wenn der Wert ein Boolean, enspricht <code>true</code> <code>{block: "start"} und false {block: "end"}.</code></dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: js notranslate">var element = document.getElementById("box"); + +element.scrollIntoView(); +element.scrollIntoView(false); +element.scrollIntoView({block: "end"}); +element.scrollIntoView({block: "end", behavior: "smooth"}); +</pre> + +<h2 id="Notizen">Notizen</h2> + +<p>Das Element wird eventuell nicht ganz nach oben oder unten gescrolled. Je nach Layout der anderen Elemente.</p> + +<h2 id="Technische_Daten"><span class="short_text" id="result_box" lang="de"><span>Technische Daten</span></span></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Kommentar</th> + </tr> + <tr> + <td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Element.scrollIntoView")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{non-standard_inline}} <a href="/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"><code>Element.scrollIntoViewIfNeeded()</code></a></li> +</ul> diff --git a/files/de/web/api/element/scrollleft/index.html b/files/de/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..90c28a203e --- /dev/null +++ b/files/de/web/api/element/scrollleft/index.html @@ -0,0 +1,83 @@ +--- +title: Element.scrollLeft +slug: Web/API/Element/scrollLeft +translation_of: Web/API/Element/scrollLeft +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Die <strong><code>Element.scrollLeft</code></strong> Eigenschaft setzt die Anzahl an Pixel, die der Inhalt eines Elements nach links gescrollt wird, oder liefert diese zurück.</p> + +<p>Beachten Sie: Wenn die Eigenschaft {{cssxref("direction")}} des Elements den Wert <code>rtl</code> (right-to-left) aufweist, ist <code>scrollLeft</code> <code>0</code>, falls der Scrollbalken ganz rechts ist (am Anfang des gescrollten Inhalts), und nimmt zunehmend negative Werte an, wenn man gegen Ende des Inhalts scrollt.</p> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Syntax</h2> + +<pre class="eval">// Liefert die Anzahl der gescrollten Pixel +var <var>sLeft</var> = <var>element</var>.scrollLeft; +</pre> + +<p><var>sLeft</var> ist ein Integer-Wert, der die Anzahl der Pixel repräsentiert, die <var>element</var> nach links gescrollt ist.</p> + +<pre class="eval">// Set the number of pixels scrolled +<var>element</var>.scrollLeft = 10; +</pre> + +<p><code>scrollLeft</code> kann als Integerwert gesetzt werden. Dabei gilt:</p> + +<ul> + <li>Wenn das erste Element nicht gescrollt werden kann (wenn es z.B. keinen overflow hat), erhält <code>scrollLeft</code> den Wert 0.</li> + <li>Wenn ein Wert kleiner als 0 gesetzt wird (größer als 0 für right-to-left Elemente), erhält <code>scrollLeft</code> den Wert 0.</li> + <li>Wenn der Maximalwert, den der Inhalt des gescrollten Elements annehmen kann, überschritten wrid, erhält <code>scrollLeft</code> (nur) den Maximalwert.</li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + #container { + border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px; + } + #content { + background-color: #ccc; width: 250px; + } + </style> + <script> + document.addEventListener('DOMContentLoaded', function () { + var button = document.getElementById('slide'); + button.onclick = function () { + document.getElementById('container').scrollLeft += 20; + }; + }, false); + </script> +</head> +<body> + <div id="container"> + <div id="content">Lorem ipsum dolor sit amet.</div> + </div> + <button id="slide" type="button">Slide</button> +</body> +</html> +</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('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("api.Element.scrollLeft")}}</p> diff --git a/files/de/web/api/element/scrollwidth/index.html b/files/de/web/api/element/scrollwidth/index.html new file mode 100644 index 0000000000..2968c3ea64 --- /dev/null +++ b/files/de/web/api/element/scrollwidth/index.html @@ -0,0 +1,49 @@ +--- +title: Element.scrollWidth +slug: Web/API/Element/scrollWidth +tags: + - Eigenschaft + - Referenz +translation_of: Web/API/Element/scrollWidth +--- +<div>{{ APIRef("DOM") }}</div> + +<p>Die schreibgeschützte Eigenschaft <code><strong>Element.scrollWidth</strong></code> liefert entweder die Breite (in Pixeln) des Inhaltes eines Elements oder die Breite des Elementes selbst, je nachdem, welche von beiden größer ist. Ist der Inhalt eines Elementes breiter als sein Inhaltsbereich (z.B. wenn Bildlaufleisten mit eingeblendet werden), dann ist die <code>scrollWidth</code> des Elementes größer als seine <code>clientWidth</code>.</p> + +<div class="note"> +<p>Diese Eigenschaft rundet den Wert zu einem Integer (Ganzzahl). Sollte ein Wert mit Nachkommastellen benötigt werden, verwenden Sie {{ domxref("element.getBoundingClientRect()") }}.</p> +</div> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Syntax</h2> + +<pre class="syntaxbox">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth;</pre> + +<p><code><var>xScrollWidth</var></code> ist die Breite des Inhaltes des Elementes <code>element</code> in Pixeln.</p> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:html"><div id="aDiv" style="width: 100px; height: 200px; overflow: auto;"> + FooBar-FooBar-FooBar +</div> +<br> +<input + type="button" + value="Show scrollWidth" + onclick="alert(document.getElementById('aDiv').scrollWidth);" +></pre> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<p>Die Eigenschaft <code>scrollWidth</code> ist im <a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollwidth" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollwidth">CSSOM View Module</a> definiert.</p> + +<h2 id="References" name="References">Referenzen</h2> + +<p>{{Compat("api.Element.scrollWidth")}}</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{domxref("Element.clientWidth")}}</li> + <li>{{domxref("HTMLElement.offsetWidth")}}</li> + <li><a href="/de-DE/docs/Determining_the_dimensions_of_elements">Bestimmung der Abmessungen von Elementen</a></li> +</ul> diff --git a/files/de/web/api/element/setattribute/index.html b/files/de/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..292dd24a6f --- /dev/null +++ b/files/de/web/api/element/setattribute/index.html @@ -0,0 +1,48 @@ +--- +title: Element.setAttribute() +slug: Web/API/Element/setAttribute +tags: + - Attribut + - Methode(2) + - Méthode +translation_of: Web/API/Element/setAttribute +--- +<div>{{APIRef("DOM")}}</div> + +<p>Fügt dem angegebenen Element ein Attribut hinzu oder ändert den Wert eines vorhandenen Attributs.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>element</em>.setAttribute(<em>name</em>, <em>value</em>); +</pre> + +<ul> + <li><code>name</code> ist der Name des Attributs als String.</li> + <li><code>value</code> ist der gewünschte neue Wert des Attributs.</li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:js">var d = document.getElementById("d1"); + +d.setAttribute("align", "center"); +</pre> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p>Wenn <code>setAttribute</code> auf einem HTML-Element in einem HTML-Dokument aufgerufen wird, wird der Name des Attributes in Kleinbuchstaben umgewandelt.</p> + +<p>Wenn das angegebene Attribut bereits existiert, ersetzt <code>setAttribute</code> den alten Wert. Falls das Attribut nicht existiert, wird es erzeugt.</p> + +<p>Obwohl <code><a href="/en-US/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute()</a></code> für fehlende Attribute <code>null</code> liefert, sollte man <code><a href="/en-US/docs/DOM/element.removeAttribute" title="DOM/element.removeAttribute">removeAttribute()</a></code> statt <code><em>elt</em>.setAttribute(<em>attr</em>, null)</code> verwenden um ein Attribut zu entfernen.</p> + +<p><code>setAttribute()</code> zu benutzen, um einige XUL-Attribute (vor allem <code>value</code>) zu ändern, verhält sich inkonsistent, da das Attribut nur den Standardwert spezifiziert. Um den aktuellen Wert zu ändern sollte man die Eigenschaften direkt verwenden. Zum Beispiel <code><em>elt</em>.value</code> statt <code><em>elt</em>.setAttribute('value', <em>val</em>)</code>.</p> + +<div>{{DOMAttributeMethods}}</div> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (eingeführt im <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5: APIs in HTML documents</a></li> +</ul> diff --git a/files/de/web/api/event/bubbles/index.html b/files/de/web/api/event/bubbles/index.html new file mode 100644 index 0000000000..286bac6a23 --- /dev/null +++ b/files/de/web/api/event/bubbles/index.html @@ -0,0 +1,59 @@ +--- +title: Event.bubbles +slug: Web/API/Event/bubbles +translation_of: Web/API/Event/bubbles +--- +<p>{{ ApiRef("DOM") }}</p> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p>Gibt an, ob ein Event in der DOM-Hierarchie nach oben propagiert wird oder nicht.</p> + +<h2 id="Syntax_2">Syntax</h2> + +<pre>event.bubbles</pre> + +<h3 id="Wert">Wert</h3> + +<p>Ein {{domxref("Boolean")}}, welches <code>true</code> ist, falls das Event durch die DOM-Hierarchie nach oben propagiert wird.</p> + +<h2 id="Syntax" name="Syntax">Beispiel</h2> + +<pre class="brush: js"> function goInput(e) { + // checks bubbles and + if (!e.bubbles) { + // passes event along if it's not + passItOn(e); + } + // already bubbling + doOutput(e) +} +</pre> + +<div class="note"> +<p><strong>Hinweis</strong>: Nur bestimmte Events können weiter nach oben propagiert werden. Die Events, die dazu in der Lage sind, haben den Wert <em>true, </em>für die hier beschriebene Eigenschaft.</p> +</div> + +<h2 id="Specifications" name="Specifications">Specifications</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('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', '#Events-Event-canBubble', 'Event.bubbles')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> diff --git a/files/de/web/api/event/event/index.html b/files/de/web/api/event/event/index.html new file mode 100644 index 0000000000..ee30a2064c --- /dev/null +++ b/files/de/web/api/event/event/index.html @@ -0,0 +1,72 @@ +--- +title: Event() +slug: Web/API/Event/Event +translation_of: Web/API/Event/Event +--- +<p>{{APIRef("DOM")}}</p> + +<p>Der Konstruktor: <code><strong>Event()</strong></code> erstellt ein neues {{domxref("Event")}}.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"> <em>event</em> = new Event(<em>typeArg</em>, <em>eventInit</em>);</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><em>typeArg</em></dt> + <dd>ist ein {{domxref("DOMString")}} und bestimmt den Namen des Events.</dd> + <dt><em>eventInit </em>{{optional_inline}}</dt> +</dl> + +<dl> + <dd>ist ein {{jsxref("Object")}} und beinhaltet folgende Felder: + <ul> + <li><code>"bubbles"</code>: (Optional) Ein {{jsxref("Boolean")}}, welcher angibt, ob das Event gebubbled werden soll. Der Standardwert ist <code>false</code>.</li> + <li><code>"cancelable"</code>: (Optional) Ein {{jsxref("Boolean")}}, welcher angibt, ob das Event abgebrochen werden kann. Der Standardwert <code>false</code>.</li> + <li><code>"composed"</code>: (Optional) Ein {{jsxref("Boolean")}}, welcher angibt, ob das Event auch außerhalb eines Shadow-Root-Elements empfangen werden kann. Der Standardwert ist <code>false</code>.<span style="display: none;"> </span></li> + </ul> + </dd> +</dl> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">// create a look event that bubbles up and cannot be canceled + +var evt = new Event("look", {"bubbles":true, "cancelable":false}); +document.dispatchEvent(evt); + +// event can be dispached from any elmement, not only the document +myDiv.dispatchEvent(evt); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table" style="height: 49px; width: 1000px;"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-event','Event()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Event.Event")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Event")}}</li> +</ul> diff --git a/files/de/web/api/event/index.html b/files/de/web/api/event/index.html new file mode 100644 index 0000000000..0962ba6de2 --- /dev/null +++ b/files/de/web/api/event/index.html @@ -0,0 +1,253 @@ +--- +title: Event +slug: Web/API/Event +tags: + - API + - DOM + - Event + - Interface + - NeedsTranslation + - Reference + - TopicStub + - UI +translation_of: Web/API/Event +--- +<p>{{APIRef("DOM")}}</p> + +<p>Das <code><strong>Event</strong></code> Interface repräsentiert jegliches Ereignis, das im DOM auftritt.</p> + +<p>Ein Ereignis kann durch Benutzerinteraktion ausgelöst werden, z.B das Klicken einer Maustaste oder Eingaben der Tastatur, oder durch eine API generiert werden um den Fortschritt eines asynchronen Prozesses zu repräsentieren. Es kann auch durch ein Programm ausgelöst werden, beispielsweise indem die <a href="https://developer.mozilla.org/de/docs/Web/API/HTMLElement/click" title="The HTMLElement.click() method simulates a mouse click on an element."><code>HTMLElement.click()</code></a> Method eines Elements aufgerufen wird, oder indem ein Ereignis definiert wird und es danach mithilfe von <a href="https://developer.mozilla.org/de/docs/Web/API/EventTarget/dispatchEvent" title="Dispatches an Event at the specified EventTarget, (synchronously) invoking the affected EventListeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent()."><code>EventTarget.dispatchEvent()</code></a> an ein Ziel versandt wird.</p> + +<p>Es gibt eine Vielzahl verschiedener Typen von Ereignissen, von denen manche erweiterte Schnittstellen basieren auf dem zentralen <code><strong>Event</strong></code> Interface benutzen. <strong><code>Event</code></strong> beinhaltet alle Attribute und Methoden, die allen Ereignissen gemein sind.</p> + +<p>Viele DOM-Element können für das Empfangen dieser Events konfiguriert werden und rufen Code auf, um sie zu behandeln. Event-Handler werden normalerweise mit unterschiedlichen <a href="https://developer.mozilla.org/de/docs/Web/HTML/Element">HTML-Elementen</a> (so wie <code><button></code>, <code><div></code>, <code><span></code>, etc.) verbunden, durch den Aufruf von <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" title="The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target."><code>EventTarget.addEventListener()</code></a>. Dies ersetzt größtenteils die alten HTML <a class="new" rel="nofollow" title="Seite wurde noch nicht erstellt.">Event Handler</a> Attribute. Die neueren Event-Handler können außerdem nötigenfalls mithilfe von <a href="https://developer.mozilla.org/de/docs/Web/API/EventTarget/removeEventListener" title="The EventTarget.removeEventListener() method removes from the EventTarget an event listener previously registered with EventTarget.addEventListener(). The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal"><code>removeEventListener()</code></a> wieder entfernt werden.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Ein Element kann mehrere solcher Handler besitzen, sogar für das selbe Ereignis—so können sie verschiedene, unabhängige Code-Module angebracht werden, jeweils für deren unabhängige Zwecke. (Zum Beispiel eine Webseite mit einem Werbemodul und einem Statistikmodel, die beide Videowiedergabe überwachen.)</p> +</div> + +<p>Gitb es viele verschachtelte Element, jedes mit eigenen Event-Handlern, kann das Verarbeiten von Ereignissen siehr schnell komplex werden—im Speziellen wenn ein Elternelement die selben Ereignissen wie sein Kindelement empfängt, weil sie sich überlappen und so Ereignisse technisch gesehen in beiden geschehen. Die Behandlungsreihenfolge solcher Ereignisse hängen von <a href="https://developer.mozilla.org/de/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">Event bubbling and capture</a> Konfigurationen jedes ausgelösten Event-Handlers ab.</p> + +<h2 id="Introduction" name="Introduction">Interfaces based on <code>Event</code></h2> + +<p>Below is a list of interfaces which are based on the main <code>Event</code> interface, with links to their respective documentation in the MDN API reference. Note that all event interfaces have names which end in "Event".</p> + +<div class="index"> +<ul> + <li>{{domxref("AnimationEvent")}}</li> + <li>{{domxref("AudioProcessingEvent")}}</li> + <li>{{domxref("BeforeInputEvent")}}</li> + <li>{{domxref("BeforeUnloadEvent")}}</li> + <li>{{domxref("BlobEvent")}}</li> + <li>{{domxref("ClipboardEvent")}}</li> + <li>{{domxref("CloseEvent")}}</li> + <li>{{domxref("CompositionEvent")}}</li> + <li>{{domxref("CSSFontFaceLoadEvent")}}</li> + <li>{{domxref("CustomEvent")}}</li> + <li>{{domxref("DeviceLightEvent")}}</li> + <li>{{domxref("DeviceMotionEvent")}}</li> + <li>{{domxref("DeviceOrientationEvent")}}</li> + <li>{{domxref("DeviceProximityEvent")}}</li> + <li>{{domxref("DOMTransactionEvent")}}</li> + <li>{{domxref("DragEvent")}}</li> + <li>{{domxref("EditingBeforeInputEvent")}}</li> + <li>{{domxref("ErrorEvent")}}</li> + <li>{{domxref("FetchEvent")}}</li> + <li>{{domxref("FocusEvent")}}</li> + <li>{{domxref("GamepadEvent")}}</li> + <li>{{domxref("HashChangeEvent")}}</li> + <li>{{domxref("IDBVersionChangeEvent")}}</li> + <li>{{domxref("InputEvent")}}</li> + <li>{{domxref("KeyboardEvent")}}</li> + <li>{{domxref("MediaStreamEvent")}}</li> + <li>{{domxref("MessageEvent")}}</li> + <li>{{domxref("MouseEvent")}}</li> + <li>{{domxref("MutationEvent")}}</li> + <li>{{domxref("OfflineAudioCompletionEvent")}}</li> + <li>{{domxref("PageTransitionEvent")}}</li> + <li>{{domxref("PointerEvent")}}</li> + <li>{{domxref("PopStateEvent")}}</li> + <li>{{domxref("ProgressEvent")}}</li> + <li>{{domxref("RelatedEvent")}}</li> + <li>{{domxref("RTCDataChannelEvent")}}</li> + <li>{{domxref("RTCIdentityErrorEvent")}}</li> + <li>{{domxref("RTCIdentityEvent")}}</li> + <li>{{domxref("RTCPeerConnectionIceEvent")}}</li> + <li>{{domxref("SensorEvent")}}</li> + <li>{{domxref("StorageEvent")}}</li> + <li>{{domxref("SVGEvent")}}</li> + <li>{{domxref("SVGZoomEvent")}}</li> + <li>{{domxref("TimeEvent")}}</li> + <li>{{domxref("TouchEvent")}}</li> + <li>{{domxref("TrackEvent")}}</li> + <li>{{domxref("TransitionEvent")}}</li> + <li>{{domxref("UIEvent")}}</li> + <li>{{domxref("UserProximityEvent")}}</li> + <li>{{domxref("WebGLContextEvent")}}</li> + <li>{{domxref("WheelEvent")}}</li> +</ul> +</div> + +<h2 id="Constructor" name="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("Event.Event", "Event()")}}</dt> + <dd>Creates an <code>Event</code> object, returning it to the caller.</dd> +</dl> + +<h2 id="Properties" name="Properties">Properties</h2> + +<dl> + <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt> + <dd>A Boolean indicating whether the event bubbles up through the DOM or not.</dd> + <dt>{{domxref("Event.cancelBubble")}}</dt> + <dd>A historical alias to {{domxref("Event.stopPropagation()")}}. Setting its value to <code>true</code> before returning from an event handler prevents propagation of the event.</dd> + <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt> + <dd>A Boolean indicating whether the event is cancelable.</dd> + <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt> + <dd>A Boolean value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.</dd> + <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt> + <dd>A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent; it's possible this has been changed along the way through <em>retargeting</em>.</dd> + <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt> + <dd>An {{jsxref("Array")}} of DOM {{domxref("Node")}}s through which the event has bubbled.</dd> + <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt> + <dd>Indicates whether or not {{domxref("event.preventDefault()")}} has been called on the event.</dd> + <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt> + <dd>Indicates which phase of the event flow is being processed.</dd> + <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>The explicit original target of the event (Mozilla-specific).</dd> + <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>The original target of the event, before any retargetings (Mozilla-specific).</dd> + <dt>{{domxref("Event.returnValue")}} {{non-standard_inline}}</dt> + <dd>A non-standard alternative (from old versions of Microsoft Internet Explorer) to {{domxref("Event.preventDefault()")}} and {{domxref("Event.defaultPrevented")}}.</dd> + <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt> + <dd>A {{jsxref("Boolean")}} indicating whether the given event will bubble across through the shadow root into the standard DOM. This property has been renamed to {{domxref("Event.composed", "composed")}}.</dd> + <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt> + <dd>A non-standard alias (from old versions of Microsoft Internet Explorer) for {{domxref("Event.target")}}.</dd> + <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt> + <dd>A reference to the target to which the event was originally dispatched.</dd> + <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt> + <dd>The time at which the event was created, in milliseconds. By specification, this value is time since epoch, but in reality browsers' definitions vary; in addition, work is underway to change this to be a {{domxref("DOMHighResTimeStamp")}} instead.</dd> + <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt> + <dd>The name of the event (case-insensitive).</dd> + <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt> + <dd>Indicates whether or not the event was initiated by the browser (after a user click for instance) or by a script (using an event creation method, like <a href="/en-US/docs/DOM/event.initEvent">event.initEvent</a>)</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt> + <dd>Initializes the value of an Event created. If the event has already being dispatched, this method does nothing.</dd> + <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> + <dd>Prevents the event from bubbling. Obsolete, use {{domxref("event.stopPropagation")}} instead.</dd> + <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> + <dd>Obsolete, use {{domxref("event.stopPropagation")}} instead.</dd> + <dt>{{domxref("Event.preventDefault()")}}</dt> + <dd>Cancels the event (if it is cancelable).</dd> + <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt> + <dd>For this particular event, no other listener will be called. Neither those attached on the same element, nor those attached on elements which will be traversed later (in capture phase, for instance)</dd> + <dt>{{domxref("Event.stopPropagation()")}}</dt> + <dd>Stops the propagation of events further along in the DOM.</dd> + <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt> + <dd>Non-standard. Returns the value of {{domxref("Event.defaultPrevented")}}. Use {{domxref("Event.defaultPrevented")}} instead.</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('DOM WHATWG', '#interface-event', 'Event')}}</td> + <td>{{Spec2('DOM WHATWG')}}</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>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>cancelBubble</code> defined on Event</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(53)}}<sup>[1]</sup></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>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> + </tr> + <tr> + <td><code>cancelBubble</code> defined on Event</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(53)}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Previous to Firefox 52, this property was defined on the {{domxref("UIEvent")}} interface. See {{bug(1298970)}} for more details.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Types of events available: <a href="/en-US/docs/Web/Reference/Events">Event reference</a></li> + <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a> (target vs currentTarget vs relatedTarget vs originalTarget)</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Creating and triggering custom events</a></li> + <li>For Firefox add-on developers: + <ul> + <li><a href="/en-US/docs/Listening_to_events_in_Firefox_extensions">Listening to events in Firefox extensions</a></li> + <li><a href="/en-US/docs/Listening_to_events_on_all_tabs">Listening to events on all tabs</a></li> + </ul> + </li> +</ul> diff --git a/files/de/web/api/eventlistener/index.html b/files/de/web/api/eventlistener/index.html new file mode 100644 index 0000000000..c7eb012670 --- /dev/null +++ b/files/de/web/api/eventlistener/index.html @@ -0,0 +1,48 @@ +--- +title: EventListener +slug: Web/API/EventListener +tags: + - API + - DOM + - DOM Events +translation_of: Web/API/EventListener +--- +<p>{{APIRef("DOM Events")}}</p> + +<h2 id="Method_overview" name="Method_overview">Methodenübersicht</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>void <code><a href="#handleEvent()">handleEvent</a></code> (in Event event);</td> + </tr> + </tbody> +</table> + +<h2 id="Methods" name="Methods">Methoden</h2> + +<h3 id="handleEvent()" name="handleEvent()">handleEvent()</h3> + +<p>Diese Methode wird immer aufgerufen, wenn ein Event auftritt, welche im <code>EventListener</code> Interface registriert wurden.</p> + +<pre class="eval">void handleEvent( + in Event event +); +</pre> + +<h5 id="Parameters" name="Parameters">Parameter</h5> + +<dl> + <dt><code>event</code></dt> + <dd>Das DOM-{{ domxref("Event") }} das zu registrieren ist.</dd> +</dl> + +<h3 id="Remarks" name="Remarks">Anmerkungen</h3> + +<p>Da das Interface mit dem <code><span class="nowiki">[function]</span></code> Flag gekennzeichnet ist, implementieren alle JavaScript-Funktionen dieses automatisch. Das Aufrufen von {{ manch("handleEvent") }} einer solchen Implementierung ruft automatisch diese Funktion auf.</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{ spec("http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener","Document Object Model Events: EventListener","REC") }}</li> +</ul> diff --git a/files/de/web/api/eventsource/index.html b/files/de/web/api/eventsource/index.html new file mode 100644 index 0000000000..7942b2df95 --- /dev/null +++ b/files/de/web/api/eventsource/index.html @@ -0,0 +1,126 @@ +--- +title: EventSource +slug: Web/API/EventSource +tags: + - API + - Interface + - Referenz + - Server-sent events +translation_of: Web/API/EventSource +--- +<p>{{APIRef("Websockets API")}}</p> + +<p>Das <strong>EventSource</strong>-Interface erlaubt das Empfangen von Server-Sent Events. Es erlaubt den Zugriff auf Events im <code>text/event-stream</code> Format über eine persistente HTTP-Verbindung.</p> + +<dl> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em>Diese Interface erbt weitere Properties von seinem Parent-Object {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("EventSource.onerror")}}</dt> + <dd>Ist eine {{domxref("EventHandler")}}-Instanz. Diese wird aufgerufen, wenn ein Fehler auftritt und das {{event("error")}}-Event auf diesem Object ausgelöst wird.</dd> + <dt>{{domxref("EventSource.onmessage")}}</dt> + <dd>Ist eine {{domxref("EventHandler")}}-Instanz. Diese wir aufgerufen, wenn ein {{event("message")}}-event empfangen wird. Dies ist immer dann der Fall, wenn die Event-Quelle eine neue Nachricht erzeugt hat.</dd> + <dt>{{domxref("EventSource.onopen")}}</dt> + <dd>Ist eine {{domxref("EventHandler")}}-Instanz. Diese wird immer dann aufgerufen, wenn die Verbindung geöffnet wurde, also ein {{event("open")}}-Event empfangen wurde.</dd> + <dt>{{domxref("EventSource.readyState")}} {{readonlyinline}}</dt> + <dd>Ein <code>unsigned short</code>, welcher den aktuellen Status der Verbindung repräsentiert. Gültige werte sind <code>CONNECTING</code> (<code>0</code>), <code>OPEN</code> (<code>1</code>), or <code>CLOSED</code> (<code>2</code>).</dd> + <dt>{{domxref("EventSource.url")}} {{readonlyinline}}</dt> + <dd>Ein {{domxref("DOMString")}}, welcher die URL der Event-Quelle beinhaltet.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Diese Interface erbt weitere Methoden von seinem Parent-Object {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("EventSource.close()")}}</dt> + <dd>Schließt die Verbindung, soweit geöffnet, und setzt den Status (<code>readyState</code>) auf CLOSED. Auf bereits geschlossenen Verbindungen hat diese Methode keinen Effekt.</dd> +</dl> + +<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('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<ul> +</ul> + +<h2 id="Browser_Kompatiblität">Browser Kompatiblitä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>Basis-Support</td> + <td>9</td> + <td>{{ CompatGeckoDesktop("6.0") }}</td> + <td>{{CompatUnknown}}</td> + <td>11</td> + <td>5</td> + </tr> + <tr> + <td>CORS-Support</td> + <td>26</td> + <td>{{ CompatGeckoDesktop("11.0") }}</td> + <td>{{CompatUnknown}}</td> + <td>12</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>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basis-Support</td> + <td>{{ CompatAndroid("4.4") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en/Server-sent_events/Using_server-sent_events" title="en/Server-sent events/Using server-sent events">Using server-sent events</a></li> +</ul> diff --git a/files/de/web/api/eventtarget/index.html b/files/de/web/api/eventtarget/index.html new file mode 100644 index 0000000000..3ed264119e --- /dev/null +++ b/files/de/web/api/eventtarget/index.html @@ -0,0 +1,174 @@ +--- +title: EventTarget +slug: Web/API/EventTarget +tags: + - API + - DOM + - DOM Events + - Interface + - NeedsTranslation + - TopicStub +translation_of: Web/API/EventTarget +--- +<p>{{ApiRef("DOM Events")}}</p> + +<p><code>EventTarget</code> is an interface implemented by objects that can receive events and may have listeners for them.</p> + +<p>{{domxref("Element")}}, {{domxref("document")}}, and {{domxref("window")}} are the most common event targets, but other objects can be event targets too, for example {{domxref("XMLHttpRequest")}}, {{domxref("AudioNode")}}, {{domxref("AudioContext")}}, and others.</p> + +<p>Many event targets (including elements, documents, and windows) also support setting <a href="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">event handlers</a> via <code>on...</code> properties and attributes.</p> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("EventTarget.addEventListener()")}}</dt> + <dd>Register an event handler of a specific event type on the <code>EventTarget</code>.</dd> + <dt>{{domxref("EventTarget.removeEventListener()")}}</dt> + <dd>Removes an event listener from the <code>EventTarget</code>.</dd> + <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt> + <dd>Dispatch an event to this <code>EventTarget</code>.</dd> +</dl> + +<h3 id="Additional_methods_for_Mozilla_chrome_code">Additional methods for Mozilla chrome code</h3> + +<p>Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also <a href="/en-US/docs/Mozilla/WebIDL_bindings">WebIDL bindings</a>.</p> + +<ul> + <li>void <strong>setEventHandler</strong>(DOMString type, EventHandler handler) {{non-standard_inline}}</li> + <li>EventHandler <strong>getEventHandler</strong>(DOMString type) {{non-standard_inline}}</li> +</ul> + +<h2 id="Example">Example:</h2> + +<h3 id="_Simple_implementation_of_EventTarget" name="_Simple_implementation_of_EventTarget">Simple implementation of EventTarget</h3> + +<pre class="brush: js">var EventTarget = function() { + this.listeners = {}; +}; + +EventTarget.prototype.listeners = null; +EventTarget.prototype.addEventListener = function(type, callback) { + if (!(type in this.listeners)) { + this.listeners[type] = []; + } + this.listeners[type].push(callback); +}; + +EventTarget.prototype.removeEventListener = function(type, callback) { + if (!(type in this.listeners)) { + return; + } + var stack = this.listeners[type]; + for (var i = 0, l = stack.length; i < l; i++) { + if (stack[i] === callback){ + stack.splice(i, 1); + return; + } + } +}; + +EventTarget.prototype.dispatchEvent = function(event) { + if (!(event.type in this.listeners)) { + return true; + } + var stack = this.listeners[event.type]; + event.target = this; + for (var i = 0, l = stack.length; i < l; i++) { + stack[i].call(this, event); + } + return !event.defaultPrevented; +}; +</pre> + +<p>{{ EmbedLiveSample('_Simple_implementation_of_EventTarget') }}</p> + +<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('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + <td>A few parameters are now optional (<code>listener</code>), or accepts the <code>null</code> value (<code>useCapture</code>).</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td> + <td>{{Spec2('DOM2 Events')}}</td> + <td>Initial definition.</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>9.0</td> + <td>7</td> + <td>1.0<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</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>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>9.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>window.EventTarget</code> does not exist.</p> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Reference/Events">Event reference</a> - the events available in the platform.</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li> + <li>{{domxref("Event")}} interface</li> +</ul> diff --git a/files/de/web/api/federatedcredential/index.html b/files/de/web/api/federatedcredential/index.html new file mode 100644 index 0000000000..1d7569e449 --- /dev/null +++ b/files/de/web/api/federatedcredential/index.html @@ -0,0 +1,125 @@ +--- +title: FederatedCredential +slug: Web/API/FederatedCredential +tags: + - API + - Föderierte Zugangsdaten + - Schnittstelle + - Zugangsdaten +translation_of: Web/API/FederatedCredential +--- +<p>{{SeeCompatTable}}{{APIRef("Credential Management API")}}</p> + +<p>Die <strong><code>FederatedCredential</code></strong> Schnittstelle der <a href="/en-US/docs/Web/API/Credential_Management_API">Credential Management API</a> stellt Informationen über Zugangsdaten eines Anbieters föderierter Identitäten bereit. Ein Anbieter föderierter Identitäten ist ein Gebilde, dem eine Webseite vertraut, eine Nutzerin korrekt zu identifizieren und eine API für diesen Zweck bereit stellt. <a href="http://openid.net/developers/specs/">OpenID Connect</a> ist ein Beispiel für ein Framework für Anbieter föderierter Identitäten.</p> + +<p>In Brwosern, die dies unterstützen, kann eine Instanz dieser Schnittstelle in der <code>credential</code> Funktions des <code>init</code> Objekt für globales {{domxref('fetch')}} mitgegeben werden.</p> + +<dl> + <dt>{{domxref("FederatedCredential.FederatedCredential()","FederatedCredential()")}}</dt> + <dd>Erstellt ein neues <code>FederatedCredential</code> Objekt.</dd> +</dl> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<p><em>Erbt Eigenschaften von seinem Vorfahren, {{domxref("Credential")}}.</em></p> + +<dl> + <dt>{{domxref("FederatedCredential.provider")}} {{readonlyInline}}</dt> + <dd>Gibt einen {{domxref("USVString")}} zurück, der den Anbieter föderierter Identitäten eines Satzes von Zugangsdaten enthält.</dd> +</dl> + +<h3 id="Event-Handler">Event-Handler</h3> + +<p>Keine.</p> + +<h2 id="Methoden">Methoden</h2> + +<p>Keine.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">var cred = new FederatedCredential({ + id: id, + name: name, + provider: 'https://account.google.com', + iconURL: iconUrl +}); + +// Store it +navigator.credentials.store(cred) + .then(function() { + // Mach etwas anderes. +});</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('Credential Management')}}</td> + <td>{{Spec2('Credential Management')}}</td> + <td>Initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompabilität">Browserkompabilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td> + <p>{{CompatChrome(51.0)}}</p> + </td> + <td>{{CompatUnknown}}</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 Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatChrome(51.0)}}</td> + <td>{{CompatChrome(51.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/api/fetch_api/index.html b/files/de/web/api/fetch_api/index.html new file mode 100644 index 0000000000..d45285bcd1 --- /dev/null +++ b/files/de/web/api/fetch_api/index.html @@ -0,0 +1,84 @@ +--- +title: Fetch API +slug: Web/API/Fetch_API +translation_of: Web/API/Fetch_API +--- +<div>{{DefaultAPISidebar("Fetch API")}}</div> + +<p class="summary"><span class="seoSummary">Die Fetch API bietet eine Schnittstelle zum Abrufen von Ressourcen (auch über das Netzwerk). Wer schon einmal mit {{DOMxRef("XMLHttpRequest")}} gearbeitet hat wird Ähnlichkeiten erkennen. Die neue API bietet jedoch einen ganzen Satz leistungsfähigerer und flexiblerer Funktionen.</span></p> + +<h2 id="Konzepte_und_Verwendung">Konzepte und Verwendung</h2> + +<p>Fetch bietet eine generische Definition von {{DOMxRef("Request")}} und {{DOMxRef("Response")}} Objekten (und anderen Dingen, die mit Anfragen über ein Netzwerk zu tun haben). Dadurch können sie überall dort eingesetzt werden, wo sie in Zukunft benötigt werden, sei es für Service Worker, die Cache-API und andere ähnliche Dinge, mit denen Anfragen und Antworten abgewickelt oder geändert werden, oder in jedem Anwendungsfall, für den Sie möglicherweise eigene Antworten programmatisch erstellen müssen.</p> + +<p>Sie enthält auch eine Definition für verwandte Konzepte wie CORS und die HTTP-Origin-Semantik, die ihre separaten Definitionen an anderer Stelle ersetzen.</p> + +<p>Verwenden Sie zum Erstellen einer Anfrage und zum Abrufen einer Ressource die Methode {{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}. Es ist in mehreren Schnittstellen implementiert, insbesondere {{DOMxRef("Window")}} und {{DOMxRef("WorkerGlobalScope")}}. Dadurch ist es in nahezu jedem Kontext verfügbar, in dem Sie Ressourcen abrufen möchten.</p> + +<p>Die Methode <code>fetch()</code> nimmt ein obligatorisches Argument entgegen, den Pfad zu der Ressource, die Sie abrufen möchten. Sie gibt ein {{DOMxRef("Promise")}} zurück, das in die {{DOMxRef("Response")}} dieser Anfrage aufgelöst wird, unabhängig davon, ob sie erfolgreich ist oder nicht. Sie können optional auch ein <code>init</code> Objekt mit Optionen als zweites Argument übergeben (siehe {{DOMxRef("Request")}}).</p> + +<p>Nachdem eine {{DOMxRef("Response")}} abgerufen wurde, stehen eine Reihe von Methoden zur Verfügung, mit denen der Antwort-Inhalt (Body) definiert werden kann und wie er verarbeitet werden soll (siehe {{DOMxRef("Body")}}).</p> + +<p>Sie können eine Anfrage und Antwort direkt erstellen, indem Sie die Konstruktoren {{DOMxRef("Request.Request", "Request()")}} und {{DOMxRef("Response.Response", "Response()")}} verwenden, was Sie aber wahrscheinlich in den seltensten Fällen tun werden. Stattdessen werden diese eher als Ergebnis anderer API-Aktionen erstellt (z. B. durch {{DOMxRef("FetchEvent.respondWith()")}} von Service Workern).</p> + +<div class="note"> +<p>Hinweis: Erfahren Sie mehr über die Verwendung der Funktionen der Fetch API in der <a href="/de/docs/Web/API/Fetch_API/Using_Fetch">Verwendung von Fetch</a> und lernen Sie die <a href="/de/docs/Web/API/Fetch_API/Basic_concepts">Grundkonzepte von Fetch</a>.</p> +</div> + +<h3 id="Einen_Abruf_abbrechen">Einen Abruf abbrechen</h3> + +<p>Browser haben begonnen, experimentelle Unterstützung für die Schnittstellen {{DOMxRef("AbortController")}} und {{DOMxRef("AbortSignal")}} hinzuzufügen (auch Abort API genannt), die den Abbruch von Operationen durch Fetch und XHR ermöglichen, sofern diese noch nicht abgeschlossen sind. Weitere Informationen finden Sie auf den Schnittstellenseiten.</p> + +<h2 id="Fetch_Interfaces">Fetch Interfaces</h2> + +<dl> + <dt>{{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}</dt> + <dd>Die <code>fetch()</code> Methode zum Abrufen einer Ressource.</dd> + <dt>{{DOMxRef("Headers")}}</dt> + <dd>Stellt die Antwort-/Anfrageheader dar, damit Sie sie abfragen und je nach Ergebnis unterschiedliche Aktionen ausführen können.</dd> + <dt>{{DOMxRef("Request")}}</dt> + <dd>Stellt eine Ressourcenanfrage dar.</dd> + <dt>{{DOMxRef("Response")}}</dt> + <dd>Stellt die Antwort auf eine Anfrage dar.</dd> +</dl> + +<h2 id="Fetch_mixin">Fetch mixin</h2> + +<dl> + <dt>{{DOMxRef("Body")}}</dt> + <dd>Stellt Methoden bereit, die sich auf den Hauptteil (Body) der Antwort/Anfrage beziehen, sodass Sie den Inhaltstyp angeben können und wie dieser behandelt werden soll.</dd> +</dl> + +<h2 id="Spezifikationen">Spezifikationen</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("Fetch")}}</td> + <td>{{Spec2("Fetch")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/API/Fetch_API/Using_Fetch">Verwendung von Fetch</a></li> + <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/de/docs/Web/HTTP">HTTP</a></li> + <li><a href="https://github.com/github/fetch">Fetch Polyfill</a></li> + <li><a href="/de/docs/Web/API/Fetch_API/Basic_concepts">Grundkonzepte von Fetch</a></li> +</ul> diff --git a/files/de/web/api/file/filename/index.html b/files/de/web/api/file/filename/index.html new file mode 100644 index 0000000000..7dbf4f7559 --- /dev/null +++ b/files/de/web/api/file/filename/index.html @@ -0,0 +1,35 @@ +--- +title: File.fileName +slug: Web/API/File/fileName +tags: + - DOM + - Files +translation_of: Web/API/File/fileName +--- +<p>{{APIRef("File API")}}{{non-standard_header}}</p> + +<p>{{deprecated_header(7.0)}}</p> + +<h2 id="Summary">Summary</h2> + +<p>Returns the name of the file. For security reasons the path is excluded from this property.</p> + +<div class="note">This property is deprecated. Use {{domxref("File.name")}} instead.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre>var name = instanceOfFile.fileName</pre> + +<h2 id="Value">Value</h2> + +<p>A string</p> + +<h2 id="Specification" name="Specification">Specification</h2> + +<p>Not part of any specification.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("File.name")}}</li> +</ul> diff --git a/files/de/web/api/file/filesize/index.html b/files/de/web/api/file/filesize/index.html new file mode 100644 index 0000000000..0c91c5f739 --- /dev/null +++ b/files/de/web/api/file/filesize/index.html @@ -0,0 +1,36 @@ +--- +title: File.fileSize +slug: Web/API/File/fileSize +tags: + - DOM + - Files + - Property +translation_of: Web/API/File/fileSize +--- +<p>{{APIRef("File API") }}{{non-standard_header}}</p> + +<p>{{deprecated_header(7.0)}}</p> + +<h2 id="Summary">Summary</h2> + +<p>Returns the size of a file in bytes.</p> + +<div class="note">This property is deprecated. Use {{domxref("Blob.size")}} instead.</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre>var size = <em>instanceOfFile</em>.fileSize</pre> + +<h2 id="Value">Value</h2> + +<p>A number</p> + +<h2 id="Specification">Specification</h2> + +<p>Not part of any specification.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Blob.size")}}</li> +</ul> diff --git a/files/de/web/api/file/getastext/index.html b/files/de/web/api/file/getastext/index.html new file mode 100644 index 0000000000..fefda6647a --- /dev/null +++ b/files/de/web/api/file/getastext/index.html @@ -0,0 +1,78 @@ +--- +title: File.getAsText() +slug: Web/API/File/getAsText +tags: + - DOM + - Files +translation_of: Web/API/File/getAsText +--- +<p>{{APIRef("File API") }}{{non-standard_header}}</p> + +<p>{{deprecated_header(7.0)}}</p> + +<h2 id="Summary">Summary</h2> + +<p>The <code>getAsText</code> method provides the file's data interpreted as text using a given encoding.</p> + +<div class="note"> +<p><strong>Note:</strong> This method is obsolete; you should use the {{domxref("FileReader")}} method {{domxref("FileReader.readAsText()","readAsText()")}} instead.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre>var str = instanceOfFile.getAsText(encoding);</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt>encoding</dt> + <dd>A string indicating the encoding to use for the returned data. If this string is empty, UTF-8 is assumed.</dd> +</dl> + +<h3 id="Returns">Returns</h3> + +<p>A string containing the file's data interpreted as text in the specified <code>encoding</code>.</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">// fileInput is a HTMLInputElement: <input> +var fileInput = document.getElementById("myfileinput"); + +// files is a FileList object (similar to NodeList) +var files = fileInput.files; + +// object for allowed media types +var accept = { + binary : ["image/png", "image/jpeg"], + text : ["text/plain", "text/css", "application/xml", "text/html"] +}; + +var file; + +for (var i = 0; i < files.length; i++) { + file = files[i]; + + // if file type could be detected + if (file !== null) { + if (accept.text.indexOf(file.mediaType) > -1) { + // file is of type text, which we accept + // make sure it's encoded as utf-8 + var data = file.getAsText("utf-8"); + // modify data with string methods + + } else if (accept.binary.indexOf(file.mediaType) > -1) { + // binary + } + } +}</pre> + +<h2 id="Specification">Specification</h2> + +<p>Not part of any specification.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("File")}}</li> + <li>{{domxref("FileReader")}}</li> +</ul> diff --git a/files/de/web/api/file/index.html b/files/de/web/api/file/index.html new file mode 100644 index 0000000000..17fe3b3ff7 --- /dev/null +++ b/files/de/web/api/file/index.html @@ -0,0 +1,146 @@ +--- +title: File +slug: Web/API/File +tags: + - API + - DOM + - Files +translation_of: Web/API/File +--- +<div>{{APIRef }}</div> + +<p>Das<strong><code>File</code></strong> Interface stellt Informationen über Dateien bereit und erlaubt den Zugriff auf deren Inhalt.</p> + +<p><code>File</code> werden generell von einem {{domxref("FileList")}} Objekt als das Ergebnis einer Benutzerauswahl von Dateien über ein <code>{{ HTMLElement("input") }}</code> Element, von einem <a href="/en-US/docs/DragDrop/DataTransfer" title="DragDrop/DataTransfer"><code>DataTransfer</code></a> Objekt eines Drag-and-Drop-Vorgangs,<span style="line-height: 1.5;"> oder von der </span><code style="font-size: 14px;">mozGetAsFile()</code><span style="line-height: 1.5;"> API eines {{ domxref("HTMLCanvasElement") }} zurückgegeben</span><span style="line-height: 1.5;">. In Gecko ist es von privilegiertem Code aus möglich, den Konstruktor direkt mit einem String Pfad oder einem {{interface("nsIFile")}} aufzurufen. Siehe <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code" title="Using the DOM File API in chrome code">Using the DOM File API in chrome code</a> für weitere Details.</span></p> + +<p>Die Dateireferenz kann nach der Formularübermittlung gespeichert werden, während der Benutzer über keine Internetverbindung verfügt. Somit können die Daten empfangen und hochgeladen werden, sobald die Internetverbindung wiederhergestellt ist.</p> + +<h2 id="Properties" name="Properties">Properties</h2> + +<p><em>Das<code>File</code> Interface erbt ebenso von dem {{domxref("Blob")}} Interface.</em></p> + +<dl> + <dt>{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}</dt> + <dd>Das <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code> der letzten Veränderung der Datei, referenziert durch das <code>File</code> Objekt.</dd> + <dt>{{domxref("File.name")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Der Name der Datei, referenziert durch das <code>File</code> Objekt.</dd> + <dt>{{domxref("File.fileName")}} {{non-standard_inline}} {{readonlyinline}} {{obsolete_inline("7.0")}}</dt> + <dd>Der Name der Datei, referenziert durch das <code>File</code> Objekt.</dd> + <dt>{{domxref("File.fileSize")}} {{non-standard_inline}} {{readonlyinline}} {{obsolete_inline("7.0")}}</dt> + <dd>Die Größe der Datei in Bytes.</dd> +</dl> + +<h2 id="Method_overview" name="Method_overview">Methods</h2> + +<p><em>The <code>File</code> interface also inherits methods from the {{domxref("Blob")}} interface.</em></p> + +<dl> + <dt>{{domxref("File.getAsBinary()")}} {{non-standard_inline}} {{obsolete_inline("7.0")}}</dt> + <dd>Returns a string containing the file's data in raw binary format.</dd> + <dt>{{domxref("File.getAsDataURL()")}} {{non-standard_inline}} {{obsolete_inline("7.0")}}</dt> + <dd>A string containing the file's data encoded as a <code>data:</code> URL.</dd> + <dt>{{domxref("File.getAsText()","File.getAsText(string encoding)")}} {{non-standard_inline}} {{obsolete_inline("7.0")}}</dt> + <dd>Returns the file's contents as a string in which the file's data is interpreted as text using a given encoding.</dd> +</dl> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">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('File API')}}</td> + <td>{{Spec2('File API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>13</td> + <td>{{CompatGeckoDesktop("1.9")}} (non standard)<br> + {{CompatGeckoDesktop("7")}} (standard)</td> + <td>10.0</td> + <td>11.5</td> + <td>6.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>basic support</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + <td>11.1</td> + <td>6.0</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Specification" name="Specification">Implementation notes</h3> + +<h4 id="Gecko_notes">Gecko notes</h4> + +<ul> + <li>In Gecko, you can use this API from chrome code. See <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code" title="Using the DOM File API in chrome code">Using the DOM File API in chrome code</a> for details.</li> + <li>Starting in Gecko 6.0 {{geckoRelease("6.0")}}, privileged code (such as extensions) can pass an {{interface("nsIFile")}} object to the DOM <code>File</code> constructor to specify the file to reference.</li> + <li>Starting in Gecko 8.0 {{geckoRelease("8.0")}}, you can use <code>new File</code> to create <code>File</code> objects from XPCOM component code instead of having to instantiate the {{interface("nsIDOMFile")}} object directly. The constructor takes, in contrast to Blob, as second argument the filename. The filename can be any String. + <pre class="syntaxbox">File File( + Array parts, + String filename, + BlobPropertyBag properties +);</pre> + </li> +</ul> + +<h2 id="Chrome_Code_-_Scope_Availability">Chrome Code - Scope Availability</h2> + +<p>To use from chrome code, JSM and Bootstrap scope, you have to import it like this:</p> + +<pre class="brush: js">Cu.importGlobalProperties(['File']); +</pre> + +<p><code>URL</code> is available in Worker scopes.</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Using_files_from_web_applications" title="Using files from web applications">Using files from web applications</a></li> + <li><a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code" title="Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a></li> + <li>{{domxref("FileReader")}}</li> + <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> +</ul> diff --git a/files/de/web/api/file/name/index.html b/files/de/web/api/file/name/index.html new file mode 100644 index 0000000000..ffdb12db0f --- /dev/null +++ b/files/de/web/api/file/name/index.html @@ -0,0 +1,104 @@ +--- +title: File.name +slug: Web/API/File/name +tags: + - DOM + - Files +translation_of: Web/API/File/name +--- +<p>{{APIRef("File API")}}</p> + +<p>Gibt den Namen der File zurück. Aus Sicherheitsgründen wird der Pfad der Datei nicht mit zurückgegeben.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre>var name = <em>instanceOfFile</em>.name</pre> + +<h2 id="Value">Value</h2> + +<p>Ein string, der den Namen der File ohne Pfad beinhaltet, bspw. "My Resume.rtf".</p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:js">// fileInput is a HTMLInputElement: <input> +var fileInput = document.getElementById("myfileinput"); + +// files is a FileList object (simliar to NodeList) +var files = fileInput.files; + +for (var i = 0; i < files.length; i++) { + alert("Filename " + files[i].name); +}</pre> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Spezifikationen</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('File API', '#file-attrs', 'name')}}</td> + <td>{{Spec2('File API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>File.name</td> + <td>13.0</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>10.0</td> + <td>16.0</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>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>File.name</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">Siehe auch</h2> + +<ul> + <li>{{domxref("File")}}</li> +</ul> diff --git a/files/de/web/api/file/typ/index.html b/files/de/web/api/file/typ/index.html new file mode 100644 index 0000000000..28c57a4cb1 --- /dev/null +++ b/files/de/web/api/file/typ/index.html @@ -0,0 +1,65 @@ +--- +title: File.type +slug: Web/API/File/Typ +translation_of: Web/API/File/type +--- +<div>{{APIRef("File API")}}</div> + +<p>Gibt den Internet Media Typ (<a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME</a>) einer Datei zurück, welche durch ein {{domxref("File")}} Objekt dargestellt wird.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">var name = <var>file</var>.type;</pre> + +<h2 id="Wert">Wert</h2> + +<p>Eine Zeichenkette, welche den Internet Media Typ (MIME) enthält und den Typ der Datei angibt, zum Beispiel "image/png" für ein PNG Bild</p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><input type="file" multiple onchange="showType(this)"> +</pre> + +<pre class="brush: js">function showType(fileInput) { + var files = fileInput.files; + + for (var i = 0; i < files.length; i++) { + var name = files[i].name; + var type = files[i].type; + alert("Filename: " + name + " , Type: " + type); + } +}</pre> + +<p><strong>Hinweis:</strong> Basierend auf der aktuellen Implementierung, lesen Browser nicht wirklich den Bytestrom einer Datei, um ihren Medientyp zu bestimmen. Es wird aufgrund der Dateiendung angenommen; eine PNG-Bilddatei, die in .txt umbenannt wird, würde "<em>text/plain</em>" und nicht "<em>image/png</em>" ergeben. Darüber hinaus ist <code>file.type</code> im Allgemeinen nur für gängige Dateitypen wie Bilder, HTML-Dokumente, Audio und Video zuverlässig. Seltene Dateierweiterungen würden eine leere Zeichenkette zurückgeben. Die Client-Konfiguration (z.B. die Windows-Registrierung) kann auch bei gängigen Typen zu unerwarteten Werten führen. <strong>Entwicklern wird empfohlen, sich nicht auf diese Eigenschaft als einziges Validierungsschema zu verlassen.</strong></p> + +<h2 id="Spezifikation">Spezifikation</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('File API', '#dfn-type', 'type')}}</td> + <td>{{Spec2('File API')}}</td> + <td>Initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + + + +<p>{{Compat("api.File.type")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></li> + <li>Blog Post: <a href="https://textslashplain.com/2018/07/26/be-skeptical-of-client-reported-mime-content-types/">Be skeptical of client-reported MIME types</a></li> +</ul> diff --git a/files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html b/files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html new file mode 100644 index 0000000000..c44ac4b9df --- /dev/null +++ b/files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html @@ -0,0 +1,512 @@ +--- +title: Zugriff auf Dateien von Webapplikationen +slug: Web/API/File/Zugriff_auf_Dateien_von_Webapplikationen +translation_of: Web/API/File/Using_files_from_web_applications +--- +<p>Mithilfe der File API, welche mit HTML5 zum DOM hinzugefügt wurde, ist es nun für Webinhalte möglich den Benutzer lokale Dateien auswählen zu lassen und den Inhalt dieser Dateien auszulesen. Die Auswahl kann entweder durch das HTML Element {{ HTMLElement("input") }} oder durch Drag and Drop erfolgen.</p> + +<p>Es ist auch möglich die DOM File API von Erweiterungen oder anderem Chrome Code zu benutzen. In diesem Fall müssen einige zusätzliche Dinge beachtet werden, die im Abschnitt <a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a> näher erläutert werden.</p> + +<h2 id="Auf_ausgewählte_Dateien_zugreifen">Auf ausgewählte Dateien zugreifen</h2> + +<p>Gehen wir von folgendem HTML-Code aus:</p> + +<pre class="brush: html"><input type="file" id="input"></pre> + +<p>Die File API erlaubt den Zugriff auf eine {{ domxref("FileList") }} mit {{ domxref("File") }} Objekten, die die vom Benutzer ausgewählten Dateien repräsentieren.</p> + +<p>Wenn der Benutzer nur eine Datei auswählt, dann muss nur die erste Datei in der Liste betrachtet werden.</p> + +<p>Eine ausgewählte Datei erhält man über den üblichen DOM Selektor:</p> + +<pre class="brush: js">var selectedFile = document.getElementById('input').files[0];</pre> + +<p>Oder mit einem <a href="http://jquery.com/" title="http://jquery.com/">jQuery</a> Selektor:</p> + +<pre class="brush: js">var selectedFile = $('#input').get(0).files[0]; + +var selectedFile = $('#input')[0].files[0];</pre> + +<div class="note"> +<p>Tritt der Fehler "<code>files is undefined</code>" auf:<br> + Es wurde das falsche HTML element ausgewählt. Es ist zu beachten, dass ein jQuery Selektor eine Liste von zutreffenden DOM Elementen zurückliefert. Das richtige DOM Element muss ausgewählt werden, um "<code>files</code>" darauf anzuwenden.</p> +</div> + +<h2 id="Zugriff_auf_ausgewählte_Dateien_über_den_Change_Event">Zugriff auf ausgewählte Dateien über den Change Event</h2> + +<p>Es ist auch möglich (aber nicht unbedingt erforderlich), auf die {{ domxref("FileList") }} über das change event zuzugreifen:</p> + +<pre class="brush: html"><input type="file" id="input" onchange="handleFiles(this.files)"></pre> + +<p>Wenn der Benutzer eine Datei auswählt, wird die Funktion <code>handleFiles()</code> aufgerufen. Als Parameter wird die {{ domxref("FileList") }} übergeben. Sie enthält die {{ domxref("File") }} Objekte, die die vom Benutzer ausgewählten Dateien repräsentieren.</p> + +<p>Soll der Benutzer mehrere Dateien auswählen können, dann kann einfach das Attribut <code>multiple</code> auf das <code>input</code> Element angewendet werden:</p> + +<pre class="brush: html"><input type="file" id="input" multiple onchange="handleFiles(this.files)"></pre> + +<p>In diesem Fall enthält die Dateiliste, die an die <code>handleFiles()</code> Funktion übergeben wird, ein {{ domxref("File") }} für jede Datei, die der Benutzer ausgewählt hat.</p> + +<h3 id="Dynamisch_einen_Change_Listener_hinzufügen">Dynamisch einen Change Listener hinzufügen</h3> + +<p>Wurde das <code>input</code> Feld mit einer JavaScript Bibliothek wie <a class="external" href="http://www.jquery.com/" title="http://www.jquery.com/">jQuery</a> erzeugt, dann muss der event Listener mit {{ domxref("element.addEventListener()") }} hinzugefügt werden:</p> + +<pre class="brush: js">var inputElement = document.getElementById("input"); +inputElement.addEventListener("change", handleFiles, false); +function handleFiles() { + var fileList = this.files; /* Jetzt kann die Dateiliste verarbeitet werden */ +}</pre> + +<p>In diesem Fall ist die <code>handleFiles()</code> Funktion selbst der Event Handler, anders als in den vorigen Beispielen, wo sie von einem Event Handler aufgerufen wurde.</p> + +<h2 id="Informationen_über_die_ausgewählte(n)_Datei(en)">Informationen über die ausgewählte(n) Datei(en)</h2> + +<p>Das {{ domxref("FileList") }} Objekt, das vom DOM geliefert wurde, enthält eine Liste aller Dateien, die vom Benutzer ausgewählt wurden. Jede der Dateien wird durch ein {{ domxref("File") }} Objekt repräsentiert. Die Anzahl der ausgewälten Dateien kann über das <code>length</code> Attribut der Liste ermittelt werden:</p> + +<pre class="brush: js"><code>var numFiles = files.length;</code></pre> + +<p>Die einzelnen {{ domxref("File") }} Objekte erhält man, indem das {{ domxref("FileList") }} Objekt einfach wie ein Array behandelt wird:</p> + +<pre class="brush: js">for (var i = 0, numFiles = files.length; i < numFiles; i++) { + var file = files[i]; + .. +} +</pre> + +<p>Diese Schleife iteriert über alle Dateien in der Liste.</p> + +<p>Im {{ domxref("File") }} Objekt liefern drei Attribute hilfreiche Informationen über die Datei:</p> + +<dl> + <dt><code>name</code></dt> + <dd>Der Dateiname als read-only String. Es ist nur der Dateiname enthalten, keine Pfadinformationen.</dd> + <dt><code>size</code></dt> + <dd>Die Dateigröße in Bytes als read-only 64-Bit Integer.</dd> + <dt><code>type</code></dt> + <dd>Der MIME type der Datei als read-only String oder <code>""</code>, wenn der Typ nicht ermittelt werden konnte.</dd> +</dl> + +<h3 id="Beispiel_Dateigröße_anzeigen">Beispiel: Dateigröße anzeigen</h3> + +<p>Das folgende Beispiel zeigt eine mögliche Verwendung des <code>size</code> Attributs:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8"> +<title>File(s) size</title> +<script> +function updateSize() { + var nBytes = 0, + oFiles = document.getElementById("uploadInput").files, + nFiles = oFiles.length; + for (var nFileId = 0; nFileId < nFiles; nFileId++) { + nBytes += oFiles[nFileId].size; + } + var sOutput = nBytes + " bytes"; + // optional code for multiples approximation + for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) { + sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)"; + } + // end of optional code + document.getElementById("fileNum").innerHTML = nFiles; + document.getElementById("fileSize").innerHTML = sOutput; +} +</script> +</head> + +<body onload="updateSize();"> +<form name="uploadForm"> +<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p> +<p><input type="submit" value="Send file"></p> +</form> +</body> +</html> +</pre> + +<h2 id="Verstecktes_input_Element_mit_click()_Methode">Verstecktes input Element mit click() Methode</h2> + +<p>Ab Gecko 2.0 {{ geckoRelease("2.0") }}, kann das zugegebenermaßen hässliche Datei-{{ HTMLElement("input") }} Element versteckt und durch eigene Oberflächenelemente zum Zugriff auf den Datei-Öffnen-Dialog ersetzt werden. Dazu wird das <code>input</code> Element mit dem CSS Stil <code>display:none</code> versehen und mit der Methode {{ domxref("element.click","click()") }} aufgerufen.</p> + +<p>Gehen wir von folgendem HTML-Code aus:</p> + +<pre class="brush: html"><code><input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> +<a href="#" id="fileSelect">Bitte Dateien auswählen</a> +</code> +</pre> + +<p>Der Code, der auf den <code>click</code> Event reagiert, kann wie folgt aussehen:</p> + +<pre class="brush: js">var fileSelect = document.getElementById("fileSelect"), + fileElem = document.getElementById("fileElem"); + +fileSelect.addEventListener("click", function (e) { + if (fileElem) { + fileElem.click(); + } + e.preventDefault(); // prevent navigation to "#" +}, false); +</pre> + +<p>Das neue Oberflächenelement zum Zugriff auf den Datei-Öffnen-Dialog kann nun beliebig gestaltet werden.</p> + +<h2 id="label_Element_zum_Auslösen_eines_versteckten_input_Elements">label Element zum Auslösen eines versteckten input Elements</h2> + +<p>Wird statt eines Links ({{ HTMLElement("a") }} Element) ein {{ HTMLElement("label") }} Element verwendet, dann kann das versteckte <code>input</code> Element auch ohne JavaScript ausgelöst werden. Dabei darf das input-Element aber weder mit <code>display: none</code> noch mit <code>visibility: hidden</code> versteckt werden, weil es in diesen Fällen nicht mit der Tastatur bedienbar wäre. Es darf nur <a href="https://a11yproject.com/posts/how-to-hide-content/">visuell versteckt</a> werden.</p> + +<p>Gehen wir von folgendem HTML-Code aus:</p> + +<pre class="brush: html"><input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden"> +<label for="fileElem">Bitte Dateien auswählen</label> +</pre> + +<p>und folgendem CSS:</p> + +<pre class="brush: css">.visually-hidden { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); +} + +input.visually-hidden:focus + label { + outline: thin dotted; +} +</pre> + +<p>Bei einem Klick auf das <code>label</code> Element wird der Datei-Öffnen-Dialog angezeigt.</p> + +<p>Das <code>label</code> Element kann per CSS beliebig gestaltet werden. Man muss aber das Label des versteckten Eingabefelds hervorheben, wenn dieses den Fokus hat, d.h. per Tab-Taste angewählt wurde – sei es durch outline wie im obigen Beispiel oder background-color oder box-shadow. (Gegenwärtig stellt Firefox das Label von fokussierten <code><input type="file"></code>-Elementen nicht hervorgehoben dar.)</p> + +<h2 id="Dateien_per_Drag_and_Drop_auswählen">Dateien per Drag and Drop auswählen</h2> + +<p>Es ist auch möglich, per Drag and Drop Dateien an die Webanwendung zu übergeben.</p> + +<p>Zuerst muss eine Drop Zone eingerichtet werden. Welcher Teil der Oberfläche Drops entgegen nimmt, ist vom Design der Anwendung abhängig. Generell ist das Empfangen von Drop Events aber einfach:</p> + +<pre class="brush: js">var dropbox; + +dropbox = document.getElementById("dropbox"); +dropbox.addEventListener("dragenter", dragenter, false); +dropbox.addEventListener("dragover", dragover, false); +dropbox.addEventListener("drop", drop, false); +</pre> + +<p>In diesem Beispiel wird das Element mit der ID <code>dropbox</code> als Drop Zone verwendet. Das wird durch Registrieren der Listener für {{event('dragenter')}}, {{event('dragover')}} und {{event('drop')}} Events erreicht.</p> + +<p>dragenter und dragover benötigen wir in unserem Fall eigentlich nicht. Wir verhindern lediglich eine weitere Behandlung der Events durch Aufruf von <code>e.stopPropagation()</code> und <code>e.preventDefault()</code>:</p> + +<pre class="brush: js">function dragenter(e) { + e.stopPropagation(); + e.preventDefault(); +} + +function dragover(e) { + e.stopPropagation(); + e.preventDefault(); +} +</pre> + +<p>Das Wesentliche geschieht in der Behandlung des <code>drop</code> Events:</p> + +<pre class="brush: js">function drop(e) { + e.stopPropagation(); + e.preventDefault(); + + var dt = e.dataTransfer; + var files = dt.files; + + handleFiles(files); +} +</pre> + +<p>Hier ermitteln wir das <code>dataTransfer</code> Feld aus dem Event, entnehmen ihm die Dateiliste und übergeben diese an <code>handleFiles()</code>. Von da an ist die Weiterverarbeitung die gleiche wie bei Verwendung des <code>input</code> Elements.</p> + +<h2 id="Beispiel_Thumbnails_von_ausgewählten_Bildern_anzeigen">Beispiel: Thumbnails von ausgewählten Bildern anzeigen</h2> + +<p>Gehen wir davon aus, dass auf einer Foto-Webseite mit HTML5 eine Thumbnail Vorschau von Bildern angezeigt werden soll, bevor sie hochgeladen werden. Das input Element oder die Drop Zone kann wie oben beschrieben eingerichtet werden. Diese rufen die folgende handleFiles() Funktion auf:</p> + +<pre class="brush: js">function handleFiles(files) { + for (var i = 0; i < files.length; i++) { + var file = files[i]; + var imageType = /^image\//; + + if (!imageType.test(file.type)) { + continue; + } + + var img = document.createElement("img"); + img.classList.add("obj"); + img.file = file; + preview.appendChild(img); // Gehen wird davon aus, dass "preview" das div-Element ist, in dem der Inhalt angezeigt wird. + + var reader = new FileReader(); + reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); + reader.readAsDataURL(file); + } +} +</pre> + +<p>Mit der Schleife wird über die ausgewählten Dateien iteriert. Bei jeder Datei wird mit Hilfe des <code>type</code> Attributs (indem der Reguläre Ausdruck "^image\/" darauf angewendet wird) geprüft, ob es sich um eine Bild Datei handelt. Liegt eine Bild Datei vor, dann wird ein neues <code>img</code> Element erzeugt. Mit CSS können z.B. hübsche Ränder oder Schatten erzeugt und die Größe des Bildes festgelegt werden, das muss also nicht hier im Code erfolgen.</p> + +<p>Jedem Bild wird die CSS Klasse <code>obj</code> zugewiesen, so dass es einfach ist, es im DOM Baum zu finden. Außerdem wird jedem Bild im <code>file</code> Attribut das {{ domxref("File") }} Objekt für das Bild zugewiesen; das benötigen wir später für den tatsächlichen Upload der Datei. Mit {{ domxref("Node.appendChild()") }} wird das neue Thumbnail dem <code>preview</code> Bereich unserer Anwendung hinzugefügt.</p> + +<p>Dann erstellen wir einen {{ domxref("FileReader") }}, um das Bild asynchron zu laden und es dem <code>img</code> Element hinzuzufügen. Nach dem Erstellen des FileReader Objektes definieren wir die <code>onload</code> Funktion und rufen <code>readAsDataURL()</code> auf, um die Leseoperation im Hintergrund zu starten. Ist der komplette Inhalt der Bilddatei geladen, dann wird er in eine <code>data:</code> URL umgewandelt, die an den <code>onload</code> Callback übergeben wird. Unsere Implementation dieser Routine setzt das <code>src</code> Attribut des <code>img</code> Elements auf das geladene Bild, was dazu führt, dass das Bild im Thumbnail auf dem Bildschirm des Benutzers erscheint.</p> + +<h2 id="Verwendung_von_Objekt_URLs">Verwendung von Objekt URLs</h2> + +<p>Mit Gecko 2.0 {{ geckoRelease("2.0") }} wurde die Unterstützung für die DOM Methoden {{ domxref("window.URL.createObjectURL()") }} und {{ domxref("window.URL.revokeObjectURL()") }} eingeführt. Mit ihnen lassen sich einfache URL Strings erzeugen, die beliebige Daten referenzieren, auf die per DOM {{ domxref("File") }} Objekte zugegriffen werden kann; einschließlich lokale Dateien auf dem Computer des Anwenders.</p> + +<p>Wenn man aus HTML mit einer URL auf ein {{ domxref("File") }} Objekt verweisen möchte, dann kann man dafür eine Objekt URL erzeugen:</p> + +<pre class="brush: js"><code>var objectURL = window.URL.createObjectURL(fileObj);</code></pre> + +<p>Die Objekt URL ist ein String, der das {{ domxref("File") }} Objekt identifiziert. Jedes Mal, wenn {{ domxref("window.URL.createObjectURL()") }} aufgerufen wird, wird eine eindeutige Objekt URL erzeugt, auch wenn vorher bereits eine Objekt URL für diese Datei erzeugt wurde. Jede von ihnen muss wieder freigegeben werden. Sie werden automatisch freigegeben, wenn das Dokument entladen wird. Wenn ihre Anwendung die Objekt URLs dynamisch verwendet, dann sollten Sie sie auch explizit durch Aufruf von {{ domxref("window.URL.revokeObjectURL()") }} freigeben:</p> + +<pre class="brush: js"><code>window.URL.revokeObjectURL(objectURL);</code></pre> + +<h2 id="Beispiel_Mit_Objekt_URLs_Bilder_anzeigen">Beispiel: Mit Objekt URLs Bilder anzeigen</h2> + +<p>Dieses Beispiel verwendet Objekt URLs, um Thumbnails von Bildern anzuzeigen. Darüber hinaus werden weitere Dateiinformationen einschließlich Name und Größe angezeigt. <a href="/samples/domref/file-click-demo.html" title="https://developer.mozilla.org/samples/domref/file-click-demo.html">Live Ansicht des Beispiels</a>.</p> + +<p>Das HTML für die Oberfläche sieht folgendermaßen aus:</p> + +<pre class="brush: html"><input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> +<a href="#" id="fileSelect">Bitte Dateien auswählen</a> +<div id="fileList"> + <p>Keine Dateien ausgewählt!</p> +</div> +</pre> + +<p>Das erstellt ein Datei {{ HTMLElement("input") }} Element, zusammen mit einem Link, der den Datei-Öffnen-Dialog anzeigt (so kann das Datei <code>input</code> Element versteckt werden, da es nicht so attraktiv aussieht). Das wird oben im Abschnitt {{ anch("Verstecktes input Element mit click() Methode") }} näher beschrieben.</p> + +<p>Die <code>handleFiles()</code> Methode sieht folgendermaßen aus:</p> + +<pre class="brush: js">window.URL = window.URL || window.webkitURL; + +var fileSelect = document.getElementById("fileSelect"), + fileElem = document.getElementById("fileElem"), + fileList = document.getElementById("fileList"); + +fileSelect.addEventListener("click", function (e) { + if (fileElem) { + fileElem.click(); + } + e.preventDefault(); // prevent navigation to "#" +}, false); + +function handleFiles(files) { + if (!files.length) { + fileList.innerHTML = "<p>No files selected!</p>"; + } else { + var list = document.createElement("ul"); + for (var i = 0; i < files.length; i++) { + var li = document.createElement("li"); + list.appendChild(li); + + var img = document.createElement("img"); + img.src = window.URL.<strong>createObjectURL</strong>(files[i]); + img.height = 60; + img.onload = function() { + window.URL.<strong>revokeObjectURL</strong>(this.src); + } + li.appendChild(img); + var info = document.createElement("span"); + info.innerHTML = files[i].name + ": " + files[i].size + " bytes"; + li.appendChild(info); + } + } +} +</pre> + +<p>Das {{ HTMLElement("div") }} Element mit der ID <code>fileList</code> wird ermittelt. Das ist der Block, in den wir später unsere Dateiliste einschließlich Thumbnails einfügen.</p> + +<p>Ist das {{ domxref("FileList") }} Objekt, das an <code>handleFiles()</code> übergeben wird, <code>null</code>, dann wird einfach "No files selected!" ausgegeben. Ansonsten bauen wir unsere Dateiliste wie folgt:</p> + +<ol> + <li>Ein neues ({{ HTMLElement("ul") }}) Element wird erzeugt.</li> + <li>Das neue Listenelement wird dem {{ HTMLElement("div") }} Block hinzugefügt durch Aufruf der {{ domxref("element.appendChild()") }} Methode.</li> + <li>Für jedes {{ domxref("File") }} in der {{ domxref("FileList") }}, die durch <code>files</code> repräsentiert wird: + <ol> + <li>Erzeuge ein neues Listenelement ({{ HTMLElement("li") }}) und füge es der Liste hinzu.</li> + <li>Erzeuge ein neues Bildelement ({{ HTMLElement("img") }}).</li> + <li>Setze das src Attribut des Bildes auf die neue Objekt URL, die die Datei repräsentiert, wobei die Objekt URL mit {{ domxref("window.URL.createObjectURL()") }} erzeugt wird.</li> + <li>Setze die Bildgröße auf 60 Pixel.</li> + <li>Richte den <code>onload</code> Event Handler ein, um die Objekt URL wieder freizugeben, da sie nach dem Laden des Bildes nicht mehr benötigt wird. Das wird durch Aufruf der Methode {{ domxref("window.URL.revokeObjectURL()") }} und Übergabe des Objekt URL Strings aus <code>img.src</code> gemacht.</li> + <li>Füge das neue Bildelement dem Listenelement hinzu.</li> + </ol> + </li> +</ol> + +<h2 id="Example_Uploading_a_user-selected_file">Example: Uploading a user-selected file</h2> + +<p>Another thing you might want to do is let the user upload the selected file or files (such as the images selected using the previous example) to a server. This can be done asynchronously very easily.</p> + +<h3 id="Creating_the_upload_tasks">Creating the upload tasks</h3> + +<p>Continuing with the code that built the thumbnails in the previous example, recall that every thumbnail image is in the CSS class <code>obj</code> with the corresponding {{ domxref("File") }} attached in a <code>file</code> attribute. This allows us to select all of the images the user has chosen for uploading using {{ domxref("Document.querySelectorAll()") }}, like this:</p> + +<pre class="brush: js">function sendFiles() { + var imgs = document.querySelectorAll(".obj"); + + for (var i = 0; i < imgs.length; i++) { + new FileUpload(imgs[i], imgs[i].file); + } +} +</pre> + +<p>Line 2 fetches a <span style="line-height: 1.5;">{{ domxref("NodeList") }}</span><span style="line-height: 1.5;">, called </span><code style="font-size: 14px;">imgs</code><span style="line-height: 1.5;">, of all the elements in the document with the CSS class </span><code style="font-size: 14px;">obj</code><span style="line-height: 1.5;">. In our case, these will be all of the image thumbnails. Once we have that list, it's trivial to go through it and create a new </span><code style="font-size: 14px;">FileUpload</code><span style="line-height: 1.5;"> instance for each. Each of these handles uploading the corresponding file.</span></p> + +<h3 id="Handling_the_upload_process_for_a_file">Handling the upload process for a file</h3> + +<p>The <code>FileUpload</code> function accepts two inputs: an image element and a file from which to read the image data.</p> + +<pre class="brush: js">function FileUpload(img, file) { + var reader = new FileReader(); + this.ctrl = createThrobber(img); + var xhr = new XMLHttpRequest(); + this.xhr = xhr; + + var self = this; + this.xhr.upload.addEventListener("progress", function(e) { + if (e.lengthComputable) { + var percentage = Math.round((e.loaded * 100) / e.total); + self.ctrl.update(percentage); + } + }, false); + + xhr.upload.addEventListener("load", function(e){ + self.ctrl.update(100); + var canvas = self.ctrl.ctx.canvas; + canvas.parentNode.removeChild(canvas); + }, false); + xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php"); + xhr.overrideMimeType('text/plain; charset=x-user-defined-binary'); + reader.onload = function(evt) { + xhr.sendAsBinary(evt.target.result); + }; + reader.readAsBinaryString(file); +} +</pre> + +<p>The <code>FileUpload()</code> function shown above creates a throbber, which is used to display progress information, and then creates an {{ domxref("XMLHttpRequest") }} to handle uploading the data.</p> + +<p>Before actually transferring the data, several preparatory steps are taken:</p> + +<ol> + <li>The <code>XMLHttpRequest</code>'s upload <code>progress</code> listener is set to update the throbber with new percentage information so that as the upload progresses the throbber will be updated based on the latest information.</li> + <li>The <code>XMLHttpRequest</code>'s upload <code>load</code> event handler is set to update the throbber progress information to 100% to ensure the progress indicator actually reaches 100% (in case of granularity quirks during the process). It then removes the throbber since it's no longer needed. This causes the throbber to disappear once the upload is complete.</li> + <li>The request to upload the image file is opened by calling <code>XMLHttpRequest</code>'s <code>open()</code> method to start generating a POST request.</li> + <li>The MIME type for the upload is set by calling the <code>XMLHttpRequest</code> function <code>overrideMimeType()</code>. In this case, we're using a generic MIME type; you may or may not need to set the MIME type at all depending on your use case.</li> + <li>The <code>FileReader</code> object is used to convert the file to a binary string.</li> + <li>Finally, when the content is loaded the <code>XMLHttpRequest</code> function <code>sendAsBinary()</code> is called to upload the file's content.</li> +</ol> + +<div class="note"><strong>Note:</strong> The non-standard <code>sendAsBinary</code> method in the example above is considered deprecated as of Gecko 31 {{ geckoRelease(31) }} and will be removed soon. The standard <code>send(Blob data)</code> method can be used instead.</div> + +<h3 id="Handling_the_upload_process_for_a_file_asynchronously">Handling the upload process for a file, asynchronously</h3> + +<pre class="brush: js"><?php +if (isset($_FILES['myFile'])) { + // Example: + move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']); + exit; +} +?><!DOCTYPE html> +<html> +<head> + <title>dnd binary upload</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <script type="text/javascript"> + function sendFile(file) { + var uri = "/index.php"; + var xhr = new XMLHttpRequest(); + var fd = new FormData(); + + xhr.open("POST", uri, true); + xhr.onreadystatechange = function() { + if (xhr.readyState == 4 && xhr.status == 200) { + // Handle response. + alert(xhr.responseText); // handle response. + } + }; + fd.append('myFile', file); + // Initiate a multipart/form-data upload + xhr.send(fd); + } + + window.onload = function() { + var dropzone = document.getElementById("dropzone"); + dropzone.ondragover = dropzone.ondragenter = function(event) { + event.stopPropagation(); + event.preventDefault(); + } + + dropzone.ondrop = function(event) { + event.stopPropagation(); + event.preventDefault(); + + var filesArray = event.dataTransfer.files; + for (var i=0; i<filesArray.length; i++) { + sendFile(filesArray[i]); + } + } + } + </script> +</head> +<body> + <div> + <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div> + </div> +</body> +</html> +</pre> + +<h2 id="Example_Using_object_URLs_to_display_PDF">Example: Using object URLs to display PDF</h2> + +<p>Object URLs can be used for other things than just images! They can be used to display embedded PDF files or any other resources that can be displayed by the browser.</p> + +<p>In Firefox, to have the PDF appear embedded in the iframe (rather than proposed as a downloaded file), the preference <code>pdfjs.disabled</code> must be set to <code>false</code> {{non-standard_inline()}}.</p> + +<pre class="brush: html"><iframe id="viewer"> +</pre> + +<p>And here is the change of the <code>src</code> attribute:</p> + +<pre class="brush: js">var obj_url = window.URL.createObjectURL(blob); +var iframe = document.getElementById('viewer'); +iframe.setAttribute('src', obj_url); +window.URL.revokeObjectURL(obj_url);</pre> + +<h2 id="Example_Using_object_URLs_with_other_file_types">Example: Using object URLs with other file types</h2> + +<p>You can manipulate files of other formats the same way. Here is how to preview uploaded video:</p> + +<pre class="brush: js">var video = document.getElementById('video'); +var obj_url = window.URL.createObjectURL(blob); +video.src = obj_url; +video.play() +window.URL.revokeObjectURL(obj_url);</pre> + +<h2 id="Specification" name="Specification">Specifications</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/progress-events/" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected">File upload state</a> (HTML 5 working draft)</li> + <li><a href="http://www.w3.org/TR/FileAPI/" title="http://www.w3.org/TR/FileAPI/">File API</a></li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ domxref("File") }}</li> + <li>{{ domxref("FileList") }}</li> + <li>{{ domxref("FileReader") }}</li> + <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a></li> + <li>{{ domxref("XMLHttpRequest") }}</li> + <li><a class="external" href="http://www.jquery.com/" title="http://www.jquery.com/">jQuery</a> JavaScript library</li> +</ul> + +<p>{{ HTML5ArticleTOC() }}</p> + +<p>{{ languages( { "zh-cn": "zh-cn/Using_files_from_web_applications", "ja": "ja/Using_files_from_web_applications" } ) }}</p> diff --git a/files/de/web/api/filereader/index.html b/files/de/web/api/filereader/index.html new file mode 100644 index 0000000000..b7c8668c3a --- /dev/null +++ b/files/de/web/api/filereader/index.html @@ -0,0 +1,153 @@ +--- +title: FileReader +slug: Web/API/FileReader +translation_of: Web/API/FileReader +--- +<div>{{APIRef("File API")}}</div> + +<p>Mit dem FileReader-Objekt können Webapplikationen den Inhalt von auf dem Computer des Benutzers gespeicherten Dateien (oder Rohdaten-Buffer) asynchron lesen. Mit {{domxref("File")}} oder {{domxref("Blob")}}-Objekten wird die zu lesende Datei oder die zu lesenden Daten spezifiziert.</p> + +<p>File Objekte können über ein {{domxref("FileList")}} Objekt erhalten werden, welches als Ergebnis einer Dateiauswahl durch einen Benutzer über das {{HTMLElement("input")}} Element zurückgegeben wird. Weitere mögliche Quellen sind drag and drop Ereignisse über ein <a href="/en-US/docs/Web/API/DataTransfer"><code>DataTransfer</code></a> Objekt oder über die <code>mozGetAsFile()</code> API des {{domxref("HTMLCanvasElement")}}.</p> + +<h2 id="Konstruktor">Konstruktor</h2> + +<pre class="syntaxbox">FileReader FileReader();</pre> + +<p>Im Kapitel <a href="/de/docs/Zugriff_auf_Dateien_von_Webapplikationen">Zugriff auf Dateien von Webapplikationen</a> finden sich weitere Details und Beispiele.</p> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<dl> + <dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt> + <dd>Ein {{domxref("DOMError")}}, der den Fehler angibt, welcher beim Lesen der Datei entstanden ist.</dd> + <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt> + <dd>Eine Zahl, welche den Status des <code>FileReader</code> angibt. Möglich ist eine der {{anch("Status-Konstanten")}}.</dd> + <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt> + <dd>Der Inhalt der Datei. Diese Eigenschaft ist nur gültig, nachdem der Lesevorgang abgeschlossen ist. Das Format der Daten hängt davon ab, welche der Methoden zum Starten des Lesevorgangs benutzt wurde.</dd> +</dl> + +<h3 id="Event-Handler">Event-Handler</h3> + +<dl> + <dt>{{domxref("FileReader.onabort")}}</dt> + <dd>Ein Handler für das {{event("abort")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang abgebrochen wird.</dd> + <dt>{{domxref("FileReader.onerror")}}</dt> + <dd>Ein Handler für das {{event("error")}}-Event. Dieser Event wird gefeuert, wenn beim Lesevorgang ein Fehler ensteht.</dd> + <dt>{{domxref("FileReader.onload")}}</dt> + <dd>Ein Handler für das {{event("load")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang erfolgreich beendet wird.</dd> + <dt>{{domxref("FileReader.onloadstart")}}</dt> + <dd>Ein Handler für das {{event("loadstart")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang gestartet wird.</dd> + <dt>{{domxref("FileReader.onloadend")}}</dt> + <dd>Ein Handler für das {{event("loadend")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang beendet wird (entweder erfolgreich oder fehlerhaft).</dd> + <dt>{{domxref("FileReader.onprogress")}}</dt> + <dd>Ein Handler für das {{event("progress")}}-Event. Dieser Event wird gefeuert, während ein {{domxref("Blob")}}-Inhalt gelesen wird.</dd> +</dl> + +<div class="note"> +<p>Hinweis: Da<code>FileReader</code> von {{domxref("EventTarget")}} erbt, kann auf alle diese Events auch mit der {{domxref("EventTarget.addEventListener()","addEventListener")}} Methode gehört werden.</p> +</div> + +<h3 id="Status-Konstanten">Status-Konstanten</h3> + +<ul> + <li><code>EMPTY</code> : <code>0</code> : Noch keine Daten geladen.</li> + <li><code>LOADING</code> : <code>1</code> : Daten werden geladen.</li> + <li><code>DONE</code> : <code>2</code> : Der Lesevorgang ist abgeschlossen.</li> +</ul> + +<h2 id="Methoden">Methoden</h2> + +<dl> + <dt>{{domxref("FileReader.abort()")}}</dt> + <dd>Bricht den Lesevorgang ab. Nach dem Return wird der <code>readyState</code> zu <code>DONE</code>.</dd> + <dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}</dt> + <dd>Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und, wenn der Lesevorgang abgeschlossen ist, enthält <code>result</code> ein {{domxref("ArrayBuffer")}} mit den Daten.</dd> + <dt>{{domxref("FileReader.readAsBinaryString()")}}</dt> + <dd>Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und, wenn der Lesevorgang abgeschlossen ist, enthält <code><font face="Courier New">result</font></code> die rohen Binär-Daten als String.</dd> + <dt>{{domxref("FileReader.readAsDataURL()")}}</dt> + <dd>Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und, wenn der Lesevorgang abgeschlossen ist, enthält <code><font face="Courier New">result</font></code> die Daten als Data-URL.</dd> + <dt>{{domxref("FileReader.readAsText()")}}</dt> + <dd>Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und , wenn der Lesevorgang abgeschlossen ist, enthält <code><font face="Courier New">result</font></code> die Daten als Text-String.</dd> +</dl> + +<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("File API", "#FileReader-interface", "FileReader")}}</td> + <td>{{Spec2("File API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatiblität">Browser-Kompatiblität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basissupport</td> + <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td> + <td>7</td> + <td>10<sup>[2]</sup></td> + <td>12.02<sup>[3]</sup></td> + <td>6.0.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basissupport</td> + <td>32</td> + <td>3</td> + <td>10</td> + <td>11.5</td> + <td>6.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Vor Gecko 2.0 beta 7 (Firefox 4.0 beta 7), waren alle {{domxref("Blob")}} parameters stattdessen {{domxref("File")}} Parameter; Das wurde aktualisiert um die Spezifikation zu erfüllen. Vor Gecko 13.0 {{geckoRelease("13.0")}} gab die <code>FileReader.error</code> Eigenschaft ein {{domxref("FileError")}} Objekt zurück. Dieses Interface wurde wurde entfernt und <code>FileReader.error</code> gibt nun einen {{domxref("DOMError")}} Objekt zurück, wie in dem aktuellen FileAPI Entwurf vorgesehen.</p> + +<p>[2] IE9 hat ein <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p> + +<p>[3] Opera hat <a href="http://www.opera.com/docs/specs/presto28/file/">partiellen Support</a> in 11.1.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Zugriff_auf_Dateien_von_Webapplikationen">Zugriff auf Dateien von Webapplikationen</a></li> + <li>{{domxref("File")}}</li> + <li>{{domxref("Blob")}}</li> + <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMFileReader">nsIDOMFileReader</a> - Für addons/privileged scope</li> +</ul> diff --git a/files/de/web/api/filereader/onload/index.html b/files/de/web/api/filereader/onload/index.html new file mode 100644 index 0000000000..95dda3e59f --- /dev/null +++ b/files/de/web/api/filereader/onload/index.html @@ -0,0 +1,24 @@ +--- +title: onload +slug: Web/API/FileReader/onload +tags: + - Dateien + - Lesen +translation_of: Web/API/FileReader/onload +--- +<p>Das onload Event wird ausgelöst, wenn der Inhalt von <a href="/en-US/docs/Web/API/FileReader/readAsArrayBuffer">readAsArrayBuffer</a>, <a href="/en-US/docs/Web/API/FileReader/readAsBinaryString">readAsBinaryString</a>, <a href="/en-US/docs/Web/API/FileReader/readAsDataURL">readAsDataURL</a> or <a href="/en-US/docs/Web/API/FileReader/readAsText">readAsText</a> verfügbar ist.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:js; line-numbers language-js"><code class="language-js">// Callback von einem <input type="file" onchange="onChange(event)"> +function onChange(event) { + var file = event.target.files[0]; + var reader = new FileReader(); + reader.onload = function(event) { + // Hier wird der Text der Datei ausgegeben + console.log(event.target.result) + }; + + reader.readAsText(file); +} +</code></pre> diff --git a/files/de/web/api/formdata/formdata/index.html b/files/de/web/api/formdata/formdata/index.html new file mode 100644 index 0000000000..40ce36053f --- /dev/null +++ b/files/de/web/api/formdata/formdata/index.html @@ -0,0 +1,184 @@ +--- +title: FormData() +slug: Web/API/FormData/FormData +translation_of: Web/API/FormData/FormData +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p>Der <code><strong>FormData()</strong></code> Konstruktor erzeugt ein neues {{domxref("FormData")}}-Objekt.</p> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>Anmerkung: </strong>Dieses Feature is verfügbar auf </span><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js"><code>var formData = new FormData(</code><code>form</code><code>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<dl> + <dt><code>form </code>{{optional_inline}}</dt> + <dd>Ein HTML {{HTMLElement("form")}}-Element — wenn angegeben, wird das neue {{domxref("FormData")}}-Objekt mit den aktuellen Schlüssel/Wert-Paaren des form's gefüllt, wobei "name" der Schlüssel und "value" der Wert. Mitgeschickte Dateien werden ebenfalls codiert.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>So erzeugt man ein neues <code>FormData</code>-Objekt:</p> + +<pre class="brush: js">var formData = new FormData(); // leer</pre> + +<p>Nun kann man ein Schlüssel/Wert-Paar hinzufügen mit {{domxref("FormData.append")}}:</p> + +<pre class="brush: js">formData.append('username', 'Chris'); +</pre> + +<p>Oder man gibt das optionale <code><em>form</em></code> Argument an, um es direkt mit dessen Werten zu füllen:</p> + +<pre class="brush: html"><form id="myForm" name="myForm"> + <div> + <label for="username">Enter name:</label> + <input type="text" id="username" name="username"> + </div> + <div> + <label for="useracc">Enter account number:</label> + <input type="text" id="useracc" name="useracc"> + </div> + <div> + <label for="userfile">Upload file:</label> + <input type="file" id="userfile" name="userfile"> + </div> +<input type="submit" value="Submit!"> +</form> +</pre> + +<div class="note"> +<p><strong>Anmerkung</strong>: Alle input-Elemente haben das 'name'-Attribut. Das ist notwendig um die Werte auszuwerten.</p> +</div> + +<pre class="brush: js">var myForm = document.getElementById('myForm'); +formData = new FormData(myForm);</pre> + +<h2 id="Spezifikationen">Spezifikationen</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('XMLHttpRequest','#dom-formdata','FormData()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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>7</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>12</td> + <td>5</td> + </tr> + <tr> + <td>append with filename</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>available in web workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("39.0")}}</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>3.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td> + <p>12</p> + </td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>append with filename</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("39.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<p> </p> + +<div class="note"> +<p><strong>Note</strong>: XHR in Android 4.0 sends empty content for FormData with blob.</p> +</div> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<p>Prior to Gecko 7.0 {{geckoRelease("7.0")}}, if you specified a {{domxref("Blob")}} as the data to append to the object, the filename reported in the "Content-Disposition" HTTP header was an empty string; this resulted in errors being reported by some servers. Starting in Gecko 7.0, the filename "blob" is sent.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> +</div> diff --git a/files/de/web/api/formdata/get/index.html b/files/de/web/api/formdata/get/index.html new file mode 100644 index 0000000000..1bcd503006 --- /dev/null +++ b/files/de/web/api/formdata/get/index.html @@ -0,0 +1,145 @@ +--- +title: FormData.get() +slug: Web/API/FormData/get +translation_of: Web/API/FormData/get +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p>Die <code><strong>get()</strong></code> Methode der {{domxref("FormData")}} Schnittstelle gibt die den ersten Wert, der dem gegebenen Schlüssel zugeordnet ist, aus dem <code>FormData</code> Objekt zurück. Wenn mehrere Werte zu erwarten sind und diese alle verwendet werden sollen, sollte stattdeessen die Methode {{domxref("FormData.getAll()","getAll()")}} verwendet werden.</p> + +<div class="note"> +<p><strong><font>Hinweis</font></strong>: Diese Methode ist in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> verfügbar.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">formData.get(name);</pre> + +<h3 id="append()_Parameters" name="append()_Parameters">Parameter</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Ein {{domxref("USVString")}}, der den Namen des abzurufenden Schlüssels repräsentiert.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein {{domxref("FormDataEntryValue")}}, der den Wert enthält.</p> + +<h2 id="Example">Example</h2> + +<p>Die folgende Zeile erzeugt ein leeres <code>FormData</code> Objekt:</p> + +<pre class="brush: js">var formData = new FormData();</pre> + +<p>Wenn man zwei Werte als <code>benutzername</code> mit {{domxref("FormData.append")}} hinzufügt:</p> + +<pre class="brush: js">formData.append('benutzername', 'Chris'); +formData.append('benutzername', 'Bob');</pre> + +<p>Der folgende Aufruf der <code>get()</code> Funktion liefert dann nur den zuerst hinzugefügten Wert für <code>benutzername</code>:</p> + +<pre class="brush: js">formData.get('benutzername'); // Gibt "Chris" zurück</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('XMLHttpRequest','#dom-formdata-get','get()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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><span class="short_text" id="result_box" lang="de"><span>Grundlegende Unterstützung</span></span></td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoDesktop('39.0')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Verfügbar in web workers</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoDesktop('39.0')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</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>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td><span class="short_text" id="result_box" lang="de"><span>Grundlegende Unterstützung</span></span></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + <tr> + <td>Verfügbar in web workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> diff --git a/files/de/web/api/formdata/getall/index.html b/files/de/web/api/formdata/getall/index.html new file mode 100644 index 0000000000..09cdc69036 --- /dev/null +++ b/files/de/web/api/formdata/getall/index.html @@ -0,0 +1,74 @@ +--- +title: FormData.getAll() +slug: Web/API/FormData/getAll +translation_of: Web/API/FormData/getAll +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p>Die <code><strong>getAll()</strong></code> Methode der {{domxref("FormData")}} Schnittstelle gibt alle Werte zurück, die innerhalb eines <code>FormData</code> Objekts mit einem gegebenen Schlüssel assoziiert sind.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Diese Methode ist in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> verfügbar.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">formData.getAll(name);</pre> + +<h3 id="append()_Parameters" name="append()_Parameters">Parameter</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Ein {{domxref("USVString")}}, der den Namen des Schlüssels darstellt, der abgerufen werden soll.</dd> +</dl> + +<h3 id="Rückgabewerte">Rückgabewerte</h3> + +<p>Ein Array von {{domxref("FormDataEntryValue")}}s.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Die folgende Zeile erstellt ein leeres <code>FormData</code> Objekt:</p> + +<pre class="brush: js">var formData = new FormData();</pre> + +<p>Hinzufügen von zwei <code>username</code> Werten mit Hilfe von {{domxref("FormData.append")}}:</p> + +<pre class="brush: js">formData.append('username', 'Chris'); +formData.append('username', 'Bob');</pre> + +<p>Der darauffolgende Aufruf der <code>getAll()</code> Funktion gibt beide <code>username</code> Werte in einem Array zurück.:</p> + +<pre class="brush: js">formData.getAll('username'); // gibt ["Chris", "Bob"] zurück</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('XMLHttpRequest','#dom-formdata-getall','getAll()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("api.FormData.getAll")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> diff --git a/files/de/web/api/formdata/index.html b/files/de/web/api/formdata/index.html new file mode 100644 index 0000000000..3ff1becbcf --- /dev/null +++ b/files/de/web/api/formdata/index.html @@ -0,0 +1,80 @@ +--- +title: FormData +slug: Web/API/FormData +tags: + - API + - FomData + - Interface + - Referenz + - XMLHttpRequest +translation_of: Web/API/FormData +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p>Das <strong><code>FormData</code></strong>-Interface ermöglicht das einfache Erstellen eines Objektes bestehend aus Schlüssel/Werte-Paaren, welche Formular-Felder und ihre Werte repräsentieren. Dieses Objekt kann leicht durch das Aufrufen der {{domxref("XMLHttpRequest.send()")}} Methode abgeschickt werden. Es verwendet das gleiche Format wie ein HTML-Formular, dessen Kodierung auf <code>"multipart/form-data"</code> gesetzt wurde.</p> + +<p>Ein Objekt, dass FormData implementiert, kann direkt in den {{jsxref("Statements/for...of", "for...of")}} Strukturen benutzt werden, statt {{domxref('FormData.entries()', 'entries()')}} zu verwenden: <code>for (var p of myFormData)</code> ist identisch zu <code>for (var p of myFormData.entries())</code>.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Dieses Feature ist in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> verfügbar.</p> +</div> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt>{{domxref("FormData.FormData","FormData()")}}</dt> + <dd>Erzeugt ein neues <code>FormData</code>-Objekt.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<dl> + <dt>{{domxref("FormData.append()")}}</dt> + <dd>Fügt den Wert an den Wert eines bestehenden Schlüssel/Wert-Paares in einem <code>FormData</code>-Objekt an, oder fügt den Schlüssel mit dem Wert hinzu hinzu, falls dieser nicht vorhanden ist.</dd> + <dt>{{domxref("FormData.delete()")}}</dt> + <dd>Löscht ein Schlüssel/Wert-Paar aus einem <code>FormData</code>-Objekt.</dd> + <dt>{{domxref("FormData.entries()")}}</dt> + <dd>Gibt einen {{jsxref("Iteration_protocols","iterator")}} zurück, welcher das Iterieren über alle Schlüssel/Wert-Paare ermöglicht.</dd> + <dt>{{domxref("FormData.get()")}}</dt> + <dd>Gibt den ersten Wert zurück, welcher dem gegebenen Schlüssel in dem <code>FormData</code>-Objekt zugeordnet ist.</dd> + <dt>{{domxref("FormData.getAll()")}}</dt> + <dd>Erstellt ein Array, welches alle dem gegebenen Schlüssel zugeordneten Werte enthält.</dd> + <dt>{{domxref("FormData.has()")}}</dt> + <dd>Gibt einen boolean zurück, welcher Auskunft über das Vorhandenseins des gegeben Schlüssels im <code>FormData</code>-Objekt gibt.</dd> + <dt>{{domxref("FormData.keys()")}}</dt> + <dd>Gibt einen {{jsxref("Iteration_protocols", "iterator")}} zurück, welcher das Iterieren über alle Schlüssel der Schlüssel/Wert-Paare ermöglicht.</dd> + <dt>{{domxref("FormData.set()")}}</dt> + <dd>Ersetzt den Wert für einen bestimmten Schlüssel im <code>FormData</code>-Objekt, oder legt das Schlüssel/Wert-Paar an, sollte der Schlüssel noch nicht existieren.</dd> + <dt>{{domxref("FormData.values()")}}</dt> + <dd>Gibt einen {{jsxref("Iteration_protocols", "iterator")}} zurück, welcher das Iterieren über alle Werte der Schlüsselpaare ermöglicht.</dd> +</dl> + +<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('XMLHttpRequest','#interface-formdata','FormData')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>FormData definiert in XHR Spezifikation</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("api.FormData")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest benutzen</a></li> + <li><a href="/en-US/docs/Web/API/FormData/Using_FormData_Objects">FormData-Objekte benutzen</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> diff --git a/files/de/web/api/fullscreenoptions/index.html b/files/de/web/api/fullscreenoptions/index.html new file mode 100644 index 0000000000..a4e76273e3 --- /dev/null +++ b/files/de/web/api/fullscreenoptions/index.html @@ -0,0 +1,43 @@ +--- +title: FullscreenOptions +slug: Web/API/FullscreenOptions +tags: + - API + - Aufbau + - Bildschirm + - Einstellungen + - Full-screen + - Fullscreen API + - FullscreenOptionen + - Navigation + - Optionen + - Referenz + - UI + - Wörterbuch + - fullscreen +translation_of: Web/API/FullscreenOptions +--- +<p>{{APIRef("Fullscreen API")}}</p> + +<p><span class="seoSummary">Das FullscreenOptions-Wörterbuch wird verwendet, um Konfigurationsoptionen bereitzustellen, wenn {{DOMxRef ("Element.requestFullscreen", "requestFullscreen ()")}} für ein Element aufgerufen wird, um dieses Element in den Vollbildmodus zu versetzen.</span></p> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<dl> + <dt>{{DOMxRef("FullscreenOptions.navigationUI", "navigationUI")}}{{Optional_Inline}}</dt> + <dd>Eine Zeichenfolge, mit der gesteuert wird, ob die Elemente der Browser-Benutzeroberfläche im Vollbildmodus angezeigt werden sollen. Mit der Standardeinstellung "auto" kann der Browser diese Entscheidung treffen.</dd> +</dl> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, lesen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div> + +<p>{{Compat("api.FullscreenOptions")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a></li> + <li><a href="/en-US/docs/Web/API/Fullscreen_API/Guide">Anleitung zur Vollbild-API</a></li> + <li>{{DOMxRef("Element.requestFullscreen()")}}</li> +</ul> diff --git a/files/de/web/api/gainnode/index.html b/files/de/web/api/gainnode/index.html new file mode 100644 index 0000000000..fb5adeb75e --- /dev/null +++ b/files/de/web/api/gainnode/index.html @@ -0,0 +1,134 @@ +--- +title: GainNode +slug: Web/API/GainNode +translation_of: Web/API/GainNode +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<div> +<p>Die <code>GainNode</code> Schnittstelle ermöglicht eine Verstärkung (engl. gain) eines Signals, was als veränderte Lautstärke wahrgenommen wird. Es handelt sich um ein {{domxref("AudioNode")}} audio-verarbeitendes Modul, das ein Eingabesignal mit einer gewissen Verstärkung (die auch negativ sein kann) versieht, und es an den Ausgang weiterleitet. Ein <code>GainNode</code> hat immer genau einen Eingang und einen Ausgang, beide mit derselben Anzahl an Kanälen.</p> +</div> + +<p>Verstärkung ist ein Wert ohne Einheit, der sich über die Zeit ändert. Er wird mit allen zeitlich korrespondierenden Samples aller Eingangskanäle multipliziert, um das Signal zu verändern. Ändert sich der Wert, wird der neue Wert durch einen "de-zippering" Algorithmus angewendet, um unästhetisches Klick-Artifakte im Signal zu vermeiden.</p> + +<p><img alt="The GainNode is increasing the gain of the output." src="https://mdn.mozillademos.org/files/5085/WebAudioGainNode.png" style="height: 116px; width: 774px;"></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Anzahl der Eingänge</th> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row">Anzahl der Ausgänge</th> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row">Kanalzählmethode</th> + <td><code>"max"</code></td> + </tr> + <tr> + <th scope="row">Anzahl Kanäle</th> + <td><code>2</code> (not used in the default count mode)</td> + </tr> + <tr> + <th scope="row">Kanalinterpretation</th> + <td><code>"speakers"</code></td> + </tr> + </tbody> +</table> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<p><em>Inherits properties from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p> + +<dl> + <dt>{{domxref("GainNode.gain")}} {{readonlyinline}}</dt> + <dd>Ist ein <a href="/en-US/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref("AudioParam")}} der das Ausmaß der Verstärkung angibt.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<p><em>Keine spezifischen Methoden; erbt die Methoden der Elternklasse , </em><em>{{domxref("AudioNode")}}</em>.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>{{page("/en-US/docs/Web/API/AudioContext.createGain","Example")}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('Web Audio API', '#the-gainnode-interface', 'GainNode')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td> + <td>{{CompatGeckoDesktop(25.0)}} </td> + <td>{{CompatNo}}</td> + <td>15.0{{property_prefix("webkit")}}<br> + 22</td> + <td>6.0{{property_prefix("webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</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>26.0</td> + <td>1.2</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>33.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Die Web Audio API</a> benutzen</li> +</ul> diff --git a/files/de/web/api/gamepad_api/index.html b/files/de/web/api/gamepad_api/index.html new file mode 100644 index 0000000000..d72bf51274 --- /dev/null +++ b/files/de/web/api/gamepad_api/index.html @@ -0,0 +1,95 @@ +--- +title: Gamepad API +slug: Web/API/Gamepad_API +tags: + - API + - Experimentel + - Spiele + - Übersicht +translation_of: Web/API/Gamepad_API +--- +<div>{{DefaultAPISidebar("Gamepad API")}}</div> + +<p>Die <strong>Gamepad API</strong> ist ein Weg für Entwickler auf Eingaben eines Gamepads und anderen Spiels<span class="tlid-translation translation" lang="de"><span title="">teuergeräte in einer einfachen und </span></span>konsequenten Weise zuzugreifen und darauf zu reagieren. Es enthält drei Schnittstellen, zwei Ereignisse und eine Spezialfunktion, welche verwendet wird, um auf verbindende und trennende Gamepads zu reagieren, um auf andere Informationen des Gamepads selbst zuzugreifen und welche Knöpfe und andere Kontrollelemente gerade gedrückt werden.</p> + +<h2 id="Schnittstellen">Schnittstellen</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad" title="The Gamepad interface of the Gamepad API defines an individual gamepad or other controller, allowing access to information such as button presses, axis positions, and id."><code>Gamepad</code></a></dt> + <dd>Repräsentiert ein Gamepad/Spiels<span class="tlid-translation translation" lang="de"><span title="">teuergerät</span></span>, dass mit dem Computer verbunden ist.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadButton" title="The GamepadButton interface defines an individual button of a gamepad or other controller, allowing access to the current state of different types of buttons available on the control device."><code>GamepadButton</code></a></dt> + <dd>Repräsentiert einen Knopf auf einem verbundenen Gamepad.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadEvent" title="The GamepadEvent interface of the Gamepad API contains references to gamepads connected to the system, which is what the gamepad events Window.gamepadconnected and Window.gamepaddisconnected are fired in response to."><code>GamepadEvent</code></a></dt> + <dd>Das Ereignisobjekt, dass Ereignisse auf dem zusammenhängenden Gamepad repräsentativ auslöst.</dd> +</dl> + +<h3 id="Experimentelle_Gamepad_Erweiterungen">Experimentelle Gamepad Erweiterungen</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadHapticActuator" title="The GamepadHapticActuator interface of the Gamepad API represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware."><code>GamepadHapticActuator</code></a></dt> + <dd>Repräsentiert Hardware im S<span class="tlid-translation translation" lang="de"><span title="">teuergeräte</span></span> welche zur Verfügungstellung von haptischen Feedback für den Nutzer (Falls vefügbar) konzipiert worden ist, meistens handelt es sich um Vibrationsmotoren.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadPose" title="The GamepadPose interface of the Gamepad API represents the pose of a WebVR controller at a given timestamp (which includes orientation, position, velocity, and acceleration information.)"><code>GamepadPose</code></a></dt> + <dd>Repräsentiert die Stellung des Steuergeräts (z.B. Position und Orientierung im dreidimensionalen Raum) im Falle eines <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API">WebVR</a>-Steuergeräts.</dd> +</dl> + +<p>Siehe unter <a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad#Experimental_extensions_to_Gamepad">Experimentelle Erweiterungen der Gamepad Schnittstelle</a> nach Schnittstellen, die den Zugriff auf die oben erwähnten experimentellen Erweiterungen ermöglichen.</p> + +<h3 id="Erweiterungen_für_anderen_Schnittstellen">Erweiterungen für anderen Schnittstellen</h3> + +<h4 id="Navigator">Navigator</h4> + +<dl> + <dt>{{domxref("Navigator.getGamepads()")}}</dt> + <dd>Eine Erweiterung für das {{domxref("Navigator")}} Objekt, das ein Array von {{domxref("Gamepad")}} Objeketen zurückschickt, jeweils eines für jedes verbundene Gamepad.</dd> +</dl> + +<h4 id="Window_Ereignisse">Window Ereignisse</h4> + +<dl> + <dt>{{domxref("Window.ongamepadconnected")}}</dt> + <dd>Repräsentiert einen Ereignisabwickler, der ausgeführt wird, wenn ein Gamepad verbunden wird (Wenn das {{event('gamepadconnected')}} Ereignis auslöst).</dd> + <dt>{{domxref("Window.ongamepaddisconnected")}}</dt> + <dd>Repräsentiert einen Ereignisabwickler, der ausgeführt wird, wenn ein Gamepad getrennt wird (Wenn das {{event('gamepaddisconnected')}} Ereignis auslöst).</dd> +</dl> + +<h2 id="Einführung_und_Leitfäden">Einführung und Leitfäden</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Die Gamepad API verwenden</a></li> + <li><a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Steuergeräte mithilfe der the Gamepad API implementieren</a></li> +</ul> + +<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("GamepadExtensions")}}</td> + <td>{{Spec2("GamepadExtensions")}}</td> + <td>Definiert die {{anch("Experimental Gamepad extensions")}}.</td> + </tr> + <tr> + <td>{{SpecName("Gamepad", "", "The Gamepad API specification")}}</td> + <td>{{Spec2("Gamepad")}}</td> + <td>Anfängliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("api.Gamepad")}}</p> + +<h2 id="Siehe_weiters">Siehe weiters</h2> + +<ul> + <li><a class="external text" href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">Die Gamepad API</a> von Ted Mielczarek und Robert Nyman</li> + <li><a href="http://luser.github.io/gamepadtest/">Einfache API Demonstrationswebseite</a> (<a href="https://github.com/luser/gamepadtest">Quelle</a>)</li> +</ul> diff --git a/files/de/web/api/geolocation/getcurrentposition/index.html b/files/de/web/api/geolocation/getcurrentposition/index.html new file mode 100644 index 0000000000..52fd968a6b --- /dev/null +++ b/files/de/web/api/geolocation/getcurrentposition/index.html @@ -0,0 +1,88 @@ +--- +title: Geolocation.getCurrentPosition() +slug: Web/API/Geolocation/getCurrentPosition +translation_of: Web/API/Geolocation/getCurrentPosition +--- +<div>{{securecontext_header}}{{ APIRef("Geolocation API") }}</div> + +<p>Mit der Methode <strong><code>Geolocation.getCurrentPosition()</code></strong> kann die Position des Gerätes bestimmt werden.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">navigator.geolocation.getCurrentPosition(<var>success</var>[, <var>error</var>[, [<var>options</var>]])</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code><var>success</var></code></dt> + <dd>Eine Funktion, die nach erfolgreicher Positionsbestimmung aufgerufen wird. Sie erhält ein Objekt vom Typ {{domxref("GeolocationPosition")}} als Parameter.</dd> + <dt><code><var>error</var></code> {{optional_inline}}</dt> + <dd>Eine Funktion, die im Fehlerfall aufgerufen wird. Sie erhält ein Objekt vom Typ {{domxref("GeolocationPositionError")}} als Parameter.</dd> + <dt><code><var>options</var></code> {{optional_inline}}</dt> + <dd>Ein Objekt vom Typ {{domxref("PositionOptions")}}. Es enthält: + <ul> + <li><code>maximumAge</code>: Die Positionsbestimmung darf höchstens diese Zeit in Millisekunden zurückliegen. Falls 0, muss ein aktueller Wert ermittelt werden, falls <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>, sollte kein aktueller Wert ermittelt werden.<br> + Vorgabe: 0.</li> + <li><code>timeout</code>: Wartezeit in Millisekunden, bis die Positionsbestimmung abgebrochen und, so gegeben, die Funktion <code>error</code> aufgerufen wird. Bei <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> keine Begrenzung.<br> + Vorgabe: <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>.</li> + <li><code>enableHighAccuracy</code>: <code>true</code>, um eine genauere Position zu ermitteln, jedoch möglicherweise zu Lasten von Wartezeit und Energieverbrauch.<br> + Vorgabe: <code>false</code>.</li> + </ul> + </dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: js">var options = { + enableHighAccuracy: true, + timeout: 5000, + maximumAge: 0 +}; + +function success(pos) { + var crd = pos.coords; + + console.log('Your current position is:'); + console.log(`Latitude : ${crd.latitude}`); + console.log(`Longitude: ${crd.longitude}`); + console.log(`More or less ${crd.accuracy} meters.`); +} + +function error(err) { + console.warn(`ERROR(${err.code}): ${err.message}`); +} + +navigator.geolocation.getCurrentPosition(success, error, options); +</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('Geolocation')}}</td> + <td>{{Spec2('Geolocation')}}</td> + <td>Erste Spezifikation.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Geolocation.getCurrentPosition")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Geolocation_API/Using">Die Benutzung der Geolocation-API</a></li> + <li>{{domxref("Navigator.geolocation")}}</li> +</ul> diff --git a/files/de/web/api/geolocation/index.html b/files/de/web/api/geolocation/index.html new file mode 100644 index 0000000000..33c5695d42 --- /dev/null +++ b/files/de/web/api/geolocation/index.html @@ -0,0 +1,71 @@ +--- +title: Geolocation +slug: Web/API/Geolocation +tags: + - API + - Advanced + - Geolocation API + - Interface + - NeedsTranslation + - Reference + - Secure context + - TopicStub +translation_of: Web/API/Geolocation +--- +<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div> + +<p>The <code><strong>Geolocation</strong></code> interface represents an object able to programmatically obtain the position of the device. It gives Web content access to the location of the device. This allows a Web site or app to offer customized results based on the user's location.</p> + +<p>An object with this interface is obtained using the {{domxref("navigator.geolocation")}} property implemented by the {{domxref("Navigator")}} object.</p> + +<div class="note"> +<p><strong>Note:</strong> For security reasons, when a web page tries to access location information, the user is notified and asked to grant permission. Be aware that each browser has its own policies and methods for requesting this permission.</p> +</div> + +<h2 id="Properties">Properties</h2> + +<p><em>The <code>Geolocation</code> interface neither implements, nor inherits any property.</em></p> + +<h2 id="Methods">Methods</h2> + +<p><em><em>The <code>Geolocation</code> interface doesn't inherit any </em>method</em>.</p> + +<dl> + <dt>{{domxref("Geolocation.getCurrentPosition()")}} {{securecontext_inline}}</dt> + <dd>Determines the device's current location and gives back a {{domxref("GeolocationPosition")}} object with the data.</dd> + <dt>{{domxref("Geolocation.watchPosition()")}} {{securecontext_inline}}</dt> + <dd>Returns a <code>long</code> value representing the newly established callback function to be invoked whenever the device location changes.</dd> + <dt>{{domxref("Geolocation.clearWatch()")}} {{securecontext_inline}}</dt> + <dd>Removes the particular handler previously installed using <code>watchPosition()</code>.</dd> +</dl> + +<h2 id="Specifications">Specifications</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('Geolocation', '#geolocation_interface')}}</td> + <td>{{Spec2('Geolocation')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Geolocation")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li> +</ul> diff --git a/files/de/web/api/globaleventhandlers/index.html b/files/de/web/api/globaleventhandlers/index.html new file mode 100644 index 0000000000..db5dd7178f --- /dev/null +++ b/files/de/web/api/globaleventhandlers/index.html @@ -0,0 +1,540 @@ +--- +title: GlobalEventHandlers +slug: Web/API/GlobalEventHandlers +tags: + - API + - DOM + - HTML-DOM + - Mixin + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/GlobalEventHandlers +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<div>Der <strong><code>GlobalEventHandlers </code></strong>Mixin beschreibt die Ereignisbehandler, die mehreren Interfaces gemeinsam sind, wie z.B. {{domxref("HTMLElement")}}, {{domxref("Document")}}, oder {{domxref("Window")}}. Jedes dieser Interfaces kann weitere Ereignisbehandler implementieren.</div> + +<p><code>GlobalEventHandlers</code> ist ein Mixin und kein Interface und es kann kein Objekt dieses Typs angelegt werden.</p> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<p>Die Ereignis-Eigenschaften der Form onXYZ werden auf dem {{domxref("GlobalEventHandlers")}}} definiert und durch {{domxref("HTMLElement")}}}, {{domxref("Document")}}, {{domxref("Window")}} und {{domxref("WorkerGlobalScope")}}} für Webworker implementiert.</p> + +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("abort")}} ausgelöst wird.</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("blur")}} ausgelöst wird.</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("focus")}} ausgelöst wird.</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("focus")}} ausgelöst wird.</dd> + <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt> + <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("cancel")}} ausgelöst wird.</dd> + <dt>{{domxref("GlobalEventHandlers.oncanplay")}}</dt> + <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("canplay")}} ausgelöst wird.</dd> + <dt>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</dt> + <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("canplaythrough")}} ausgelöst wird.</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("change")}} ausgelöst wird.</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("click")}} ausgelöst wird.</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("close")}} ausgelöst wird.</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("contextmenu")}} ausgelöst wird.</dd> + <dt>{{domxref("GlobalEventHandlers.oncuechange")}}</dt> + <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("cuechange")}} ausgelöst wird.</dd> + <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> + <dd>Ist ein {{domxref("EventHandler")}}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("dblclick")}} ausgelöst wird.</dd> + <dt>{{domxref("GlobalEventHandlers.ondrag")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragend")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragenter")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragexit")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragleave")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragover")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondrop")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondurationchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onemptied")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onended")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oninvalid")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onloadeddata")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseenter")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseleave")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousewheel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandler.onmozfullscreenchange")}} {{non-standard_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandler.onmozfullscreenerror")}} {{non-standard_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpause")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onplay")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onplaying")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerdown")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointermove")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerup")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointercancel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerover")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerout")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerenter")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerleave")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onprogress")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onratechange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onseeked")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onseeking")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onshow")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onstalled")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onsuspend")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontimeupdate")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onvolumechange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontouchcancel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchcancel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontouchend")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchend")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontouchmove")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchmove")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontouchstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchstart")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onwaiting")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface defines no method.</em></p> + +<h2 id="Specifications">Specifications</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("Selection API",'', 'Extension to GlobalEventHandlers')}}</td> + <td>{{Spec2('Selection API')}}</td> + <td>Adds <code>onselectionchange.</code></td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Adds <code>onpointerlockchange</code> and <code>onpointerlockerror</code> on {{domxref("Document")}}. It is experimentally implemented on <code>GlobalEventHandlers</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onsort</code> since the {{SpecName("HTML5 W3C")}} snapshot.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>GlobalEventHandlers</code> (properties where on the target before it).</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>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncanplay</code>, <code>oncanplaythrough</code>, <code>ondurationchange</code>, <code>onemptied</code>, <code>onended</code>, <code>onloadeddata</code>, <code>onloadedmetadata</code>, <code>onloadstart</code>, <code>onpause</code>, <code>onplay</code>, <code>onplaying</code>, <code>onprogress</code>, <code>onratechange</code>, <code>onseeked</code>, <code>onseeking</code>, <code>onstalled</code>, <code>ontimeupdate</code>, <code>onvolumechange</code>, <code>onwaiting</code></td> + <td>{{CompatGeckoDesktop(1.9.1)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onsuspend</code></td> + <td>{{CompatGeckoDesktop(1.9.2)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ondrag</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondragstart</code>, <code>ondrop</code></td> + <td>{{CompatGeckoDesktop(1.9.1)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmouseenter</code>, <code>onmouseleave</code></td> + <td>{{CompatGeckoDesktop(10)}}</td> + <td>30.0</td> + <td>5.5</td> + <td>17</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ondragexit</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncancel</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onclose</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncuechange</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ondragexit</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmousewheel</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onsort</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmozfullscreenchange</code>, <code>onmozfullscreenerror</code> {{non-standard_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td> + <td>{{CompatGeckoDesktop(10)}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onpointercancel</code>, <code>onpointerdown</code>, <code>onpointerup</code>, <code>onpointermove</code>, <code>onpointerout</code>, <code>onpointerover</code>, <code>onpointerenter</code>, <code>onpointerleave</code></td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onselectionchange</code></td> + <td>{{CompatGeckoDesktop(43)}}<sup>[4]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ontouchend</code>, <code>ontouchcancel</code>, <code>ontouchmove</code>, <code>ontouchstart</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</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>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ondrag</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondragstart</code>, <code>ondrop</code></td> + <td>{{CompatGeckoMobile(1.9.1)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncanplay</code>, <code>oncanplaythrough</code>, <code>ondurationchange</code>, <code>onemptied</code>, <code>onended</code>, <code>onloadeddata</code>, <code>onloadedmetadata</code>, <code>onloadstart</code>, <code>onpause</code>, <code>onplay</code>, <code>onplaying</code>, <code>onprogress</code>, <code>onratechange</code>, <code>onseeked</code>, <code>onseeking</code>, <code>onstalled</code>, <code>ontimeupdate</code>, <code>onvolumechange</code>, <code>onwaiting</code></td> + <td>{{CompatGeckoMobile(1.9.1)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmouseenter</code>, <code>onmouseleave</code></td> + <td>{{CompatGeckoMobile(10)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onsuspend</code></td> + <td>{{CompatGeckoMobile(1.9.2)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ondragexit</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncancel</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onclose</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncuechange</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ondragexit</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmousewheel</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onsort</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmozfullscreenchange</code>, <code>onmozfullscreenerror</code> {{non-standard_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td> + <td>{{CompatGeckoMobile(10)}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onpointercancel</code>, <code>onpointerdown</code>, <code>onpointerup</code>, <code>onpointermove</code>, <code>onpointerout</code>, <code>onpointerover</code>, <code>onpointerenter</code>, <code>onpointerleave</code></td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onselectionchange</code></td> + <td>{{CompatGeckoMobile(43)}}<sup>[4]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ontouchend</code>, <code>ontouchcancel</code>, <code>ontouchmove</code>, <code>ontouchstart</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In Gecko this is implemented as <code>onmozpointerlockchange</code>, <code>onmozpointerlockerror</code>.</p> + +<p>[2] In Blink this is implemented as <code>onwebkitpointerlockchange</code>, <code>onwebkitpointerlockerror</code>.</p> + +<p>[3] This is implemented behind the <code>dom.w3c_pointer_events.enabled</code> preference, defaulting to <code>false</code>.</p> + +<p>[4] This is implemented behind the <code>dom.select_events.enabled</code> preference, that default to <code>false</code>, except on Nightly.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Element")}}</li> +</ul> diff --git a/files/de/web/api/globaleventhandlers/onclick/index.html b/files/de/web/api/globaleventhandlers/onclick/index.html new file mode 100644 index 0000000000..7b71eebd3a --- /dev/null +++ b/files/de/web/api/globaleventhandlers/onclick/index.html @@ -0,0 +1,88 @@ +--- +title: Globaler Eventhandler onclick +slug: Web/API/GlobalEventHandlers/onclick +tags: + - API + - HTML DOM + - Méthode + - Referencen +translation_of: Web/API/GlobalEventHandlers/onclick +--- +<div> +<div>{{ ApiRef("HTML DOM") }}</div> +</div> + +<div> </div> + +<p>Die <strong>onclick</strong> Methode gibt den c<code>lick</code>-<code>E</code>venthandler des Elementes zurück.</p> + +<div class="note"><strong>Note:</strong> Wenn man das <code>click</code>-<code>E</code>vent zum auslösen einer Aktion benutzt, kann man auch in Erwägung ziehen das man die selbe Aktion auf das <code>keydown</code>-Event legt, das erlaubt den Nutzern ohne Maus oder Touchscreen die Aktion trotzdem auszuführen.</div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>element</var>.onclick = <var>function</var>; +</pre> + +<p><var><span style="font-style: normal;">Anstelle von </span>function</var> wird der Methodenname eingetragen, der meistens etwas mit der Funktion der Methode zu tun hat. Siehe "<a href="/en-US/docs/JavaScript/Guide/Functions">JavaScript Guide:Functions</a>".</p> + +<p>Das Eventobject besteht aus der spezielen Eventhandlermethode die ein {{domxref("MouseEvent")}} ist.</p> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="de"> +<head> +<meta charset="UTF-8" /> +<title>onclick Event Beispiel</title> +<script> +function initElement() { + var p = document.getElementById("foo"); + // BEACHTE: showAlert(); oder showAlert(param); wird <u><strong style="color: red;">NICHT</strong></u> funktionieren. + // Es muss ein Methodenname und <u><strong style="color: red;">NICHT</strong></u> ein Methodenaufruf sein. + p.onclick = showAlert; +}; + +function showAlert() { + alert("onclick Event erkannt!") +} +</script> +<style> +#foo { + border: solid blue 2px; +} +</style> +</head> +<body onload="initElement();"> +<span id="foo">Mein Eventelement</span> +<p>Klicke auf das obenstehende Element</p> +</body> +</html> +</pre> + +<p>Oder man benutzt eine anonyme Methode, wie hier:</p> + +<pre class="brush:js">p.onclick = function() { alert("onclick Event erkannt!"); }; +</pre> + +<h2 id="Notes" name="Notes">Bemerkungen</h2> + +<p>Dieses Event wird ausgefürt wenn der Benutzer auf das Element klickt. Dieses Event wird nach dem Mousedown- und dem Mouseupevent ausgefürt.</p> + +<p>Nur ein Klickhandler kann zu einem Objekt hinzugefügt werden in dieser Variable gespeichert werden. Man kann auch die {{domxref("EventTarget.addEventListener()")}} Methode benutzen, seit es flexibel ist und teil der DOM Evente Spezifikation.</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>---</td> + </tr> + </tbody> +</table> diff --git a/files/de/web/api/globaleventhandlers/onload/index.html b/files/de/web/api/globaleventhandlers/onload/index.html new file mode 100644 index 0000000000..87f61085dd --- /dev/null +++ b/files/de/web/api/globaleventhandlers/onload/index.html @@ -0,0 +1,150 @@ +--- +title: GlobalEventHandlers.onload +slug: Web/API/GlobalEventHandlers/onload +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference + - onload +translation_of: Web/API/GlobalEventHandlers/onload +--- +<div>{{ApiRef()}}</div> + +<div>Die <strong><code>onload</code></strong>-Eigenschaft der {{domxref("GlobalEventHandlers")}} ist ein Ereignis-Handler für das <code>load</code>-Ereignis eines {{domxref("Window")}}s, {{domxref("XMLHttpRequest")}}s, {{htmlelement("img")}}-Elements, etc., der aufgerufen wird, wenn die Ressource fertig geladen hat.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval">window.onload = <em>funcRef</em>; +</pre> + +<h3 id="Value">Value</h3> + +<p><code>funcRef</code> ist die Handler-Funktion, die aufgerufen wird, wenn das <code>load</code>-Ereignis des Windows eintritt.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">window.onload = function() { + init(); + etwasAnderesTun(); +}; +</pre> + +<pre class="brush: html"><!doctype html> +<html> + <head> + <title>onload-Test</title> + // ES5 + <script> + function load() { + console.log("load-Ereignis festgestellt!"); + } + window.onload = load; + </script> + // ES2015 + <script> + const load = () => { + console.log("load-Ereignis festgestellt!"); + } + window.onload = load; + </script> + </head> + <body> + <p>Das load-Ereignis tritt ein, wenn das Dokument fertig geladen ist!</p> + </body> +</html> +</pre> + +<h2 id="Anmerkungen">Anmerkungen</h2> + +<p>Das <code>load</code>-Ereignis tritt am Ende des Dokumentladeprozesses ein. An diesem Punkt befinden sich alle Objekte des Dokuments im DOM und alle Grafiken, Skripte, Links und Sub-Frames sind vollständig geladen.</p> + +<p>Es gibt zudem <a href="https://developer.mozilla.org/de/docs/Web/Events">Gecko-spezifische DOM-Ereignisse</a> wie <code>DOMContentLoaded</code> und <code>DOMFrameContentLoaded</code> (welches mit {{domxref("EventTarget.addEventListener()")}} gehandhabt werden kann), die eintreten, nachdem sich der DOM der Seite aufgebaut hat, aber nicht darauf warten, dass andere Ressourcen fertig geladen wurden.</p> + +<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("HTML WHATWG", "webappapis.html#handler-onload", "onload")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Anfängliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><code>DOMContentLoaded</code>-Ereignis in <a href="/en-US/docs/Listening_to_events_in_Firefox_extensions#Simple_DOM_events">Listening to events: Simple DOM events</a></li> + <li>IIFE <a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression" rel="nofollow noreferrer">Immediately-invoked function expression</a></li> +</ul> diff --git a/files/de/web/api/globaleventhandlers/onresize/index.html b/files/de/web/api/globaleventhandlers/onresize/index.html new file mode 100644 index 0000000000..b9866678c3 --- /dev/null +++ b/files/de/web/api/globaleventhandlers/onresize/index.html @@ -0,0 +1,77 @@ +--- +title: GlobalEventHandlers.onresize +slug: Web/API/GlobalEventHandlers/onresize +tags: + - API + - DOM + - Property +translation_of: Web/API/GlobalEventHandlers/onresize +--- +<p>{{ ApiRef() }}</p> + +<p>Die <strong>GlobalEventHandlers.onresize</strong> Property enthält einen {{domxref("EventHandler")}}, der ausgelöst wird, sobald ein {{event("resize")}}-Event empfangen wird.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval">window.onresize = <em>funcRef</em>; +</pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<ul> + <li><code>funcRef</code> ist eine Referenz auf eine Funktion.</li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre>window.onresize = doFunc; +</pre> + +<pre><html> +<head> + +<title>onresize Test</title> + +</head> + +<body> +<p>Verändere die Größe des Browser Fensters, um den resize-Event auszulösen.</p> + +<p>Window height: <span id="height"></span></p> +<p>Window width: <span id="width"></span></p> + +<script type="text/javascript"> + var heightOutput = document.querySelector('#height'); + var widthOutput = document.querySelector('#width'); + + function resize() { + heightOutput.textContent = window.innerHeight; + widthOutput.textContent = window.innerWidth; + } + + window.onresize = resize; +</script> +</body> +</html> +</pre> + +<h2 id="Notes" name="Notes">Anmerkung</h2> + +<p>Das resize-Event wird ausgelöst nachdem die Größe des Fensters verändert wurde.</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/de/web/api/htmlcanvaselement/index.html b/files/de/web/api/htmlcanvaselement/index.html new file mode 100644 index 0000000000..3083824dc8 --- /dev/null +++ b/files/de/web/api/htmlcanvaselement/index.html @@ -0,0 +1,242 @@ +--- +title: HTMLCanvasElement +slug: Web/API/HTMLCanvasElement +tags: + - API + - Canvas + - Graphiken + - WebGL +translation_of: Web/API/HTMLCanvasElement +--- +<div> +<div>{{APIRef("Canvas API")}}</div> +</div> + +<p>Das <strong><code>HTMLCanvasElement</code></strong> interface bietet Eigenschaften und Methoden zum Manipulieren des Layouts und der Darstellung des <code><canvas></code>-Elements. Das <code>HTMLCanvasElement</code> interface erbt außerdem Eigenschaften und Methoden des {{domxref("HTMLElement")}} interface.</p> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<p><em>Erbt Eigenschaften von seinem Elternelement, </em><em>{{domxref("HTMLElement")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLCanvasElement.height")}}</dt> + <dd>Ein positiver <code>integer</code>, der das {{htmlattrxref("height", "canvas")}} HTML-Attribut des {{HTMLElement("canvas")}} Elements in CSS-Pixeln repräsentiert. Wenn nicht definiert oder wenn es auf einen nicht erlaubten Wert (z.B. einen negativen Wert) gesetzt wird, wird der Standardwert <strong>150</strong> verwendet.</dd> + <dt>{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}</dt> + <dd>Ein {{jsxref("Boolean")}}, der das {{htmlattrxref("moz-opaque", "canvas")}} HTML-Attribut des {{HTMLElement("canvas")}} Elements repräsentiert. Es sagt dem canvas, ob auf Transparenz verzichtet werden soll. Falls <code>true</code>, kann das Zeichnen auf dem canvas beschleunigt werden.</dd> + <dt>{{domxref("HTMLCanvasElement.width")}}</dt> + <dd>Ein positiver <code>integer</code>, der das {{htmlattrxref("width", "canvas")}} HTML-Attribut des {{HTMLElement("canvas")}} Elements in CSS-Pixeln anzeigt. Wenn nicht definiert oder wenn es auf einen nicht erlaubten Wert (z.B. einen negativen Wert) gesetzt wird, wird der Standardwert <strong>300</strong> verwendet.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<p><em>Erbt Eigenschaften von seinem Elternelement, </em><em>{{domxref("HTMLElement")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt> + <dd>Gibt ein {{domxref("CanvasCaptureMediaStream")}} zurück, dieses ist ein Echtzeit-Video der Oberfläche des canvas.</dd> + <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt> + <dd>Gibt einen context des canvas zurück oder <code>null</code>, falls die context-ID nicht unterstützt wird. Ein context ermöglicht es, auf dem canvas zu zeichnen. Der Aufruf dieser Methode mit <code>"2d"</code> gibt ein {{domxref("CanvasRenderingContext2D")}} Objekt zurück, während er mit <code>"experimental-webgl"</code> oder <code>"webgl"</code> ein {{domxref("WebGLRenderingContext")}} Objekt zurückgibt. Dieser context ist nur bei Browsern möglich, die <a href="/en-US/docs/Web/WebGL">WebGL</a> unterstützen.</dd> + <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt> + <dd>Returns a data-URL containing a representation of the image in the format specified by the <code>type</code> parameter (defaults to <code>png</code>). The returned image is in a resolution of 96dpi.</dd> + <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt> + <dd>Creates a {{domxref("Blob")}} object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.</dd> + <dt>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}</dt> + <dd>Transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main thread or on a worker.</dd> + <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Returns a {{domxref("File")}} object representing the image contained in the canvas; this file is a memory-based file, with the specified <code>name</code>. If <code>type</code> is not specified, the image type is <code>image/png</code>.</dd> +</dl> + +<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('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}</td> + <td>{{Spec2('Media Capture DOM Elements')}}</td> + <td>Adds the method <code>captureStream()</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>The method <code>getContext()</code> now returns a {{domxref("RenderingContext")}} rather than an opaque <code>object</code>.<br> + The methods <code>probablySupportsContext()</code>, <code>setContext()</code> and <code>transferControlToProxy()</code>have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (<code>2D</code> context)</td> + <td>4.0</td> + <td>{{CompatGeckoDesktop('1.9.2')}}</td> + <td>9.0</td> + <td>9.0 [1]</td> + <td>3.1</td> + </tr> + <tr> + <td><code>toBlob()</code></td> + <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td> + <td>{{CompatGeckoDesktop('19')}} [2]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td> + </tr> + <tr> + <td><code>probablySupportsContext()</code>,<br> + <code>setContext()</code>,<br> + <code>transferControlToProxy()</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop('2')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>captureStream()</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop('41')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(44)}} [3]</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 (<code>2D</code> context)</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>10.0 [1]</td> + <td>3.2</td> + </tr> + <tr> + <td><code>webgl</code> context</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} as <code>experimental-webgl</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>toBlob()</code></td> + <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td> + <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td> + <td>{{CompatGeckoMobile('18')}} [2]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td> + </tr> + <tr> + <td><code>probablySupportsContext()</code>,<br> + <code>setContext()</code>,<br> + <code>transferControlToProxy() </code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile('2')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>captureStream() </code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile('41')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(44)}} [3]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Opera Mini 5.0 and later has partial support.</p> + +<p>[2] Support for the third parameter, has been added in Gecko 25 only: when used with the <code>"image/jpeg"</code> type, this argument specifies the image quality.</p> + +<p>[3] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>HTML element implementing this interface: {{HTMLElement("canvas")}}.</li> +</ul> diff --git a/files/de/web/api/htmlcanvaselement/todataurl/index.html b/files/de/web/api/htmlcanvaselement/todataurl/index.html new file mode 100644 index 0000000000..c0a0a900d4 --- /dev/null +++ b/files/de/web/api/htmlcanvaselement/todataurl/index.html @@ -0,0 +1,206 @@ +--- +title: HTMLCanvasElement.toDataURL() +slug: Web/API/HTMLCanvasElement/toDataURL +tags: + - API + - Canvas + - DataURI erstellen + - HTMLCanvasElement + - Method + - Methode(2) + - Referenz +translation_of: Web/API/HTMLCanvasElement/toDataURL +--- +<div> +<div> +<div>{{APIRef("Canvas API")}}</div> +</div> +</div> + +<p>Die <strong><code>HTMLCanvasElement.toDataURL()</code></strong>-Methode gibt eine Repräsentation des Bildes als <a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a> zurück. Das gewünschte Format wird mit den angegebenen Parametern definiert (standardmäßig <a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a>). Das zurückgegebene Bild besitzt eine Auflösung von 96 dpi.</p> + +<ul> + <li>Wenn die Höhe oder die Breite des Canvas<font face="Consolas, Liberation Mono, Courier, monospace"> 0 </font>ist, wird der String <code>"data:,"</code> zurückgegeben.</li> + <li>Wenn die Art der Anfrage nicht <code>image/png</code> ist, aber der zurückgegebene Wert mit <code>data:image/png</code> beginnt, dann wird die Anfrage nicht unterstützt.</li> + <li>Chrome unterstützt außerdem den Typ <code>image/webp</code>.</li> +</ul> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var><em>canvas</em>.toDataURL(<em>type</em>, <em>encoderOptions</em>);</var> +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>type</code> {{optional_inline}}</dt> + <dd>Ein Parameter vom Typ {{domxref("DOMString")}} bestimmt das Bild-Format. Der Standard type ist <code>image/png</code>.</dd> + <dt><code>encoderOptions</code> {{optional_inline}}</dt> + <dd>Ein Parameter vom Typ {{jsxref("Number")}} zwischen <code>0</code> und <code>1</code> gibt die Bildqualität an, wenn der Anfragetyp <code>image/jpeg </code>oder <code>image/webp ist</code>.<br> + Wenn das Argument irgend etwas anderes enthält, wird der Standardwert für die Bildqualität verwendet. Der Standardwert liegt bei <code>0.92</code>. Andere Argumente werden ignoriert.</dd> +</dl> + +<h3 id="Rückgabewerte">Rückgabewerte</h3> + +<p>Ein Rückgabewert vom Typ {{domxref("DOMString")}} beinhaltet die angefragte <a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a>.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Es ist folgendes {{HTMLElement("canvas")}} Element gegeben:</p> + +<pre class="brush: html"><canvas id="canvas" width="5" height="5"></canvas> +</pre> + +<p>Mit den folgenden Zeilen erhalten Sie die data-URL des Canvas:</p> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var dataURL = canvas.toDataURL(); +console.log(dataURL); +// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby +// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC" +</pre> + +<h3 id="Die_Bildqualität_für_jpegs_einstellen">Die Bildqualität für jpegs einstellen</h3> + +<pre class="brush: js">var fullQuality = canvas.toDataURL("image/jpeg", 1.0); +// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z" +var mediumQuality = canvas.toDataURL("image/jpeg", 0.5); +var lowQuality = canvas.toDataURL("image/jpeg", 0.1); +</pre> + +<h3 id="Example:_Dynamically_change_images" name="Example:_Dynamically_change_images">Beispiel: Dynamisches Ändern von Bildern</h3> + +<p>Sie können diese Technik in Verbindung mit Maus-Events nutzen, um dynamisch Bilder abzuändern (in diesem Beispiel schwarz-weiß und farbig):</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><img class="schwarz-weiss" src="myPicture.png" alt="Beschreibung meines Bildes" /></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js;highlight:[33]">window.addEventListener("load", removeColors); + +function showColorImg() { + this.style.display = "none"; + this.nextSibling.style.display = "inline"; +} + +function showGrayImg() { + this.previousSibling.style.display = "inline"; + this.style.display = "none"; +} + +function removeColors() { + var aImages = document.getElementsByClassName("schwarz-weiss"), + nImgsLen = aImages.length, + oCanvas = document.createElement("canvas"), + oCtx = oCanvas.getContext("2d"); + for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) { + oColorImg = aImages[nImgId]; + nWidth = oColorImg.offsetWidth; + nHeight = oColorImg.offsetHeight; + oCanvas.width = nWidth; + oCanvas.height = nHeight; + oCtx.drawImage(oColorImg, 0, 0); + oImgData = oCtx.getImageData(0, 0, nWidth, nHeight); + aPix = oImgData.data; + nPixLen = aPix.length; + for (nPixel = 0; nPixel < nPixLen; nPixel += 4) { + aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3; + } + oCtx.putImageData(oImgData, 0, 0); + oGrayImg = new Image(); + oGrayImg.src = oCanvas.toDataURL(); + oGrayImg.onmouseover = showColorImg; + oColorImg.onmouseout = showGrayImg; + oCtx.clearRect(0, 0, nWidth, nHeight); + oColorImg.style.display = "none"; + oColorImg.parentNode.insertBefore(oGrayImg, oColorImg); + } +}</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">Kommentare</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderungen seit letztem Schnappschuss, {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Schnappschuss von {{SpecName('HTML WHATWG')}} beinhaltet ursprüngliche Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatiblität">Browser-Kompatiblitä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(4) }}</td> + <td>{{ CompatGeckoDesktop("1.9.2") }}</td> + <td>{{ CompatIE(9) }}</td> + <td>{{ CompatOpera(9) }}</td> + <td>{{ CompatSafari(4.0) }}</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>{{ CompatAndroid(3.2) }}</td> + <td>{{ CompatAndroid(18) }}</td> + <td>{{ CompatGeckoMobile("1.9.2") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatOpera(19) }}</td> + <td><span style="font-size: 12px; line-height: 18px;">{{ CompatSafari(3.0) }}</span></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">Schauen Sie auch unter</h2> + +<ul> + <li>Das Interface definiert, {{domxref("HTMLCanvasElement")}}.</li> + <li><a href="/en-US/docs/Web/HTTP/data_URIs">Data URIs</a> in der <a href="/en-US/docs/Web/HTTP">HTTP</a> Referenz.</li> +</ul> diff --git a/files/de/web/api/htmlcanvaselement/webglcontextcreationerror_event/index.html b/files/de/web/api/htmlcanvaselement/webglcontextcreationerror_event/index.html new file mode 100644 index 0000000000..244bbcc76e --- /dev/null +++ b/files/de/web/api/htmlcanvaselement/webglcontextcreationerror_event/index.html @@ -0,0 +1,132 @@ +--- +title: webglcontextcreationerror +slug: Web/API/HTMLCanvasElement/webglcontextcreationerror_event +tags: + - Event + - WebGL + - WebGLContextEvent +translation_of: Web/API/HTMLCanvasElement/webglcontextcreationerror_event +--- +<div>{{APIRef}}</div> + +<div> +<p>Das <code><strong>webglcontextcreationerror</strong></code> Event der <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> wird ausgelöst, wenn der User-Agent nicht in der Lage ist einen {{domxref("WebGLRenderingContext")}} zu erzeugen.</p> + +<p>Das Event hat die Eigenschaft {{domxref("WebGLContextEvent.statusMessage")}}, die einen plattformabhängigen String mit weiteren Informationen über den Fehler enthält.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td>Bubbles</td> + <td>Ja</td> + </tr> + <tr> + <td>Cancelable</td> + <td>Ja</td> + </tr> + <tr> + <td>Zielobjekt</td> + <td>{{domxref("HTMLCanvasElement")}}</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("WebGLContextEvent")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); + +canvas.addEventListener("webglcontextcreationerror", function(e) { + console.log(e.statusMessage || "Unknown error"); +}, false); + +var gl = canvas.getContext("webgl"); +// logs statusMessage or "Unknown error" if unable to create WebGL context +</pre> + +<h2 id="Vererbung">Vererbung</h2> + +<p>Das <code>webglcontextcreationerror</code> Event implementiert das {{domxref("WebGLContextEvent")}} Interface, welches die Eigenschaften und Methoden von {{domxref("Event")}} erbt.</p> + +<p>{{InheritanceDiagram('','','', 'WebGLContextEvent')}}</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">Hinweis</th> + </tr> + <tr> + <td>{{SpecName('WebGL', '#5.15.4', 'webglcontextcreationerror')}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Grundlegende Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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("9")}}</td> + <td>{{CompatGeckoDesktop(49)}}</td> + <td>{{CompatIE("11")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.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>25</td> + <td>{{CompatGeckoMobile(49)}}</td> + <td>{{CompatUnknown}}</td> + <td>12</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("WebGLContextEvent")}}</li> + <li>{{domxref("WebGLRenderingContext.isContextLost()")}}</li> + <li>{{domxref("WEBGL_lose_context")}}, {{domxref("WEBGL_lose_context.loseContext()")}}, {{domxref("WEBGL_lose_context.restoreContext()")}}</li> +</ul> diff --git a/files/de/web/api/htmlcanvaselement/webglcontextlost_event/index.html b/files/de/web/api/htmlcanvaselement/webglcontextlost_event/index.html new file mode 100644 index 0000000000..786d9e49b9 --- /dev/null +++ b/files/de/web/api/htmlcanvaselement/webglcontextlost_event/index.html @@ -0,0 +1,133 @@ +--- +title: webglcontextlost +slug: Web/API/HTMLCanvasElement/webglcontextlost_event +tags: + - Event + - WebGL + - WebGLContextEvent +translation_of: Web/API/HTMLCanvasElement/webglcontextlost_event +--- +<div>{{APIRef}}</div> + +<div> +<p>Das <code><strong>webglcontextlost</strong></code> Event der <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> wird ausgelöst, wenn der User-Agent feststellt, dass der mit dem {{domxref("WebGLRenderingContext")}}-Objekt verknüpften Drawing Buffer verloren gegangen ist.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td>Bubbles</td> + <td>Ja</td> + </tr> + <tr> + <td>Cancelable</td> + <td>Ja</td> + </tr> + <tr> + <td>Zielobjekt</td> + <td>{{domxref("HTMLCanvasElement")}}</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("WebGLContextEvent")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Mit der Hilfe der {{domxref("WEBGL_lose_context")}} Extension kann das <code>webglcontextlost</code> Event simuliert werden:</p> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var gl = canvas.getContext("webgl"); + +canvas.addEventListener("webglcontextlost", function(e) { + console.log(e); +}, false); + +gl.getExtension('WEBGL_lose_context').loseContext(); + +// "webglcontextlost" event is logged.</pre> + +<h2 id="Vererbung">Vererbung</h2> + +<p>Das <code>webglcontextlost</code> Event implementiert das {{domxref("WebGLContextEvent")}} Interface, welches die Eigenschaften und Methoden von {{domxref("Event")}} erbt.</p> + +<p>{{InheritanceDiagram('','','', 'WebGLContextEvent')}}</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">Hinweis</th> + </tr> + <tr> + <td>{{SpecName('WebGL', '#5.15.2', 'webglcontextlost')}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Grundlegende Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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("9")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("11")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.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>25</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>12</td> + <td>8.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("WebGLContextEvent")}}</li> + <li>{{domxref("WebGLRenderingContext.isContextLost()")}}</li> + <li>{{domxref("WEBGL_lose_context")}}, {{domxref("WEBGL_lose_context.loseContext()")}}, {{domxref("WEBGL_lose_context.restoreContext()")}}</li> +</ul> diff --git a/files/de/web/api/htmlcanvaselement/webglcontextrestored_event/index.html b/files/de/web/api/htmlcanvaselement/webglcontextrestored_event/index.html new file mode 100644 index 0000000000..fc616cccdd --- /dev/null +++ b/files/de/web/api/htmlcanvaselement/webglcontextrestored_event/index.html @@ -0,0 +1,135 @@ +--- +title: webglcontextrestored +slug: Web/API/HTMLCanvasElement/webglcontextrestored_event +tags: + - Event + - WebGL + - WebGLContextEvent +translation_of: Web/API/HTMLCanvasElement/webglcontextrestored_event +--- +<div>{{APIRef}}</div> + +<div> +<p>Das <code><strong>webglcontextrestored</strong></code> Event der <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> wird ausgelöst, wenn der User-Agent den Drawing Buffer das {{domxref("WebGLRenderingContext")}}-Objekts wiederhergestellt hat.</p> + +<p>Wenn der Context wiederhergestellt wurde, sind alle zuvor erzeugten WebGL-Ressourcen wie Texturen und Buffer nicht mehr gültig. Die WebGL-Applikation muss dann neu initalisiert und alle Ressourcen neu erstellt werden.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td>Bubbles</td> + <td>Yes</td> + </tr> + <tr> + <td>Cancelable</td> + <td>Yes</td> + </tr> + <tr> + <td>Zielobjekt</td> + <td>{{domxref("HTMLCanvasElement")}}</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("WebGLContextEvent")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Mit der Hilfe der {{domxref("WEBGL_lose_context")}} Extension kann das <code>webglcontextrestored</code> Event simuliert werden:</p> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var gl = canvas.getContext("webgl"); + +canvas.addEventListener("webglcontextrestored", function(e) { + console.log(e); +}, false); + +gl.getExtension('WEBGL_lose_context').restoreContext(); + +// "webglcontextrestored" event is logged.</pre> + +<h2 id="Vererbung">Vererbung</h2> + +<p>Das <code>webglcontextrestored</code> Event implementiert das {{domxref("WebGLContextEvent")}} Interface, welches die Eigenschaften und Methoden von {{domxref("Event")}} erbt.</p> + +<p>{{InheritanceDiagram('','','', 'WebGLContextEvent')}}</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">Hinweis</th> + </tr> + <tr> + <td>{{SpecName('WebGL', '#5.15.3', 'webglcontextrestored')}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Grundlegende Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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("9")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("11")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.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>25</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>12</td> + <td>8.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("WebGLContextEvent")}}</li> + <li>{{domxref("WebGLRenderingContext.isContextLost()")}}</li> + <li>{{domxref("WEBGL_lose_context")}}, {{domxref("WEBGL_lose_context.loseContext()")}}, {{domxref("WEBGL_lose_context.restoreContext()")}}</li> +</ul> diff --git a/files/de/web/api/htmlcollection/index.html b/files/de/web/api/htmlcollection/index.html new file mode 100644 index 0000000000..b09998b7d4 --- /dev/null +++ b/files/de/web/api/htmlcollection/index.html @@ -0,0 +1,70 @@ +--- +title: HTMLCollection +slug: Web/API/HTMLCollection +translation_of: Web/API/HTMLCollection +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>Die <strong><code>HTMLCollection</code></strong> repräsentiert eine generische Sammlung (Array-ähnliches Objekt) an Elementen (in Dokumentreihenfolge) und bietet Methoden und Eigenschaften zur Auswahl dieser aus einer Liste an.</p> + +<div class="note"><strong>Notiz:</strong> Diese Schnittstelle wird aus historischen Gründen <code>HTMLCollection</code> genannt (vor DOM4 konnten Sammlungen, die diese Schnittstelle implementierten, nur HTML-Elemente als Einträge haben).</div> + +<p>Eine <code>HTMLCollection</code> in der HTML DOM ist live; sie wird automatisch aktualisiert, wenn das zugrundeliegende Dokument verändert wird.</p> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<dl> + <dt>{{domxref("HTMLCollection.length")}} {{readonlyInline}}</dt> + <dd>Gibt die Anzahl der Elemente in der Auflistung zurück.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<dl> + <dt>{{domxref("HTMLCollection.item()")}}</dt> + <dd>Gibt den spezifischen Knoten am angegebenen nullbasierten <code>index</code> in die Liste zurück.<br> + Gibt <code>null</code> zurück, wenn der <code>index</code> außerhalb des Bereichs ist.</dd> + <dt>{{domxref("HTMLCollection.namedItem()")}}</dt> + <dd>Gibt den spezifischen Knoten, dessen ID oder alternativ dessen Name auf die Zeichenkette (spezifiziert durch <code>name</code>) passt, zurück. Die Übereinstimmung des Namens wird nur als letzte Möglichkeit, nur in HTML, und nur, wenn das referenzierte Element das <code>name</code> Attribut unterstützt, durchgeführt.<br> + Gibt <code>null</code> zurück, wenn kein Code des angegebenen Namens existiert.</dd> +</dl> + +<h2 id="Verwendung_in_JavaScript">Verwendung in JavaScript</h2> + +<p><code>HTMLCollection</code> setzt auch seine Member direkt als Eigenschaften von <code>name</code> und <code>index</code>. HTML IDs können Doppelpunkte und Punkte als gültige Zeichen beinhalten, was das Verwenden von Klammern für den Zugriff auf Eigenschaften erfordert. Derzeit erkennt <code>HTMLCollections </code>rein numerische IDs nicht, da sie einen Konflikt mit dem Array-ähnlichen Zugriff verursachen würden, obwohl HTML5 dies erlaubt.</p> + +<p>Zum Beispiel, unter der Annahme, dass es ein <code><form></code> Element im Dokument und die <code>id</code> <code>"myForm"</code> ist:</p> + +<pre class="brush:js">var elem1, elem2; + +// document.forms ist eine HTMLCollection + +elem1 = document.forms[0]; +elem2 = document.forms.item(0); + +alert(elem1 === elem2); // zeigt: "true" + +elem1 = document.forms.myForm; +elem2 = document.forms.namedItem("myForm"); + +alert(elem1 === elem2); // zeigt: "true" + +elem1 = document.forms["bennantes.Element.mit.Punkten"];</pre> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>Verschiedene Browser verhalten sich unterschiedlich, wenn es mehr als ein Element gibt, das auf die Zeichenkette passt, die als ein index (oder <code>namedItem</code>s Argument) verwendet wird. Firefox 8 verhält sich wie in DOM 2 and DOM4 angegeben, und gibt das erste passende Element zurück. WebKit Browser und Internet Explorer geben in diesem Fall eine andere <code>HTMLCollection</code> und Opera eine {{domxref("NodeList")}} aller passenden Elemente zurück.</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506" title="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506">DOM Level 2 HTML, Section 1.4, Miscellaneous Object Definitions</a></li> + <li><a href="http://www.w3.org/TR/domcore/#interface-htmlcollection" title="http://www.w3.org/TR/domcore/#interface-htmlcollection">DOM4: HTMLCollection</a></li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("NodeList")}}</li> + <li>{{domxref("HTMLFormControlsCollection")}}, {{domxref("HTMLOptionsCollection")}}</li> +</ul> diff --git a/files/de/web/api/htmlformelement/elements/index.html b/files/de/web/api/htmlformelement/elements/index.html new file mode 100644 index 0000000000..e5be5603ac --- /dev/null +++ b/files/de/web/api/htmlformelement/elements/index.html @@ -0,0 +1,46 @@ +--- +title: HTMLFormElement.elements +slug: Web/API/HTMLFormElement/elements +translation_of: Web/API/HTMLFormElement/elements +--- +<div> +<div>APIRef("HTML DOM")</div> +</div> + +<p>Die <code><strong>HTMLFormElement.elements</strong></code> Eigenschaft gibt eine domxref("HTMLFormControlsCollection") ( HTMLVersionInline(4) <code><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506">HTMLCollection</a></code>) aller im FORM element enthaltenen Formularsteuerelemente zurück, mit Ausnahme von <a href="/en-US/docs/HTML/Element/Input" title="input"><code>input</code></a> , die ein <code>type</code> attribute haben von <code>image</code>.</p> + +<p><span id="result_box" lang="de"><span>Sie können auf ein bestimmtes Element zugreifen, indem Sie entweder einen Index oder den Elementnamen oder die ID verwenden.</span></span></p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><em>nodeList</em> = <em>HTMLFormElement</em>.elements +</pre> + +<h2 id="Example" name="Example">Beschreibung</h2> + +<pre class="brush:js notranslate">let inputs = document.getElementById("form1").elements; +let inputByIndex = inputs[2]; +let inputByName = inputs["login"]; +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikationen</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('HTML WHATWG', '#dom-form-elements', 'HTMLFormElement.elements')</td> + <td> Spec2('HTML WHATWG')</td> + <td></td> + </tr> + <tr> + <td>SpecName("DOM2 HTML", "html.html#ID-76728479", "HTMLFormElement.elements")</td> + <td>Spec2("DOM2 HTML")</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/de/web/api/htmlformelement/index.html b/files/de/web/api/htmlformelement/index.html new file mode 100644 index 0000000000..45fbc2e027 --- /dev/null +++ b/files/de/web/api/htmlformelement/index.html @@ -0,0 +1,260 @@ +--- +title: HTMLFormElement +slug: Web/API/HTMLFormElement +tags: + - API + - DOM + - HTML + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLFormElement +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>The <strong><code>HTMLFormElement</code></strong> interface provides methods to create and modify {{HTMLElement("form")}} elements.</p> + +<ul> + <li><strong>document.forms</strong> - returns an array of HTMLFormElement objects referencing all forms on the page.</li> + <li><strong>document.forms[index] </strong>- returns an HTMLFormElement object referencing the form at the specified index.</li> + <li><strong>document.forms['id'] </strong>- returns an HTMLFormElement object referencing the form with the specified id.</li> + <li><strong>document.forms['name'] </strong>- returns an HTMLFormElement object referencing the form with the specified name.</li> +</ul> + +<p>{{InheritanceDiagram(600,120)}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface also inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLFormElement.elements")}}{{ReadOnlyInline}}</dt> + <dd>A {{domxref("HTMLFormControlsCollection")}} holding all form controls belonging to this form element.</dd> + <dt>{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}</dt> + <dd>A <code>long</code> reflecting the number of controls in the form.</dd> + <dt>{{domxref("HTMLFormElement.name")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.</dd> + <dt>{{domxref("HTMLFormElement.method")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.</dd> + <dt>{{domxref("HTMLFormElement.target")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("target", "form") }} HTML attribute, indicating where to display the results received from submitting the form.</dd> + <dt>{{domxref("HTMLFormElement.action")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.</dd> + <dt>{{domxref("HTMLFormElement.encoding")}} or {{domxref("HTMLFormElement.enctype")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("enctype", "form") }} HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set. The two methods are synonyms.</dd> + <dt>{{domxref("HTMLFormElement.acceptCharset")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("accept-charset", "form") }} HTML attribute, representing the character encoding that the server accepts.</dd> + <dt>{{domxref("HTMLFormElement.autocomplete")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("autocomplete", "form") }} HTML attribute, indicating whether the controls in this form can have their values automatically populated by the browser.</dd> + <dt>{{domxref("HTMLFormElement.noValidate")}}</dt> + <dd>A {{jsxref("Boolean")}} reflecting the value of the form's {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating whether the form should not be validated.</dd> +</dl> + +<p>Named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (eg a form with an input named <code>action</code> will have its <code>action</code> property return that input instead of the form's {{ htmlattrxref("action", "form") }} HTML attribute).</p> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface also inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLFormElement.submit()")}}</dt> + <dd>Submits the form to the server.</dd> + <dt>{{domxref("HTMLFormElement.reset()")}}</dt> + <dd>Resets the form to its initial state.</dd> + <dt>{{domxref("HTMLFormElement.checkValidity()")}}</dt> + <dd>Returns <code>true</code> if the element's child controls are subject to constraint validation and satisfy those contraints; returns <code>false</code> if some controls do not satisfy their constraints. Fires an event named {{event("invalid")}} at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to <code>false</code>.</dd> + <dt>{{domxref("HTMLFormElement.reportValidity()")}}</dt> + <dd>Returns <code>true</code> if the element's child controls satisfy their validation constraints. When <code>false</code> is returned, cancelable {{Event("invalid")}} events are fired for each invalid child and validation problems are reported to the user.</dd> + <dt>{{domxref("HTMLFormElement.requestAutocomplete()")}} {{obsolete_inline}}</dt> + <dd>Triggers a native browser interface to assist the user in completing the fields which have an <a href="https://html.spec.whatwg.org/#autofill-field-name">autofill field name</a> value that is not <code>off</code> or <code>on</code>. The form will receive an event once the user has finished with the interface, the event will either be {{event("autocomplete")}} when the fields have been filled or {{event("autocompleteerror")}} when there was a problem. <strong>This method has been removed from Chrome and Firefox — see {{bug(1270740)}} for background information on why.</strong></dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>Create a new form element, modify its attributes and submit it:</p> + +<pre class="brush: js">var f = document.createElement("form");// Create a form +document.body.appendChild(f); // Add it to the document body +f.action = "/cgi-bin/some.cgi"; // Add action and method attributes +f.method = "POST" +f.submit(); // Call the form's submit method +</pre> + +<p>Extract information from a form element and set some of its attributes:</p> + +<pre class="brush: html"><form name="formA" id="formA" action="/cgi-bin/test" method="POST"> + <p>Click "Info" for form details; "Set" to change settings.</p> + <p> + <input type="button" value="info" onclick="getFormInfo();"> + <input type="button" value="set" onclick="setFormInfo(this.form);"> + <input type="reset" value="reset"><br> + <textarea id="tex" style="height:15em; width:20em"></textarea> + </p> +</form> + +<script type="text/javascript"> + function getFormInfo(){ + var info; + var f = document.forms["formA"]; //Get a reference to the form via id. + info = "elements: " + f.elements + "\n" + + "length: " + f.length + "\n" + + "name: " + f.name + "\n" + + "charset: " + f.acceptCharset+ "\n" + + "action: " + f.action + "\n" + + "enctype: " + f.enctype + "\n" + + "encoding: " + f.encoding + "\n" + + "method: " + f.method + "\n" + + "target: " + f.target; + document.forms["formA"].elements['tex'].value = info; + } + function setFormInfo(f){ //Argument is a reference to the form. + f.method = "GET"; + f.action = "/cgi-bin/evil_executable.cgi"; + f.name = "totally_new"; + } +</script> +</pre> + +<p>Submit a form in a <a href="/en-US/docs/Web/API/Window/open">popup window</a>:</p> + +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>MDN Example</title> +<script type="text/javascript"> +function popupSend (oFormElement) { + if (oFormElement.method && oFormElement.method.toLowerCase() !== "get") { + console.error("This script supports the GET method only."); + return; + } + var oField, sFieldType, nFile, sSearch = ""; + for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) { + oField = oFormElement.elements[nItem]; + if (!oField.hasAttribute("name")) { continue; } + sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; + if (sFieldType === "FILE") { + for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name)); + } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { + sSearch += "&" + escape(oField.name) + "=" + escape(oField.value); + } + } + open(oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), "submit-" + (oFormElement.name || Math.floor(Math.random() * 1e6)), "resizable=yes,scrollbars=yes,status=yes"); +} +</script> + +</head> + +<body> + +<form name="yourForm" action="test.php" method="get" onsubmit="popupSend(this); return false;"> + <p>First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Password: <input type="password" name="pwd" /><br /> + <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female</p> + <p><input type="checkbox" name="vehicle" value="Bike" />I have a bike<br /> + <input type="checkbox" name="vehicle" value="Car" />I have a car</p> + <p><input type="submit" value="Submit" /></p> +</form> + +</body> +</html></pre> + +<h3 id="Submitting_forms_and_uploading_files_using_XMLHttpRequest">Submitting forms and uploading files using <code>XMLHttpRequest</code></h3> + +<p>If you want to know how to serialize and submit a form using the {{domxref("XMLHttpRequest")}} API, please read <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">this paragraph</a>.</p> + +<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('HTML WHATWG', "forms.html#the-form-element", "HTMLFormElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>The following method has been added: <code>requestAutocomplete()</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>The elements properties returns an {{domxref("HTMLFormControlsCollection")}} instead of a raw {{domxref("HTMLCollection")}}. This is mainly a technical change. The following method has been added: <code>checkValidity()</code>. The following properties have been added: <code>autocomplete</code>, <code>noValidate</code>, and <code>encoding</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.0)}}<sup>[1]</sup></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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1.0)}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In Firefox 56, the implementation has been updated so that the <code>action</code> property returns the correct form submission URL, as per spec ({{bug(1366361)}}).</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The HTML element implementing this interface: {{ HTMLElement("form") }}.</li> +</ul> diff --git a/files/de/web/api/htmlformelement/submit_event/index.html b/files/de/web/api/htmlformelement/submit_event/index.html new file mode 100644 index 0000000000..722fba4d46 --- /dev/null +++ b/files/de/web/api/htmlformelement/submit_event/index.html @@ -0,0 +1,76 @@ +--- +title: submit +slug: Web/API/HTMLFormElement/submit_event +tags: + - Event + - submit +translation_of: Web/API/HTMLFormElement/submit_event +--- +<p>Das <code>submit</code> Event tritt ein, wenn ein Formular (<code><form ...></form></code>) abgeschickt wird.</p> + +<p>Es gilt zu beachten, dass das <code>submit</code> Event <strong>nur</strong> auf dem Formularelement ausgelöst wird. Der auslösende <code><button></code> oder <code><input type="submit" ... /></code> erhalten das Event nicht (Es wird das Formular abgeschickt, nicht der Button).</p> + +<h2 id="Allgemein">Allgemein</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Spezifikation</strong></td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></td> + </tr> + <tr> + <td><strong>Interface</strong></td> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <td><strong>Propagiert ("Bubbles")</strong></td> + <td>Ja (obwohl eigentlich einfach Event ohne Propagation)</td> + </tr> + <tr> + <td><strong>Cancelable</strong></td> + <td>Ja</td> + </tr> + <tr> + <td><strong>Ziel</strong></td> + <td>Element</td> + </tr> + <tr> + <td><strong>Standardaktion</strong></td> + <td>Abhängig von Implementierung (schickt Inhalt des Formulars zum Server)</td> + </tr> + </tbody> +</table> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> diff --git a/files/de/web/api/htmlinputelement/index.html b/files/de/web/api/htmlinputelement/index.html new file mode 100644 index 0000000000..284d3cc770 --- /dev/null +++ b/files/de/web/api/htmlinputelement/index.html @@ -0,0 +1,435 @@ +--- +title: HTMLInputElement +slug: Web/API/HTMLInputElement +tags: + - API + - HTML DOM + - HTMLInputElement + - Input + - Interface + - NeedsContent + - NeedsMarkupWork + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLInputElement +--- +<div>{{ APIRef("HTML DOM") }}</div> + +<p>The <strong><code>HTMLInputElement</code></strong> interface provides special properties and methods for manipulating the options, layout, and presentation of {{HtmlElement("input")}} elements.</p> + +<p>{{InheritanceDiagram(600, 120)}}</p> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <caption>Properties related to the parent form</caption> + <thead> + </thead> + <tbody> + <tr> + <td><code>form </code>{{readonlyInline}}</td> + <td><em>{{domxref("HTMLFormElement")}}<code> object</code>:</em> <strong>Returns</strong> a reference to the parent {{HtmlElement("form")}} element.</td> + </tr> + <tr> + <td><code>formAction</code></td> + <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("formaction", "input") }} attribute, containing the URI of a program that processes information submitted by the element. This overrides the {{ htmlattrxref("action", "form") }} attribute of the parent form.</td> + </tr> + <tr> + <td><code>formEncType</code></td> + <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formenctype", "input") }} attribute, containing the type of content that is used to submit the form to the server. This overrides the {{ htmlattrxref("enctype", "form") }} attribute of the parent form.</td> + </tr> + <tr> + <td><code>formMethod</code></td> + <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formmethod", "input") }} attribute, containing the HTTP method that the browser uses to submit the form. This overrides the {{ htmlattrxref("method", "form") }} attribute of the parent form.</td> + </tr> + <tr> + <td><code>formNoValidate</code></td> + <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formnovalidate", "input") }} attribute, indicating that the form is not to be validated when it is submitted. This overrides the {{ htmlattrxref("novalidate", "form") }} attribute of the parent form.</td> + </tr> + <tr> + <td><code>formTarget</code></td> + <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formtarget", "input") }} attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. This overrides the {{ htmlattrxref("target", "form") }} attribute of the parent form.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Properties that apply to any type of input element that is not hidden</caption> + <tbody> + <tr> + <td><code>name</code></td> + <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("name", "input") }} attribute, containing a name that identifies the element when submitting the form.</td> + </tr> + <tr> + <td><code>type</code></td> + <td><code><em>string</em></code>: <strong>Returns / Sets</strong> the element's {{ htmlattrxref("type", "input") }} attribute, indicating the type of control to display. See {{ htmlattrxref("type", "input") }} attribute of {{ HTMLElement("input") }} for possible values.</td> + </tr> + <tr> + <td><code>disabled</code></td> + <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("disabled", "input") }} attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also {{ htmlattrxref("readOnly", "input") }}</td> + </tr> + <tr> + <td><code>autofocus</code></td> + <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("autofocus", "input") }} attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the {{htmlattrxref("autofocus","input")}} attribute. It cannot be applied if the {{htmlattrxref("type","input")}} attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control).</td> + </tr> + <tr> + <td><code>required</code></td> + <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("required", "input") }} attribute, indicating that the user must fill in a value before submitting a form.</td> + </tr> + <tr> + <td><code>value</code></td> + <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the current value of the control. + <p class="note"><strong>Note:</strong> If the user enters a value different from the value expected, this may return an empty string.</p> + </td> + </tr> + <tr> + <td><code>validity</code> {{readonlyInline}}</td> + <td><em>{{domxref("ValidityState")}}<code> object</code>:</em> <strong>Returns</strong> the element's current validity state.</td> + </tr> + <tr> + <td><code>validationMessage</code> {{readonlyInline}}</td> + <td><code><em>string</em></code><em>:</em> <strong>Returns</strong> a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{htmlattrxref("willValidate","input")}} is false), or it satisfies its constraints. This value can be set by the <code>setCustomValidity</code> method.</td> + </tr> + <tr> + <td><code>willValidate </code>{{readonlyInline}}</td> + <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns</strong> whether the element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation, including: its <code>type</code> is <code>hidden</code>, <code>reset</code>, or <code>button</code>; it has a <a href="/en-US/docs/Web/HTML/Element/datalist">datalist</a> ancestor; its <code>disabled</code> property is <code>true</code>.</td> + </tr> + </tbody> +</table> + +<table class="standard-table" id="Properties_checkbox_radio"> + <caption>Properties that apply only to elements of type <code>checkbox</code> or <code>radio</code></caption> + <tbody> + <tr> + <td><code>checked</code></td> + <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the current state of the element when {{htmlattrxref("type","input")}} is <code>checkbox</code> or <code>radio</code>.</td> + </tr> + <tr> + <td><code>defaultChecked</code></td> + <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the default state of a radio button or checkbox as originally specified in HTML that created this object.</td> + </tr> + <tr> + <td><code id="indeterminate">indeterminate</code></td> + <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns</strong> whether the checkbox or radio button is in indeterminate state. For checkboxes, the effect is that the appearance of the checkbox is obscured/greyed in some way as to indicate its state is indeterminate (not checked but not unchecked). Does not affect the value of the <code>checked</code> attribute, and clicking the checkbox will set the value to false.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Properties that apply only to elements of type <code>image</code></caption> + <tbody> + <tr> + <td><code>alt</code></td> + <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("alt", "input") }} attribute, containing alternative text to use when {{htmlattrxref("type","input")}} is <code>image.</code></td> + </tr> + <tr> + <td><code>height</code></td> + <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("height", "input") }} attribute, which defines the height of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>.</td> + </tr> + <tr> + <td><code>src</code></td> + <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("src", "input") }} attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>; otherwise it is ignored.</td> + </tr> + <tr> + <td><code>width</code></td> + <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the document's {{ htmlattrxref("width", "input") }} attribute, which defines the width of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>.</td> + </tr> + </tbody> +</table> + +<table class="standard-table" id="Properties_file"> + <caption>Properties that apply only to elements of type <code>file</code></caption> + <tbody> + <tr> + <td><code>accept</code></td> + <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("accept", "input") }} attribute, containing comma-separated list of file types accepted by the server when {{htmlattrxref("type","input")}} is <code>file</code>.</td> + </tr> + <tr> + <td><code>allowdirs</code> {{non-standard_inline}}</td> + <td><em>{{jsxref("Boolean")}}:</em> Part of the non-standard Directory Upload API; <strong>indicates</strong> whether or not to allow directories and files both to be selected in the file list. Implemented only in Firefox and is hidden behind a preference.</td> + </tr> + <tr> + <td><code id="files_prop">files</code></td> + <td><strong>Returns/accepts</strong> a {{domxref("FileList")}} object, which contains a list of {{domxref("File")}} objects representing the files selected for upload.</td> + </tr> + <tr> + <td>{{domxref("HTMLInputElement.webkitdirectory", "webkitdirectory")}} {{Non-standard_inline}}</td> + <td><em>{{jsxref("Boolean")}}:</em><strong> Returns</strong> the {{htmlattrxref("webkitdirectory", "input")}} attribute; if true, the file system picker interface only accepts directories instead of files.</td> + </tr> + <tr> + <td>{{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} {{Non-standard_inline}}</td> + <td><em>Array of {{domxref("FileSystemEntry")}} objects:</em> <strong>Describes</strong> the currently selected files or directories.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Properties that apply only to <code>text/number</code>-containing or elements</caption> + <tbody> + <tr> + <td><code>autocomplete</code></td> + <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{htmlattrxref("autocomplete", "input")}} attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the {{htmlattrxref("type","input")}} attribute is <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type (<code>button</code>, <code>submit</code>, <code>reset</code>, <code>image</code>). Possible values are:<br> + <code>on</code>: the browser can autocomplete the value using previously stored value<br> + <code>off</code>: the user must explicity enter a value</td> + </tr> + <tr> + <td><code>max</code></td> + <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("max", "input") }} attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum ({{htmlattrxref("min","input")}} attribute) value.</td> + </tr> + <tr> + <td><code>maxLength</code></td> + <td><em><code>long</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("maxlength", "input") }} attribute, containing the <strong>maximum number of characters</strong> (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)</td> + </tr> + <tr> + <td><code>min</code></td> + <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("min", "input") }} attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum ({{htmlattrxref("max","input")}} attribute) value.</td> + </tr> + <tr> + <td><code>minLength</code></td> + <td><em><code>long</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("minlength", "input") }} attribute, containing the <strong>minimum number of characters</strong> (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)</td> + </tr> + <tr> + <td><code>pattern</code></td> + <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("pattern", "input") }} attribute, containing a <strong>regular expression</strong> that the control's value is checked against. Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.</td> + </tr> + <tr> + <td><code>placeholder</code></td> + <td><em><code>string</code>: </em><strong>Returns / Sets </strong>the element's {{ htmlattrxref("placeholder", "input") }} attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.</td> + </tr> + <tr> + <td><code>readOnly</code></td> + <td><em><code>boolean</code>:</em><strong> Returns / Sets</strong> the element's {{ htmlattrxref("readonly", "input") }} attribute, indicating that the user cannot modify the value of the control.<br> + {{HTMLVersionInline(5)}}This is ignored if the value of the {{htmlattrxref("type","input")}} attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</td> + </tr> + <tr> + <td><code>size</code></td> + <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets </strong>the element's {{ htmlattrxref("size", "input") }} attribute, which contains the <strong>visual size of the control</strong>. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is <code>text</code> or <code>password</code>, in which case, it is an integer number of characters. Applies only when {{htmlattrxref("type","input")}} is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>; otherwise it is ignored.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Properties that apply only to elements with type <code>text/password/search/tel/url/week/month</code></caption> + <tbody> + <tr> + <td><code>selectionStart</code></td> + <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets</strong> the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the {{HTMLElement("input")}} element.</td> + </tr> + <tr> + <td><code>selectionEnd</code></td> + <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets </strong>the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.</td> + </tr> + <tr> + <td><code>selectionDirection</code></td> + <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the direction in which selection occurred. Possible values are:<br> + <code>forward</code> if selection was performed in the start-to-end direction of the current locale<br> + <code>backward</code> for the opposite direction<br> + <code>none</code> if the direction is unknown</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Properties not yet categorized</caption> + <tbody> + <tr> + <td><code>defaultValue</code></td> + <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the default value as originally specified in the HTML that created this object.</td> + </tr> + <tr> + <td><code>dirName</code></td> + <td><em><code>string</code>:</em> <strong>Returns / Sets </strong>the directionality of the element.</td> + </tr> + <tr> + <td><code>accessKey</code></td> + <td><em><code>string</code>: </em><strong>Returns</strong> a string containing a single character that switches input focus to the control when pressed.</td> + </tr> + <tr> + <td><code>list</code> {{readonlyInline}}</td> + <td><em>{{domxref("HTMLElement")}}<code> object</code>:</em> <strong>Returns</strong> the element pointed by the {{ htmlattrxref("list", "input") }} attribute. The property may be <code>null</code> if no HTML element found in the same tree.</td> + </tr> + <tr> + <td><code>multiple</code></td> + <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("multiple", "input") }} attribute, indicating whether more than one value is possible (e.g., multiple files).</td> + </tr> + <tr> + <td><code>files</code></td> + <td><em>{{domxref("FileList")}}<code> array</code>:</em> <strong>Returns</strong> the list of selected files.</td> + </tr> + <tr> + <td>{{domxref("HTMLInputElement.labels")}} {{readonlyInline}}</td> + <td><em>{{domxref("NodeList")}}<code> array</code>:</em> <strong>Returns</strong> a list of {{ HTMLElement("label") }} elements that are labels for this element.</td> + </tr> + <tr> + <td><code>step</code></td> + <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("step", "input") }} attribute, which works with<strong> </strong>{{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</td> + </tr> + <tr> + <td><code>valueAsDate</code></td> + <td><em>{{jsxref("Date")}}<code> object</code>:</em> <strong>Returns / Sets</strong> the value of the element, interpreted as a date, or <code>null</code> if conversion is not possible.</td> + </tr> + <tr> + <td><code>valueAsNumber</code></td> + <td><em><code>double</code>:</em> <strong>Returns</strong> the value of the element, interpreted as one of the following, in order: + <ul> + <li>A time value</li> + <li>A number</li> + <li><code>NaN</code> if conversion is impossible</li> + </ul> + </td> + </tr> + <tr> + <td><code>autocapitalize</code> {{experimental_inline}}</td> + <td><code><em>string</em></code><em>:</em> <strong>Defines</strong> the capitalization behavior for user input. Valid values are <code>none</code>, <code>off</code>, <code>characters</code>, <code>words</code>, or <code>sentences</code>.</td> + </tr> + <tr> + <td><code>inputmode</code></td> + <td>Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.</td> + </tr> + </tbody> +</table> + +<dl> + <dt>{{domxref("HTMLInputElement.align")}} {{obsolete_inline}}</dt> + <dd><code><em>string</em></code><em>:</em> <strong>Represents</strong> the alignment of the element. <em>Use CSS instead.</em></dd> + <dt>{{domxref("HTMLInputElement.useMap")}} {{ obsolete_inline }}</dt> + <dd><code><em>string</em></code><em>:</em> <strong>Represents</strong> a client-side image map.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>{{domxref("HTMLElement.blur()", "blur()")}}</td> + <td>Removes focus from the input element; keystrokes will subsequently go nowhere.</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.click()", "click()")}}</td> + <td>Simulates a click on the input element.</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.focus()", "focus()")}}</td> + <td>Focuses on the input element; keystrokes will subsequently go to this element.</td> + </tr> + <tr> + <td>{{domxref("HTMLInputElement.select()", "select()")}}</td> + <td>Selects all the text in the input element, and focuses it so the user can subsequently replace all of its content.</td> + </tr> + <tr> + <td>{{domxref("HTMLInputElement.setSelectionRange()", "setSelectionRange()")}}</td> + <td>Selects a range of text in the input element (but does not focus it).</td> + </tr> + <tr> + <td>{{domxref("HTMLInputElement.setRangeText()", "setRangeText()")}}</td> + <td>Replaces a range of text in the input element with new text.</td> + </tr> + <tr> + <td><code>setCustomValidity()</code></td> + <td>Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.</td> + </tr> + <tr> + <td><code>checkValidity()</code></td> + <td>Returns a {{jsxref("Boolean")}} that is <code>false</code> if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns <code>true</code> if the element is not a candidate for constraint validation, or if it satisfies its constraints.</td> + </tr> + <tr> + <td><code>reportValidity()</code></td> + <td>Runs the <code>checkValidity()</code> method, and if it returns false (for an invalid input or no pattern attribute provided), then it reports to the user that the input is invalid in the same manner as if you submitted a form.</td> + </tr> + </tbody> +</table> + +<dl> + <dt>{{domxref("HTMLInputElement.stepDown()")}}</dt> + <dd>Decrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception: + <ul> + <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value,</li> + <li>if the element has no {{htmlattrxref("step","input")}} value,</li> + <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number,</li> + <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.</li> + </ul> + </dd> + <dt>{{domxref("HTMLInputElement.stepUp()")}}</dt> + <dd>Increments the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception: + <ul> + <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.,</li> + <li>if the element has no {{htmlattrxref("step","input")}} value,</li> + <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number,</li> + <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.</li> + </ul> + </dd> + <dt>{{domxref("HTMLInputElement.mozSetFileArray()")}} {{non-standard_inline}}</dt> + <dd>Sets the files selected on the input to the given array of {{domxref("File")}} objects. This is an alternative to <code>mozSetFileNameArray()</code> which can be used in frame scripts: a chrome script can <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">open files as File objects</a> and send them via <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">message manager</a>.</dd> + <dt>{{domxref("HTMLInputElement.mozGetFileNameArray()")}} {{non-standard_inline}}</dt> + <dd>Returns an array of all the file names from the input.</dd> + <dt>{{domxref("HTMLInputElement.mozSetFileNameArray()")}} {{non-standard_inline}}</dt> + <dd>Sets the filenames for the files selected on the input. Not for use in <a href="/en-US/Firefox/Multiprocess_Firefox/Limitations_of_frame_scripts">frame scripts</a>, because it accesses the file system.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<p>Listen to these events using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface:</p> + +<dl> + <dt><a href="/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a></dt> + <dd>Fires when the <code>value</code> of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed. Note that this is actually fired on the {{domxref("HTMLElement")}} interface and also applies to <code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code> elements, but we've listed it here because it is most commonly used with form input elements.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/oninput">oninput</a></code> event handler property.</dd> + <dt><code><a href="/en-US/docs/Web/API/HTMLElement/invalid_event">invalid</a></code></dt> + <dd>Fired when an element does not satisfy its constraints during constraint validation.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/oninvalid">oninvalid</a></code> event handler property.</dd> + <dt><code><a href="/en-US/docs/Web/API/HTMLInputElement/search_event">search</a></code></dt> + <dd>Fired when a search is initiated on an {{HTMLElement("input")}} of <code>type="search"</code>.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onsearch">onsearch</a></code> event handler property.</dd> +</dl> + +<h2 id="Specifications">Specifications</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('HTML WHATWG', "#htmlinputelement", "HTMLInputElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Technically, the <code>tabindex</code> and <code>accesskey</code> properties, as well as the <code>blur()</code>, <code>click()</code>, and <code>focus()</code> methods, are now defined on {{domxref("HTMLElement")}}.<br> + The following properties are now obsolete: <code>align</code> and <code>useMap</code>.<br> + The following properties have been added: <code>autocomplete</code>, <code>autofocus</code>, <code>dirName</code>, <code>files</code>, <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>height</code>, <code>indeterminate</code>, <code>labels</code>, <code>list</code>, <code>max</code>, <code>min</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>required</code>, <code>selectionDirection</code>, <code>selectionEnd</code>, <code>selectionStart</code>, <code>step</code>, <code>validationMessage</code>, <code>validity</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>width</code>, and <code>willValidate</code>.<br> + The following methods have been added: <code>checkValidity()</code>, <code>setCustomValidity()</code>, <code>setSelectionRange()</code>, <code>stepUp()</code>, and <code>stepDown()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>The <code>size</code> property is now an <code>unsigned long</code>. The <code>type</code> property must be entirely given in lowercase characters.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.HTMLInputElement")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>HTML element implementing this interface: {{ HTMLElement("input") }}</li> +</ul> diff --git a/files/de/web/api/htmlinputelement/select/index.html b/files/de/web/api/htmlinputelement/select/index.html new file mode 100644 index 0000000000..14354e31dc --- /dev/null +++ b/files/de/web/api/htmlinputelement/select/index.html @@ -0,0 +1,84 @@ +--- +title: HTMLInputElement.select() +slug: Web/API/HTMLInputElement/select +tags: + - Auswählen + - HTML + - JavaScript + - Méthode +translation_of: Web/API/HTMLInputElement/select +--- +<div>{{ APIRef("HTML DOM") }}</div> + +<p>Die <strong><code>HTMLInputElement.select()</code></strong> Methode selektiert den gesamten Text innerhalb eines {{HTMLElement("textarea")}} oder innerhalb eines {{HTMLElement("input")}} Elements welches ein Textfeld enthält.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>element</em>.select();</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Klick in diesem Beispiel auf den Button um den gesamten Text innerhalb des <code><input></code> Elements zu selektieren.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="text" id="text-box" size="20" value="Hallo Welt!"> +<button onclick="selectText()">Text auswählen</button> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function selectText() { + const input = document.getElementById('text-box'); + input.focus(); + input.select(); +}</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample("Beispiel")}}</p> + +<h2 id="Anmerkungen">Anmerkungen</h2> + +<p>Die Methode <code>element.select()</code> fokussiert den Input nicht zwingend, weshalb es oft zusammen mit {{domxref("HTMLElement.focus()")}} verwendet wird.</p> + +<p>In Browsern in denen es nicht unterstützt wird ist es möglich es mit <a href="/en-US/docs/Web/API/HTMLInputElement/setSelectionRange">HTMLInputElement.setSelectionRange()</a> (mit den Parametern <em>0</em> und der <em>Länge des Werts des Inputs</em>) zu ersetzen.</p> + +<pre class="brush: html"><input onClick="this.select();" value="Beispieltext" /> +<!-- gleichbedeutend mit --> +<input onClick="this.setSelectionRange(0, this.value.length);" value="Beispieltext" /> +</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('HTML WHATWG', 'forms.html#dom-textarea/input-select', 'select')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("api.HTMLInputElement.select")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{ HTMLElement("input") }}</li> + <li>{{ HTMLElement("textarea") }}</li> + <li>{{ domxref("HTMLInputElement") }}</li> + <li>{{ domxref("HTMLInputElement.setSelectionRange") }}</li> +</ul> diff --git a/files/de/web/api/htmlslotelement/assignednodes/index.html b/files/de/web/api/htmlslotelement/assignednodes/index.html new file mode 100644 index 0000000000..77ab2aef3d --- /dev/null +++ b/files/de/web/api/htmlslotelement/assignednodes/index.html @@ -0,0 +1,66 @@ +--- +title: HTMLSlotElement.assignedNodes() +slug: Web/API/HTMLSlotElement/assignedNodes +translation_of: Web/API/HTMLSlotElement/assignedNodes +--- +<p>{{APIRef("Shadow DOM API")}}</p> + +<p>Die Eigenschaft <strong><code>assignedNodes()</code></strong> der Schnittstelle {{domxref("HTMLSlotElement")}} gibt die Reihenfolge der diesem Slot zugewiesenen Elemente oder alternativ den Fallback-Inhalt des Slots zurück.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var assignedNodes[] = HTMLSlotElement.assignedNodes([options])</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt>options {{optional_inline}}</dt> + <dd>Ein Objekt, das Optionen für die zurückzugebenden Knoten festlegt. Die verfügbaren Optionen sind: + <ul> + <li><code>flatten</code>: Ein {{jsxref('Boolean')}}, das angibt, ob die dem Slot zugewiesenen Elemente zurückgegeben werden sollen (wenn dieser Wert <code>false</code> ist) oder der Fallback-Inhalt des Slots (wenn dieser Wert <code>true</code> ist). Die Vorgabe ist <code>false</code>.</li> + </ul> + </dd> +</dl> + +<h3 id="Rückgabewerte">Rückgabewerte</h3> + +<p>Ein Array von Knoten.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Das folgende Schnippsel ist unserem <a href="https://github.com/mdn/web-components-examples/tree/master/slotchange">Slotchange-Beispiel</a> entnommen (<a href="https://mdn.github.io/web-components-examples/slotchange/">siehe auch live</a>).</p> + +<pre class="brush: js">let slots = this.shadowRoot.querySelectorAll('slot'); +slots[1].addEventListener('slotchange', function(e) { + let nodes = slots[1].assignedNodes(); + console.log('Element in Slot "' + slots[1].name + '" changed to "' + nodes[0].outerHTML + '".'); +});</pre> + +<p>Hier nehmen wir Verweise auf alle Slots und fügen dann einen Slotchange Event Listener zum zweiten Slot in der Vorlage hinzu - derjenige, dessen Inhalt im Beispiel geändert wird.</p> + +<p>Jedes Mal, wenn sich das in den Slot eingefügte Element ändert, protokollieren wir einen Bericht an die Konsole, aus dem hervorgeht, welcher Slot sich geändert hat und was der neue Knoten im Slot ist.</p> + +<h2 id="Spezifikationen">Spezifikationen</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('HTML WHATWG','scripting.html#dom-slot-assignednodes','assignedNodes')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div> + + +<p>{{Compat("api.HTMLSlotElement.assignedNodes")}}</p> +</div> diff --git a/files/de/web/api/htmlslotelement/index.html b/files/de/web/api/htmlslotelement/index.html new file mode 100644 index 0000000000..2644171f01 --- /dev/null +++ b/files/de/web/api/htmlslotelement/index.html @@ -0,0 +1,67 @@ +--- +title: HTMLSlotElement +slug: Web/API/HTMLSlotElement +tags: + - API + - HTMLSlotElement + - Interface + - NeedsTranslation + - Reference + - TopicStub + - shadow dom +translation_of: Web/API/HTMLSlotElement +--- +<p>{{APIRef('Web Components')}}</p> + +<p>The <strong><code>HTMLSlotElement</code></strong> interface of the <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM API</a> enables access to the name and assigned nodes of an HTML {{HTMLElement("slot")}} element.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref('HTMLSlotElement.name')}}</dt> + <dd>{{domxref("DOMString")}}: Can be used to get and set the slot's name.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref('HTMLSlotElement.assignedNodes()')}}</dt> + <dd>Returns the sequence of elements assigned to this slot, or alternatively the slot's fallback content.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>The following snippet is taken from our <a href="https://github.com/mdn/web-components-examples/tree/master/slotchange">slotchange example</a> (<a href="https://mdn.github.io/web-components-examples/slotchange/">see it live also</a>).</p> + +<pre class="brush: js">let slots = this.shadowRoot.querySelectorAll('slot'); +slots[1].addEventListener('slotchange', function(e) { + let nodes = slots[1].assignedNodes(); + console.log('Element in Slot "' + slots[1].name + '" changed to "' + nodes[0].outerHTML + '".'); +});</pre> + +<p>Here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.</p> + +<p>Every time the element inserted in the slot changes, we log a report to the console saying which slot has changed, and what the new node inside the slot is.</p> + +<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('HTML WHATWG','scripting.html#htmlslotelement','HTMLSlotElement')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLSlotElement")}}</p> diff --git a/files/de/web/api/htmltableelement/createcaption/index.html b/files/de/web/api/htmltableelement/createcaption/index.html new file mode 100644 index 0000000000..fb27bd6480 --- /dev/null +++ b/files/de/web/api/htmltableelement/createcaption/index.html @@ -0,0 +1,75 @@ +--- +title: HTMLTableElement.createCaption() +slug: Web/API/HTMLTableElement/createCaption +tags: + - API + - DOM + - HTML DOM + - HTMLTableElement + - Method + - Reference +translation_of: Web/API/HTMLTableElement/createCaption +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>Die <code><strong>HTMLTableElement.createCaption()</strong></code> Methode gibt das {{HtmlElement("caption")}} Element zurück, das einer {{HtmlElement("table")}} zugeordnet ist. Wenn in der Tabelle noch kein <code><caption></code> Element existiert, wird es durch diese Methode erzeugt und dann zurückgegeben..</p> + +<div class="blockIndicator note"> +<p><strong>Anmerkung:</strong> Wenn noch keine Überschrift vorhanden ist, fügt <code>createCaption()</code> sie direkt in die Tabelle ein. Die Überschrift muss nicht eigens hinzugefügt werden, wie man es tun müsste, wenn man das <code><caption></code> Element mittels {{domxref("Document.createElement()")}} erzeugt hätte.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><em>HTMLTableCaptionElement</em> = <em>table</em>.createCaption();</pre> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>{{domxref("HTMLTableCaptionElement")}}</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Dieses Beispiel verwendet JavaScript, um eine Tabelle um eine Überschrift zu erweitern.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><table> + <tr><td>Cell 1.1</td><td>Cell 1.2</td><td>Cell 1.3</td></tr> + <tr><td>Cell 2.1</td><td>Cell 2.2</td><td>Cell 2.3</td></tr> +</table></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js; highlight:[2] notranslate">let table = document.querySelector('table'); +let caption = table.createCaption(); +caption.textContent = 'Diese Überschrift wurde mit JavaScript erzeugt!';</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample("Beispiel")}}</p> + +<h2 id="Specification" name="Specification">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('HTML WHATWG', '#dom-table-createcaption', 'HTMLTableElement: createCaption')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("api.HTMLTableElement.createCaption")}}</p> +</div> diff --git a/files/de/web/api/htmltableelement/index.html b/files/de/web/api/htmltableelement/index.html new file mode 100644 index 0000000000..696556f62f --- /dev/null +++ b/files/de/web/api/htmltableelement/index.html @@ -0,0 +1,132 @@ +--- +title: HTMLTableElement +slug: Web/API/HTMLTableElement +tags: + - API + - HTML DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLTableElement +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>The <strong><code>HTMLTableElement</code></strong> interface provides special properties and methods (beyond the regular {{DOMxRef("HTMLElement")}} object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an HTML document.</p> + +<p>{{InheritanceDiagram(600, 120)}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parent, {{DOMxRef("HTMLElement")}}.</em></p> + +<dl> + <dt>{{DOMxRef("HTMLTableElement.caption")}}</dt> + <dd>Is a {{DOMxRef("HTMLTableCaptionElement")}} representing the first {{HTMLElement("caption")}} that is a child of the element, or <code>null</code> if none is found. When set, if the object doesn't represent a <code><caption></code>, a {{DOMxRef("DOMException")}} with the <code>HierarchyRequestError</code> name is thrown. If a correct object is given, it is inserted in the tree as the first child of this element and the first <code><caption></code> that is a child of this element is removed from the tree, if any.</dd> + <dt>{{DOMxRef("HTMLTableElement.tHead")}}</dt> + <dd>Is a {{DOMxRef("HTMLTableSectionElement")}} representing the first {{HTMLElement("thead")}} that is a child of the element, or <code>null</code> if none is found. When set, if the object doesn't represent a <code><thead></code>, a {{DOMxRef("DOMException")}} with the <code>HierarchyRequestError</code> name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, nor a {{HTMLElement("colgroup")}}, or as the last child if there is no such element, and the first <code><thead></code> that is a child of this element is removed from the tree, if any.</dd> + <dt>{{DOMxRef("HTMLTableElement.tFoot")}}</dt> + <dd>Is a {{DOMxRef("HTMLTableSectionElement")}} representing the first {{HTMLElement("tfoot")}} that is a child of the element, or <code>null</code> if none is found. When set, if the object doesn't represent a <code><tfoot></code>, a {{DOMxRef("DOMException")}} with the <code>HierarchyRequestError</code> name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, a {{HTMLElement("colgroup")}}, nor a {{HTMLElement("thead")}}, or as the last child if there is no such element, and the first <code><tfoot></code> that is a child of this element is removed from the tree, if any.</dd> + <dt>{{DOMxRef("HTMLTableElement.rows")}}{{ReadOnlyInline}}</dt> + <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all the rows of the element, that is all {{HTMLElement("tr")}} that are a child of the element, or a child of one of its {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} children. The rows members of a <code><thead></code> appear first, in tree order, and those members of a <code><tbody></code> last, also in tree order. The <code>HTMLCollection</code> is live and is automatically updated when the <code>HTMLTableElement</code> changes.</dd> + <dt>{{DOMxRef("HTMLTableElement.tBodies")}}{{ReadOnlyInline}}</dt> + <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all the {{HTMLElement("tbody")}} of the element. The <code>HTMLCollection</code> is live and is automatically updated when the <code>HTMLTableElement</code> changes.</dd> +</dl> + +<h3 id="Obsolete_Properties">Obsolete Properties</h3> + +<div class="blockIndicator warning"> +<p><strong>Warning:</strong> The following properties are obsolete. You should avoid using them.</p> +</div> + +<details> +<dl> + <dt>{{DOMxRef("HTMLTableElement.align")}} {{Obsolete_Inline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} containing an enumerated value reflecting the {{HTMLAttrxRef("align", "table")}} attribute. It indicates the alignment of the element's contents with respect to the surrounding context. The possible values are <code>"left"</code>, <code>"right"</code>, and <code>"center"</code>.</dd> + <dt>{{DOMxRef("HTMLTableElement.bgColor")}} {{Obsolete_Inline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} containing the background color of the cells. It reflects the obsolete {{HTMLAttrxRef("bgColor", "table")}} attribute.</dd> + <dt>{{DOMxRef("HTMLTableElement.border")}} {{Obsolete_Inline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} containing the width in pixels of the border of the table. It reflects the obsolete {{HTMLAttrxRef("border", "table")}} attribute.</dd> + <dt>{{DOMxRef("HTMLTableElement.cellPadding")}} {{Obsolete_Inline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} containing the width in pixels of the horizontal and vertical sapce between cell content and cell borders. It reflects the obsolete {{HTMLAttrxRef("cellpadding", "table")}} attribute.</dd> + <dt>{{DOMxRef("HTMLTableElement.cellSpacing")}} {{Obsolete_Inline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} containing the width in pixels of the horizontal and vertical separation between cells. It reflects the obsolete {{HTMLAttrxRef("cellspacing", "table")}} attribute.</dd> + <dt>{{DOMxRef("HTMLTableElement.frame")}} {{Obsolete_Inline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} containing the type of the external borders of the table. It reflects the obsolete {{HTMLAttrxRef("frame", "table")}} attribute and can take one of the following values: <code>"void"</code>, <code>"above"</code>, <code>"below"</code>, <code>"hsides"</code>, <code>"vsides"</code>, <code>"lhs"</code>, <code>"rhs"</code>, <code>"box"</code>, or <code>"border"</code>.</dd> + <dt>{{DOMxRef("HTMLTableElement.rules")}} {{Obsolete_Inline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} containing the type of the internal borders of the table. It reflects the obsolete {{HTMLAttrxRef("rules", "table")}} attribute and can take one of the following values: <code>"none"</code>, <code>"groups"</code>, <code>"rows"</code>, <code>"cols"</code>, or <code>"all"</code>.</dd> + <dt>{{DOMxRef("HTMLTableElement.summary")}} {{Obsolete_Inline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} containing a description of the purpose or the structure of the table. It reflects the obsolete {{HTMLAttrxRef("summary", "table")}} attribute.</dd> + <dt>{{DOMxRef("HTMLTableElement.width")}} {{Obsolete_Inline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} containing the length in pixels or in percentage of the desired width fo the entire table. It reflects the obsolete {{HTMLAttrxRef("width", "table")}} attribute.</dd> +</dl> +</details> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parent, {{DOMxRef("HTMLElement")}}</em>.</p> + +<dl> + <dt>{{DOMxRef("HTMLTableElement.createTHead()")}}</dt> + <dd>Returns an {{DOMxRef("HTMLElement")}} representing the first {{HTMLElement("thead")}} that is a child of the element. If none is found, a new one is created and inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, nor a {{HTMLElement("colgroup")}}, or as the last child if there is no such element.</dd> + <dt>{{DOMxRef("HTMLTableElement.deleteTHead()")}}</dt> + <dd>Removes the first {{HTMLElement("thead")}} that is a child of the element.</dd> + <dt>{{DOMxRef("HTMLTableElement.createTFoot()")}}</dt> + <dd>Returns an {{DOMxRef("HTMLElement")}} representing the first {{HTMLElement("tfoot")}} that is a child of the element. If none is found, a new one is created and inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, a {{HTMLElement("colgroup")}}, nor a {{HTMLElement("thead")}}, or as the last child if there is no such element.</dd> + <dt>{{DOMxRef("HTMLTableElement.deleteTFoot()")}}</dt> + <dd>Removes the first {{HTMLElement("tfoot")}} that is a child of the element.</dd> + <dt>{{DOMxRef("HTMLTableElement.createCaption()")}}</dt> + <dd>Returns an {{DOMxRef("HTMLElement")}} representing the first {{HTMLElement("caption")}} that is a child of the element. If none is found, a new one is created and inserted in the tree as the first child of the {{HTMLElement("table")}} element.</dd> + <dt>{{DOMxRef("HTMLTableElement.deleteCaption()")}}</dt> + <dd>Removes the first {{HTMLElement("caption")}} that is a child of the element.</dd> + <dt>{{DOMxRef("HTMLTableElement.insertRow()")}}</dt> + <dd>Returns an {{DOMxRef("HTMLTableRowElement")}} representing a new row of the table. It inserts it in the rows collection immediately before the {{HTMLElement("tr")}} element at the given <code>index</code> position. If necessary a {{HTMLElement("tbody")}} is created. If the <code>index</code> is <code>-1</code>, the new row is appended to the collection. If the <code>index</code> is smaller than <code>-1</code> or greater than the number of rows in the collection, a {{DOMxRef("DOMException")}} with the value <code>IndexSizeError</code> is raised.</dd> + <dt>{{DOMxRef("HTMLTableElement.deleteRow()")}}</dt> + <dd>Removes the row corresponding to the <code>index</code> given in parameter. If the <code>index</code> value is <code>-1</code> the last row is removed; if it smaller than <code>-1</code> or greater than the amount of rows in the collection, a {{DOMxRef("DOMException")}} with the value <code>IndexSizeError</code> is raised.</dd> +</dl> + +<h2 id="Specifications">Specifications</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('HTML WHATWG', "#htmltableelement", "HTMLTableElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Added the <code>sortable</code> property and the <code>stopSorting()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "tabular-data.html#the-table-element", "HTMLTableElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Added the <code>createTBody()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-64060425', 'HTMLTableElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>Defined when <code>caption</code>, <code>tHead</code>, <code>tFoot</code>, <code>insertRow()</code>, and <code>deleteRow()</code> raise exceptions.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-64060425', 'HTMLTableElement')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLTableElement")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The HTML element implementing this interface: {{HTMLElement("table")}}.</li> +</ul> diff --git a/files/de/web/api/htmltableelement/insertrow/index.html b/files/de/web/api/htmltableelement/insertrow/index.html new file mode 100644 index 0000000000..869d185b98 --- /dev/null +++ b/files/de/web/api/htmltableelement/insertrow/index.html @@ -0,0 +1,122 @@ +--- +title: HTMLTableElement.insertRow() +slug: Web/API/HTMLTableElement/insertRow +tags: + - API + - HTML DOM + - HTMLTableElement + - Method + - Reference +translation_of: Web/API/HTMLTableElement/insertRow +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>Die Methode <strong><code>HTMLTableElement.insertRow()</code></strong> fügt einer vorhandenen {{HtmlElement("table")}} eine neue Zeile ({{HtmlElement("tr")}}) hinzu und gibt eine Referenz auf die neue Zeile zurück.</p> + +<p>Wenn eine Tabelle mehrere {{HtmlElement("tbody")}} Elemente besitzt, wird die neue Zeile standardmäßig dem letzten <code><tbody></code> hinzugefügt. Um sie einem bestimmten <code><tbody></code> Element hinzuzufügen, beschaffen Sie sich eine Referenz auf das gewünschte <code><tbody></code> Element und rufen Sie <code>insertRow()</code> auf diesem Element auf:</p> + +<pre class="brush: js notranslate">let bestimmter_tbody = document.getElementById(tbody_id); +let zeile = bestimmter_tbody.insertRow(index)</pre> + + + +<div class="blockIndicator note"> +<p><strong>Anmerkung:</strong> <code>insertRow()</code> fügt die Zeile direkt in die Tabelle ein. Die Zeile muss nicht eigens hinzugefügt werden, wie man es tun müsste, wenn man das <code><tr></code> Element mittels <a href="https://wiki.developer.mozilla.org/de/docs/Web/API/Document/createElement"><code>Document.createElement()</code></a> erzeugt hätte.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">var <em>neueZeile</em> = <em>HTMLTableElement</em>.insertRow(<em>index</em>);</pre> + +<p>{{domxref("HTMLTableElement")}} ist eine Referenz auf ein HTML {{HtmlElement("table")}} Element.</p> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>Der Zeilenindex der neuen Zeile. Ist der Index <code>-1</code> or gleich der Anzahl der vorhandenen Zeilen, wird die Zeile als letzte Zeile angefügt. Wenn <code>index</code> größer als die Anzahl vorhandener Zeilen ist, führt dies zi einer <code>IndexSizeError</code> Exception. Wird <code>index</code> weggelassen, ist der Standardwert <code>-1</code>.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p><code>neueZeile</code> ist ein {{domxref("HTMLTableRowElement")}}, das die neue Zeile referenziert.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Dieses Beispiel verwendet <code>insertRow(-1)</code>, um an eine Tabelle eine neue Zeile anzufügen.</p> + +<p>Wir verwenden daraufhin {{domxref("HTMLTableRowElement.insertCell()")}}, um der neuen Zeile noch eine Zelle hinzufügen. (Um gültiges HTML zu sein, muss ein <code><tr></code> mindestens ein <code><td></code> Element enthalten.) Schließlich fügen wir der Zelle mittels {{domxref("Document.createTextNode()")}} und {{domxref("Node.appendChild()")}} Text hinzu.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><table id="my-table"> + <tr><td>Row 1</td></tr> + <tr><td>Row 2</td></tr> + <tr><td>Row 3</td></tr> +</table></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">function addRow(tableID) { + // Beschaffe eine Referenz auf die Tabelle + let tableRef = document.getElementById(tableID); + + // Füge am Ende der Tabelle eine neue Zeile an + let newRow = tableRef.insertRow(-1); + + // Erstelle in der Zeile eine Zelle am Index 0 + let newCell = newRow.insertCell(0); + + // Füge der Zelle einen textnode hinzu + let newText = document.createTextNode('Neue letzte Zeile'); + newCell.appendChild(newText); +} + +// Rufe addRow() mit der ID der Tabelle auf +addRow('my-table');</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Beispiel")}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Spezifiziert genauer, wo die Zeile eingefügt wird.</td> + </tr> + <tr> + <td>{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}</td> + <td>{{Spec2("DOM1")}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.HTMLTableElement.insertRow")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLTableRowElement.insertCell()")}}</li> + <li>Das HTML Element, das Zeilen repräsentiert: {{domxref("HTMLTableRowElement")}}</li> +</ul> diff --git a/files/de/web/api/htmlunknownelement/index.html b/files/de/web/api/htmlunknownelement/index.html new file mode 100644 index 0000000000..d1f6107473 --- /dev/null +++ b/files/de/web/api/htmlunknownelement/index.html @@ -0,0 +1,56 @@ +--- +title: HTMLUnknownElement +slug: Web/API/HTMLUnknownElement +translation_of: Web/API/HTMLUnknownElement +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>Die Schnittstelle <strong><code>HTMLUnknownElement</code></strong> stellt ein ungültiges HTML-Element dar und leitet sich von der Schnittstelle {{DOMxRef("HTMLElement")}} ab, ohne jedoch zusätzliche Eigenschaften oder Methoden zu implementieren.</p> + +<p>{{InheritanceDiagram(600, 120)}}</p> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<p><em>Keine spezifische Eigenschaft; erbt Eigenschaften von seinem übergeordneten Element, {{DOMxRef("HTMLElement")}}.</em></p> + +<h2 id="Methoden">Methoden</h2> + +<p><em>Keine spezifische Methode; erbt Eigenschaften von seinem übergeordneten Element, {{DOMxRef("HTMLElement")}}.</em></p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikationen</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "elements.html#htmlunknownelement", "HTMLUnknownElement")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Keine Änderung von {{SpecName("HTML5 W3C")}}.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "dom.html#htmlunknownelement", "HTMLUnknownElement")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td><span class="tlid-translation translation" lang="de"><span title="">Erstdefinition.</span></span></td> + </tr> + </tbody> +</table> + +<div class="text-wrap tlid-copy-target"> +<h2 class="result-shield-container tlid-copy-target" id="Browser-Kompatibilität"><span class="tlid-translation translation" lang="de"><span title="">Browser-Kompatibilität</span></span></h2> +</div> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns einen Pull Request.</div> + +<p>{{Compat("api.HTMLUnknownElement")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Veraltete oder nicht standardmäßige HTML-Elemente, die diese Schnittstelle implementieren:<br> + {{HTMLElement("bgsound")}}, {{HTMLElement("blink")}}, {{HTMLElement("isindex")}}, {{HTMLElement("multicol")}}, {{HTMLElement("nextid")}}, {{HTMLElement("rb")}}, {{HTMLElement("spacer")}}</li> + <li>{{DOMxRef("SVGUnknownElement")}}</li> +</ul> diff --git a/files/de/web/api/index.html b/files/de/web/api/index.html new file mode 100644 index 0000000000..3173fac5cf --- /dev/null +++ b/files/de/web/api/index.html @@ -0,0 +1,14 @@ +--- +title: Web API Referenz +slug: Web/API +tags: + - API + - DOM + - JavaScript + - Reference + - Web +translation_of: Web/API +--- +<p>Javascript bietet eine große Auswahl an hervorragenden Schnittstellen (APIs). Nachfolgend findet sich eine Liste aller APIs auf die Du zurückgreifen kannst, um deine Webapp oder Webseite zu programmieren.</p> + +<div>{{APIListAlpha}}</div> diff --git a/files/de/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html b/files/de/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html new file mode 100644 index 0000000000..436886fe21 --- /dev/null +++ b/files/de/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html @@ -0,0 +1,131 @@ +--- +title: Browser storage limits and eviction criteria +slug: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria +tags: + - Datenbank + - Datenlöschung + - IndexDB + - Speicher + - Speicherung + - client-seitig +translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria +--- +<div>{{DefaultAPISidebar("IndexedDB")}}</div> + +<p class="summary">Es gibt eine Reihe von Web-Technologien, die Daten auf die eine oder andere Art und Weise client-seitig speichern (bspw. auf der lokalen Festplatte). Der Prozess, durch welchen der Browser bestimmt, wieviel Speicherplatz er der Webdatenspeicherung zur Verfügung stellen soll, und was gelöscht werden soll, wenn dieses Limit erreicht wurde, ist nicht einfach und unterscheidet sich zwischen verschiedenen Browsern. Dieser Artikel versucht zu erklären, wie dies funktioniert.</p> + +<div class="note"> +<p><strong>Info</strong>: Die untenstehenden Informationen sollten für die meisten modernen Browser zutreffen. Wo bekannt, werden browserspezifische Eigenheiten benannt. Opera und Chrome sollten sich in allen Fällen gleich verhalten. <a href="http://www.opera.com/mobile/mini">Opera Mini</a> (noch presto-basiert, serverseitiges Rendering) speichert kein Daten lokal auf dem Client.</p> +</div> + +<h2 id="Welche_Technologien_nutzen_Browser_zur_lokalen_Datenspeicherung">Welche Technologien nutzen Browser zur lokalen Datenspeicherung?</h2> + +<p>In Firefox werden die folgenden Technologien eingesetzt, um Daten lokal bei Bedarf zu sichern. Wir bezeichnen sie in diesem Zusammenhang als "Quota Clients" :</p> + +<ul> + <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a></li> + <li><a href="http://asmjs.org/">asm.js</a> caching</li> + <li><a href="/en-US/docs/Web/API/Cache">Cache API</a></li> + <li>Cookies</li> +</ul> + +<div class="note"> +<p><strong>Info</strong>: In Firefox, <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a> wird bald die gleichen Speichermanagement Tools wie in diesem Dokument beschrieben einsetzen.</p> +</div> + +<div class="note"> +<p><strong>Info</strong>: Im privaten Browsermodus werden die meisten Speichermethoden nicht unterstützt. Local storage Daten und Cookies werden zwar noch immer gespeichert, aber sie sind flüchtig — sie werden gelöscht, wenn das letzte private Browserfenster geschlossen wurde.</p> +</div> + +<p>Die "letzte Zugriffszeit" der Quelle wird aufdatiert wenn irgendeine von ihnen aktiviert oder deaktiviert wird — die Löschung der Quelle löscht die Daten für alle diese "Quota Clients".</p> + +<p>In Chrome/Opera kümmert sich die Quota Management API um das Quota Management für den <a href="/en-US/docs/Web/HTML/Using_the_application_cache">AppCache</a>, die <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, WebSQL und die <a href="/en-US/docs/Web/API/File_System_API">File System API</a>.</p> + +<h2 id="Unterschiedliche_Typen_der_Datenspeicherung">Unterschiedliche Typen der Datenspeicherung</h2> + +<p>Sogar wenn man die gleiche Speichermethode im gleichen Browser verwendet, muss man unterschiedliche Klassen der Datenspeicherung verstehen. Dieser Abschnitt behandelt die Unterschiede in verschiedenen Browsern.</p> + +<p>Speicherung kann auf zwei Arten vorkommen:</p> + +<ul> + <li>Persistent: Persistente Daten sollen für einen längeren Zeitraum zur Verfügung stehen. Sie werden nur gelöscht, wenn sich der Benutzer aktiv dazu entschließt (zum Beispiel kann man in Firefox und Chrome auswählen, alle Daten oder nur Daten von bestimmten Seiten zu löschen, indem man dies über <em>Einstellungen</em> und <em>Datenschutz & Sicherheit > Websitedaten</em> auswählt).</li> + <li>Temporär: Diese Daten müssen nicht über einen längeren Zeitraum gespeichert werden. Sie werden in der Reihenfolge gelöscht, wie sie am wenigsten benutzt wurden ({{anch("LRU policy")}}) sobald {{anch("Storage limits")}} erreicht wurden.</li> +</ul> + +<p>Sobald persistente Daten gespeichert werden sollen, bekommt ein Benutzer in Firefox eine Popup-Warnung, um darauf hinzuweisen, dass die Daten dauerhaft gespeichert werden sollen und fragt gleichzeitig ab, ob er damit einverstanden ist. Temporäre Datenspeicherung löst nicht eine solche Warnung aus.</p> + +<p>Datenspeicherung ist standardmäßig temporär. Entwickler können die Nutzung persistenten Speichers durch Aufruf der Methode {{domxref("StorageManager.persist()")}} aus der <a href="/en-US/docs/Web/API/Storage_API">Storage API</a> erreichen.</p> + +<h2 id="Wo_werden_die_Daten_gespeichert">Wo werden die Daten gespeichert?</h2> + +<p>Jeder Speichertyp nutzt ein eigenes Repository. Hier ist ein konkretes Mapping auf die Verzeichnisse im Profil eines Firefox Benutzers (andere Browser können hiervon leicht abweichen):</p> + +<ul> + <li><code><profile>/storage</code> — das Hauptverzeichnis für Speicher, die durch den Quota Manager verwaltet werden (siehe unten)</li> + <li><code><profile>/storage/permanent</code> — Repository für die Speicherung persistenter Daten</li> + <li><code><profile>/storage/temporary</code> — Repository für die Speicherung temporärer Daten</li> + <li><code><profile>/storage/default</code> — Standard-Repository für die Speicherung von Daten</li> +</ul> + +<div> +<div class="note"> +<p><strong>Info</strong>: Nach Einführung der <a href="/en-US/docs/Web/API/Storage_API">Storage API</a> kann das "permanent" Verzeichnis als obsolet bestrachtet werden. Das "permanent" Verzeichnis beinhaltet nur noch persistente IndexedDB Datenbasen. Es macht keinen Unterschied, ob der box mode "best-effort" oder "persistent" ist — die Daten werden unter <profile>/storage/default abgelegt.</p> +</div> +</div> + +<div class="note"> +<p><strong>Info</strong>: In Firefox kann man sein Profilverzeichnis aufrufen, indem man <code>about:support</code> in die URL Adresszeile eingibt und den <em>Ordner öffnen</em> Knopf in der Zeile <em>Profilordner</em> drückt.</p> +</div> + +<div class="note"> +<p><strong>Info</strong>: Wenn man im Profilordner in den Datenspeicherordnern sucht, findet man noch einen vierten Ordner namens <code>persistent</code>. Der <code>persistent</code> Ordner wurde ursprünglich vor einer Weile in <code>permanent</code> umbenannt, um Upgrades und Migrationen zu vereinfachen.</p> +</div> + +<div class="note"> +<p><strong>Info</strong>: Benuter sollten unter dem Verzeichnis <code><profile>/storage</code> keine eigenen dateien oder Verzeichnisse anlegen. Dies führt dazu, dass die Speicherinitialisierung fehlschlägt; zum Beispiel führt dann {{domxref("IDBFactory.open()", "open()")}} zu einem Fehlerevent.</p> +</div> + +<h2 id="Speichergrenzen">Speichergrenzen</h2> + +<p>Der maximale Speicherplatz des Browsers ist dynamisch — er basiert auf der Größe der Festplatte. Das <strong>globale Limit</strong> berechnet sich als 50% des freien Plattenspeichers. In Firefox überwacht ein internes Tool namensQuota Manager wieviel Speicher jede Quelle nutzt und löscht gegebenenfalls Daten.</p> + +<p>Wenn die Festplatte 500 GB freien Speicher aufweist, ist die maximale Größe des Speichers 250 GB. Wenn diese Größe überschritten wird, kommt ein Prozess namens <strong>origin eviction</strong> ins Spiel, welcher die kompletten Daten einzelner Quellen löscht, bis diese Größe wieder unterschritten wurde. Es werden nie Teile von Quellen gelöscht, da teilweise Daten einer Quelle zu Inkonsistenzen führen können.</p> + +<p>Zudem gibt es eine weitere Begrenzung namens <strong>Gruppenlimit</strong> — dieses ist definiert als 20% des globalen Limits, aber hat ein Minimum von 10 MB und ein Maximum von 2 GB. Jede Quelle ist Teil einer Gruppe (Gruppe von Quellen). Es gibt eine Gruppe für jede eTLD+1 Domain. Zum Beispiel:</p> + +<ul> + <li><code>mozilla.org</code> — Gruppe 1, Quelle 1</li> + <li><code>www.mozilla.org</code> — Gruppe 1, Quelle 2</li> + <li><code>joe.blogs.mozilla.org</code> — Gruppe 1, Quelle 3</li> + <li><code>firefox.com</code> — Gruppe 2, Quelle 4</li> +</ul> + +<p>Innerhalb dieser Gruppe, <code>mozilla.org</code>, <code>www.mozilla.org</code>, und <code>joe.blogs.mozilla.org</code> können zusammen ein Maximum von 20% des globalen Limits nutzen. <code>firefox.com</code> hat als weitere Gruppe ein separates Maximum von 20%.</p> + +<p>Beide Limits haben unterschiedliche Auswirkungen, wenn sie erreicht werden:</p> + +<ul> + <li>Das Gruppenlimit ist eine harte Grenze: es löst keien Datenlöschung aus.</li> + <li>Das globale Limit ist eine weiche Grenze, da eine Möglichkeit besteht, dass durch die ausgelöste Datenlöschung Speicher frei wird und sofort genutzt werden kann.</li> +</ul> + +<div class="note"> +<p><strong>Info</strong>: Das Gruppenlimit kann nie mehr als das globale Limit sein. Bei extrem niedrigen Speicherstand von beispielsweisen 8MB globalen Limit, ist das Gruppenlimit ebenfalls nur 8MB.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: Wenn das Gruppenlimit überschritten wird oder eine ausgelöste automatische Datenlöschung nicht genug Speicher freiräumen kann, wirft der Browser einen <code>QuotaExceededError</code>.</p> +</div> + +<h2 id="LRU_Policy">LRU Policy</h2> + +<p>Wenn der verfügbare Speicherplatz aufgebnraucht wurde, startet das Quota Management eine Datenlöschung nach der LRU (Least Recently Used) Policy — die Daten der am längsten nicht benutzten Quellen werden zuerst gelöscht, dann die zweitältesten usw., bis der Browser wieder unter das Speicherlimit fällt.</p> + +<p>Die letzte Zugriffszeit für jede Quelle wird im temporären Speicher vorgehalten. Sobald das globale Limit für temporären Speicher erreicht wurde, (mehr dazu später), werden alle derzeit ungenutzten Quellen identifiziert (z.Bsp., ohne offene Tabs oder Apps, die aktuell auf den Datenspeicher zugreifen). Diese werden dann nach der letzten Zugriffszeit sortiert. Die am längsten ungenutzten Daten werden dann zuerst gelöscht, bis genug Speicher frei wird, dass die Operation ausgeführt werden kann, die zur Auslösung der Datenlöschung verantwortlich war.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="http://www.html5rocks.com/en/tutorials/offline/quota-research/">Working with quota on mobile browsers</a>, von<a href="http://blog.agektmr.com" title="Eiji Kitamura"> Eiji Kitamura.</a> Eine detaillierte Analyse client-seitiger Speicherung in mobilen Browsern.</li> + <li><a href="https://developers.google.com/web/updates/2011/11/Quota-Management-API-Fast-Facts">Quota Management API: Fast Facts</a>, von<a href="http://blog.agektmr.com" title="Eiji Kitamura"> Eiji Kitamura.</a> Ein Blick auf die Quota Management API in Chrome/Blink (welche auch Opera berücksichtigen sollte).</li> +</ul> diff --git a/files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html b/files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html new file mode 100644 index 0000000000..6ae6f33dd7 --- /dev/null +++ b/files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html @@ -0,0 +1,194 @@ +--- +title: Grundkonzepte +slug: Web/API/IndexedDB_API/Grundkonzepte_hinter_IndexedDB +translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB +--- +<p><strong>IndexedDB</strong> ermöglicht es Ihnen Daten innerhalb des Browsers eines Benutzers permanent abzulegen. Weil es Sie Webanwendungen mit funktionsreichen Abfragemöglichkeiten erstellen lässt, können diese Anwendungen sowohl online als auch offline funktionieren. IndexedDB ist geeignet für Anwendungen, die eine große Menge an Daten speichern (z.B. ein Katalog von DVDs in einer Videothek) und Anwendungen, die keine durchgehende Internetverbindung benötigen um zu funktionieren (z.B. E-Mail-Clients, To-Do-Listen oder Notizen).</p> +<h2 id="Über_dieses_Dokument">Über dieses Dokument</h2> +<p>Diese Einführung bespricht wesentliche Konzepte und Fachbegriffe in IndexedDB. Sie liefert Ihnen einen Gesamtüberblick und führt Sie in die Schlüsselkonzepte ein. Um mehr über die Begrifflichkeiten von IndexedDB zu erfahren, lesen Sie den Abschnitt <a href="#definitions">Definitionen</a>.</p> +<p>Eine Anleitung zur Verwendung der API finden Sie im Artikel <a href="/de/docs/IndexedDB/Using_IndexedDB" title="Using IndexedDB">Using IndexedDB</a>. Eine Referenzdokumentierung der IndexedDB-API finden Sie im Artikel <a href="/de/docs/IndexedDB" title="IndexedDB">IndexedDB</a> und dessen Unterseiten, welche die Objekttypen dokumentiert, die von IndexedDB verwendet werden, ebenso wie die Methoden von synchronen wie asynchronen APIs.</p> +<h2 id="Überblick_über_IndexedDB">Überblick über IndexedDB</h2> +<p>Mit IndexedDB lassen sich indizierte Objekte mit „Schlüsseln“ ablegen und abrufen. Alle Änderungen an der Datenbank geschehen innerhalb von Transaktionen. Wie die meisten Webspeicher-Lösungen folgt IndexedDB einer <a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="Same Origin Policy">Same-Origin-Policy</a>. Während also auf Daten, die innerhalb einer Domain gespeichert wurden, zugegriffen werden kann, kann nicht domainübergreifend auf Daten zugegriffen werden.</p> +<p>Die API umfasst sowohl eine <a href="/en/IndexedDB#Asynchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Asynchronous_API">asynchrone</a> API als auch eine <a href="/de/docs/IndexedDB#Synchronous_API" title="Synchronous API">synchrone</a> API. Die asynchrone API kann für die meisten Fälle verwendet werden, auch für <a href="/de/docs/Web/Guide/Performance/Using_web_workers" title="Using web workers">WebWorkers</a>, während die synchrone API nur für den Gebrauch durch WebWorkers gedacht ist. Momentan wird die synchrone API von keinem der großen Browser unterstützt. Aber selbst wenn synchrone APIs unterstützt wären, würden Sie eher die asynchrone API verwenden, wenn Sie mit IndexedDB arbeiten.</p> +<p>IndexedDB ist eine Alternative zur WebSQL-Datenbank, welche vom W3C am 18. November 2010 als veraltet erklärt wurde. Während sowohl IndexedDB als auch WebSQL Lösungen zur Speicherung von Daten bieten, bieten sie nicht dieselben Funktionalitäten. WebSQL-Datenbank ist ein relationales Datenbankanfragesystem, IndexedDB hingegen ist ein indiziertes Tabellensystem.</p> +<h2 id="concepts" name="concepts">Wichtige Konzepte</h2> +<p>Wenn Sie die Arbeit mit anderen Datenbanksystemen gewohnt sind kann die Arbeit mit IndexedDB am Anfang ungewohnt erscheinen. Behalten Sie deshalb folgende wichtige Konzepte im Hinterkopf:</p> +<ul> + <li> + <p><strong>IndexedDB-Datenbanken speichern Schlüssel-Wert-Paare.</strong> Die Werte können komplexe strukturierte Objekte sein, und Schlüssel können Eigenschaften dieser Objekte sein. Für eine schnelle Suche oder eine sortierte Aufzählung können Indizes erstellt werden, die irgendeine Eigenschaft der Objekte nutzen.</p> + </li> + <li> + <p><strong>IndexedDB baut auf einem Transaktions-Datenbankmodell auf.</strong> Alles, was Sie in IndexedDB tun, geschieht immer im Kontext einer <a href="#gloss_transaction">Transaktion</a>. Die IndexedDB-API bietet viele Objekte, die Indizes, Tabellen, Positionsmarken usw. repräsentieren, aber jedes einzelne dieser Objekte ist an eine bestimmte Transaktion gebunden. Deshalb können Sie außerhalb einer Transaktion keine Befehle ausführen oder Positionsmarken öffnen.</p> + <p>Transaktionen haben eine wohldefinierte Lebenszeit, deswegen führt der Versuch eine Transaktion zu verwenden, nachdem sie beendet ist, zu Exceptions. Außerdem führen Transaktionen ein Auto-Commit durch und können nicht von Hand committed werden.</p> + <p>Dieses Transaktionsmodell ist besonders nützlich im Hinblick auf was passieren könnte, wenn ein Benutzer zwei Instanzen einer Webapp gleichzeitig in verschiedenen Tabs öffnen würde. Ohne Transaktions-Operationen könnten die Änderungen der beiden Instanzen miteinander in Konflikt geraten. Wenn Sie mit Transaktionen in Datenbanken nicht vertraut sind, lesen Sie den <a class="link-https" href="https://de.wikipedia.org/wiki/Transaktion_(Informatik)" title="https://secure.wikimedia.org/wikipedia/en/wiki/Database_transaction">Wikipedia-Artikel über Transaktionen</a>. Eine weitere Beschreibung finden Sie außerdem im Abschnitt Definitionen bei <a href="#gloss_transaction">Transaktion</a>.</p> + </li> + <li> + <p><strong>Die IndexedDB API ist meistens asynchron.</strong> Die API übergibt Daten nicht, indem sie Werte zurückgibt; stattdessen muss eine Callback-Funktion übergeben werden. Daten werden nicht in der Datenbank <em>abgelegt</em> oder aus ihr mittels synchronen Methoden <em>abgerufen</em>. Stattdessen muss eine Datenbankoperation <em>angefordert</em> werden. DOM-Ereignisse informieren darüber, wenn die Operation beendet ist, und aus der Art des Ereignisses lässt sich erkennen, ob die Operation erfolgreich war oder fehlschlug. Das klingt zunächst etwas kompliziert, aber hier wurden einige vernünfte Maßnahmen umgesetzt. Diese Funktionsweise ist außerdem nicht so anders als die, mit der <a href="/de/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a> arbeitet.</p> + </li> + <li> + <p><strong>IndexedDB verwendet Anfragen, überall. </strong>Anfragen sind Objekte, die Erfolgs- oder Fehlschlag-DOM-Ereignisse erhalten, welche zuvor erwähnt wurden. Anfragen können die Eigenschaften <code style="font-size: 14px;">onsuccess</code> und <code style="font-size: 14px;">onerror</code> besitzen. Die Funktionen <code style="font-size: 14px;">addEventListener()</code> und <code style="font-size: 14px;">removeEventListener()</code> können auf ihnen ausgeführt werden. Sie haben außerdem die Eigenschaften <code style="font-size: 14px;">readyState</code>, <code style="font-size: 14px;">result</code>, und <code style="font-size: 14px;">errorCode</code>, die den Status der Anfrage mitteilen. Die Eigenschaft <code style="font-size: 14px;">result</code> ist besonders zauberhaft, da sie viele verschiedene Dinge darstellen kann, abhängig davon, wie die Anfrage erzeugt wurde (z.B. eine Instanz von <code style="font-size: 14px;">IDBCursor</code>, oder der Schlüssel zu einem Wert, den Sie gerade der Datenbank hinzugefügt haben).</p> + </li> + <li> + <p><strong>IndexedDB verwendet DOM-Ereignisse um Sie darüber zu informieren, wenn Ergebnisse verfügbar sind.</strong> DOM-Ereignisse haben immer die Eigenschaft <code style="font-size: 14px;">type</code> (in IndexedDB ist sie in den meisten Fällen auf „<code style="font-size: 14px;">success</code>“ oder „<code style="font-size: 14px;">error</code>“ gesetzt). DOM-Ereignisse haben außerdem eine Eigenschaft <code style="font-size: 14px;">target</code>, die Ihnen verrät in welche Richtung das Ereignis unterwegs ist. In den meisten Fällen ist das <code style="font-size: 14px;">target</code> eines Ereignisses das <code style="font-size: 14px;">IDBRequest</code> Objekt, das als Ergebnis einiger Datenbankoperationen erzeugt wurde. Success events don't bubble up and they can't be canceled. Error events, on the other hand, do bubble, and can be cancelled. Das ist recht wichtig, da Fehlerereignisse jede Transaktion, in der sie auftauchen, zu einem Abort führen, es sei denn diese wird annulliert (cancel).</p> + </li> + <li> + <p><strong>IndexedDB ist objektorientiert.</strong> IndexedDB ist keine relationale Datenbank, die Tabellen mit Sammlungen von Zeilen und Spalten hat. Dieser wichtige und grundlegende Unterschied beeinflusst die Art und Weise, wie Sie Ihre Anwendungen gestalten und bauen.<br> + <br> + In einem traditionellen relationalen Datenspeicher würden Sie Tabellen haben, in denen Sammlungen an Zeilen von Daten und Spalten von <em>named types</em> von Daten gespeichert wären. IndexedDB auf der anderen Seite erfordert es, dass Sie einen Objektspeicher für einen Datentyp erzeugen und einfach JavaScript-Objekte in diesem Speicher ablegen. Jeder Objektspeicher kann eine Sammlung an Indizes beinhalten, die es einfach machen zwischen ihnen zu suchen und zu iterieren. Wenn Sie nicht mit objektorientiertem Managementsystemen von Datenbanken vertraut sind, lesen Sie den <a class="external" href="https://de.wikipedia.org/wiki/Objektdatenbank" title="Objektdatenbank">Wikipedia-Artikel über Objektdatenbanken</a>.</p> + </li> + <li> + <p><strong>IndexedDB verwendet keine </strong><strong>Structured Query Language (<abbr>SQL</abbr>).</strong> Es verwendet Anfragen, die einen Positionsmarker erzeugen, den Sie verwenden um durch die Ergebnismenge zu iterieren. Wenn Sie nicht mit NoSQL-Systemen vertraut sind, lesen Sie den <a class="external" href="https://de.wikipedia.org/wiki/NoSQL" title="NoSQL">Wikipedia-Artikel zu NoSQL</a>.</p> + </li> + <li> + <p><a name="origin"><strong>IndexedDB hält an einer Same-Origin-Policy fest</strong></a>. Eine Herkunft (origin) besteht aus der Domain, dem Anwendungsschichtenprotokoll und dem Port einer URL des Dokuments, auf dem das Skript ausgeführt wird. Jede Herkunft hat ihre eigene entsprechende Untermenge an Datenbanken. Jede Datenbank hat einen Namen, das sie innerhalb einer Herkunft identifiziert.<br> + <br> + Die von IndexedDB auferlegte Sicherheitsbegrenzung hindert Anwendungen daran, auf Daten einer anderen Herkunft zuzugreifen. Während eine Anwendung oder eine Seite, die unter <a class="external" href="http://www.example.com/app/" rel="freelink">http://www.example.com/app/</a> liegt, Daten aus <a class="external" href="http://www.example.com/dir/" rel="freelink">http://www.example.com/dir/</a> abrufen kann, weil sie die gleiche Herkunft haben, kann sie nicht Daten aus <a class="external" href="http://www.example.com:8080/dir/" rel="freelink">http://www.example.com:8080/dir/</a> (anderer Port) oder <a class="link-https" href="https://www.example.com/dir/" rel="freelink">https://www.example.com/dir/</a> (anderes Protokoll) abrufen, weil sie verschiedene Herkünfte haben.</p> + </li> +</ul> +<h2 id="definitions" name="definitions">Definitionen</h2> +<p>Dieser Abschitt definiert und erklärt Begriffe, die in der IndexedDB-API verwendet werden.</p> +<h3 id="database" name="database">Datenbank</h3> +<dl> + <dt> + <a name="gloss_database">Datenbank</a></dt> + <dd> + Ein Aufbewahrungsort für Informationen, typischerweise bestehend aus einem oder mehreren <a href="#gloss_object_store" title="#gloss_object_store"><em>Objektspeichern</em></a>. Jede Datenbank muss folgende Angaben enthalten: + <ul> + <li>Name. Er identifiziert die Datenbank innerhalb einer konkreten Herkunft und verändert sich nicht innerhalb seiner Lebenszeit. Der Name kann aus einem beliebigen String-Wert bestehen (einschließlich dem leeren String).</li> + <li> + <p>Aktuelle <a href="#gloss_version"><em>Version</em></a>. Wenn eine Datenbank zum ersten Mal erstellt wird, nimmt ihre Version den integer-Wert 1 an, wenn nichts anderes angegeben wird. Jede Datenbank kann zu einem Zeitpunkt nur eine Version haben.</p> + </li> + </ul> + </dd> + <dt> + <a name="gloss_object_store">Objektspeicher</a></dt> + <dd> + <p>Das Instrument, mit welchem Daten in einer Datenbank gespeichert werden. Der Objektspeicher hält Eintragungen aus Schlüssel-Wert-Paaren permanent. Eintragungen innerhalb eines Objektspeichers werden entsprechend der <em><a href="#gloss_key">Schlüssel</a></em> in aufsteigender Reihenfolge sortiert.</p> + <p>Jeder Objektspeicher muss einen Namen haben, der innerhalb seiner Datenbank einzigartig ist. Der Objektspeicher kann optional einen <em><a href="#gloss_keygenerator">Schlüsselerzeuger</a></em> und einen <em><a href="#gloss_keypath">Schlüsselpfad</a></em> besitzen. Wenn der Objektspeicher einen Schlüsselpfad hat, verwendet er <em><a href="#gloss_inline_key">in-line keys</a></em>; ansonsten <em><a href="#gloss_outofline_key">out-of-line keys</a></em>.</p> + <p>Eine Referenzdokumentation zu Objektspeichern finden Sie unter <a href="../../../../en/IndexedDB/IDBObjectStore" rel="internal">IDBObjectStore</a> oder <a href="../../../../en/IndexedDB/IDBObjectStoreSync" rel="internal">IDBObjectStoreSync</a>.</p> + </dd> + <dt> + <a name="gloss_version">Version</a></dt> + <dd> + Wenn eine Datenbank zum ersten Mal erstellt wird, ist ihre Versionsnummer die integer-Zahl 1. Jede Datenbank hat zu jedem Zeitpunkt genau eine Versionsnummer; eine Datenbank kann nicht in verschiedenen Versionen gleichzeitig existieren. Die Versionsnummer kann nur geändert werden, indem die Datenbank mit einer größeren Versionsnummer geöffnet wird als mit der aktuellen. Das wird die <em>Transaktion</em> <code>versionchange</code> starten und ein <code>upgradeneeded</code> Ereignis auslösen. Die einzige Stelle, an der das Schema der Datenbank geupdatet werden kann, ist innerhalb des Handlers dieses Ereignisses.<br> + </dd> + <dd> + Anmerkung: Diese Definition beschreibt die <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">aktuellsten Spezifikationen</a>, welche nur in Browsern auf dem neuesten Stand implementiert sind. In alten Browsern ist die mittlerweile veraltete und entfernte Methode <a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="/en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a> implementiert.</dd> + <dt> + <a name="gloss_database_connection">Datenbankverbindung</a></dt> + <dd> + Eine Operation, die beim Öffnen einer <em><a href="#gloss_database">Datenbank</a></em> erstellt wird. Eine vorgegebene Datenbank kann mehrere Verbindungen gleichzeitig haben.</dd> + <dt> + <a name="gloss_transaction">Transaktion</a></dt> + <dd> + <p>Eine nicht teilbare und dauerhafte Menge an Datenzugriffs- und Datenmodifikationsoperationen auf einer bestimmten Datenbank. Durch Transaktionen können Sie auf die Daten einer Datenbank zugreifen. Tatsächlich muss jeder Lese- oder Schreibvorgang von Daten in einer Transaktion stattfinden.<br> + <br> + Eine Datenbankverbindung kann mit mehreren aktiven Transaktionen gleichzeitig verknüpft sein, so lange schreibende Transaktionen keine überlappenden <a href="#gloss_scope"><em>scopes</em></a> haben. The scope of transactions, which is defined at creation, determines which object stores the transaction can interact with and remains constant for the lifetime of the transaction. So, for example, if a database connection already has a writing transaction with a scope that just covers the <code>flyingMonkey</code> object store, you can start a second transaction with a scope of the <code>unicornCentaur</code> and <code>unicornPegasus</code> object stores. As for reading transactions, you can have several of them—even overlapping ones.</p> + <p>Transactions are expected to be short-lived, so the browser can terminate a transaction that takes too long, in order to free up storage resources that the long-running transaction has locked. You can abort the transaction, which rolls back the changes made to the database in the transaction. And you don't even have to wait for the transaction to start or be active to abort it.</p> + <p>The three modes of transactions are: <code>readwrite</code>, <code>readonly</code>, and <code>versionchange</code>. The only way to create and delete object stores and indexes is by using a <code>versionchange</code> transaction. To learn more about transaction types, see the reference article for <a href="/de/docs/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a>.</p> + <p>Because everything happens within a transaction, it is a very important concept in IndexedDB. To learn more about transactions, especially on how they relate to versioning, see <a href="/en-US/docs/Web/API/IDBTransaction" rel="internal">IDBTransaction</a>, which also has reference documentation. For the documentation on the synchronous API, see <a href="/en-US/docs/Web/API/IDBTransactionSync" rel="internal">IDBTransactionSync</a>.</p> + </dd> + <dt> + <a name="gloss_request">Anfrage</a></dt> + <dd> + Die Operation, mit der Lese- und Schreibvorgänge auf einer Datenbank ausgeführt werden. Jede Anfrage repräsentiert eine Lese- oder Schreiboperation.</dd> + <dt> + <a name="gloss_index">Index</a></dt> + <dd> + <p>Ein Spezialobjektspeicher zum Nachschlagen von Einträgen eines anderen Objektspeichers, bezeichnet als <em>referenzierter Objektspeicher</em>. Der Index ist ein persistenter Schlüssel-Wert-Speicher, wobei der Wert seiner Einträge dem Schlüssel eines Eintrages im referenzierten Objektspeicher entspricht. Die Einträge in einem Index werden automatisch eingepflegt, sobald Einträge im referenzierten Objekt eingefügt, aktualisiert oder entfernt werden. Jeder Eintrag in einem Index kann auf nur einen Eintrag in seinem referenzierten Objektspeicher zeigen, aber mehrere Indizes können auf denselben Objektspeicher verweisen. Wenn der Objektspeicher sich ändert, werden alle Indizes, die auf ihn verweisen, automatisch aktualisiert.</p> + <p>Alternativ können Einträge eines Objektspeichers mithilfe eines <a href="#gloss_key">Schlüssels</a> nachgeschlagen werden.</p> + <p>Um mehr über die Verwendung von Indizes zu erfahren, lesen Sie <a href="/de/docs/IndexedDB/Using_IndexedDB#Using_an_index" title="en/IndexedDB/Using_IndexedDB#Using_an_index">Using IndexedDB</a>. Die Referenzdokumentation zu Indizes finden Sie unter <a href="/de/docs/Web/API/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p> + </dd> +</dl> +<h3 id="key" name="key">Schlüssel und Wert</h3> +<dl> + <dt> + <a name="gloss_key">Schlüssel</a></dt> + <dd> + <p>Ein Datenwert über welchen abgelegte Werte aus dem Objektspeicher sortiert und ausgelesen werden können. Der Objektspeicher kann den Schlüssel aus einer dieser drei Quellen erlangen: Einem <em><a href="#gloss_keygenerator">Schlüsselgenerator</a></em>, einem <em><a href="#gloss_keypath">Schlüsselpfad</a></em> und einem explizit angegebem Wert. Der Schlüssel muss aus einem Datentyp bestehen, der eine Nummer hat, die größer ist als die des Schlüssel vor ihm. Jeder Eintrag in einem Objektspeicher muss einen innerhalb des gleichen Objektspeichers einzigartigen Schlüssel haben, deshalb können nicht mehrere Einträge mit demselben Schlüssel in einem vorgegebenem Objektspeicher vorliegen.<br> + <br> + Ein Schlüssel kann einen der folgenden Typen haben: <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, float und <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array" title="en/JavaScript/Reference/Global Objects/Array">array</a>. Bei Arrays kann der Schlüssel zwischen einem leeren Wert und unendlich liegen. Arrays können wiederum Arrays beinhalten. Es gibt keine Vorschrift nur Schlüssel der Typen string oder integer zu verwenden {{ fx_minversion_inline("11") }}.</p> + <p>Alternativ können Sie Einträge eines Objektspeichers auch mithilfe eines <em><a href="#gloss_index">Index</a></em> nachschlagen.</p> + </dd> + <dt> + <a name="gloss_keygenerator">Schlüsselgenerator</a></dt> + <dd> + Ein Mechanismus um neue Schlüssel in einer angeordneten Reihenfolge zu erzeugen. Wenn ein Objektspeicher über keinen Schlüsselgenerator verfügt, muss die Anwendung Schlüssel für zu speichernde Einträge zur Verfügung stellen. Generatoren werden nicht zwischen Speichern geteilt. Dies ist mehr ein Detail von Browserimplementierungen, da in der Webentwicklung nicht wirklich Schlüsselgeneratoren erzeugt oder auf sie zugegriffen wird.</dd> + <dt> + <a name="gloss_inline_key">in-line key</a></dt> + <dd> + A key that is stored as part of the stored value. It is found using a <em>key path</em>. An in-line key can be generated using a generator. After the key has been generated, it can then be stored in the value using the key path or it can also be used as a key.</dd> + <dt> + <a name="gloss_outofline_key">out-of-line key</a></dt> + <dd> + A key that is stored separately from the value being stored.</dd> + <dt> + <a name="gloss_keypath">key path</a></dt> + <dd> + Defines where the browser should extract the key from a value in the object store or index. A valid key path can include one of the following: an empty string, a JavaScript identifier, or multiple JavaScript identifiers separated by periods. It cannot include spaces.</dd> + <dt> + <a name="gloss_value">value</a></dt> + <dd> + <p>Each record has a value, which could include anything that can be expressed in JavaScript, including: <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Boolean" rel="internal" title="en/JavaScript/Reference/Global_Objects/Boolean">boolean</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Number" rel="internal" title="en/JavaScript/Reference/Global_Objects/Number">number</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global Objects/Object">object</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array" rel="internal" title="en/JavaScript/Reference/Global_Objects/Array">array</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/RegExp" rel="internal" title="en/JavaScript/Reference/Global_Objects/RegExp">regexp</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="en/JavaScript/Reference/Global_Objects/undefined">undefined</a>, and null.</p> + <p>When an object or array is stored, the properties and values in that object or array can also be anything that is a valid value.</p> + <p><a href="/de/docs/Web/API/Blob" title="en/DOM/Blob">Blobs</a> and files can be stored, cf. <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">specification</a> {{ fx_minversion_inline("11") }}.</p> + </dd> +</dl> +<h3 id="range" name="range">Range and scope</h3> +<dl> + <dt> + <a name="gloss_scope">scope</a></dt> + <dd> + The set of object stores and indexes to which a transaction applies. The scopes of read-only transactions can overlap and execute at the same time. On the other hand, the scopes of writing transactions cannot overlap. You can still start several transactions with the same scope at the same time, but they just queue up and execute one after another.</dd> + <dt> + <a name="gloss_cursor">cursor</a></dt> + <dd> + A mechanism for iterating over multiple records with a <em>key range</em>. The cursor has a source that indicates which index or object store it is iterating. It has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. For the reference documentation on cursors, see <a href="/de/docs/Web/API/IDBCursor" rel="internal">IDBCursor</a> or <a href="/de/docs/Web/API/IDBCursorSync" rel="internal">IDBCursorSync</a>.</dd> + <dt> + <a name="gloss_key_range">key range</a></dt> + <dd> + <p>A continuous interval over some data type used for keys. Records can be retrieved from object stores and indexes using keys or a range of keys. You can limit or filter the range using lower and upper bounds. For example, you can iterate over all values of a key between x and y.</p> + <p>For the reference documentation on key range, see <a href="/de/docs/Web/API/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p> + </dd> +</dl> +<h2 id="limitations" name="limitations">Limitations</h2> +<p>IndexedDB is designed to cover most cases that need client-side storage. However, it is not designed for a few cases like the following:</p> +<ul> + <li>Internationalized sorting. Not all languages sort strings in the same way, so internationalized sorting is not supported. While the database can't store data in a specific internationalized order, you can sort the data that you've read out of the database yourself.</li> + <li>Synchronizing. The API is not designed to take care of synchronizing with a server-side database. You have to write code that synchronizes a client-side indexedDB database with a server-side database.</li> + <li>Full text searching. The API<span style="direction: ltr;"> does not have an</span><span style="direction: ltr;"> equivalent of the <code>LIKE</code> operator in SQL. </span></li> +</ul> +<p>In addition, be aware that browsers can wipe out the database, such as in the following conditions:</p> +<ul> + <li>The user requests a wipe out.<br> + Many browsers have settings that let users wipe all data stored for a given website, including cookies, bookmarks, stored passwords, and IndexedDB data.</li> + <li>The browser is in private browsing mode.<br> + Some browsers, have "private browsing" (Firefox) or "incognito" (Chrome) modes. At the end of the session, the browser wipes out the database.</li> + <li>The disk or quota limit has been reached.</li> + <li>The data is corrupt.</li> + <li>An incompatible change is made to the feature.</li> +</ul> +<p>The exact circumstances and browser capabilities change over time, but the general philosophy of the browser vendors is to make the best effort to keep the data when possible.</p> +<div class="warning"> + <p><strong>Warning:</strong> At the moment due to bugs or on purpose it's impossible to open an IndexedDB database from a <a href="/de/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets">Web App</a>. This needs more investigation and then be documented.</p> +</div> +<h2 id="next" name="next">Next step</h2> +<p>OK, so, now with these big concepts under our belts, we can get to more concrete stuff. For a tutorial on how to use the API, see <a href="/de/docs/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a>.</p> +<h2 id="See_also">See also</h2> +<p>Specification</p> +<ul> + <li><a href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/"><span style="direction: ltr;">Indexed Database API Specification</span></a></li> +</ul> +<p>Reference</p> +<ul> + <li><a href="/de/docs/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li> +</ul> +<p>Tutorials</p> +<ul> + <li><a href="/de/docs/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a></li> + <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">A simple TODO list using HTML5 IndexedDB</a><span class="external">. </span><span class="external"> {{ Note("This example uses an old version of the spec and does not work on up-to-date browsers - it still uses the removed <code>setVersion()</code> method.") }}</span></li> +</ul> +<p>Related article</p> +<ul> + <li><a class="external" href="http://msdn.microsoft.com/de-de/magazine/gg679063%28en-us%29.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li> +</ul> diff --git a/files/de/web/api/indexeddb_api/index.html b/files/de/web/api/indexeddb_api/index.html new file mode 100644 index 0000000000..171ca8a4c5 --- /dev/null +++ b/files/de/web/api/indexeddb_api/index.html @@ -0,0 +1,252 @@ +--- +title: IndexedDB +slug: Web/API/IndexedDB_API +tags: + - API + - Datenbank + - Einstieg + - IndexedDB + - NeedsTranslation + - Referenz + - Speicher + - TopicStub + - speichern +translation_of: Web/API/IndexedDB_API +--- +<div>{{DefaultAPISidebar("IndexedDB")}}</div> + +<p>IndexedDB ist eine low-level API für die clientseitige Speicherung großer Mengen strukturierter Daten einschließlich Dateien. Sie erlaubt auch Hochleistungssuchen dieser Daten durch die Verwendung von Indizes. Während der <a href="/de/docs/DOM/Storage" title="en-US/docs/DOM/Storage">DOM Speicher</a> nützlich zur Speicherung kleiner Datenmengen ist, ist er für größere Mengen strukturierte Daten wenig hilfreich. IndexedDB stellt hierfür eine Lösung bereit. Dies ist die Einstiegsseite der IndexedDB Referenz von MDN — hier stellen wir Links zur vollständigen API Referenz, Gebrauchsanleitungen, Unterstützungsdetails der Browser und einige Erklärungen des Schlüsselkonzepts zur Verfügung.</p> + +<p>{{AvailableInWorkers}}</p> + +<div class="note"> +<p><strong>Anmerkung</strong>: Die IndexedDB API ist leistungsfähig, kann aber für einfache Anwendungen zu kompliziert erscheinen. Wenn Du eine einfachere API bevorzugst, versuche Sammlungen wie <a href="https://localforage.github.io/localForage/">localForage</a> und <a href="http://www.dexie.org/">dexie.js</a>. Diese machen IndexedDB benutzerfreundlicher.</p> +</div> + +<div class="note"> +<p><strong>Anmerkung</strong>: Manche älteren Browser unterstützen IndexedDB nicht aber sie unterstützen <a href="http://caniuse.com/sql-storage"> WebSQL</a>. Eine Möglichkeit dieses Problem zu umgehen ist es, mittels polyfill auf <a href="http://www.w3.org/TR/webdatabase/">WebSQL</a> oder auch auf <a href="/de/docs/Web/Guide/API/DOM/Storage#localStorage">localStorage</a> für nicht unterstützende Browser zurückzugreifen. Das beste erhältiche polyfill ist derzeit <a href="https://localforage.github.io/localForage/">localForage</a>.</p> +</div> + +<h2 id="Schlüsselkonzepte_und_Gebrauch">Schlüsselkonzepte und Gebrauch</h2> + +<p>IndexedDB ist ein direktes Datenbank System, wie ein SQL-basiertes RDMS; während allerdings das Letztere Tabellen mit fixen Spalten benutzt, ist IndexedDB eine JavaScript-basierte objekt-orientierte Datenbank. IndexedDB läßt dich Objekte, die mit einem <strong>Schlüssel</strong> indiziert sind, speichern und wiederfinden. Jedes Objekt, das von einem <a href="/de/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">strukturierten Klon Algorithmus</a> unterstützt wird, kann gespeichert werden. Du brauchst zum Beschreiben des Datenbankschemas eine offene Verbindung zu deiner Datenbank, dann kannst du Daten mit einer Reihe von Tranaktionen wiederfinden und aktualisieren.</p> + +<ul> + <li>Lies mehr über die <a href="/de/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">Konzepte hinter IndexedDB</a>.</li> + <li>Nutze IndexedDB asynchron, indem du die Grundlagen mit unserer <a href="/de/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB Anleitung</a> erlernst.</li> + <li>Finde Entwickler Empfehlungen, um Web Apps offline arbeiten zu lassen auf unserer <a href="/en-US/Apps/Build/Offline">Offline Apps</a> Seite</li> +</ul> + +<div class="note"> +<p><strong>Anmerkung</strong>: wie die meisten Web Speicher Lösungen folgt IndexedDB einem <a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy">gleicher-Ursprung Grundsatz</a>. Deshalb ist es nicht möglich auf Daten anderer Domänen zuzugreifen, während man auf gespeicherte Daten innerhalb einer Domäne zugreift.</p> +</div> + +<h3 id="Synchron_und_asynchron">Synchron und asynchron</h3> + +<p>Operationen unter Verwendung von IndexedDB werden asynchron durchgeführt, um Anwendungen nicht zu blockieren. IndexedDB beinhaltete ursprünglich eine asynchrone und eine synchrone API; die synchrone API war nur für den Gebrauch von <a href="/de/docs/Web/Guide/Performance/Using_web_workers">Web Workers</a> gedacht. Die synchrone Version wurde aus der Spezifikation entfernt, weil ihre Notwendigkeit fraglich war, aber sie kann in Zukunft wieder eingeführt werden, wenn es genug Nachfrage von Web Entwicklern gibt.</p> + +<h3 id="Speichergrenzen_und_Löschkriterien">Speichergrenzen und Löschkriterien</h3> + +<p>Es gibt mehrere Webtechnologien, um Daten auf die eine oder andere Art auf der Client Seite zu speichern (d. h. auf deiner lokalen Festplatte), über IndexedDB wird dabei am häufigsten geredet. Der Prozess mit dem der Browser herausfindet, wieviel Speicherplatz Webdaten zur Verfügung gestellt werden soll und was gelöscht werden soll, wenn die Grenze erreicht ist, ist nicht einfach und unterscheidet sich zwischen den Browsern. <a href="/de/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Browser Speichergrenzen und Löschkriterien</a> versuchen zu erklären, wie das geschieht - zumindest im Fall von Firefox.</p> + +<h2 id="IndexedDB_Schnittstellen">IndexedDB Schnittstellen</h2> + +<p>Um Zugang zu einer Datenbank zu erhalten, benutze <a href="/de/docs/Web/API/IDBFactory.open"><code>open()</code></a> von den <a href="/de/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> Attributen eines <a href="/de/docs/DOM/window">window</a> Objekts. Diese Methode gibt ein {{domxref("IDBRequest")}} Objekt zurück; asynchrone Operationen kommunizieren mit der aufrufenden Anwendung durch feuern von Events von {{domxref("IDBRequest")}} Objekten.</p> + +<h3 id="Mit_einer_Datenbank_verbinden">Mit einer Datenbank verbinden</h3> + +<dl> + <dt>{{domxref("IDBEnvironment")}}</dt> + <dd>Stellt den Zugang zur IndexedDB Funktionalität zur Verfügung. Es ist implementiert durch die {{domxref("window")}} und {{domxref("worker")}} Objekte.</dd> + <dt>{{domxref("IDBFactory")}}</dt> + <dd>Stellt den Zugang zu einer Datenbank bereit. Dies ist die durch das globale Objekt <a href="/en-US/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB </code></a>bereitgestellte Schnittstelle und dadurch der Eingangspunkt für die API.</dd> + <dt>{{domxref("IDBOpenDBRequest")}}</dt> + <dd>Stellt eine Anfrage zum Öffnen einer Datenbank dar.</dd> + <dt>{{domxref("IDBDatabase")}}</dt> + <dd>Repräsentiert eine Verbindung zu einer Datenbank. Es ist der einzige Weg eine Transaktion in der Datenbank zu erreichen.</dd> +</dl> + +<dl> + <dt>{{domxref("IDBRequest")}}</dt> + <dd>Eine allgemeine Schnittstelle, die Datenbankabfragen behandelt und den Zugang zu Ergebnissen bereitstellt.</dd> +</dl> + +<h3 id="Abrufen_und_modifizieren_von_Daten">Abrufen und modifizieren von Daten</h3> + +<dl> + <dt>{{domxref("IDBTransaction")}}</dt> + <dd>Stellt eine Transaktion dar. Du erstellst eine Transaktion zu einer Datenbank, beschreibst den Geltungsbereich (beispielsweise auf welchen Objekt Speicher du zugreifen willst), und bestimmst die Art des Zugriffs (nur lesen oder lesen und schreiben), den du willst.</dd> + <dt>{{domxref("IDBObjectStore")}}</dt> + <dd>Steht für einen Objektspeicher, der Zugriff auf einen Datensatz in einer IndexedDB Datenbank erlaubt via Primärschlüsselsuche.</dd> + <dt>{{domxref("IDBIndex")}}</dt> + <dd>Gestattet ebenfalls Zugriff auf eine Teilmenge von Daten in einer IndexedDB Datenbank. Nutzt allerdings einen Index anstelle eines Primärschlüssels um an Einträge zu gelangen. Dies kann schneller sein als die Verwendung von {{domxref("IDBObjectStore")}}.</dd> + <dt>{{domxref("IDBCursor")}}</dt> + <dd>Iterates over object stores and indexes.</dd> + <dt>{{domxref("IDBCursorWithValue")}}</dt> + <dd>Iterates over object stores and indexes and returns the cursor's current value.</dd> + <dt>{{domxref("IDBKeyRange")}}</dt> + <dd>Defines a key range that can be used to retrieve data from a database in a certain range.</dd> + <dt>{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}</dt> + <dd>Defines a key range that can be used to retrieve data from a database in a certain range, sorted acording to the rules of the locale specified for a certain index (see <a href="/en-US/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>.).</dd> +</dl> + +<h3 id="Custom_event_interfaces">Custom event interfaces</h3> + +<p>This specification fires events with the following custom interface:</p> + +<dl> + <dt>{{domxref("IDBVersionChangeEvent")}}</dt> + <dd>The <code>IDBVersionChangeEvent</code> interface indicates that the version of the database has changed, as the result of an {{domxref("IDBOpenDBRequest.onupgradeneeded")}} event handler function.</dd> +</dl> + +<h3 id="Obsolete_interfaces">Obsolete interfaces</h3> + +<p>An early version of the specification also defined these now removed interfaces. They are still documented in case you need to update previously written code:</p> + +<dl> + <dt>{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}</dt> + <dd>Represents a request to change the version of a database. The way to change the version of the database has since changed (by calling {{domxref("IDBFactory.open")}} without also calling {{domxref("IDBDatabase.setVersion")}}), and the interface {{domxref("IDBOpenDBRequest")}} now has the functionality of the removed {{domxref("IDBVersionChangeRequest")}}.</dd> + <dt>{{domxref("IDBDatabaseException")}} {{obsolete_inline}}</dt> + <dd>Represents exception conditions that can be encountered while performing database operations.</dd> + <dt>{{domxref("IDBTransactionSync")}} {{obsolete_inline}}</dt> + <dd>Sync version of {{domxref("IDBTransaction")}}.</dd> + <dt>{{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}</dt> + <dd>Sync version of {{domxref("IDBObjectStore")}}.</dd> + <dt>{{domxref("IDBIndexSync")}} {{obsolete_inline}}</dt> + <dd>Sync version of {{domxref("IDBIndex")}}.</dd> + <dt>{{domxref("IDBFactorySync")}} {{obsolete_inline}}</dt> + <dd>Sync version of {{domxref("IDBFactory")}}.</dd> + <dt>{{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}</dt> + <dd>Sync version of {{domxref("IDBEnvironment")}}.</dd> + <dt>{{domxref("IDBDatabaseSync")}} {{obsolete_inline}}</dt> + <dd>Sync version of {{domxref("IDBDatabase")}}.</dd> + <dt>{{domxref("IDBCursorSync")}} {{obsolete_inline}}</dt> + <dd>Sync version of {{domxref("IDBCursor")}}.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<ul> + <li><a class="external" href="http://marco-c.github.io/eLibri/">eLibri:</a> A powerful library and eBook reader application, written by Marco Castelluccio, winner of the IndexedDB Mozilla DevDerby.</li> + <li><a class="external" href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>): The reference application for the examples in the reference docs.</li> + <li><a class="external" href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></li> +</ul> + +<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('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td>Initial definition</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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>23.0 {{property_prefix("webkit")}}<br> + 24</p> + </td> + <td>{{CompatGeckoDesktop("10.0")}} {{property_prefix("moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10, partial</td> + <td>15</td> + <td>7.1</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("37.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>IDBLocaleAwareKeyRange</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("43.0")}}<sup>[2]</sup></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>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>1.0.1</td> + <td>10</td> + <td>22</td> + <td>8</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>IDBLocaleAwareKeyRange</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("43.0")}}<sup>[2]</sup></td> + <td>2.5<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<ul> + <li>[1] {{domxref("IDBCursorWithValue")}} is not available in workers until Gecko 42.0 {{geckoRelease("42.0")}}.</li> + <li>[2] This feature is currently hidden behind a flag — to enable it and experiment, go to about:config and enable dom.indexedDB.experimental.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="https://localforage.github.io/localForage/">localForage</a>: A Polyfill providing a simple name:value syntax for client-side data storage, which uses IndexedDB in the background, but falls back to WebSQL and then localStorage in browsers that don't support IndexedDB.</li> + <li><a class="external" href="http://www.dexie.org/">dexie.js</a>: A wrapper for IndexedDB that allows much faster code development via nice, simple syntax.</li> +</ul> diff --git a/files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html b/files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html new file mode 100644 index 0000000000..3d6d61cf3f --- /dev/null +++ b/files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html @@ -0,0 +1,1180 @@ +--- +title: Verwendung von IndexedDB +slug: Web/API/IndexedDB_API/IndexedDB_verwenden +translation_of: Web/API/IndexedDB_API/Using_IndexedDB +--- +<p>Mit IndexedDB lassen sich Daten innerhalb des Browsers eines Benutzers permanent abzulegen. Es können so Webanwendungen mit funktionsreichen Abfragemöglichkeiten in Anwendungen erstellt werden, die sowohl online als auch offline funktionieren können, da keine Netzwerkfunktionalitäten benötigt werden.</p> + +<h2 id="Über_dieses_Dokument">Über dieses Dokument</h2> + +<p>Dieses Tutorial bespricht die Verwendung der asynchronen API von IndexedDB. Wenn Sie nicht mit IndexedDB vertraut sind, sollten Sie zuerst den Artikel <a href="/de/docs/IndexedDB/Grundkonzepte_hinter_IndexedDB" title="Grundkonzepte">Grundkonzepte</a> lesen.</p> + +<p>Eine Referenzdokumentation zur IndexedDB-API finden Sie im Artikel <a href="/de/docs/IndexedDB" title="IndexedDB">IndexedDB</a> und dessen Unterseiten, welche die Typen und Objekten dokumentieren, die von IndexedDB verwendet werden, ebenso wie die Methoden von sowohl synchronen als auch asynchronen APIs.</p> + +<h2 id="pattern" name="pattern">Grundschema</h2> + +<p>Das von IndexedDB unterstützte Grundschema sieht folgendermaßen aus:</p> + +<ol> + <li>Öffne eine Datenbank und starte eine Transaktion.</li> + <li>Erzeuge einen Objektspeicher.</li> + <li>Fordere die Ausführung von Datenbankoperationen an, wie das Hinzufügen und Auslesen von Daten.</li> + <li>Warte auf die richtige Art von DOM-Ereignis, das auftritt, wenn die Operation beendet ist.</li> + <li>Verarbeite die Ergebnisse? (, welche im Anforderungsobjekt gefunden werden können).</li> +</ol> + +<p>Mit dem Wissen über diese Grundkonzepte können wir uns nun konkreteren Dingen zuwenden.</p> + +<h2 id="open" name="open">Erzeugung und Strukturierung des Speichers</h2> + +<p>Weil sich die Spezifizierung noch in der Entwicklung befindet, verstecken sich aktuelle Implementierungen von IndexedDB unter Browserpräfixen. Bis sich die Spezifizierung verfestigt, könne Browserhersteller unterschiedliche Implementierungen der Standard-IndexedDB-API haben. Aber sobald Konsens auf dem Standard herrscht, implementieren die Hersteller ihn ohne Markierung durch Präfixe. Tatsächlich ist in manchen Implementierungen der Präfix entfernt: Internet Explorer 10, Firefox 16, Chrome 24. Wenn auf Gecko basierende Browser einen Präfix verwenden, dann verwenden sie den Präfix <code>moz</code>, während auf WebKit basierende Browser den Präfix <code>webkit</code> verwenden.</p> + +<h3 id="Verwendung_einer_experimentellen_Version_von_IndexedDB">Verwendung einer experimentellen Version von IndexedDB</h3> + +<p>Für den Fall, dass Sie Ihren Code in Browsern verwenden wollen, die noch Präfixe verwenden, können Sie folgenden Code benutzen:</p> + +<pre class="brush: js">// In der folgenden Zeile sollten Sie die Präfixe einfügen, die Sie testen wollen. +window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; +// Verwenden Sie "var indexedDB = ..." NICHT außerhalb einer Funktion. +// Ferner benötigen Sie evtl. Referenzen zu einigen window.IDB* Objekten: +window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; +window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; +// (Mozilla hat diese Objekte nie mit Präfixen versehen, also brauchen wir kein window.mozIDB*)</pre> + +<p>Beachten Sie, dass Implementierungen, die Präfixe verwenden, fehlerhaft oder unvollständig sein können oder einer alten Version der Spezifizierung folgen können. Deshalb ist es nicht empfohlen, sie im Produktivsystem zu verwenden. In manchen Fällen kann es sinnvoll sein, lieber einen Browser nicht zu unterstützen als zu behaupten, er würde unterstützt, und dann Fehler einzubüßen:</p> + +<pre class="brush: js">if (!window.indexedDB) { + window.alert("Ihr Browser unterstützt keine stabile Version von IndexedDB. Dieses und jenes Feature wird Ihnen nicht zur Verfügung stehen."); +} +</pre> + +<h3 id="Öffnen_einer_Datenbank">Öffnen einer Datenbank</h3> + +<p>Wir starten den ganzen Prozess folgendermaßen:</p> + +<pre class="brush: js">// Öffnen unserer Datenbank +var request = window.indexedDB.open("MeineTestdatenbank", 3); +</pre> + +<p>Sie sehen, das Öffnen einer Datenbank funktioniert wie jede andere Operation – Sie müssen sie „anfordern“.</p> + +<p>Die Anforderung zum Öffnen öffnet nicht sofort die Datenbank und startet auch die Transaktion nicht gleich. Der Aufruf zur <code>open()</code> Funktion gibt ein <a href="/de/docs/Web/API/IDBOpenDBRequest" title="IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a>-Objekt mit Ergebniswert (Erfolg) oder Fehlerwert zurück, die Sie als Ereignis verarbeiten. Die meisten anderen asynchronen Funktionen in IndexedDB machen das gleiche – sie geben ein <a href="/de/docs/Web/API/IDBRequest" title="IDBRequest"><code style="font-size: 14px; color: rgb(51, 51, 51);">IDBRequest</code></a>-Objekt mit Ergebnis oder Fehler zurück. Das Ergebnis für die open-Funktion ist eine Instanz einer <code style="font-size: 14px; color: rgb(51, 51, 51);"><a href="/de/docs/Web/API/IDBDatabase" title="IDBDatabase">IDBDatabase</a>.</code></p> + +<p>Der zweite Parameter der open-Methode ist die Version der Datenbank. Die Version der Datenbank bestimmt das Datenbankschema – den Objektspeichern und ihrer Strukturen. Wenn die angeforderte Version nicht existiert (weil die Datenbank neu ist, oder weil die Version aktualisiert wurde), wird das Ereignis <code>onupgradeneeded</code> ausgelöst, und es lässt sich eine neue Version der Datenbank im Handler für dieses Ereignis erzeugen. Mehr dazu später im Abschnitt <a href="#Updating_the_version_of_the_database">Aktualisieren der Version der Datenbank</a>.</p> + +<h4 id="Erzeugen_von_Handlern">Erzeugen von Handlern</h4> + +<p>Das erste, was Sie mit fast allen Anforderungen machen wollen, die Sie erzeugen, ist das Hinzufügen von Handlern für Erfolge und Fehler:</p> + +<pre class="brush: js">request.onerror = function(event) { + // Machen Sie etwas mit request.errorCode! +}; +request.onsuccess = function(event) { + // Machen Sie etwas mit request.result! +};</pre> + +<p>Welche der beiden Funktionen, <code>onsuccess()</code> oder <code>onerror()</code>, wird aufgerufen? Wenn alles fehlerfrei ablief, wird ein Erfolgsereignis (d.h. ein DOM-Ereignis, dessen <code>type</code> Eigenschaft auf <code>"success"</code> gesetzt ist) mit <code>request</code> als <code>target</code> ausgelöst. Sobald es ausgelöst wurde, wird die Funktion <code>onsuccess()</code> auf <code>request</code> ausgelöst mit dem Erfolgsereignis als Argument. Wenn nicht alles fehlerfrei ablief, wird ein Fehlerereignis (d.h. ein DOM-Ereignis, dessen <code>type</code> Eigenschaft auf <code>"error"</code> gesetzt ist) auf <code>request</code> ausgelöst. Dies löst die Funktion <code>onerror()</code> aus mit dem Fehlerereignis als Argument.</p> + +<p>Die IndexedDB-API ist so entworfen, dass sie die Notwendigkeit zur Fehlerbehandlung minimiert, also werden Sie wahrscheinlich nicht viele Fehlerereignisse sehen (zumindest nicht nachdem Sie sich an die API gewöhnt haben!). Beim Öffnen von Datenbanken jedoch gibt es ein paar typische Zustände, die Fehlerereignisse erzeugen. Das wahrscheinlichste Problem ist, dass der Benutzer festgelegt hat, den Webapps das Erzeugen von Datenbanken nicht zu erlauben. Eines der Hauptentwurfsziele von IndexedDB ist es, das Speichern von großen Datenmengen zur Offline-Verwendung zu erlauben. (Um mehr darüber zu erfahren, wieviel Speicher jedem Browser zur Verfügung steht, lesen Sie <a href="/de/docs/IndexedDB#Storage_limits" title="Storage_limits">Storage limits</a>).</p> + +<p>Offensichtlich wollen Browser nicht irgendeinem Werbenetzwerk oder einer böswilligen Website erlauben, Ihren Computer zu verschmutzen, deshalb warnen Browser den Benutzer, wenn eine Webapp zum ersten Mal versucht einen IndexedDB-Speicher zu öffnen. Der Benutzer kann wählen, ob er den Zugriff erlaubt oder verbietet. Außerdem ist IndexedDB komplett deaktiviert im Privaten Modus der Browser (Privater Modus für Firefox und Incognito Modus für Chrome). Der Hauptzweck vom Surfen im Privaten Modus ist es, keine Spuren zu hinterlassen, daher schlägt der Versuch fehl, eine Datenbank in diesem Modus zu öffnen.</p> + +<p>Nun nehmen wir an, dass der Benutzer Ihren Anfragen erlaubt hat, eine Datenbank zu erstellen, und Sie haben ein Erfolgsereignis erhalten, um den Erfolgs-Callback auszulösen; was kommt als nächstes? Die Anfrage wurde hier mit einem Aufruf von <code>indexedDB.open()</code> erzeugt, also ist <code>request.result</code> eine Instanz von <code>IDBDatabase</code>, und Sie wollen diese auf jeden Fall für später speichern. Ihr Code könnte etwa so aussehen:</p> + +<pre class="brush: js">var db; +var request = indexedDB.open("MeineTestdatenbank"); +request.onerror = function(event) { + alert("Warum haben Sie meiner Webapp nicht erlaubt IndexedDB zu verwenden?!"); +}; +request.onsuccess = function(event) { + db = request.result; +}; +</pre> + +<h4 id="Fehlerbehandlung">Fehlerbehandlung</h4> + +<p>Wie bereits oben erwähnt, werden Error events bei entsprechenden Fehlern ausgelöst und in der Objekthierarachie weiter nach oben gereicht. Solche Fehlerereignisse werden zunächst in der entsprechende Anfrage ausgelöst, die den Fehler verursacht hat. Anschließend werden sie zur Transaktion weitergereicht und schließlich zum Datenbankobjekt. Wenn man nicht für jede Anfrage einen Error-Handler schreiben möchte, kann man der Datenbank einen einzigen Error-Handler hinzufügen:</p> + +<pre class="brush: js">db.onerror = function(event) { + // Allgemeine Fehlerbehandlung, die für alle Anfragen an die Datenbank gilt. + alert("Datenbankfehler: " + event.target.errorCode); +}; +</pre> + +<p>Einer der häufigsten Fehler, die beim Öffnen der Datenbank auftreten, ist <code>VER_ERR</code>. Er zeigt an, dass die Versionsnummer der lokal gespeicherten Datenbank <em>größer </em> als die Versionsnummer ist, die man zu öffnen versucht. Ein solcher Fehler muss immer durch eine Fehlerbehandlung berücksichtigt werden.</p> + +<h3 id="Erstellen_oder_Updaten_der_Datenbank">Erstellen oder Updaten der Datenbank</h3> + +<p><a name="Updating_the_version_of_the_database"></a>Wenn eine neue Version der Datenbank erstellt wird, wird das <code style="font-style: normal; line-height: 1.5; color: rgb(51, 51, 51);">onupgradeneeded</code><span style="line-height: 1.5;"> Event ausgelöst. In der Handler-Funktion dieses Events musst du für die Erstellung der Datenbankspeicher, welche für diese Version benötigt wird, sorgen</span>:</p> + +<pre class="brush:js;">// Dieses Event ist lediglich in modernen Browsern verfügbar +request.onupgradeneeded = function(event) { + var db = event.target.result; + + // Erstelle ein ObjectStore für diese Datenbank + var objectStore = db.createObjectStore("name", { keyPath: "myKey" }); +};</pre> + +<p>The Versionsnummer der Datenbank ist vom Typ <code>unsigned long long</code>, so dass sie eine sehr große Ganzzahl sein kann.</p> + +<div class="warning"> +<p>Das Bedeutet auch, dass sie nicht vom Typ float sein darf, ansonsten wird sie zur nächstkleineren Ganzzahl abgerundet, so dass die Transaktion weder starten kann noch ein <code>upgradeneeded</code> ausgelöst wird. Beispielsweise sollte man nicht 2.4 als Versionsnummer verwenden:</p> + +<pre class="brush: js">var request = indexedDB.open("MeineTestdatenbank", 2.4); // don't do this, as the version will be rounded to 2</pre> +</div> + +<p>Wenn man die Versionsnummer der Datenbank erhöht, wird ein <code style="font-size: 14px; color: rgb(51, 51, 51);">onupgradeneeded</code><span style="line-height: 21px;"> </span> -Ereignis ausgelöst. In diesem Fall übernimmt die neue Datenbank automatisch die Objectstores von der Vorgängerversion der Datenbank, so dass man diese nicht erneut erzeugen muss. Lediglich neue Objectsores müssen angelegt oder nicht mehr gebrauchte der Vorgängerversion gelöscht werden. Wenn man einen bereits existierenden Objectstore ändern will (beispielsweise den keyPath veränden), ist es allerdings notwendig, den alten Objectstore zu löschen und einen neuen anzulegen. (Beachten Sie, dass dies die im Objectstore gespeicherten Informationen löscht, so dass man sie vorher auslesen und an anderer Stelle sichern sollte, bevor man ein Datenbankupgrade durchführt.)</p> + +<p>WebKit unterstützt die aktuelle Version dieser Spezifikation, wie sie in Chrome 23+ ausgeliefert wird, ebenso Opera 17+ und IE10+. Andere und ältere Implementierungen unterstützen nicht die aktuelle Version dieser Spezifikation und stellen damit auch noch nicht die Möglichkeit bereit, auf die Methodensignatur <code>indexedDB.open(name, version).onupgradeneeded</code> zugreifen zu könenn. Um ältere Versionen einer Datenbank auf neuer Versionen zu aktualisieren, siehe <a href="/en/IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated" title="https://developer.mozilla.org/en/IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated">IDBDatabase reference article</a>.</p> + +<h3 id="Strukturierung_der_Datenbank">Strukturierung der Datenbank</h3> + +<p>Im Folgenden wird gezeigt, wie man eine die Daten strukturiert. IndexedDB verwendet Objectstores anstatt Tabellen, wobei eine einzelne Datenbank viele verschiedene Objectsores enthalten kann. Jeglicher Wert im Objectstore ist einem bestimmten Schlüssel (key) zugeordnet. Es werden dabei unterschiedliche Arten von Schlüsseln verarbeitet, abhängig davon, ob der Objectstore einen <a href="/en/IndexedDB#gloss_key_path" title="https://developer.mozilla.org/en/IndexedDB#gloss_key_path">key path</a> oder einen <a href="/en/IndexedDB#gloss_key_generator" title="en/IndexedDB#gloss key generator">key generator</a> benutzt.</p> + +<p>Die folgende Tabelle gibt eine Übersicht über die bereitgestellten Arten von Schlüssseln.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Key Path</th> + <th scope="col">Key Generator</th> + <th scope="col">Beschreibung</th> + </tr> + </thead> + <tbody> + <tr> + <td>Nein</td> + <td>Nein</td> + <td>Dieser Objectstore kann Daten beliebigen Typs speichern, inklusive primitiven Typen wie Zahlen und Zeichenketten (Strings). Beim Hinzufügen von Werten muss ein separater Schlüssel angegeben werden.</td> + </tr> + <tr> + <td>Ja</td> + <td>Nein</td> + <td>Dieser Objectstore kann nur JavaScript-Objekte speichern. Die Objekte müssen ein Attribut haben, dass wie der key path benannt ist.</td> + </tr> + <tr> + <td>Nein</td> + <td>Ja</td> + <td>Dieser Objectstore kann Daten beliebigen Typs speichern. Beim Hinzufügen von Werten kann ein separater Schlüssel angegeben werden. Fehlt der Schlüssel, so wird er generiert.</td> + </tr> + <tr> + <td>Ja</td> + <td>Ja</td> + <td>Dieser Objectstore kann nur JavaScript-Objekte speichern. In der Regel wird der Schlüssel automatisch generiert und als gleichnamiges Attribut im Objekt gespeichert. Falls es jedoch bereits ein Attribut mit dem Namen gibt, so wird der Schlüssel nicht generiert, sondern der Wert des Attributes wird verwendet.</td> + </tr> + </tbody> +</table> + +<p>You can also create indices on any object store, provided the object store holds objects, not primitives. An index lets you look up the values stored in an object store using the value of a property of the stored object, rather than the object's key.</p> + +<p>Additionally, indexes have the ability to enforce simple constraints on the stored data. By setting the unique flag when creating the index, the index ensures that no two objects are stored with both having the same value for the index's key path. So, for example, if you have an object store which holds a set of people, and you want to ensure that no two people have the same email address, you can use an index with the unique flag set to enforce this.</p> + +<p>That may sound confusing, but this simple example should illustrate the concepts:</p> + +<pre class="brush: js">// This is what our customer data looks like. +const customerData = [ + { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" }, + { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" } +]; +const dbName = "the_name"; + +var request = indexedDB.open(dbName, 2); + +request.onerror = function(event) { + // Handle errors. +}; +request.onupgradeneeded = function(event) { + var db = event.target.result; + + // Create an objectStore to hold information about our customers. We're + // going to use "ssn" as our key path because it's guaranteed to be + // unique. + var objectStore = db.createObjectStore("customers", { keyPath: "ssn" }); + + // Create an index to search customers by name. We may have duplicates + // so we can't use a unique index. + objectStore.createIndex("name", "name", { unique: false }); + + // Create an index to search customers by email. We want to ensure that + // no two customers have the same email, so use a unique index. + objectStore.createIndex("email", "email", { unique: true }); + + // Store values in the newly created objectStore. + for (var i in customerData) { + objectStore.add(customerData[i]); + } +}; +</pre> + +<p>As mentioned previously, <code>onupgradeneeded</code> is the only place where you can alter the structure of the database. In it, you can create and delete object stores and build and remove indices.</p> + +<div>Object stores are created with a single call to <code>createObjectStore()</code>. The method takes a name of the store, and a parameter object. Even though the parameter object is optional, it is very important, because it lets you define important optional properties and refine the type of object store you want to create. In our case, we've asked for an object store named "customers" and defined a keyPath that is the property that makes an individual object in the store unique. That property in this example is "ssn" since a social security number is guaranteed to be unique. "ssn" must be present on every object that is stored in the objectStore.</div> + +<p>We've also asked for an index named "name" that looks at the <code>name</code> property of the stored objects. As with <code>createObjectStore()</code>, <code>createIndex()</code> takes an optional <code>options</code> object that refines the type of index that you want to create. Adding objects that don't have a <code>name</code> property still succeeds, but the object won't appear in the "name" index.</p> + +<p>We can now retrieve the stored customer objects using their <code>ssn</code> from the object store directly, or using their name by using the index. To learn how this is done, see the section on <a href="/en/IndexedDB/Using_IndexedDB#Using_an_index" title="Using IndexedDB#Using an index">using an index</a>.</p> + +<h2 id="Hinzufügen_und_löschen_von_Daten">Hinzufügen und löschen von Daten</h2> + +<p>Before you can do anything with your new database, you need to start a transaction. Transactions come from the database object, and you have to specify which object stores you want the transaction to span. Also, you need to decide if you're going to make changes to the database or if you just need to read from it. Although transactions have three modes (read-only, read/write, and versionchange), you're better off using a read-only transaction when you can, because they can run concurrently</p> + +<h3 id="Daten_zur_Datenbank_hinzufügen">Daten zur Datenbank hinzufügen</h3> + +<p>If you've just created a database, then you probably want to write to it. Here's what that looks like:</p> + +<pre class="brush:js;">var transaction = db.transaction(["customers"], "readwrite"); +// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of "readwrite". +// In case you want to support such an implementation, you can just write: +// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);</pre> + +<p>The <code>transaction()</code> function takes two arguments (though one is optional) and returns a transaction object. The first argument is a list of object stores that the transaction will span. You can pass an empty array if you want the transaction to span all object stores, but don't do it because the spec says an empty array should generate an InvalidAccessError. If you don't specify anything for the second argument, you get a read-only transaction. Since you want to write to it here you need to pass the <code>"readwrite"</code> flag.</p> + +<p>Now that you have a transaction you need to understand its lifetime. Transactions are tied very closely to the event loop. If you make a transaction and return to the event loop without using it then the transaction will become inactive. The only way to keep the transaction active is to make a request on it. When the request is finished you'll get a DOM event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that callback. If you return to the event loop without extending the transaction then it will become inactive, and so on. As long as there are pending requests the transaction remains active. Transaction lifetimes are really very simple but it might take a little time to get used to. A few more examples will help, too. If you start seeing <code>TRANSACTION_INACTIVE_ERR</code> error codes then you've messed something up.</p> + +<p>Transactions can receive DOM events of three different types: <code>error</code>, <code>abort</code>, and <code>complete</code>. We've talked about the way that <code>error</code> events bubble, so a transaction receives error events from any requests that are generated from it. A more subtle point here is that the default behavior of an error is to abort the transaction in which it occurred. Unless you handle the error by calling <code>preventDefault()</code> on the error event, the entire transaction is rolled back. This design forces you to think about and handle errors, but you can always add a catchall error handler to the database if fine grained error handling is too cumbersome. If you don't handle an error event or if you call <code>abort()</code> on the transaction, then the transaction is rolled back and an <code>abort</code> event is fired on the transaction. Otherwise, after all pending requests have completed, you'll get a <code>complete</code> event. If you're doing lots of database operations, then tracking the transaction rather than individual requests can certainly aide your sanity.</p> + +<p>Now that you have a transaction, you'll need to get the object store from it. Transactions only let you have an object store that you specified when creating the transaction. Then you can add all the data you need.</p> + +<pre class="brush: js">// Do something when all the data is added to the database. +transaction.oncomplete = function(event) { + alert("All done!"); +}; + +transaction.onerror = function(event) { + // Don't forget to handle errors! +}; + +var objectStore = transaction.objectStore("customers"); +for (var i in customerData) { + var request = objectStore.add(customerData[i]); + request.onsuccess = function(event) { + // event.target.result == customerData[i].ssn; + }; +}</pre> + +<p>The <code>result</code> of a request generated from a call to <code>add() </code>is the key of the value that was added. So in this case, it should equal the <code>ssn</code> property of the object that was added, since the object store uses the <code>ssn</code> property for the key path. Note that the <code>add()</code> function requires that no object already be in the database with the same key. If you're trying to modify an existing entry, or you don't care if one exists already, use the <code>put()</code> function.</p> + +<h2 id="Daten_aus_der_Datenbank_löschen">Daten aus der Datenbank löschen</h2> + +<p>Löschen von Daten ist recht ähnlich:</p> + +<pre class="brush: js">var request = db.transaction(["customers"], "readwrite") + .objectStore("customers") + .delete("444-44-4444"); +request.onsuccess = function(event) { + // It's gone! +};</pre> + +<h2 id="Daten_aus_der_Datenbank_auslesen">Daten aus der Datenbank auslesen</h2> + +<p>Now that the database has some info in it, you can retrieve it in several ways. First, the simple <code>get()</code>. You need to provide the key to retrieve the value, like so:</p> + +<pre class="brush: js">var transaction = db.transaction(["customers"]); +var objectStore = transaction.objectStore("customers"); +var request = objectStore.get("444-44-4444"); +request.onerror = function(event) { + // Handle errors! +}; +request.onsuccess = function(event) { + // Do something with the request.result! + alert("Name for SSN 444-44-4444 is " + request.result.name); +};</pre> + +<p>That's a lot of code for a "simple" retrieval. Here's how you can shorten it up a bit, assuming that you handle errors at the database level:</p> + +<pre class="brush: js">db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) { + alert("Name for SSN 444-44-4444 is " + event.target.result.name); +};</pre> + +<p>See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a <code>"readwrite"</code> transaction. Calling <code>transaction()</code> with no mode specified gives you a <code>"readonly"</code> transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the <code>result</code> property. Easy, right?!</p> + +<h2 id="Benutzung_eines_Cursors">Benutzung eines Cursors</h2> + +<p>Using <code>get()</code> requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:</p> + +<pre class="brush: js">var objectStore = db.transaction("customers").objectStore("customers"); + +objectStore.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + if (cursor) { + alert("Name for SSN " + cursor.key + " is " + cursor.value.name); + cursor.continue(); + } + else { + alert("No more entries!"); + } +};</pre> + +<p>The<code> openCursor()</code> function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the <code>result</code> of the request (above we're using the shorthand, so it's <code>event.target.result</code>). Then the actual key and value can be found on the <code>key</code> and <code>value</code> properties of the cursor object. If you want to keep going, then you have to call <code>continue()</code> on the cursor. When you've reached the end of the data (or if there were no entries that matched your <code>openCursor()</code> request) you still get a success callback, but the <code>result</code> property is <code>undefined</code>.</p> + +<p>One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:</p> + +<pre class="brush: js">var customers = []; + +objectStore.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + if (cursor) { + customers.push(cursor.value); + cursor.continue(); + } + else { + alert("Got all customers: " + customers); + } +};</pre> + +<div class="warning"><strong>Warnung:</strong> Die folgende Funktion ist nicht Teil des IndexedDB Standards.</div> + +<p>Mozilla has also implemented <code>getAll()</code> to handle this case. It isn't part of the IndexedDB standard, so it may disappear in the future. We've included it because we think it's useful. The following code does precisely the same thing as above:</p> + +<pre class="brush: js">objectStore.getAll().onsuccess = function(event) { + alert("Got all customers: " + event.target.result); +};</pre> + +<p>There is a performance cost associated with looking at the <code>value</code> property of a cursor, because the object is created lazily. When you use <code>getAll()</code>, Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use <code>getAll()</code>. If you're trying to get an array of all the objects in an object store, though, use <code>getAll()</code>.</p> + +<h3 id="Benutzung_eines_Index">Benutzung eines Index</h3> + +<p>Storing customer data using the SSN as a key is logical since the SSN uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.</p> + +<pre class="brush: js">var index = objectStore.index("name"); +index.get("Donna").onsuccess = function(event) { + alert("Donna's SSN is " + event.target.result.ssn); +};</pre> + +<p>The "name" cursor isn't unique, so there could be more than one entry with the <code>name</code> set to <code>"Donna"</code>. In that case you always get the one with the lowest key value.</p> + +<p>If you need to access all the entries with a given <code>name</code> you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:</p> + +<pre class="brush: js">index.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + if (cursor) { + // cursor.key is a name, like "Bill", and cursor.value is the whole object. + alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email); + cursor.continue(); + } +}; + +index.openKeyCursor().onsuccess = function(event) { + var cursor = event.target.result; + if (cursor) { + // cursor.key is a name, like "Bill", and cursor.value is the SSN. + // No way to directly get the rest of the stored object. + alert("Name: " + cursor.key + ", SSN: " + cursor.value); + cursor.continue(); + } +};</pre> + +<h3 id="Specifying_the_range_and_direction_of_cursors">Specifying the range and direction of cursors</h3> + +<p>If you would like to limit the range of values you see in a cursor, you can use a key range object and pass it as the first argument to <code>openCursor()</code> or <code>openKeyCursor()</code>. You can make a key range that only allows a single key, or one the has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value) or "open" (i.e., the key range does not include the given value). Here's how it works:</p> + +<pre class="brush: js">// Only match "Donna" +var singleKeyRange = IDBKeyRange.only("Donna"); + +// Match anything past "Bill", including "Bill" +var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill"); + +// Match anything past "Bill", but don't include "Bill" +var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true); + +// Match anything up to, but not including, "Donna" +var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true); + +//Match anything between "Bill" and "Donna", but not including "Donna" +var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true); + +index.openCursor(boundKeyRange).onsuccess = function(event) { + var cursor = event.target.result; + if (cursor) { + // Do something with the matches. + cursor.continue(); + } +};</pre> + +<p>Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing <code>prev</code> to the <code>openCursor()</code> function:</p> + +<pre class="brush: js">objectStore.openCursor(null, IDBCursor.prev).onsuccess = function(event) { + var cursor = event.target.result; + if (cursor) { + // Do something with the entries. + cursor.continue(); + } +};</pre> + +<p>Since the "name" index isn't unique, there might be multiple entries where <code>name</code> is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass <code>nextunique</code> (or <code>prevunique</code> if you're going backwards) as the direction parameter. When <code>nextunique</code> or <code>prevunique</code> is used, the entry with the lowest key is always the one returned.</p> + +<pre class="brush: js">index.openKeyCursor(null, IDBCursor.nextunique).onsuccess = function(event) { + var cursor = event.target.result; + if (cursor) { + // Do something with the entries. + cursor.continue(); + } +};</pre> + +<h2 id="Versionsänderung_während_eine_Webapplikation_in_einem_anderen_Tab_geöffnet_ist">Versionsänderung während eine Webapplikation in einem anderen Tab geöffnet ist</h2> + +<p>When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call <code>open()</code> with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database. Here's how it works:</p> + +<pre class="brush: js">var openReq = mozIndexedDB.open("MyTestDatabase", 2); + +openReq.onblocked = function(event) { + // If some other tab is loaded with the database, then it needs to be closed + // before we can proceed. + alert("Please close all other tabs with this site open!"); +}; + +openReq.onupgradeneeded = function(event) { + // All other databases have been closed. Set everything up. + db.createObjectStore(/* ... */); + useDatabase(db); +} + +openReq.onsuccess = function(event) { + var db = event.target.result; + useDatabase(db); + return; +} + +function useDatabase(db) { + // Make sure to add a handler to be notified if another page requests a version + // change. We must close the database. This allows the other page to upgrade the database. + // If you don't do this then the upgrade won't happen until the user close the tab. + db.onversionchange = function(event) { + db.close(); + alert("A new version of this page is ready. Please reload!"); + }; + + // Do stuff with the database. +} +</pre> + +<h2 id="Sicherheit">Sicherheit</h2> + +<p>IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.</p> + +<p>It's important to note that IndexedDB doesn't work for content loaded into a frame from another site (either {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. This is a security measure. Details as to why this matters are forthcoming. See {{ bug(595307) }}.</p> + +<h2 id="Warnung_über_die_Schließung_des_Browsers">Warnung über die Schließung des Browsers</h2> + +<p>When the browser shuts down (e.g., when the user selects Exit or clicks the Close button), any pending IndexedDB transactions are (silently) aborted -- they will not complete, and they will not trigger the error handler. Since the user can exit the browser at any time, this means that you cannot rely upon any particular transaction to complete or to know that it did not complete. There are several implications of this behavior.</p> + +<p>First, you should take care to always leave your database in a consistent state at the end of every transaction. For example, suppose that you are using IndexedDB to store a list of items that you allow the user to edit. You save the list after the edit by clearing the object store and then writing out the new list. If you clear the object store in one transaction and write the new list in another transaction, there is a danger that the browser will close after the clear but before the write, leaving you with an empty database. To avoid this, you should combine the clear and the write into a single transaction.</p> + +<p>Second, you should never tie database transactions to unload events. If the unload event is triggered by the browser closing, any transactions created in the unload event handler will never complete. An intuitive approach to maintaining some information across browser sessions is to read it from the database when the browser (or a particular page) is opened, update it as the user interacts with the browser, and then save it to the database when the browser (or page) closes. However, this will not work. The database transactions will be created in the unload event handler, but because they are asynchronous they will be aborted before they can execute.</p> + +<p>In fact, there is no way to guarantee that IndexedDB transactions will complete, even with normal browser shutdown. See {{ bug(870645) }}.</p> + +<h2 id="Full_IndexedDB_example" name="Full_IndexedDB_example">Vollständiges IndexedDB Beispiel</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> + + <h1>IndexedDB Demo: storing blobs, e-publication example</h1> + <div class="note"> + <p> + Works and tested with: + </p> + <div id="compat"> + </div> + </div> + + <div id="msg"> + </div> + + <form id="register-form"> + <table> + <tbody> + <tr> + <td> + <label for="pub-title" class="required"> + Title: + </label> + </td> + <td> + <input type="text" id="pub-title" name="pub-title" /> + </td> + </tr> + <tr> + <td> + <label for="pub-biblioid" class="required"> + Bibliographic ID:<br/> + <span class="note">(ISBN, ISSN, etc.)</span> + </label> + </td> + <td> + <input type="text" id="pub-biblioid" name="pub-biblioid"/> + </td> + </tr> + <tr> + <td> + <label for="pub-year"> + Year: + </label> + </td> + <td> + <input type="number" id="pub-year" name="pub-year" /> + </td> + </tr> + </tbody> + <tbody> + <tr> + <td> + <label for="pub-file"> + File image: + </label> + </td> + <td> + <input type="file" id="pub-file"/> + </td> + </tr> + <tr> + <td> + <label for="pub-file-url"> + Online-file image URL:<br/> + <span class="note">(same origin URL)</span> + </label> + </td> + <td> + <input type="text" id="pub-file-url" name="pub-file-url"/> + </td> + </tr> + </tbody> + </table> + + <div class="button-pane"> + <input type="button" id="add-button" value="Add Publication" /> + <input type="reset" id="register-form-reset"/> + </div> + </form> + + <form id="delete-form"> + <table> + <tbody> + <tr> + <td> + <label for="pub-biblioid-to-delete"> + Bibliographic ID:<br/> + <span class="note">(ISBN, ISSN, etc.)</span> + </label> + </td> + <td> + <input type="text" id="pub-biblioid-to-delete" + name="pub-biblioid-to-delete" /> + </td> + </tr> + <tr> + <td> + <label for="key-to-delete"> + Key:<br/> + <span class="note">(for example 1, 2, 3, etc.)</span> + </label> + </td> + <td> + <input type="text" id="key-to-delete" + name="key-to-delete" /> + </td> + </tr> + </tbody> + </table> + <div class="button-pane"> + <input type="button" id="delete-button" value="Delete Publication" /> + <input type="button" id="clear-store-button" + value="Clear the whole store" class="destructive" /> + </div> + </form> + + <form id="search-form"> + <div class="button-pane"> + <input type="button" id="search-list-button" + value="List database content" /> + </div> + </form> + + <div> + <div id="pub-msg"> + </div> + <div id="pub-viewer"> + </div> + <ul id="pub-list"> + </ul> + </div> +</pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">body { + font-size: 0.8em; + font-family: Sans-Serif; +} + +form { + background-color: #cccccc; + border-radius: 0.3em; + display: inline-block; + margin-bottom: 0.5em; + padding: 1em; +} + +table { + border-collapse: collapse; +} + +input { + padding: 0.3em; + border-color: #cccccc; + border-radius: 0.3em; +} + +.required:after { + content: "*"; + color: red; +} + +.button-pane { + margin-top: 1em; +} + +#pub-viewer { + float: right; + width: 48%; + height: 20em; + border: solid #d092ff 0.1em; +} +#pub-viewer iframe { + width: 100%; + height: 100%; +} + +#pub-list { + width: 46%; + background-color: #eeeeee; + border-radius: 0.3em; +} +#pub-list li { + padding-top: 0.5em; + padding-bottom: 0.5em; + padding-right: 0.5em; +} + +#msg { + margin-bottom: 1em; +} + +.action-success { + padding: 0.5em; + color: #00d21e; + background-color: #eeeeee; + border-radius: 0.2em; +} + +.action-failure { + padding: 0.5em; + color: #ff1408; + background-color: #eeeeee; + border-radius: 0.2em; +} + +.note { + font-size: smaller; +} + +.destructive { + background-color: orange; +} +.destructive:hover { + background-color: #ff8000; +} +.destructive:active { + background-color: red; +} +</pre> + +<p> </p> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js">(function () { + var COMPAT_ENVS = [ + ['Firefox', ">= 16.0"], + ['Google Chrome', + ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"] + ]; + var compat = $('#compat'); + compat.empty(); + compat.append('<ul id="compat-list"></ul>'); + COMPAT_ENVS.forEach(function(val, idx, array) { + $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>'); + }); + + const DB_NAME = 'mdn-demo-indexeddb-epublications'; + const DB_VERSION = 1; // Use a long long for this value (don't use a float) + const DB_STORE_NAME = 'publications'; + + var db; + + // Used to keep track of which view is displayed to avoid to uselessly reload it + var current_view_pub_key; + + function openDb() { + console.log("openDb ..."); + var req = indexedDB.open(DB_NAME, DB_VERSION); + req.onsuccess = function (evt) { + // Better use "this" than "req" to get the result to avoid problems with + // garbage collection. + // db = req.result; + db = this.result; + console.log("openDb DONE"); + }; + req.onerror = function (evt) { + console.error("openDb:", evt.target.errorCode); + }; + + req.onupgradeneeded = function (evt) { + console.log("openDb.onupgradeneeded"); + var store = evt.currentTarget.result.createObjectStore( + DB_STORE_NAME, { keyPath: 'id', autoIncrement: true }); + + store.createIndex('biblioid', 'biblioid', { unique: true }); + store.createIndex('title', 'title', { unique: false }); + store.createIndex('year', 'year', { unique: false }); + }; + } + + /** + * @param {string} store_name + * @param {string} mode either "readonly" or "readwrite" + */ + function getObjectStore(store_name, mode) { + var tx = db.transaction(store_name, mode); + return tx.objectStore(store_name); + } + + function clearObjectStore(store_name) { + var store = getObjectStore(DB_STORE_NAME, 'readwrite'); + var req = store.clear(); + req.onsuccess = function(evt) { + displayActionSuccess("Store cleared"); + displayPubList(store); + }; + req.onerror = function (evt) { + console.error("clearObjectStore:", evt.target.errorCode); + displayActionFailure(this.error); + }; + } + + function getBlob(key, store, success_callback) { + var req = store.get(key); + req.onsuccess = function(evt) { + var value = evt.target.result; + if (value) + success_callback(value.blob); + }; + } + + /** + * @param {IDBObjectStore=} store + */ + function displayPubList(store) { + console.log("displayPubList"); + + if (typeof store == 'undefined') + store = getObjectStore(DB_STORE_NAME, 'readonly'); + + var pub_msg = $('#pub-msg'); + pub_msg.empty(); + var pub_list = $('#pub-list'); + pub_list.empty(); + // Reseting the iframe so that it doesn't display previous content + newViewerFrame(); + + var req; + req = store.count(); + // Requests are executed in the order in which they were made against the + // transaction, and their results are returned in the same order. + // Thus the count text below will be displayed before the actual pub list + // (not that it is algorithmically important in this case). + req.onsuccess = function(evt) { + pub_msg.append('<p>There are <strong>' + evt.target.result + + '</strong> record(s) in the object store.</p>'); + }; + req.onerror = function(evt) { + console.error("add error", this.error); + displayActionFailure(this.error); + }; + + var i = 0; + req = store.openCursor(); + req.onsuccess = function(evt) { + var cursor = evt.target.result; + + // If the cursor is pointing at something, ask for the data + if (cursor) { + console.log("displayPubList cursor:", cursor); + req = store.get(cursor.key); + req.onsuccess = function (evt) { + var value = evt.target.result; + var list_item = $('<li>' + + '[' + cursor.key + '] ' + + '(biblioid: ' + value.biblioid + ') ' + + value.title + + '</li>'); + if (value.year != null) + list_item.append(' - ' + value.year); + + if (value.hasOwnProperty('blob') && + typeof value.blob != 'undefined') { + var link = $('<a href="' + cursor.key + '">File</a>'); + link.on('click', function() { return false; }); + link.on('mouseenter', function(evt) { + setInViewer(evt.target.getAttribute('href')); }); + list_item.append(' / '); + list_item.append(link); + } else { + list_item.append(" / No attached file"); + } + pub_list.append(list_item); + }; + + // Move on to the next object in store + cursor.continue(); + + // This counter serves only to create distinct ids + i++; + } else { + console.log("No more entries"); + } + }; + } + + function newViewerFrame() { + var viewer = $('#pub-viewer'); + viewer.empty(); + var iframe = $('<iframe />'); + viewer.append(iframe); + return iframe; + } + + function setInViewer(key) { + console.log("setInViewer:", arguments); + key = Number(key); + if (key == current_view_pub_key) + return; + + current_view_pub_key = key; + + var store = getObjectStore(DB_STORE_NAME, 'readonly'); + getBlob(key, store, function(blob) { + console.log("setInViewer blob:", blob); + var iframe = newViewerFrame(); + + // It is not possible to set a direct link to the + // blob to provide a mean to directly download it. + if (blob.type == 'text/html') { + var reader = new FileReader(); + reader.onload = (function(evt) { + var html = evt.target.result; + iframe.load(function() { + $(this).contents().find('html').html(html); + }); + }); + reader.readAsText(blob); + } else if (blob.type.indexOf('image/') == 0) { + iframe.load(function() { + var img_id = 'image-' + key; + var img = $('<img id="' + img_id + '"/>'); + $(this).contents().find('body').html(img); + var obj_url = window.URL.createObjectURL(blob); + $(this).contents().find('#' + img_id).attr('src', obj_url); + window.URL.revokeObjectURL(obj_url); + }); + } else if (blob.type == 'application/pdf') { + $('*').css('cursor', 'wait'); + var obj_url = window.URL.createObjectURL(blob); + iframe.load(function() { + $('*').css('cursor', 'auto'); + }); + iframe.attr('src', obj_url); + window.URL.revokeObjectURL(obj_url); + } else { + iframe.load(function() { + $(this).contents().find('body').html("No view available"); + }); + } + + }); + } + + /** + * @param {string} biblioid + * @param {string} title + * @param {number} year + * @param {string} url the URL of the image to download and store in the local + * IndexedDB database. The resource behind this URL is subjected to the + * "Same origin policy", thus for this method to work, the URL must come from + * the same origin than the web site/app this code is deployed on. + */ + function addPublicationFromUrl(biblioid, title, year, url) { + console.log("addPublicationFromUrl:", arguments); + + var xhr = new XMLHttpRequest(); + xhr.open('GET', url, true); + // Setting the wanted responseType to "blob" + // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute + xhr.responseType = 'blob'; + xhr.onload = function (evt) { + if (xhr.status == 200) { + console.log("Blob retrieved"); + var blob = xhr.response; + console.log("Blob:", blob); + addPublication(biblioid, title, year, blob); + } else { + console.error("addPublicationFromUrl error:", + xhr.responseText, xhr.status); + } + }; + xhr.send(); + + // We can't use jQuery here because as of jQuery 1.8.3 the new "blob" + // responseType is not handled. + // http://bugs.jquery.com/ticket/11461 + // http://bugs.jquery.com/ticket/7248 + // $.ajax({ + // url: url, + // type: 'GET', + // xhrFields: { responseType: 'blob' }, + // success: function(data, textStatus, jqXHR) { + // console.log("Blob retrieved"); + // console.log("Blob:", data); + // // addPublication(biblioid, title, year, data); + // }, + // error: function(jqXHR, textStatus, errorThrown) { + // console.error(errorThrown); + // displayActionFailure("Error during blob retrieval"); + // } + // }); + } + + /** + * @param {string} biblioid + * @param {string} title + * @param {number} year + * @param {Blob=} blob + */ + function addPublication(biblioid, title, year, blob) { + console.log("addPublication arguments:", arguments); + var obj = { biblioid: biblioid, title: title, year: year }; + if (typeof blob != 'undefined') + obj.blob = blob; + + var store = getObjectStore(DB_STORE_NAME, 'readwrite'); + var req; + try { + req = store.add(obj); + } catch (e) { + if (e.name == 'DataCloneError') + displayActionFailure("This engine doesn't know how to clone a Blob, " + + "use Firefox"); + throw e; + } + req.onsuccess = function (evt) { + console.log("Insertion in DB successful"); + displayActionSuccess(); + displayPubList(store); + }; + req.onerror = function() { + console.error("addPublication error", this.error); + displayActionFailure(this.error); + }; + } + + /** + * @param {string} biblioid + */ + function deletePublicationFromBib(biblioid) { + console.log("deletePublication:", arguments); + var store = getObjectStore(DB_STORE_NAME, 'readwrite'); + var req = store.index('biblioid'); + req.get(biblioid).onsuccess = function(evt) { + if (typeof evt.target.result == 'undefined') { + displayActionFailure("No matching record found"); + return; + } + deletePublication(evt.target.result.id, store); + }; + req.onerror = function (evt) { + console.error("deletePublicationFromBib:", evt.target.errorCode); + }; + } + + /** + * @param {number} key + * @param {IDBObjectStore=} store + */ + function deletePublication(key, store) { + console.log("deletePublication:", arguments); + + if (typeof store == 'undefined') + store = getObjectStore(DB_STORE_NAME, 'readwrite'); + + // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation + // the result of the Object Store Deletion Operation algorithm is + // undefined, so it's not possible to know if some records were actually + // deleted by looking at the request result. + var req = store.get(key); + req.onsuccess = function(evt) { + var record = evt.target.result; + console.log("record:", record); + if (typeof record == 'undefined') { + displayActionFailure("No matching record found"); + return; + } + // Warning: The exact same key used for creation needs to be passed for + // the deletion. If the key was a Number for creation, then it needs to + // be a Number for deletion. + req = store.delete(key); + req.onsuccess = function(evt) { + console.log("evt:", evt); + console.log("evt.target:", evt.target); + console.log("evt.target.result:", evt.target.result); + console.log("delete successful"); + displayActionSuccess("Deletion successful"); + displayPubList(store); + }; + req.onerror = function (evt) { + console.error("deletePublication:", evt.target.errorCode); + }; + }; + req.onerror = function (evt) { + console.error("deletePublication:", evt.target.errorCode); + }; + } + + function displayActionSuccess(msg) { + msg = typeof msg != 'undefined' ? "Success: " + msg : "Success"; + $('#msg').html('<span class="action-success">' + msg + '</span>'); + } + function displayActionFailure(msg) { + msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure"; + $('#msg').html('<span class="action-failure">' + msg + '</span>'); + } + function resetActionStatus() { + console.log("resetActionStatus ..."); + $('#msg').empty(); + console.log("resetActionStatus DONE"); + } + + function addEventListeners() { + console.log("addEventListeners"); + + $('#register-form-reset').click(function(evt) { + resetActionStatus(); + }); + + $('#add-button').click(function(evt) { + console.log("add ..."); + var title = $('#pub-title').val(); + var biblioid = $('#pub-biblioid').val(); + if (!title || !biblioid) { + displayActionFailure("Required field(s) missing"); + return; + } + var year = $('#pub-year').val(); + if (year != '') { + // Better use Number.isInteger if the engine has EcmaScript 6 + if (isNaN(year)) { + displayActionFailure("Invalid year"); + return; + } + year = Number(year); + } else { + year = null; + } + + var file_input = $('#pub-file'); + var selected_file = file_input.get(0).files[0]; + console.log("selected_file:", selected_file); + // Keeping a reference on how to reset the file input in the UI once we + // have its value, but instead of doing that we rather use a "reset" type + // input in the HTML form. + //file_input.val(null); + var file_url = $('#pub-file-url').val(); + if (selected_file) { + addPublication(biblioid, title, year, selected_file); + } else if (file_url) { + addPublicationFromUrl(biblioid, title, year, file_url); + } else { + addPublication(biblioid, title, year); + } + + }); + + $('#delete-button').click(function(evt) { + console.log("delete ..."); + var biblioid = $('#pub-biblioid-to-delete').val(); + var key = $('#key-to-delete').val(); + + if (biblioid != '') { + deletePublicationFromBib(biblioid); + } else if (key != '') { + // Better use Number.isInteger if the engine has EcmaScript 6 + if (key == '' || isNaN(key)) { + displayActionFailure("Invalid key"); + return; + } + key = Number(key); + deletePublication(key); + } + }); + + $('#clear-store-button').click(function(evt) { + clearObjectStore(); + }); + + var search_button = $('#search-list-button'); + search_button.click(function(evt) { + displayPubList(); + }); + + } + + openDb(); + addEventListeners(); + +})(); // Immediately-Invoked Function Expression (IIFE) +</pre> + +<p>{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}</p> + +<h2 id="Nächster_Schritt">Nächster Schritt</h2> + +<p>If you want to start tinkering with the API, jump in to the <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">reference documentation</a> and checking out the different methods.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p>Reference</p> + +<ul> + <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li> + <li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li> + <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome" title="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome">Using IndexedDB in chrome</a></li> +</ul> + +<p>Tutorials</p> + +<ul> + <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">A simple TODO list using HTML5 IndexedDB</a><span class="external">. {{Note("This tutorial is based on an old version of the specification and does not work on up-to-date browsers - it still uses the removed <code>setVersion()</code> method.") }}</span></li> + <li><a href="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/" title="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li> +</ul> + +<p>Related articles</p> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li> +</ul> + +<p>Firefox</p> + +<ul> + <li>Mozilla <a class="link-https" href="https://mxr.mozilla.org/mozilla-central/find?text=&string=dom%2FindexedDB%2F.*%5C.idl&regexp=1" title="https://mxr.mozilla.org/mozilla-central/find?text=&string=dom/indexedDB/.*\.idl&regexp=1">interface files</a></li> +</ul> diff --git a/files/de/web/api/keyboardevent/altkey/index.html b/files/de/web/api/keyboardevent/altkey/index.html new file mode 100644 index 0000000000..3f16f6d710 --- /dev/null +++ b/files/de/web/api/keyboardevent/altkey/index.html @@ -0,0 +1,118 @@ +--- +title: KeyboardEvent.altKey +slug: Web/API/KeyboardEvent/altKey +translation_of: Web/API/KeyboardEvent/altKey +--- +<p id="Summary">{{APIRef("DOM Events")}}</p> + +<p>Der Konstruktor <strong><code>KeyboardEvent.altKey</code></strong> hat die Eigenschaft {{jsxref("Boolean")}} und zeigt an ob <kbd>alt</kbd> Taste (<kbd>Option</kbd> oder <kbd>⌥</kbd> in OS X) gedrückt wurde (<code>true</code>) oder (<code>false</code>) nicht gerdrückt wurde, wenn das Ereignis eintritt.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>altKeyPressed</em> = <em>instanceOfKeyboardEvent</em>.altKey +</pre> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js"><html> +<head> +<title>altKey example</title> + +<script type="text/javascript"> + +function showChar(e){ + alert( + "Key Pressed: " + String.fromCharCode(e.charCode) + "\n" + + "charCode: " + e.charCode + "\n" + + "ALT key pressed: " + e.altKey + "\n" + ); +} + +</script> +</head> + +<body onkeypress="showChar(event);"> +<p> +Press any character key, +with or without holding down the ALT key.<br /> +You can also use the SHIFT key together with the ALT key. +</p> +</body> +</html></pre> + +<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('DOM3 Events','#widl-KeyboardEvent-altKey','KeyboardEvent.altkey')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Chrome</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> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{ domxref("KeyboardEvent") }}</li> +</ul> diff --git a/files/de/web/api/keyboardevent/getmodifierstate/index.html b/files/de/web/api/keyboardevent/getmodifierstate/index.html new file mode 100644 index 0000000000..75b1c5e36d --- /dev/null +++ b/files/de/web/api/keyboardevent/getmodifierstate/index.html @@ -0,0 +1,247 @@ +--- +title: KeyboardEvent.getModifierState() +slug: Web/API/KeyboardEvent/getModifierState +translation_of: Web/API/KeyboardEvent/getModifierState +--- +<p>{{APIRef("DOM Events")}}</p> + +<p>Die Methode <code><strong>KeyboardEvent.getModifierState()</strong></code> gibt den aktuellen Zustand des angegebenen Modifikators zurück: <code>true</code>, wenn der Modifikator aktiv ist (d.h. die Modifikationstasten gedrückt oder gesperrt ist), ansonsten <code>false</code>.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <code><em>active</em> = <em>event</em>.getModifierState(<em>keyArg</em>);</code></pre> + +<h3 id="Rückgabe">Rückgabe </h3> + +<p>Einen {{jsxref("Boolean")}}</p> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><em><code>keyArg</code></em></dt> + <dd>Ein Modifikatorschlüsselwert. Der Wert muss einer der {{domxref("KeyboardEvent.key")}} Werte sein, die Modifikatorschlüssel darstellen, oder die Zeichenkette "Accel" {{deprecated_inline}}. Dabei wird zwischen Groß- und Kleinschreibung unterschieden.</dd> +</dl> + +<h2 id="Modifikationstasten_im_Internet_Explorer">Modifikationstasten im Internet Explorer</h2> + +<p>IE9 verwendet <code>"Scroll"</code> für <code>"ScrollLock"</code> und <code>"Win"</code> für <code>"OS"</code>.</p> + +<h2 id="Modifikationstasten_in_Gecko">Modifikationstasten in Gecko</h2> + +<table style="width: 100%;"> + <caption>Wann gibt getModifierState() bei Gecko true zurück?</caption> + <thead> + <tr> + <th scope="row"> </th> + <th scope="col">Windows</th> + <th scope="col">Linux (GTK)</th> + <th scope="col">Mac</th> + <th scope="col">Android 2.3</th> + <th scope="col">Android 3.0 und später</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row"><code>"Alt"</code></th> + <td>Entweder die <kbd>Alt</kbd> oder <kbd>AltGr</kbd> -Taste gedrückt wird</td> + <td><kbd>Alt</kbd> -Taste gedrückt wird</td> + <td><kbd>⌥ Option</kbd> -Taste gedrückt wird</td> + <td colspan="2" rowspan="1"><kbd>Alt</kbd> oder <kbd>option</kbd> -Taste gedrückt wird</td> + </tr> + <tr> + <th scope="row"><code>"AltGraph"</code></th> + <td> + <p>Sowohl die <kbd>Alt</kbd> als auch die <kbd>Strg</kbd> werden gedrückt, oder die <kbd>AltGr</kbd> Taste wird gedrückt</p> + </td> + <td><kbd>Level 3 Shift</kbd> Taste (or <kbd>Level 5 Shift</kbd> Taste {{gecko_minversion_inline("20.0")}}) wird gedrückt</td> + <td><kbd>⌥ Option</kbd> Taste wird gedrückt</td> + <td colspan="2" rowspan="1" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td> + </tr> + <tr> + <th scope="row"><code>"CapsLock"</code></th> + <td colspan="3" style="text-align: center;">Während die LED für <kbd>⇪ Caps Lock</kbd> leuchtet</td> + <td style="text-align: center; background-color: rgb(204, 204, 204);"><em>Nicht unterstützt</em></td> + <td>Solange <kbd>⇪ Caps Lock</kbd> gesperrt ist {{gecko_minversion_inline("29.0")}}</td> + </tr> + <tr> + <th scope="row"><code>"Control"</code></th> + <td>Entweder die <kbd>Strg</kbd> oder <kbd>AltGr</kbd> -Taste wird gedrückt</td> + <td><kbd>Strg</kbd> Taste wird gedrückt</td> + <td><kbd>control</kbd> Taste wird gedrückt</td> + <td><kbd>menu</kbd> Taste wird gedrückt.</td> + <td><kbd>Strg</kbd>, <kbd>control</kbd> oder <kbd>menu</kbd> Taste wird gedrückt.</td> + </tr> + <tr> + <th scope="row"><code>"Fn"</code></th> + <td colspan="4" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td> + <td>Die <kbd>Function</kbd> wird gedrückt, aber wir sind nicht sicher, welche Taste den Modifikatorstatus aktiv setzt. Die <kbd>Fn</kbd>-Taste auf der Mac-Tastatur bewirkt dies nicht.<br> + {{gecko_minversion_inline("29.0")}}</td> + </tr> + <tr> + <th scope="row"><code>"FnLock"</code></th> + <td colspan="5" rowspan="1" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td> + </tr> + <tr> + <th scope="row"><code>"Hyper"</code></th> + <td colspan="5" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td> + </tr> + <tr> + <th scope="row"><code>"Meta"</code></th> + <td style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td> + <td style="text-align: center;"><kbd>Meta</kbd> Taste wird gedrückt {{gecko_minversion_inline("17.0")}}</td> + <td><kbd>⌘ Command</kbd> Taste wird gedrückt</td> + <td style="text-align: center; background-color: rgb(204, 204, 204);"><em>Nicht unterstützt</em></td> + <td><kbd>⊞ Windows Logo</kbd> or <kbd>command</kbd> Taste gedrückt wird</td> + </tr> + <tr> + <th scope="row"><code>"NumLock"</code></th> + <td colspan="2" style="text-align: center;">Während die LED für <kbd>Num Lock</kbd> leuchtet</td> + <td>Eine Taste auf dem Nummerblock gedrückt wird</td> + <td style="text-align: center; background-color: rgb(204, 204, 204);"><em>Nicht unterstützt</em></td> + <td>Solange <kbd>NumLock</kbd> gesperrt ist {{gecko_minversion_inline("29.0")}}</td> + </tr> + <tr> + <th scope="row"><code>"OS"</code></th> + <td><kbd>⊞ Windows Logo</kbd> Taste wird gedrückt</td> + <td><kbd>Super</kbd> or <kbd>Hyper</kbd> Taste wird gedrückt (normalerweise auf der <kbd>⊞ Windows Logo</kbd> Taste zugeordnet)</td> + <td colspan="3" rowspan="1" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td> + </tr> + <tr> + <th scope="row"><code>"ScrollLock"</code></th> + <td>Während die LED für <kbd>ScrollLock</kbd> leuchtet</td> + <td>Während die LED für <kbd>ScrollLock</kbd> leuchtet, aber normalerweise wird dies von der Plattform nicht unterstützt </td> + <td colspan="2" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td> + <td>Solange <kbd>ScrollLock</kbd> gesperrt {{gecko_minversion_inline("29.0")}}</td> + </tr> + <tr> + <th scope="row"><code>"Shift"</code></th> + <td colspan="5" rowspan="1" style="text-align: center;"><kbd>⇧ Shift</kbd> Taste wird gedrückt</td> + </tr> + <tr> + <th scope="row"><code>"Super"</code></th> + <td colspan="5" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td> + </tr> + <tr> + <th scope="row"><code>"Symbol"</code></th> + <td colspan="5" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td> + </tr> + <tr> + <th scope="row"><code>"SymbolLock"</code></th> + <td colspan="5" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td> + </tr> + </tbody> +</table> + +<ul> + <li>Auf den anderen Plattformen werden <kbd>Alt</kbd>, <kbd>Control</kbd> und <kbd>Shift</kbd> unterstützt werden.</li> + <li>Alle Modifikatoren (außer "FnLock", "Hyper", "Super" und "Symbol", die nach der Implementierung von Gecko definiert werden) stehen immer für nicht vertrauenswürdige Ereignisse auf Gecko zur Verfügung. Das hängt nicht von der Plattform ab.</li> +</ul> + +<h2 id="Accel_virtueller_Modifikator"><code>"Accel"</code> virtueller Modifikator</h2> + +<div class="note"><strong>Notiz</strong><strong>:</strong> Der virtuelle Modifikator <code>"Accel"</code> ist in den aktuellen Entwürfen der DOM3 Events-Spezifikation praktisch <strong>veraltet</strong>.</div> + +<p><code>getModifierState()</code> also accepts a deprecated virtual modifier named <code>"Accel"</code>. <code>event.getModifierState("Accel")</code> returns <code>true</code> when at least one of {{domxref("KeyboardEvent.ctrlKey")}} or {{domxref("KeyboardEvent.metaKey")}} is <code>true</code>.</p> + +<p>In old implementations and outdated specifications, it returned <code>true</code> when a modifier which is the typical modifier key for the shortcut key is pressed. For example, on Windows, pressing <kbd>Ctrl</kbd> key may make it return <code>true</code>. However, on Mac, pressing <kbd>⌘ Command</kbd> key may make it return <code>true</code>. Note that which modifier key makes it return true depends on platforms, browsers, and user settings. For example, Firefox users can customize this with a pref, <code>"ui.key.accelKey"</code>.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: js">// Ignorieren, wenn folgender Modifikator aktiv ist. +if (event.getModifierState("Fn") || + event.getModifierState("Hyper") || + event.getModifierState("OS") || + event.getModifierState("Super") || + event.getModifierState("Win") /* hack for IE */) { + return; +} + +// auch ignorieren, wenn zwei oder mehr Modifikatoren außer Shift aktiv sind. +if (event.getModifierState("Control") + + event.getModifierState("Alt") + + event.getModifierState("Meta") > 1) { + return; +} + +// Tastaturkürzel mit Standardmodifikator +if (event.getModifierState("Accel")) { + switch (event.key.toLowerCase()) { + case "c": + if (event.getModifierState("Shift")) { + // Handle Accel + Shift + C + event.preventDefault(); // consume the key event + } + break; + case "k": + if (!event.getModifierState("Shift")) { + // Handle Accel + K + event.preventDefault(); // consume the key event + } + break; + } + return; +} + +// Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist. +if ((event.getModifierState("ScrollLock") || + event.getModifierState("Scroll") /* hack for IE */) && + !event.getModifierState("Control") && + !event.getModifierState("Alt") && + !event.getModifierState("Meta")) { + switch (event.key) { + case "ArrowDown": + case "Down": // Hack für IE und älteren Gecko + event.preventDefault(); // Schlüsselereignis verwenden + break; + case "ArrowLeft": + case "Left": // Hack für IE und älteren Gecko + // Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist. + event.preventDefault(); // Schlüsselereignis verwenden + break; + case "ArrowRight": + case "Right": // Hack für IE und älteren Gecko + // Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist. + event.preventDefault(); // Schlüsselereignis verwenden + break; + case "ArrowUp": + case "Up": // Hack für IE und älteren Gecko + // Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist. + event.preventDefault(); // Schlüsselereignis verwenden + break; + } +} +</pre> + +<div class="note"> +<p>Obwohl dieses Beispiel <code>.getModifierState()</code> mit <code>"Alt"</code>, <code>"Control"</code>, <code>"Meta"</code> und <code>"Shift"</code> verwendet, ist es vielleicht besser, <code>altKey</code>, <code>ctrlKey</code>, <code>metaKey</code> und <code>shiftKey</code> zu verwenden, da sie kürzer und vielleicht schneller sind.</p> +</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('DOM3 Events', '#widl-KeyboardEvent-getModifierState', 'getModifierState()')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + <td>Initiale Definition (<a href="https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3Events-key.html#keys-modifier">Modifier Keys spec</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Du zu den Daten beitragen möchtest, besuche bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und sende uns deinen Pull-Request. </div> + +<p>{{Compat("api.KeyboardEvent.getModifierState")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Das {{domxref("KeyboardEvent")}}, zu dem die Methode gehört.</li> + <li>{{domxref("MouseEvent.getModifierState")}}</li> +</ul> diff --git a/files/de/web/api/keyboardevent/index.html b/files/de/web/api/keyboardevent/index.html new file mode 100644 index 0000000000..6f76b0b13f --- /dev/null +++ b/files/de/web/api/keyboardevent/index.html @@ -0,0 +1,458 @@ +--- +title: KeyboardEvent +slug: Web/API/KeyboardEvent +translation_of: Web/API/KeyboardEvent +--- +<div>{{APIRef("DOM Events")}}</div> + +<p><strong><code>KeyboardEvent</code></strong> Objekte beschreiben eine Benutzerinteraktion mit dem Keyboard. Jedes Event beschreibt eine Taste. Der Eventtyp (<code>keydown</code>, <code>keypress</code>, oder <code>keyup</code>) identifiziert welche Art von Aktivität ausgeführt wurde.</p> + +<div class="note"><strong>Anmerkung:</strong> Das <code>KeyboardEvent</code> deutet nur an was mit einer Taste passiert. Wenn Sie Texteingaben behandeln müssen, verwenden sie stattdessen das HTML5 <code><a href="/en-US/docs/DOM/DOM_event_reference/input" rel="custom">input</a></code> Event. Beispiel: Wenn ein Benutzer Text über ein Handschriftsystem - wie auf einem Tablet - eingibt, werden Tastenevents möglicherweise nicht ausgelöst.</div> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt>{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}</dt> + <dd>Erzeugt ein <code>KeyboardEvent</code> Objekt.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<p><em>Diese Schnittstelle erbt auch Methoden seiner Eltern {{domxref("UIEvent")}} und {{domxref("Event")}}.</em></p> + +<dl> + <dt>{{domxref("KeyboardEvent.getModifierState()")}}</dt> + <dd>Liefert einen {{jsxref("Boolean")}} Wert welcher angibt ob eine Hilfstaste wie <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd>, oder <kbd>Meta</kbd> gedrückt war als das Event erzeugt wurde.</dd> + <dt>{{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}}</dt> + <dd>Initialisiert ein <code>KeyboardEvent</code> Objekt. Dies wurde nur durch Gecko implementiert (andere verwendeten {{domxref("KeyboardEvent.initKeyboardEvent()")}}) und sollte nicht mehr benutzt werden. Der moderne Standardweg ist, den {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} Konstrutor zu verwenden.</dd> + <dt>{{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}}</dt> + <dd>Initialisiert ein <code>KeyboardEvent</code> Objekt. Dies wurde nie von Gecko implementiert (da stattdessen {{domxref("KeyboardEvent.initKeyEvent()")}} verwendet wurde) und sollte nicht mehr benutzt werden. Der moderne Standardweg ist, den {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} Konstruktor zu verwenden.</dd> +</dl> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<p><em>Diese Schnittstelle erbt auch Methoden seiner Eltern {{domxref("UIEvent")}} und {{domxref("Event")}}.</em></p> + +<dl> + <dt>{{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}</dt> + <dd>Liefert einen {{jsxref("Boolean")}} Wert der <code>true</code> ist falls die <kbd>Alt</kbd> ( <kbd>Option</kbd> oder <kbd>⌥</kbd> unter OS X) Taste aktiv war, als das Tastenevent erzeugt wurde.</dd> + <dt>{{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}}</dt> + <dd>Liefert einen {{domxref("DOMString")}} der das Zeichen der Taste repräsentiert. Wenn die Taste einem druckbaren Zeichen entspricht, ist dieser Wert eine nicht-leere Unicode-Zeichenkette die dieses Zeichen enthält. Fall die Taste keine druckbare Darstellung besitzt, ist der Wert eine leere Zeichenkette. + <div class="note"><strong>Anmerkung:</strong> Falls die Taste als Makro verwendet wird, das mehrere Zeichen einfügt, ist der Wert dieses Attributs die gesamte Zeichenkette, nicht nur das erste Zeichen.</div> + + <div class="warning"><strong>Warnung:</strong> Dies wurde aus den DOM Level 3 Events entfernt. Es wird nur von IE9+ und Microsoft Edge unterstützt.</div> + </dd> + <dt>{{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}</dt> + <dd>Liefert einen {{jsxref("Number")}} Wert der die Unicode-Kennziffer der Taste repräsentiert; dieses Attribut wird nur vom <code>keypress</code> Event verwendet. Für Tasten deren <code>char</code> Attribut mehrere Zeichen enthält ist der Wert dieses Attributs der Unicode-Wert des ersten Zeichens . In Firefox 26 liefert dies Codes für druckbare Zeichen. + <div class="warning"><strong>Warnung:</strong> Dieses Attribut ist veraltet; Sie sollten stattdessen - wenn vorhanden - {{domxref("KeyboardEvent.key")}} verwenden.</div> + </dd> + <dt>{{domxref("KeyboardEvent.code")}} {{Readonlyinline}}</dt> + <dd>Liefert einen {{domxref("DOMString")}} mit dem Codewert der Taste, welche durch das Event repräsentiert wird.</dd> + <dt>{{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}</dt> + <dd>Liefert einen {{jsxref("Boolean")}} Wert der <code>true</code> ist, falls die <kbd>Ctrl</kbd> Taste aktiv war als das Key-Event erzeugt wurde.</dd> + <dt>{{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}</dt> + <dd>Liefert einen {{jsxref("Boolean")}} Wert der <code>true</code> ist falls das Event nach <code>compositionstart</code> und vor <code>compositionend</code> ausgelöst wird.</dd> + <dt>{{domxref("KeyboardEvent.key")}} {{Readonlyinline}}</dt> + <dd>Liefert einen {{domxref("DOMString")}} der den Wert der Taste darstellt die durch das Event repräsentiert wird.</dd> + <dt>{{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}}</dt> + <dd>Liefert einen {{jsxref("Number")}} Wert der einen system- und implementationsabhängigen Zahlencode darstellt, der den unmodifizierten Wert der gedrückten Taste repräsentiert. + <div class="warning"><strong>Warnung:</strong> Dieses Attribut ist veraltet; Sie sollten stattdessen - wenn vorhanden - {{domxref("KeyboardEvent.key")}} verwenden.</div> + </dd> + <dt>{{domxref("KeyboardEvent.keyIdentifier")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}</dt> + <dd>Diese Eigenschaft ist nicht standardisiert und veraltet. Es sollte stattdessen {{domxref("KeyboardEvent.key")}} verwendet werden. Sie war Teil einer alten Version von DOM Level 3 Events.</dd> + <dt>{{domxref("KeyboardEvent.keyLocation")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}</dt> + <dd>Dies ist ein nicht-standardisierter Alias für {{domxref("KeyboardEvent.location")}}. Sie war Teil einer alten Version von DOM Level 3 Events.</dd> + <dt>{{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}</dt> + <dd>Liefert einen {{domxref("DOMString")}} der das Gebietsschema identifiziert für die das Keyboard konfiguriert ist. Diese Zeichenkette kann leer sein, wenn der Browser oder das Gerät das Gebietsschema des Keyboards nicht kennt. + <div class="note"><strong>Anmerkung:</strong> Dies beschreibt nicht das Gebietsschema der eingegebenen Daten. Ein Benutzer könnte ein Tastaturlayout nutzen während er Text in einer anderen Sprache eingibt.</div> + </dd> + <dt>{{domxref("KeyboardEvent.location")}}<a> {{Readonlyinline}}</a></dt> + <dd>Liefert einen {{jsxref("Number")}} Wert der die Lage der Taste auf der Tastatur oder einem anderen Eingabegerät repräsentiert.</dd> + <dt>{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}</dt> + <dd>Liefert einen {{jsxref("Boolean")}} Wert der <code>true</code> ist, falls die <kbd>Meta</kbd> Taste (auf Mac-Tastaturen, die <kbd>⌘ Command</kbd> Taste; auf Windows-Tastaturen, die Windows -Taste (<kbd>⊞</kbd>)) aktiv war, als das Key-Event erzeugt wurde.</dd> + <dt>{{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}</dt> + <dd>Liefert einen {{jsxref("Boolean")}} Wert der <code>true</code> ist, falls die Taste gedrückt gehalten wird, so dass sie sich automatisch wiederholt.</dd> + <dt>{{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}</dt> + <dd>Liefert einen {{jsxref("Boolean")}} Wert der <code>true</code> ist, falls die <kbd>Shift</kbd> Taste aktiv war, als das Key-Event erzeugt wurde.</dd> + <dt>{{domxref("KeyboardEvent.which")}} {{deprecated_inline}}{{Readonlyinline}}</dt> + <dd>Liefert einen {{jsxref("Number")}} Wert der einen system- und implementationsabhängigen Zahlencode darstellt, der den unmodifizierten Wert der gedrückten Taste repräsentiert; das ist gewöhnlich das Gleiche wie <code>keyCode</code>. + <div class="warning"><strong>Warnung:</strong> Dieses Attribut ist veraltet; Sie sollten stattdessen - wenn vorhanden - {{domxref("KeyboardEvent.key")}} verwenden.</div> + </dd> +</dl> + +<h2 id="Anmerkungen">Anmerkungen</h2> + +<p>Es gibt <code>keydown</code>, <code>keypress</code>, and <code>keyup</code> Events. Für die meisten Tasten versendet Gecko eine Sequenz von Key-Events wie folgt:</p> + +<ol> + <li>Wenn die Taste gedrückt wird, wird ein <code>keydown</code> Event gesendet.</li> + <li>Falls die Taste keine Hilfstaste ist, wird das <code>keypress</code> Event gesendet.</li> + <li>Wenn der Nutzer die Taste loslässt, wird das <code>keyup</code> Event gesendet.</li> +</ol> + +<h3 id="Sonderfälle">Sonderfälle</h3> + +<p>Einige Taste schalten den Status einer Kontrollleuchte um; dazu gehören Caps Lock, Num Lock, und Scroll Lock. Unter Windows und Linux senden diese Tasten nur <code>keydown</code> and <code>keyup</code> Events.</p> + +<div class="note"> +<p>Unter Linux versendet Firefox 12 und eher das <code>keypress</code> Event auch für diese Tasten.</p> +</div> + +<p>Jedoch sorgen die Einschränkungen des Mac OS X Event-Modells dafür, dass Caps Lock nur das <code>keydown</code> Event versendet. Num Lock wurde auf einigen älteren Laptop-Modellen (Modelle 2007 und älter) unterstützt, aber seitdem hat Mac OS X Num Lock nicht mehr untertstützt - nicht einmal auf externen Tastaturen. Auf älteren MacBooks mit einer Num Lock Taste, erzeugt diese Taste überhaupt keine KeyEvents. Gecko unterstützt die Scroll Lock Taste, falls eine externe Tastatur, die eine F14 Taste besitzt, angeschlossen ist. In bestimmten älteren Firefox-Versionen erzeugt diese Taste ein <code>keypress</code> Event; dieses inkonsistente Verhalten war {{bug(602812)}}.</p> + +<h3 id="Behandlung_von_Auto-repeat">Behandlung von Auto-repeat</h3> + +<p>Wenn eine Taste gedrückt und gehalten wird, beginnt sie die automatische Wiederholung (sog. <em>auto-repeat</em>). Das Resultat ist das Versenden einer Reihe von Events ähnlich der folgenden:</p> + +<ol> + <li><code>keydown</code></li> + <li><code>keypress</code></li> + <li><code>keydown</code></li> + <li><code>keypress</code></li> + <li><<wiederholt sich bis der Nutzer die Taste loslässt>></li> + <li><code>keyup</code></li> +</ol> + +<p>Das sollte laut DOM Level 3 Spezifikation passieren. Allerdings gibt es einige Ausnahmen, wie unten beschrieben.</p> + +<h4 id="Auto-repeat_in_einigen_GTK-Umgebungen_wie_Ubuntu_9.4">Auto-repeat in einigen GTK-Umgebungen wie Ubuntu 9.4</h4> + +<p>In einigen GTK-basierten Umgebungen versendet auto-repeat automatisch ein natives Key-Up Event während der automatischen Wiederholung und es ist für Gecko deshalb nicht möglich zwischen wiederholten Tastendrücken und einem auto-repeat unterscheiden zu können. Auf diesen Platformen wird eine Auto-Repeat Taste also die folgende Reihe von Events erzeugen:</p> + +<ol> + <li><code>keydown</code></li> + <li><code>keypress</code></li> + <li><code>keyup</code></li> + <li><code>keydown</code></li> + <li><code>keypress</code></li> + <li><code>keyup</code></li> + <li><<wiederholt sich bis der Nutzer die Taste loslässt>></li> + <li><code>keyup</code></li> +</ol> + +<p>Innerhalb dieser Umgebungen gibt es leider keine Möglichkeit für Webinhalte den Unterschied zwischen selbst-wiederholenden Tasten und Tasten die wiederholt gedrückt werden herauszufinden.</p> + +<h4 id="Behandlung_von_auto-repeat_vor_Gecko_5.0">Behandlung von auto-repeat vor Gecko 5.0</h4> + +<p>Vor Gecko 5.0 {{geckoRelease('5.0')}} war platformübergreifendes Tastatur-Handling weniger einheitlich.</p> + +<dl> + <dt>Windows</dt> + <dd>Das Auto-Repeat-Verhalten ist das Gleiche wie in Gecko 4.0 und später.</dd> + <dt>Mac</dt> + <dd>Nach dem initialen keydown Event werden nur keypress Events gesendet bis das keyup Event auftritt; die dazwischendliegenden keydown Events werden nicht gesendet.</dd> + <dt>Linux</dt> + <dd>Das Event-Verhalten hängt von der spezifischen Platform ab. Es wird sich entweder so verhalten wie Windows oder Mac, abhängig davon was das native Event-Modell macht.</dd> +</dl> + +<p class="note"><strong>Anmerkung:</strong> manuelles Auslösen eines Events erzeugt <em>nicht</em> die mit dem Event verbundene Standard-Aktion. Zum Beispiel: manuelles Auslösen eines KeyEvent führt nicht dazu, dass der Buchstabe in einem fokussierten Eingabefeld auftaucht. Im Fall von UI-Events ist dies aus Sicherheitsgründen wichtig, da es verhindert, dass Skripte Benutzeraktionen simulieren, die mit dem Browser selbst interagieren.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: js"><!DOCTYPE html> +<html> +<head> +<script> +'use strict'; + +document.addEventListener('keydown', (event) => { + const keyName = event.key; + + if (keyName === 'Control') { + // not alert when only Control key is pressed. + return; + } + + if (event.ctrlKey) { + // Even though event.key is not 'Control' (i.e. 'a' is pressed), + // event.ctrlKey may be true if Ctrl key is pressed at the time. + alert(`Combination of ctrlKey + ${keyName}`); + } else { + alert(`Key pressed ${keyName}`); + } +}, false); + +document.addEventListener('keyup', (event) => { + const keyName = event.key; + + // As the user release the Ctrl key, the key is no longer active. + // So event.ctrlKey is false. + if (keyName === 'Control') { + alert('Control key was released'); + } +}, false); + +</script> +</head> + +<body> +</body> +</html> +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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('DOM3 Events', '#interface-keyboardevent', 'KeyboardEvent')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<p>Die <code>KeyboardEvent</code> Schnittstelle lief durch eine Vielzahl von Entwurfsversionen, erst unter DOM Events Level 2, wo sie verworfen wurde als kein Konsens entstand, danach unter DOM Events Level 3. Dies führte zu einer Implementation von nicht standardisierten Initialisationsmethoden, der frühen DOM Events Level 2 Version<code> </code>{{domxref("KeyboardEvent.initKeyEvent()")}} durch Gecko Browser und die frühe DOM Events Level 3 Version, {{domxref("KeyboardEvent.initKeyboardEvent()")}} durch Andere. Beide wurden durch den modernen Einsatz eines Konstruktors ersetzt: {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</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>constructor</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("31.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>.char</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>9</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>.charCode</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>.isComposing</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("31.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>.keyCode</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>.locale</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>.location</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>.repeat</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("28.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>.which</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>.initKeyboardEvent()</code></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatIE("9.0")}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>constructor</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("31.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>.char</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>.charCode</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>.isComposing</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("31.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>.keyCode</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>.locale</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>.location</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>.repeat</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("28.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>.which</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>.initKeyboardEvent()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Die Argumente von <code>initKeyboardEvent()</code> von WebKit and Blink weichen von der Definition in DOM Level 3 Events ab. Die Methode ist: <code>initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyIdentifierArg, in number locationArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in boolean altGraphKeyArg)</code></p> + +<p>[2] Gecko wird <code>initKeyboardEvent()</code> nicht unterstützen, weil es die Feature-Erkennung von Web-Apllikationen komplett zerstört. Siehe {{Bug(999645)}}.</p> + +<p>[3] Das Argument von <code>initKeyboardEvent()</code> von IE weicht von der Definition in DOM Level 3 Events ab. Die Methode ist: <code>initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyArg, in number locationArg, in DOMString modifierListArg, in boolean repeatArt, in DOMString locationArg)</code>. Siehe <a href="http://msdn.microsoft.com/en-us/library/ie/ff975297%28v=vs.85%29.aspx">document of <code>initKeyboardEvent()</code> in MSDN</a>.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("KeyboardEvent.code")}}.</li> + <li>{{domxref("KeyboardEvent.key")}}.</li> + <li>{{domxref("KeyboardEvent.getModifierState")}}</li> +</ul> diff --git a/files/de/web/api/keyboardevent/keycode/index.html b/files/de/web/api/keyboardevent/keycode/index.html new file mode 100644 index 0000000000..98375fe4b9 --- /dev/null +++ b/files/de/web/api/keyboardevent/keycode/index.html @@ -0,0 +1,3185 @@ +--- +title: KeyboardEvent.keyCode +slug: Web/API/KeyboardEvent/keyCode +translation_of: Web/API/KeyboardEvent/keyCode +--- +<p>{{APIRef("DOM Events")}}{{deprecated_header()}}</p> + +<p>Die schreibgeschütze Eigenschaft <strong><code>KeyboardEvent.keyCode</code> </strong>stellt den den unveränderten, System- und Implementationsabhängigen numerischen Bezeichner der gedrückten Taste dar. Normalerweise ist das der zugehörige ASCII {{RFC(20)}}) oder Windows 1252 Code der Taste. Bei einer unerkannten Taste ist das der Wert <code>0</code>.</p> + +<p>Der Wert des <code>keypress</code> Ereignis unterscheided sich von Browser zu Browser. IE und Google Chrome setzen den {{domxref("KeyboardEvent.charCode")}} Wert. Gecko setzt <code>0</code> wenn die gedrückte Taste ein druckbares Zeichen darstellt, andernfalls ist es der selbe Wert wie beim <code>keydown</code> und <code>keyup</code> Ereignis.</p> + +<p>Von der Verwendung dieser Eigenschaft sollte nach Möglichkeit abgesehen werden, da siebereits seit einiger Zeit veraltet ist. Statdessen sollte {domxref("KeyboardEvent.code")}} verwendet werden, so es implementiert ist. Leider gibt es noch immer einige Browser ohne Unterstützung dafür. Google und Safari implementieren {{domxref("KeyboardEvent.keyIdentifier")}}, der bisher in der Entwurfs-Spezifikation enthalten ist, nicht jedoch in der finalen Version.</p> + +<div class="note"> +<p>Entwickler sollten von der Verwendung von <code>keyCode</code> Eigenschaft für druckbare Zeichen bei <code>keydown</code> und <code>keyup</code> Ereignissen absehen. Wie zuvor beschrieben , ist die <code>keyCode</code> Eigenschaft für druckbare Zeichen nicht zu gebrauchen, vor allem wenn <kbd>Shift</kbd> oder <kbd>Alt</kbd> dabei gedrückt sind. Bei der Implementation von Kürzeln, ist das {{event("keypress")}} Ereignis meist eher angebracht (zumindest bei der Verwendung der Gecko Engine). Näheres siehe <a href="/en-US/docs/Gecko_Keypress_Event" title="en-US/docs/Gecko_Keypress_Event">Gecko Keypress Event</a> .</p> +</div> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: js">window.addEventListener("keydown", function (event) { + if (event.defaultPrevented) { + return; // Should do nothing if the default action has been cancelled + } + + var handled = false; + if (event.key !== undefined) { + // Handle the event with KeyboardEvent.key and set handled true. + } else if (event.keyIdentifier !== undefined) { + // Handle the event with KeyboardEvent.keyIdentifier and set handled true. + } else if (event.keyCode !== undefined) { + // Handle the event with KeyboardEvent.keyCode and set handled true. + } + + if (handled) { + // Suppress "double action" if event handled + event.preventDefault(); + } +}, true); +</pre> + +<h2 id="Specifications">Specifications</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('DOM3 Events','#widl-KeyboardEvent-keyCode','KeyboardEvent.keyCode')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + <td>Initiale Definition; als veraltet gekennzeichnet</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("api.KeyboardEvent.keyCode")}}</p> + +<h2 id="Werte_von_keyCode">Werte von keyCode</h2> + +<h3 id="druckbare_Tasten_in_der_Standard-Position">druckbare Tasten in der Standard-Position</h3> + +<p>The value of key events which are caused by pressing or releasing printable keys in standard position is not compatible between browsers.</p> + +<p>IE just exposes the native virtual keycode value as <code>KeyboardEvent.keyCode</code>.</p> + +<p>Google Chrome, Chromium and Safari must decide the value from the input character. If the inputting character can be inputted with the US keyboard layout, they use the <code>keyCode</code> value on the US keyboard layout.</p> + +<p>Starting in Firefox 15 {{geckoRelease("15.0")}}, Gecko gets <code>keyCode</code> values from ASCII characters inputtable by the key — even with shift modifiers or an ASCII capable keyboard layout. See the following rules for details:</p> + +<ol> + <li>If the system is Windows and the native keycode of the pressed key indicates that the key is a-z or 0-9, use a keycode for it.</li> + <li>If the system is Mac and the native keycode of the pressed key indicates that the key is 0-9, use a keycode for it.</li> + <li>If the pressed key inputs an ASCII alphabetic or numeric character with no modifier key, use a keycode for it.</li> + <li>If the pressed key inputs an ASCII alphabetic or numeric character with a Shift key modifier, use a keycode for it.</li> + <li>If the pressed key inputs a different ASCII character with no modifier key, use a keycode for it.</li> + <li>If the pressed key inputs a different ASCII character with a Shift key modifier, use a keycode for it.</li> + <li>Otherwise, i.e., pressed key inputs a unicode character: + <ol> + <li>If the keyboard layout is ASCII-capable (i.e., can input ASCII alphabets), use 0 or compute with <a href="#keyCode_of_punctuation_keys_on_some_keyboard_layout">the following additional rules</a>.</li> + <li>Otherwise, i.e., the keyboard layout isn't ASCII capable, use the ASCII capable keyboard layout installed on the environment with the highest priority: + <ol> + <li>If the pressed key on the alternative keyboard layout inputs an ASCII alphabetic or numeric character, use a keycode for it.</li> + <li>Otherwise, use 0 or compute with <a href="#keyCode_of_punctuation_keys_on_some_keyboard_layout">the following additional rules</a>.</li> + </ol> + </li> + </ol> + </li> +</ol> + +<p id="keyCode_of_punctuation_keys_on_some_keyboard_layout">Starting in Firefox 60 {{geckoRelease("60.0")}}, Gecko sets <code>keyCode</code> values of punctuation keys as far as possible (when points 7.1 or 7.2 in the above list are reached) with the following rules:</p> + +<div class="warning"> +<p>The purpose of these new additional rules is for making users whose keyboard layouts map unicode characters to punctuation keys in a US keyboard layout can use web applications which support Firefox only with ASCII-capable keyboard layouts or just with a US keyboard layout. Otherwise, the newly mapped <code>keyCode</code> values may be conflict with other keys. For example, if the active keyboard layout is Russian, the <code>keyCode</code> value of <strong>both</strong> the <code>"Period"</code> key and <code>"Slash"</code> key are <code>190</code> (<code>KeyEvent.DOM_VK_PERIOD</code>). If you need to distinguish those keys but you don't want to support all keyboard layouts in the world by yourself, you should probably use {{domxref("KeyboardEvent.code")}}.</p> +</div> + +<ol> + <li>If running macOS or Linux: + <ol> + <li>If the active keyboard layout is not ASCII-capable and an alternative ASCII-capable keyboard layout is available. + <ol> + <li>If the alternative ASCII-capable keyboard layout produces an ASCII character via just the unmodified key, use a <code>keyCode</code> for the character.</li> + <li>If the alternative ASCII-capable keyboard layout produces an ASCII character with a Shift key modifier, use a <code>keyCode</code> for the shifted character.</li> + <li>Otherwise, use a <code>keyCode</code> for an ASCII character produced by the key when the US keyboard layout is active.</li> + </ol> + </li> + <li>Otherwise, use a <code>keyCode</code> for an ASCII character produced by the key when the US keyboard layout is active.</li> + </ol> + </li> + <li>If running on Windows: + <ol> + <li>Use a <code>keyCode</code> value for an ASCII character produced by a key which is mapped to the same virtual keycode of Windows when the US keyboard layout is active.</li> + </ol> + </li> +</ol> + +<table class="standard-table"> + <caption>keyCode values of each browser's keydown event caused by printable keys in standard position</caption> + <thead> + <tr> + <th colspan="1" rowspan="3" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th colspan="3" rowspan="1" scope="col">Internet Explorer 11</th> + <th colspan="6" rowspan="1" scope="col">Google Chrome 34</th> + <th colspan="3" rowspan="1" scope="col">Chromium 34</th> + <th colspan="3" rowspan="1" scope="col">Safari 7</th> + <th colspan="9" rowspan="1" scope="col">Gecko 29</th> + </tr> + <tr> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th> + </tr> + <tr> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th colspan="1" scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + </tr> + </thead> + <tfoot> + <tr> + <th colspan="1" rowspan="3" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th colspan="1" scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + </tr> + <tr> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th> + </tr> + <tr> + <th colspan="3" rowspan="1" scope="col">Internet Explorer 11</th> + <th colspan="6" rowspan="1" scope="col">Google Chrome 34</th> + <th colspan="3" rowspan="1" scope="col">Chromium 34</th> + <th colspan="3" rowspan="1" scope="col">Safari 7</th> + <th colspan="9" rowspan="1" scope="col">Gecko 29</th> + </tr> + </tfoot> + <tbody> + <tr> + <th scope="row"><code>"Digit1"</code></th> + <td colspan="3" rowspan="1"><code>0x31 (49)</code></td> + <td colspan="3" rowspan="1"><code>0x31 (49)</code></td> + <td colspan="3" rowspan="1"><code>0x31 (49)</code></td> + <td colspan="3" rowspan="1"><code>0x31 (49)</code></td> + <td colspan="3" rowspan="1"><code>0x31 (49)</code></td> + <td colspan="3" rowspan="1"><code>0x31 (49)</code></td> + <td colspan="3" rowspan="1"><code>0x31 (49)</code></td> + <td colspan="3" rowspan="1"><code>0x31 (49)</code></td> + </tr> + <tr> + <th scope="row"><code>"Digit2"</code></th> + <td colspan="3" rowspan="1"><code>0x32 (50)</code></td> + <td colspan="3" rowspan="1"><code>0x32 (50)</code></td> + <td colspan="3" rowspan="1"><code>0x32 (50)</code></td> + <td colspan="3" rowspan="1"><code>0x32 (50)</code></td> + <td colspan="3" rowspan="1"><code>0x32 (50)</code></td> + <td colspan="3" rowspan="1"><code>0x32 (50)</code></td> + <td colspan="3" rowspan="1"><code>0x32 (50)</code></td> + <td colspan="3" rowspan="1"><code>0x32 (50)</code></td> + </tr> + <tr> + <th scope="row"><code>"Digit3"</code></th> + <td colspan="3" rowspan="1"><code>0x33 (51)</code></td> + <td colspan="3" rowspan="1"><code>0x33 (51)</code></td> + <td colspan="3" rowspan="1"><code>0x33 (51)</code></td> + <td colspan="3" rowspan="1"><code>0x33 (51)</code></td> + <td colspan="3" rowspan="1"><code>0x33 (51)</code></td> + <td colspan="3" rowspan="1"><code>0x33 (51)</code></td> + <td colspan="3" rowspan="1"><code>0x33 (51)</code></td> + <td colspan="3" rowspan="1"><code>0x33 (51)</code></td> + </tr> + <tr> + <th scope="row"><code>"Digit4"</code></th> + <td colspan="3" rowspan="1"><code>0x34 (52)</code></td> + <td colspan="3" rowspan="1"><code>0x34 (52)</code></td> + <td colspan="3" rowspan="1"><code>0x34 (52)</code></td> + <td colspan="3" rowspan="1"><code>0x34 (52)</code></td> + <td colspan="3" rowspan="1"><code>0x34 (52)</code></td> + <td colspan="3" rowspan="1"><code>0x34 (52)</code></td> + <td colspan="3" rowspan="1"><code>0x34 (52)</code></td> + <td colspan="3" rowspan="1"><code>0x34 (52)</code></td> + </tr> + <tr> + <th scope="row"><code>"Digit5"</code></th> + <td colspan="3" rowspan="1"><code>0x35 (53)</code></td> + <td colspan="3" rowspan="1"><code>0x35 (53)</code></td> + <td colspan="3" rowspan="1"><code>0x35 (53)</code></td> + <td colspan="3" rowspan="1"><code>0x35 (53)</code></td> + <td colspan="3" rowspan="1"><code>0x35 (53)</code></td> + <td colspan="3" rowspan="1"><code>0x35 (53)</code></td> + <td colspan="3" rowspan="1"><code>0x35 (53)</code></td> + <td colspan="3" rowspan="1"><code>0x35 (53)</code></td> + </tr> + <tr> + <th scope="row"><code>"Digit6"</code></th> + <td colspan="3" rowspan="1"><code>0x36 (54)</code></td> + <td colspan="3" rowspan="1"><code>0x36 (54)</code></td> + <td colspan="3" rowspan="1"><code>0x36 (54)</code></td> + <td colspan="3" rowspan="1"><code>0x36 (54)</code></td> + <td colspan="3" rowspan="1"><code>0x36 (54)</code></td> + <td colspan="3" rowspan="1"><code>0x36 (54)</code></td> + <td colspan="3" rowspan="1"><code>0x36 (54)</code></td> + <td colspan="3" rowspan="1"><code>0x36 (54)</code></td> + </tr> + <tr> + <th scope="row"><code>"Digit7"</code></th> + <td colspan="3" rowspan="1"><code>0x37 (55)</code></td> + <td colspan="3" rowspan="1"><code>0x37 (55)</code></td> + <td colspan="3" rowspan="1"><code>0x37 (55)</code></td> + <td colspan="3" rowspan="1"><code>0x37 (55)</code></td> + <td colspan="3" rowspan="1"><code>0x37 (55)</code></td> + <td colspan="3" rowspan="1"><code>0x37 (55)</code></td> + <td colspan="3" rowspan="1"><code>0x37 (55)</code></td> + <td colspan="3" rowspan="1"><code>0x37 (55)</code></td> + </tr> + <tr> + <th scope="row"><code>"Digit8"</code></th> + <td colspan="3" rowspan="1"><code>0x38 (56)</code></td> + <td colspan="3" rowspan="1"><code>0x38 (56)</code></td> + <td colspan="3" rowspan="1"><code>0x38 (56)</code></td> + <td colspan="3" rowspan="1"><code>0x38 (56)</code></td> + <td colspan="3" rowspan="1"><code>0x38 (56)</code></td> + <td colspan="3" rowspan="1"><code>0x38 (56)</code></td> + <td colspan="3" rowspan="1"><code>0x38 (56)</code></td> + <td colspan="3" rowspan="1"><code>0x38 (56)</code></td> + </tr> + <tr> + <th scope="row"><code>"Digit9"</code></th> + <td colspan="3" rowspan="1"><code>0x39 (57)</code></td> + <td colspan="3" rowspan="1"><code>0x39 (57)</code></td> + <td colspan="3" rowspan="1"><code>0x39 (57)</code></td> + <td colspan="3" rowspan="1"><code>0x39 (57)</code></td> + <td colspan="3" rowspan="1"><code>0x39 (57)</code></td> + <td colspan="3" rowspan="1"><code>0x39 (57)</code></td> + <td colspan="3" rowspan="1"><code>0x39 (57)</code></td> + <td colspan="3" rowspan="1"><code>0x39 (57)</code></td> + </tr> + <tr> + <th scope="row"><code>"Digit0"</code></th> + <td colspan="3" rowspan="1"><code>0x30 (48)</code></td> + <td colspan="3" rowspan="1"><code>0x30 (48)</code></td> + <td colspan="3" rowspan="1"><code>0x30 (48)</code></td> + <td colspan="3" rowspan="1"><code>0x30 (48)</code></td> + <td colspan="3" rowspan="1"><code>0x30 (48)</code></td> + <td colspan="3" rowspan="1"><code>0x30 (48)</code></td> + <td colspan="3" rowspan="1"><code>0x30 (48)</code></td> + <td colspan="3" rowspan="1"><code>0x30 (48)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyA"</code></th> + <td colspan="3" rowspan="1"><code>0x41 (65)</code></td> + <td colspan="3" rowspan="1"><code>0x41 (65)</code></td> + <td colspan="3" rowspan="1"><code>0x41 (65)</code></td> + <td colspan="3" rowspan="1"><code>0x41 (65)</code></td> + <td colspan="3" rowspan="1"><code>0x41 (65)</code></td> + <td colspan="3" rowspan="1"><code>0x41 (65)</code></td> + <td colspan="3" rowspan="1"><code>0x41 (65)</code></td> + <td colspan="3" rowspan="1"><code>0x41 (65)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyB"</code></th> + <td colspan="3" rowspan="1"><code>0x42 (66)</code></td> + <td colspan="3" rowspan="1"><code>0x42 (66)</code></td> + <td colspan="3" rowspan="1"><code>0x42 (66)</code></td> + <td colspan="3" rowspan="1"><code>0x42 (66)</code></td> + <td colspan="3" rowspan="1"><code>0x42 (66)</code></td> + <td colspan="3" rowspan="1"><code>0x42 (66)</code></td> + <td colspan="3" rowspan="1"><code>0x42 (66)</code></td> + <td colspan="3" rowspan="1"><code>0x42 (66)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyC"</code></th> + <td colspan="3" rowspan="1"><code>0x43 (67)</code></td> + <td colspan="3" rowspan="1"><code>0x43 (67)</code></td> + <td colspan="3" rowspan="1"><code>0x43 (67)</code></td> + <td colspan="3" rowspan="1"><code>0x43 (67)</code></td> + <td colspan="3" rowspan="1"><code>0x43 (67)</code></td> + <td colspan="3" rowspan="1"><code>0x43 (67)</code></td> + <td colspan="3" rowspan="1"><code>0x43 (67)</code></td> + <td colspan="3" rowspan="1"><code>0x43 (67)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyD"</code></th> + <td colspan="3" rowspan="1"><code>0x44 (68)</code></td> + <td colspan="3" rowspan="1"><code>0x44 (68)</code></td> + <td colspan="3" rowspan="1"><code>0x44 (68)<span style="display: none;"> </span></code></td> + <td colspan="3" rowspan="1"><code>0x44 (68)</code></td> + <td colspan="3" rowspan="1"><code>0x44 (68)</code></td> + <td colspan="3" rowspan="1"><code>0x44 (68)</code></td> + <td colspan="3" rowspan="1"><code>0x44 (68)</code></td> + <td colspan="3" rowspan="1"><code>0x44 (68)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyE"</code></th> + <td colspan="3" rowspan="1"><code>0x45 (69)</code></td> + <td colspan="3" rowspan="1"><code>0x45 (69)</code></td> + <td colspan="3" rowspan="1"><code>0x45 (69)</code></td> + <td colspan="3" rowspan="1"><code>0x45 (69)</code></td> + <td colspan="3" rowspan="1"><code>0x45 (69)</code></td> + <td colspan="3" rowspan="1"><code>0x45 (69)</code></td> + <td colspan="3" rowspan="1"><code>0x45 (69)</code></td> + <td colspan="3" rowspan="1"><code>0x45 (69)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyF"</code></th> + <td colspan="3" rowspan="1"><code>0x46 (70)</code></td> + <td colspan="3" rowspan="1"><code>0x46 (70)</code></td> + <td colspan="3" rowspan="1"><code>0x46 (70)</code></td> + <td colspan="3" rowspan="1"><code>0x46 (70)</code></td> + <td colspan="3" rowspan="1"><code>0x46 (70)</code></td> + <td colspan="3" rowspan="1"><code>0x46 (70)</code></td> + <td colspan="3" rowspan="1"><code>0x46 (70)</code></td> + <td colspan="3" rowspan="1"><code>0x46 (70)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyG"</code></th> + <td colspan="3" rowspan="1"><code>0x47 (71)</code></td> + <td colspan="3" rowspan="1"><code>0x47 (71)</code></td> + <td colspan="3" rowspan="1"><code>0x47 (71)</code></td> + <td colspan="3" rowspan="1"><code>0x47 (71)</code></td> + <td colspan="3" rowspan="1"><code>0x47 (71)</code></td> + <td colspan="3" rowspan="1"><code>0x47 (71)</code></td> + <td colspan="3" rowspan="1"><code>0x47 (71)</code></td> + <td colspan="3" rowspan="1"><code>0x47 (71)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyH"</code></th> + <td colspan="3" rowspan="1"><code>0x48 (72)</code></td> + <td colspan="3" rowspan="1"><code>0x48 (72)</code></td> + <td colspan="3" rowspan="1"><code>0x48 (72)</code></td> + <td colspan="3" rowspan="1"><code>0x48 (72)</code></td> + <td colspan="3" rowspan="1"><code>0x48 (72)</code></td> + <td colspan="3" rowspan="1"><code>0x48 (72)</code></td> + <td colspan="3" rowspan="1"><code>0x48 (72)</code></td> + <td colspan="3" rowspan="1"><code>0x48 (72)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyI"</code></th> + <td colspan="3" rowspan="1"><code>0x49 (73)</code></td> + <td colspan="3" rowspan="1"><code>0x49 (73)</code></td> + <td colspan="3" rowspan="1"><code>0x49 (73)</code></td> + <td colspan="3" rowspan="1"><code>0x49 (73)</code></td> + <td colspan="3" rowspan="1"><code>0x49 (73)</code></td> + <td colspan="3" rowspan="1"><code>0x49 (73)</code></td> + <td colspan="3" rowspan="1"><code>0x49 (73)</code></td> + <td colspan="3" rowspan="1"><code>0x49 (73)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyJ"</code></th> + <td colspan="3" rowspan="1"><code>0x4A (74)</code></td> + <td colspan="3" rowspan="1"><code>0x4A (74)</code></td> + <td colspan="3" rowspan="1"><code>0x4A (74)</code></td> + <td colspan="3" rowspan="1"><code>0x4A (74)</code></td> + <td colspan="3" rowspan="1"><code>0x4A (74)</code></td> + <td colspan="3" rowspan="1"><code>0x4A (74)</code></td> + <td colspan="3" rowspan="1"><code>0x4A (74)</code></td> + <td colspan="3" rowspan="1"><code>0x4A (74)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyK"</code></th> + <td colspan="3" rowspan="1"><code>0x4B (75)</code></td> + <td colspan="3" rowspan="1"><code>0x4B (75)</code></td> + <td colspan="3" rowspan="1"><code>0x4B (75)</code></td> + <td colspan="3" rowspan="1"><code>0x4B (75)</code></td> + <td colspan="3" rowspan="1"><code>0x4B (75)</code></td> + <td colspan="3" rowspan="1"><code>0x4B (75)</code></td> + <td colspan="3" rowspan="1"><code>0x4B (75)</code></td> + <td colspan="3" rowspan="1"><code>0x4B (75)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyL"</code></th> + <td colspan="3" rowspan="1"><code>0x4C (76)</code></td> + <td colspan="3" rowspan="1"><code>0x4C (76)</code></td> + <td colspan="3" rowspan="1"><code>0x4C (76)</code></td> + <td colspan="3" rowspan="1"><code>0x4C (76)</code></td> + <td colspan="3" rowspan="1"><code>0x4C (76)</code></td> + <td colspan="3" rowspan="1"><code>0x4C (76)</code></td> + <td colspan="3" rowspan="1"><code>0x4C (76)</code></td> + <td colspan="3" rowspan="1"><code>0x4C (76)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyM"</code></th> + <td colspan="3" rowspan="1"><code>0x4D (77)</code></td> + <td colspan="3" rowspan="1"><code>0x4D (77)</code></td> + <td colspan="3" rowspan="1"><code>0x4D (77)</code></td> + <td colspan="3" rowspan="1"><code>0x4D (77)</code></td> + <td colspan="3" rowspan="1"><code>0x4D (77)</code></td> + <td colspan="3" rowspan="1"><code>0x4D (77)</code></td> + <td colspan="3" rowspan="1"><code>0x4D (77)</code></td> + <td colspan="3" rowspan="1"><code>0x4D (77)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyN"</code></th> + <td colspan="3" rowspan="1"><code>0x4E (78)</code></td> + <td colspan="3" rowspan="1"><code>0x4E (78)</code></td> + <td colspan="3" rowspan="1"><code>0x4E (78)</code></td> + <td colspan="3" rowspan="1"><code>0x4E (78)</code></td> + <td colspan="3" rowspan="1"><code>0x4E (78)</code></td> + <td colspan="3" rowspan="1"><code>0x4E (78)</code></td> + <td colspan="3" rowspan="1"><code>0x4E (78)</code></td> + <td colspan="3" rowspan="1"><code>0x4E (78)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyO"</code></th> + <td colspan="3" rowspan="1"><code>0x4F (79)</code></td> + <td colspan="3" rowspan="1"><code>0x4F (79)</code></td> + <td colspan="3" rowspan="1"><code>0x4F (79)</code></td> + <td colspan="3" rowspan="1"><code>0x4F (79)</code></td> + <td colspan="3" rowspan="1"><code>0x4F (79)</code></td> + <td colspan="3" rowspan="1"><code>0x4F (79)</code></td> + <td colspan="3" rowspan="1"><code>0x4F (79)</code></td> + <td colspan="3" rowspan="1"><code>0x4F (79)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyP"</code></th> + <td colspan="3" rowspan="1"><code>0x50 (80)</code></td> + <td colspan="3" rowspan="1"><code>0x50 (80)</code></td> + <td colspan="3" rowspan="1"><code>0x50 (80)</code></td> + <td colspan="3" rowspan="1"><code>0x50 (80)</code></td> + <td colspan="3" rowspan="1"><code>0x50 (80)</code></td> + <td colspan="3" rowspan="1"><code>0x50 (80)</code></td> + <td colspan="3" rowspan="1"><code>0x50 (80)</code></td> + <td colspan="3" rowspan="1"><code>0x50 (80)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyQ"</code></th> + <td colspan="3" rowspan="1"><code>0x51 (81)</code></td> + <td colspan="3" rowspan="1"><code>0x51 (81)</code></td> + <td rowspan="1"><code>0x51 (81)</code></td> + <td rowspan="1"><code>0x51 (81)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td> + <td><code>0x51 (81)</code></td> + <td><code>0x51 (81)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td> + <td rowspan="1"><code>0x51 (81)</code></td> + <td rowspan="1"><code>0x51 (81)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td> + <td colspan="3" rowspan="1"><code>0x51 (81)</code></td> + <td><code>0x51 (81)</code></td> + <td><code>0x51 (81)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td> + <td colspan="3" rowspan="1"><code>0x51 (81)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyR"</code></th> + <td colspan="3" rowspan="1"><code>0x52 (82)</code></td> + <td colspan="3" rowspan="1"><code>0x52 (82)</code></td> + <td colspan="3" rowspan="1"><code>0x52 (82)</code></td> + <td colspan="3" rowspan="1"><code>0x52 (82)</code></td> + <td colspan="3" rowspan="1"><code>0x52 (82)</code></td> + <td colspan="3" rowspan="1"><code>0x52 (82)</code></td> + <td colspan="3" rowspan="1"><code>0x52 (82)</code></td> + <td colspan="3" rowspan="1"><code>0x52 (82)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyS"</code></th> + <td colspan="3" rowspan="1"><code>0x53 (83)</code></td> + <td colspan="3" rowspan="1"><code>0x53 (83)</code></td> + <td colspan="3" rowspan="1"><code>0x53 (83)</code></td> + <td colspan="3" rowspan="1"><code>0x53 (83)</code></td> + <td colspan="3" rowspan="1"><code>0x53 (83)</code></td> + <td colspan="3" rowspan="1"><code>0x53 (83)</code></td> + <td colspan="3" rowspan="1"><code>0x53 (83)</code></td> + <td colspan="3" rowspan="1"><code>0x53 (83)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyT"</code></th> + <td colspan="3" rowspan="1"><code>0x54 (84)</code></td> + <td colspan="3" rowspan="1"><code>0x54 (84)</code></td> + <td colspan="3" rowspan="1"><code>0x54 (84)</code></td> + <td colspan="3" rowspan="1"><code>0x54 (84)</code></td> + <td colspan="3" rowspan="1"><code>0x54 (84)</code></td> + <td colspan="3" rowspan="1"><code>0x54 (84)</code></td> + <td colspan="3" rowspan="1"><code>0x54 (84)</code></td> + <td colspan="3" rowspan="1"><code>0x54 (84)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyU"</code></th> + <td colspan="3" rowspan="1"><code>0x55 (85)</code></td> + <td colspan="3" rowspan="1"><code>0x55 (85)</code></td> + <td colspan="3" rowspan="1"><code>0x55 (85)</code></td> + <td colspan="3" rowspan="1"><code>0x55 (85)</code></td> + <td colspan="3" rowspan="1"><code>0x55 (85)</code></td> + <td colspan="3" rowspan="1"><code>0x55 (85)</code></td> + <td colspan="3" rowspan="1"><code>0x55 (85)</code></td> + <td colspan="3" rowspan="1"><code>0x55 (85)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyV"</code></th> + <td colspan="3" rowspan="1"><code>0x56 (86)</code></td> + <td colspan="3" rowspan="1"><code>0x56 (86)</code></td> + <td colspan="3" rowspan="1"><code>0x56 (86)</code></td> + <td colspan="3" rowspan="1"><code>0x56 (86)</code></td> + <td colspan="3" rowspan="1"><code>0x56 (86)</code></td> + <td colspan="3" rowspan="1"><code>0x56 (86)</code></td> + <td colspan="3" rowspan="1"><code>0x56 (86)</code></td> + <td colspan="3" rowspan="1"><code>0x56 (86)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyW"</code></th> + <td colspan="3" rowspan="1"><code>0x57 (87)</code></td> + <td colspan="3" rowspan="1"><code>0x57 (87)</code></td> + <td colspan="3" rowspan="1"><code>0x57 (87)</code></td> + <td colspan="3" rowspan="1"><code>0x57 (87)</code></td> + <td colspan="3" rowspan="1"><code>0x57 (87)</code></td> + <td colspan="3" rowspan="1"><code>0x57 (87)</code></td> + <td colspan="3" rowspan="1"><code>0x57 (87)</code></td> + <td colspan="3" rowspan="1"><code>0x57 (87)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyX"</code></th> + <td colspan="3" rowspan="1"><code>0x58 (88)</code></td> + <td colspan="3" rowspan="1"><code>0x58 (88)</code></td> + <td colspan="3" rowspan="1"><code>0x58 (88)</code></td> + <td colspan="3" rowspan="1"><code>0x58 (88)</code></td> + <td colspan="3" rowspan="1"><code>0x58 (88)</code></td> + <td colspan="3" rowspan="1"><code>0x58 (88)</code></td> + <td colspan="3" rowspan="1"><code>0x58 (88)</code></td> + <td colspan="3" rowspan="1"><code>0x58 (88)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyY"</code></th> + <td colspan="3" rowspan="1"><code>0x59 (89)</code></td> + <td colspan="3" rowspan="1"><code>0x59 (89)</code></td> + <td colspan="3" rowspan="1"><code>0x59 (89)</code></td> + <td colspan="3" rowspan="1"><code>0x59 (89)</code></td> + <td colspan="3" rowspan="1"><code>0x59 (89)</code></td> + <td colspan="3" rowspan="1"><code>0x59 (89)</code></td> + <td colspan="3" rowspan="1"><code>0x59 (89)</code></td> + <td colspan="3" rowspan="1"><code>0x59 (89)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyZ"</code></th> + <td colspan="3" rowspan="1"><code>0x5A (90)</code></td> + <td colspan="3" rowspan="1"><code>0x5A (90)</code></td> + <td colspan="3" rowspan="1"><code>0x5A (90)</code></td> + <td colspan="3" rowspan="1"><code>0x5A (90)</code></td> + <td colspan="3" rowspan="1"><code>0x5A (90)</code></td> + <td colspan="3" rowspan="1"><code>0x5A (90)</code></td> + <td colspan="3" rowspan="1"><code>0x5A (90)</code></td> + <td colspan="3" rowspan="1"><code>0x5A (90)</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>keyCode values of each browser's keydown event caused by printable keys in standard position (punctuations in US layout):</caption> + <thead> + <tr> + <th colspan="1" rowspan="3" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th colspan="3" rowspan="1" scope="col">Internet Explorer 11</th> + <th colspan="6" rowspan="1" scope="col">Google Chrome 34</th> + <th colspan="3" rowspan="1" scope="col">Chromium 34</th> + <th colspan="3" rowspan="1" scope="col">Safari 7</th> + <th colspan="9" rowspan="1" scope="col">Gecko 29</th> + </tr> + <tr> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Windows (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th> + </tr> + <tr> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th colspan="1" scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + </tr> + </thead> + <tfoot> + <tr> + <th colspan="1" rowspan="3" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th colspan="1" scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + </tr> + <tr> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th> + </tr> + <tr> + <th colspan="3" rowspan="1" scope="col">Internet Explorer 11</th> + <th colspan="6" rowspan="1" scope="col">Google Chrome 34</th> + <th colspan="3" rowspan="1" scope="col">Chromium 34</th> + <th colspan="3" rowspan="1" scope="col">Safari 7</th> + <th colspan="9" rowspan="1" scope="col">Gecko 29</th> + </tr> + </tfoot> + <tbody> + <tr> + <th scope="row"><code>"Comma"</code></th> + <td colspan="3" rowspan="2"><code>0xBC (188)</code></td> + <td colspan="3" rowspan="2"><code>0xBC (188)</code></td> + <td colspan="3" rowspan="2"><code>0xBC (188)</code></td> + <td colspan="3" rowspan="2"><code>0xBC (188)</code></td> + <td colspan="3" rowspan="2"><code>0xBC (188)</code></td> + <td colspan="3" rowspan="2"><code>0xBC (188)</code></td> + <td colspan="3" rowspan="2"><code>0xBC (188)</code></td> + <td colspan="3" rowspan="2"><code>0xBC (188)</code></td> + </tr> + <tr> + <th scope="row"><code>"Comma"</code> with <kbd>Shift</kbd></th> + </tr> + <tr> + <th scope="row"><code>"Period"</code></th> + <td colspan="3" rowspan="2"><code>0xBE (190)</code></td> + <td colspan="3" rowspan="2"><code>0xBE (190)</code></td> + <td colspan="3" rowspan="2"><code>0xBE (190)</code></td> + <td colspan="3" rowspan="2"><code>0xBE (190)</code></td> + <td colspan="3" rowspan="2"><code>0xBE (190)</code></td> + <td colspan="3" rowspan="2"><code>0xBE (190)</code></td> + <td colspan="3" rowspan="2"><code>0xBE (190)</code></td> + <td colspan="3" rowspan="2"><code>0xBE (190)</code></td> + </tr> + <tr> + <th scope="row"><code>"Period"</code> with <kbd>Shift</kbd></th> + </tr> + <tr> + <th scope="row"><code>"Semicolon"</code></th> + <td colspan="1" rowspan="2"><code>0xBA (186)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xBB (187)</code></td> + <td colspan="1" rowspan="2"><code>0xBA (186)</code></td> + <td colspan="1" rowspan="2"><code>0xBA (186)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xBB (187)</code></td> + <td colspan="1" rowspan="2"><code>0xBA (186)</code></td> + <td colspan="1" rowspan="2"><code>0xBA (186)</code></td> + <td><code>0xBA (186)</code> *1</td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE5 (229) *2</code></td> + <td colspan="1" rowspan="2"><code>0xBA (186)</code></td> + <td><code>0xBA (186)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE5 (229) *3</code></td> + <td colspan="1" rowspan="2"><code>0xBA (186)</code></td> + <td><code>0xBA (186)</code> *1</td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE5 (229) *2</code></td> + <td colspan="1" rowspan="2"><code>0x3B (59)</code></td> + <td colspan="1" rowspan="2"><code>0x3B (59)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2"><code>0x3B (59)</code></td> + <td colspan="1" rowspan="2"><code>0x3B (59)</code> *1</td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2"><code>0x3B (59)</code></td> + <td colspan="1" rowspan="2"><code>0x3B (59)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code></td> + </tr> + <tr> + <th scope="row"><code>"Semicolon"</code> with <kbd>Shift</kbd></th> + <td style="background-color: rgb(255, 204, 255);"><code>0xBB (187) </code>*1</td> + <td style="background-color: rgb(255, 204, 255);"><code>0xBB (187)</code></td> + <td style="background-color: rgb(255, 204, 255);"><code>0xBB (187)</code> *1</td> + </tr> + <tr> + <th scope="row"><code>"Quote"</code></th> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186) *1</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code> *1</td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x3A (58)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x3A (58)</code> *1</td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x3A (58)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + </tr> + <tr> + <th scope="row"><code>"Quote"</code> with Shift</th> + <td style="background-color: rgb(255, 204, 255);"><code>0xDE (222)</code> *1</td> + <td style="background-color: rgb(255, 204, 255);"><code>0x38 (56)</code></td> + <td style="background-color: rgb(255, 204, 255);"><code>0xDE (222)</code> *1</td> + </tr> + <tr> + <th scope="row"><code>"BracketLeft"</code></th> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xC0(192)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xC0(192)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td><code>0xDB (219)</code> *1</td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x32 (50)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td><code>0xDB (219) *1 </code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x40 (64)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x40 (64)</code> *1</td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x40 (64)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + </tr> + <tr> + <th scope="row"><code>"BracketLeft"</code> with <kbd>Shift</kbd></th> + <td style="background-color: rgb(255, 204, 255);"><code>0xC0 (192) *1</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xC0 (192)</code></td> + <td style="background-color: rgb(255, 204, 255);"><code>0xC0 (192) *1</code></td> + </tr> + <tr> + <th scope="row"><code>"BracketRight"</code></th> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219) *1</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219) *1</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219)</code> *1</td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + </tr> + <tr> + <th scope="row"><code>"BracketRight"</code> with <kbd>Shift</kbd></th> + </tr> + <tr> + <th scope="row"><code>"Backquote"</code></th> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(153, 153, 153);"><code>N/A</code></td> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(153, 153, 153);"><code>N/A</code></td> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="3" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xF4 (244)</code></td> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="3" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(153, 153, 153);"><code>N/A</code></td> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="3" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + </tr> + <tr> + <th scope="row"><code>"Backquote"</code> with <kbd>Shift</kbd></th> + </tr> + <tr> + <th scope="row"><code>"Backslash"</code></th> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="3" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="3" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="3" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + </tr> + <tr> + <th scope="row"><code>"Backslash"</code> with <kbd>Shift</kbd></th> + </tr> + <tr> + <th scope="row"><code>"Minus"</code></th> + <td colspan="3" rowspan="2"><code>0xBD (189)</code></td> + <td colspan="3" rowspan="2"><code>0xBD (189)</code></td> + <td colspan="1" rowspan="2"><code>0xBD (189)</code></td> + <td><code>0xBD (189)</code> *1</td> + <td colspan="1" rowspan="2"><code>0xBD (189)</code></td> + <td colspan="1" rowspan="2"><code>0xBD (189)</code></td> + <td><code>0xBD (189)</code></td> + <td colspan="1" rowspan="2"><code>0xBD (189)</code></td> + <td rowspan="1"><code>0xBD (189)</code></td> + <td rowspan="1"><code>0xBD (189) *1</code></td> + <td rowspan="1"><code>0xBD (189)</code></td> + <td colspan="3" rowspan="2"><code>0xAD (173)</code></td> + <td rowspan="2"><code>0xAD (173)</code></td> + <td rowspan="2"><code>0xAD (173) *1</code></td> + <td rowspan="2"><code>0xAD (173)</code></td> + <td colspan="3" rowspan="2"><code>0xAD (173)</code></td> + </tr> + <tr> + <th scope="row"><code>"Minus"</code> with <kbd>Shift</kbd></th> + <td style="background-color: rgb(255, 204, 255);"><code>0xBB (187)</code> *1</td> + <td style="background-color: rgb(255, 204, 255);"><code>0xBB (187)</code></td> + <td><code>0xBD (189)</code></td> + <td style="background-color: rgb(255, 204, 255);"><code>0xBB (187) *1</code></td> + <td><code>0xBD (189)</code></td> + </tr> + <tr> + <th scope="row"><code>"Equal"</code></th> + <td colspan="1" rowspan="2"><code>0xBB (187)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2"><code>0xBB (187)</code></td> + <td colspan="1" rowspan="2"><code>0xBB (187)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2"><code>0xBB (187)</code></td> + <td colspan="1" rowspan="2"><code>0xBB (187)</code></td> + <td><code>0xBB (187) *1</code></td> + <td colspan="1" rowspan="2"><code>0xBB (187)</code></td> + <td colspan="1" rowspan="2"><code>0xBB (187)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x36 (54)</code></td> + <td colspan="1" rowspan="2"><code>0xBB (187)</code></td> + <td rowspan="1"><code>0xBB (187)</code></td> + <td rowspan="1"><code>0xBB (187) *1</code></td> + <td rowspan="1"><code>0xBB (187)</code></td> + <td colspan="1" rowspan="2"><code>0x3D (61)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xA0 (160)</code></td> + <td colspan="1" rowspan="2"><code>0x3D (61)</code></td> + <td colspan="1" rowspan="2"><code>0x3D (61)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xA0 (160)</code> *1</td> + <td colspan="1" rowspan="2"><code>0x3D (61)</code></td> + <td rowspan="2"><code>0x3D (61)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xA0 (160)</code></td> + <td colspan="1" rowspan="2"><code>0x3D (61)</code></td> + </tr> + <tr> + <th scope="row"><code>"Equal"</code> with <kbd>Shift</kbd></th> + <td style="background-color: rgb(255, 204, 255);"><code>0xC0 (192) *1</code></td> + <td style="background-color: rgb(255, 204, 255);"><code>0xC0 (192)</code></td> + <td><code>0xBB (187)</code></td> + <td style="background-color: rgb(255, 204, 255);"><code>0xC0 (192) *1</code></td> + <td><code>0xBB (187)</code></td> + </tr> + <tr> + <th scope="row"><code>"IntlRo"</code></th> + <td colspan="1" rowspan="2"><code>0xC1 (193)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE2 (226)</code></td> + <td colspan="1" rowspan="2"><code>0xC1 (193)</code></td> + <td colspan="1" rowspan="2"><code>0xC1 (193)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE2 (226)</code></td> + <td colspan="1" rowspan="2"><code>0xC1 (193)</code></td> + <td colspan="1" rowspan="2"><code>0xBD (189)</code></td> + <td colspan="1" rowspan="2"><code>0xBD (189)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2">*4</td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code><br> + </td> + <td colspan="1" rowspan="2">*4</td> + <td rowspan="2"><code>0xBD (189)</code></td> + <td rowspan="2"><code>0xBD (189)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE5 </code>(229) *5</td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2"><code>0xA7 (167)</code></td> + <td colspan="1" rowspan="2"><code>0xA7 (167)</code></td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + </tr> + <tr> + <th scope="row"><code>"IntlRo"</code> with <kbd>Shift</kbd></th> + </tr> + <tr> + <th scope="row"><code>"IntlYen"</code></th> + <td colspan="1" rowspan="2"><code>0xFF (255)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2"><code>0xFF (255)</code></td> + <td colspan="1" rowspan="2"><code>0xFF (255)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2"><code>0xFF (255)</code></td> + <td><code>0x00 (0)</code></td> + <td><code>0x00 (0)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2">*4</td> + <td style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2">*4</td> + <td rowspan="1"><code>0x00 (0)</code></td> + <td rowspan="1"><code>0x00 (0)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE5 </code>(229) *5</td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC </code>(220)</td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2"><code>0xDC </code>(220)</td> + <td colspan="1" rowspan="2"><code>0xDC </code>(220)</td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + </tr> + <tr> + <th scope="row"><code>"IntlYen"</code> with <kbd>Shift</kbd></th> + <td><code>0xDC (220)</code></td> + <td><code>0xDC (220)</code></td> + <td style="background-color: rgb(255, 204, 255);"><code>0xBD (189)</code></td> + <td><code>0xDC (220)</code></td> + <td><code>0xDC (220)</code></td> + </tr> + </tbody> +</table> + +<p>*1 The value is input from JIS keyboard. When you use ANSI keyboard, the keyCode value and inputted character are what you select from the US keyboard layout.</p> + +<p>*2 The key is a dead key. The value of <code>keyup</code> event is <code>0xBA (186)</code>.</p> + +<p>*3 The key is a dead key. The value of <code>keyup</code> event is <code>0x10 (16)</code>.</p> + +<p>*4 No key events are fired.</p> + +<p>*5 The key isn't available with Greek keyboard layout (does not input any character). The value of <code>keyup</code> event is <code>0x00 (0)</code>.</p> + +<h3 id="Non-printable_keys_(function_keys)">Non-printable keys (function keys)</h3> + +<table class="standard-table"> + <caption>keyCode values of each browser's keydown event caused by modifier keys:</caption> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Internet Explorer 11</th> + <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th scope="col">Safari 7</th> + <th colspan="3" rowspan="1" scope="col">Gecko 29</th> + </tr> + <tr> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + </thead> + <tfoot> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + <tr> + <th scope="col">Internet Explorer 11</th> + <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th scope="col">Safari 7</th> + <th colspan="3" rowspan="1" scope="col">Gecko 29</th> + </tr> + </tfoot> + <tbody> + <tr> + <th scope="row"><code>"AltLeft"</code></th> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + </tr> + <tr> + <th scope="row"><code>"AltRight"</code></th> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + </tr> + <tr> + <th scope="row"><code>"AltRight"</code> when it's <code>"AltGraph"</code> key</th> + <td>*1</td> + <td>*1</td> + <td style="background-color: rgb(153, 153, 153);">N/A</td> + <td style="background-color: rgb(255, 255, 204);"><code>0xE1 (225)</code></td> + <td style="background-color: rgb(153, 153, 153);">N/A</td> + <td>*1</td> + <td style="background-color: rgb(153, 153, 153);">N/A</td> + <td style="background-color: rgb(255, 255, 204);"><code>0xE1 (225)</code></td> + </tr> + <tr> + <th scope="row"><code>"CapsLock"</code></th> + <td><code>0x14 (20)</code> *2</td> + <td><code>0x14 (20)</code> *2</td> + <td><code>0x14 (20)</code></td> + <td><code>0x14 (20)</code></td> + <td><code>0x14 (20)</code></td> + <td><code>0x14 (20)</code> *2</td> + <td><code>0x14 (20)</code></td> + <td><code>0x14 (20)</code> *3</td> + </tr> + <tr> + <th scope="row"><code>"ControlLeft"</code></th> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + </tr> + <tr> + <th scope="row"><code>"ControlRight"</code></th> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + </tr> + <tr> + <th scope="row"><code>"OSLeft"</code></th> + <td><code>0x5B (91)</code></td> + <td><code>0x5B (91)</code></td> + <td><code>0x5B (91)</code></td> + <td><code>0x5B (91)</code></td> + <td><code>0x5B (91)</code></td> + <td><code>0x5B (91)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xE0 (224)</code></td> + <td><code>0x5B (91)</code></td> + </tr> + <tr> + <th scope="row"><code>"OSRight"</code></th> + <td><code>0x5C (92)</code></td> + <td><code>0x5C (92)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x5D (93)</code></td> + <td><code>0x5C (92)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x5D (93)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x5B (91)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xE0 (224)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x5B (91)</code></td> + </tr> + <tr> + <th scope="row"><code>"ShiftLeft"</code></th> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + </tr> + <tr> + <th scope="row"><code>"ShiftRight"</code></th> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + </tr> + </tbody> +</table> + +<p>*1 On Windows, <code>"AltGraph"</code> key causes <code>"ControlLeft"</code> key event and <code>"AltRight"</code> key event.</p> + +<p>*2 When Japanese keyboard layout is active, <code>"CapsLock"</code> key without <kbd>Shift</kbd> causes <code>0xF0 (240)</code>. The key works as <code>"Alphanumeric"</code> key whose label is "英数".</p> + +<p>*3 When Japanese keyboard layout is active, <code>"CapsLock"</code> key without <kbd>Shift</kbd> causes <code>0x00 (0)</code>. The key works as <code>"Alphanumeric"</code> key whose label is <code>"英数"</code>.</p> + +<table class="standard-table"> + <caption>keyCode values of each browser's keydown event caused by non-printable keys:</caption> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Internet Explorer 11</th> + <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th scope="col">Safari 7</th> + <th colspan="3" rowspan="1" scope="col">Gecko 29</th> + </tr> + <tr> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + </thead> + <tfoot> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + <tr> + <th scope="col">Internet Explorer 11</th> + <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th scope="col">Safari 7</th> + <th colspan="3" rowspan="1" scope="col">Gecko 29</th> + </tr> + </tfoot> + <tbody> + <tr> + <th scope="row"><code>"ContextMenu"</code></th> + <td><code>0x5D (93)</code></td> + <td><code>0x5D (93)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *1</td> + <td><code>0x5D (93)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *1</td> + <td><code>0x5D (93)</code></td> + <td><code>0x5D (93)</code></td> + <td><code>0x5D (93)</code></td> + </tr> + <tr> + <th scope="row"><code>"Enter"</code></th> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + </tr> + <tr> + <th scope="row"><code>"Space"</code></th> + <td><code>0x20 (32)</code></td> + <td><code>0x20 (32)</code></td> + <td><code>0x20 (32)</code></td> + <td><code>0x20 (32)</code></td> + <td><code>0x20 (32)</code></td> + <td><code>0x20 (32)</code></td> + <td><code>0x20 (32)</code></td> + <td><code>0x20 (32)</code></td> + </tr> + <tr> + <th scope="row"><code>"Tab"</code></th> + <td><code>0x09 (9)</code></td> + <td><code>0x09 (9)</code></td> + <td><code>0x09 (9)</code></td> + <td><code>0x09 (9)</code></td> + <td><code>0x09 (9)</code></td> + <td><code>0x09 (9)</code></td> + <td><code>0x09 (9)</code></td> + <td><code>0x09 (9)</code></td> + </tr> + <tr> + <th scope="row"><code>"Delete"</code></th> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + </tr> + <tr> + <th scope="row"><code>"End"</code></th> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + </tr> + <tr> + <th scope="row"><code>"Help"</code></th> + <td style="background-color: rgb(153, 153, 153);">N/A</td> + <td style="background-color: rgb(153, 153, 153);">N/A</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x2D (45)</code> *2</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x2F (47)</code> *3</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x2D (45)</code> *2</td> + <td style="background-color: rgb(153, 153, 153);">N/A</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x2D (45)</code> *2</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x06 (6)</code> *3</td> + </tr> + <tr> + <th scope="row"><code>"Home"</code></th> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + </tr> + <tr> + <th scope="row"><code>"Insert"</code></th> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + </tr> + <tr> + <th scope="row"><code>"PageDown"</code></th> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + </tr> + <tr> + <th scope="row"><code>"PageUp"</code></th> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + </tr> + <tr> + <th scope="row"><code>"ArrowDown"</code></th> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + </tr> + <tr> + <th scope="row"><code>"ArrowLeft"</code></th> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + </tr> + <tr> + <th scope="row"><code>"ArrowRight"</code></th> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + </tr> + <tr> + <th scope="row"><code>"ArrowUp"</code></th> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + </tr> + <tr> + <th scope="row"><code>"Escape"</code></th> + <td><code>0x1B (27)</code></td> + <td><code>0x1B (27)</code></td> + <td><code>0x1B (27)</code></td> + <td><code>0x1B (27)</code></td> + <td><code>0x1B (27)</code></td> + <td><code>0x1B (27)</code></td> + <td><code>0x1B (27)</code></td> + <td><code>0x1B (27)</code></td> + </tr> + <tr> + <th scope="row"><code>"PrintScreen"</code></th> + <td><code>0x2C (44)</code> *4</td> + <td><code>0x2C (44)</code> *4</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x7C (124)</code>*5</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x2A (42)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x7C (124)</code>*5</td> + <td><code>0x2C (44)</code> *4</td> + <td><code>0x2C (44)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x2A (42)</code></td> + </tr> + <tr> + <th scope="row"><code>"ScrollLock"</code></th> + <td><code>0x91 (145)</code></td> + <td><code>0x91 (145)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x7D (125)</code>*5</td> + <td><code>0x91 (145)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x7D (125)</code>*5</td> + <td><code>0x91 (145)</code></td> + <td><code>0x91 (145)</code></td> + <td><code>0x91 (145)</code></td> + </tr> + <tr> + <th scope="row"><code>"Pause"</code></th> + <td><code>0x13 (19)</code> *6</td> + <td><code>0x13 (19)</code> *6</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x7E (126)</code>*5</td> + <td><code>0x13 (19)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x7E (126)</code>*5</td> + <td><code>0x13 (19)</code> *6</td> + <td><code>0x13 (19)</code></td> + <td><code>0x13 (19)</code></td> + </tr> + </tbody> +</table> + +<p>*1 keypress event is fired whose <code>keyCode</code> and <code>charCode</code> are <code>0x10 (16)</code> but text isn't inputted into editor.</p> + +<p>*2 On Mac, <code>"Help"</code> key is mapped to <code>"Insert"</code> key of PC keyboard. These <code>keyCode</code> values are the same as the <code>"Insert"</code> key's <code>keyCode</code> value.</p> + +<p>*3 Tested on Fedora 20.</p> + +<p>*4 Only <code>keyup</code> event is fired.</p> + +<p>*5 PC's <code>"PrintScreen"</code>, <code>"ScrollLock"</code> and <code>"Pause"</code> are mapped to Mac's <code>"F13"</code>, <code>"F14"</code> and <code>"F15"</code>. Chrome and Safari map same <code>keyCode</code> values with Mac's keys.</p> + +<p>*6 <code>"Pause"</code> key with <kbd>Control</kbd> causes <code>0x03 (3)</code>.</p> + +<table class="standard-table"> + <caption>keyCode values of each browser's keydown event caused by function keys:</caption> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Internet Explorer 11</th> + <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th scope="col">Safari 7</th> + <th colspan="3" rowspan="1" scope="col">Gecko 29</th> + </tr> + <tr> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + </thead> + <tfoot> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + <tr> + <th scope="col">Internet Explorer 11</th> + <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th scope="col">Safari 7</th> + <th colspan="3" rowspan="1" scope="col">Gecko 29</th> + </tr> + </tfoot> + <tbody> + <tr> + <th scope="row"><code>"F1"</code></th> + <td><code>0x70 (112)</code></td> + <td><code>0x70 (112)</code></td> + <td><code>0x70 (112)</code></td> + <td><code>0x70 (112)</code></td> + <td><code>0x70 (112)</code></td> + <td><code>0x70 (112)</code></td> + <td><code>0x70 (112)</code></td> + <td><code>0x70 (112)</code></td> + </tr> + <tr> + <th scope="row"><code>"F2"</code></th> + <td><code>0x71 (113)</code></td> + <td><code>0x71 (113)</code></td> + <td><code>0x71 (113)</code></td> + <td><code>0x71 (113)</code></td> + <td><code>0x71 (113)</code></td> + <td><code>0x71 (113)</code></td> + <td><code>0x71 (113)</code></td> + <td><code>0x71 (113)</code></td> + </tr> + <tr> + <th scope="row"><code>"F3"</code></th> + <td><code>0x72 (114)</code></td> + <td><code>0x72 (114)</code></td> + <td><code>0x72 (114)</code></td> + <td><code>0x72 (114)</code></td> + <td><code>0x72 (114)</code></td> + <td><code>0x72 (114)</code></td> + <td><code>0x72 (114)</code></td> + <td><code>0x72 (114)</code></td> + </tr> + <tr> + <th scope="row"><code>"F4"</code></th> + <td><code>0x73 (115)</code></td> + <td><code>0x73 (115)</code></td> + <td><code>0x73 (115)</code></td> + <td><code>0x73 (115)</code></td> + <td><code>0x73 (115)</code></td> + <td><code>0x73 (115)</code></td> + <td><code>0x73 (115)</code></td> + <td><code>0x73 (115)</code></td> + </tr> + <tr> + <th scope="row"><code>"F5"</code></th> + <td><code>0x74 (116)</code></td> + <td><code>0x74 (116)</code></td> + <td><code>0x74 (116)</code></td> + <td><code>0x74 (116)</code></td> + <td><code>0x74 (116)</code></td> + <td><code>0x74 (116)</code></td> + <td><code>0x74 (116)</code></td> + <td><code>0x74 (116)</code></td> + </tr> + <tr> + <th scope="row"><code>"F6"</code></th> + <td><code>0x75 (117)</code></td> + <td><code>0x75 (117)</code></td> + <td><code>0x75 (117)</code></td> + <td><code>0x75 (117)</code></td> + <td><code>0x75 (117)</code></td> + <td><code>0x75 (117)</code></td> + <td><code>0x75 (117)</code></td> + <td><code>0x75 (117)</code></td> + </tr> + <tr> + <th scope="row"><code>"F7"</code></th> + <td><code>0x76 (118)</code></td> + <td><code>0x76 (118)</code></td> + <td><code>0x76 (118)</code></td> + <td><code>0x76 (118)</code></td> + <td><code>0x76 (118)</code></td> + <td><code>0x76 (118)</code></td> + <td><code>0x76 (118)</code></td> + <td><code>0x76 (118)</code></td> + </tr> + <tr> + <th scope="row"><code>"F8"</code></th> + <td><code>0x77 (119)</code></td> + <td><code>0x77 (119)</code></td> + <td><code>0x77 (119)</code></td> + <td><code>0x77 (119)</code></td> + <td><code>0x77 (119)</code></td> + <td><code>0x77 (119)</code></td> + <td><code>0x77 (119)</code></td> + <td><code>0x77 (119)</code></td> + </tr> + <tr> + <th scope="row"><code>"F9"</code></th> + <td><code>0x78 (120)</code></td> + <td><code>0x78 (120)</code></td> + <td><code>0x78 (120)</code></td> + <td><code>0x78 (120)</code></td> + <td><code>0x78 (120)</code></td> + <td><code>0x78 (120)</code></td> + <td><code>0x78 (120)</code></td> + <td><code>0x78 (120)</code></td> + </tr> + <tr> + <th scope="row"><code>"F10"</code></th> + <td><code>0x79 (121)</code></td> + <td><code>0x79 (121)</code></td> + <td><code>0x79 (121)</code></td> + <td><code>0x79 (121)</code></td> + <td><code>0x79 (121)</code></td> + <td><code>0x79 (121)</code></td> + <td><code>0x79 (121)</code></td> + <td><code>0x79 (121)</code></td> + </tr> + <tr> + <th scope="row"><code>"F11"</code></th> + <td><code>0x7A (122)</code></td> + <td><code>0x7A (122)</code></td> + <td><code>0x7A (122)</code></td> + <td><code>0x7A (122)</code></td> + <td><code>0x7A (122)</code></td> + <td><code>0x7A (122)</code></td> + <td><code>0x7A (122)</code></td> + <td><code>0x7A (122)</code></td> + </tr> + <tr> + <th scope="row"><code>"F12"</code></th> + <td><code>0x7B (123)</code></td> + <td><code>0x7B (123)</code></td> + <td><code>0x7B (123)</code></td> + <td><code>0x7B (123)</code></td> + <td><code>0x7B (123)</code></td> + <td><code>0x7B (123)</code></td> + <td><code>0x7B (123)</code></td> + <td><code>0x7B (123)</code></td> + </tr> + <tr> + <th scope="row"><code>"F13"</code></th> + <td><code>0x7C (124)</code></td> + <td><code>0x7C (124)</code></td> + <td><code>0x7C (124)</code></td> + <td><code>0x7C (124)</code> *1</td> + <td><code>0x7C (124)</code></td> + <td><code>0x7C (124)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x2C (44)</code> *2</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td> + </tr> + <tr> + <th scope="row"><code>"F14"</code></th> + <td><code>0x7D (125)</code></td> + <td><code>0x7D (125)</code></td> + <td><code>0x7D (125)</code></td> + <td><code>0x7D (125)</code> *1</td> + <td><code>0x7D (125)</code></td> + <td><code>0x7D (125)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x91 (145)</code> *2</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td> + </tr> + <tr> + <th scope="row"><code>"F15"</code></th> + <td><code>0x7E (126)</code></td> + <td><code>0x7E (126)</code></td> + <td><code>0x7E (126)</code></td> + <td><code>0x7E (126)</code> *1</td> + <td><code>0x7E (126)</code></td> + <td><code>0x7E (126)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x13 (19)</code> *2</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td> + </tr> + <tr> + <th scope="row"><code>"F16"</code></th> + <td><code>0x7F (127)</code></td> + <td><code>0x7F (127)</code></td> + <td><code>0x7F (127)</code></td> + <td><code>0x7F (127)</code> *1</td> + <td><code>0x7F (127)</code></td> + <td><code>0x7F (127)</code></td> + <td><code>0x7F (127)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td> + </tr> + <tr> + <th scope="row"><code>"F17"</code></th> + <td><code>0x80 (128)</code></td> + <td><code>0x80 (128)</code></td> + <td><code>0x80 (128)</code></td> + <td><code>0x80 (128)</code> *1</td> + <td><code>0x80 (128)</code></td> + <td><code>0x80 (128)</code></td> + <td><code>0x80 (128)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td> + </tr> + <tr> + <th scope="row"><code>"F18"</code></th> + <td><code>0x81 (129)</code></td> + <td><code>0x81 (129)</code></td> + <td><code>0x81 (129)</code></td> + <td><code>0x81 (129)</code> *1</td> + <td><code>0x81 (129)</code></td> + <td><code>0x81 (129)</code></td> + <td><code>0x81 (129)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td> + </tr> + <tr> + <th scope="row"><code>"F19"</code></th> + <td><code>0x82 (130)</code></td> + <td><code>0x82 (130)</code></td> + <td><code>0x82 (130)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *4</td> + <td><code>0x82 (130)</code></td> + <td><code>0x82 (130)</code></td> + <td><code>0x82 (130)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td> + </tr> + <tr> + <th scope="row"><code>"F20"</code></th> + <td><code>0x83 (131)</code></td> + <td><code>0x83 (131)</code></td> + <td><code>0x83 (131)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *4</td> + <td style="background-color: rgb(255, 255, 204);"><code>0xE5 (229)</code> *5</td> + <td><code>0x83 (131)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *6</td> + </tr> + <tr> + <th scope="row"><code>"F21"</code></th> + <td><code>0x84 (132)</code></td> + <td><code>0x84 (132)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *4</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td> + <td><code>0x84 (132)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *8</td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *6</td> + </tr> + <tr> + <th scope="row"><code>"F22"</code></th> + <td><code>0x85 (133)</code></td> + <td><code>0x85 (133)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *4</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td> + <td><code>0x85 (133)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *8</td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *6</td> + </tr> + <tr> + <th scope="row"><code>"F23"</code></th> + <td><code>0x86 (134)</code></td> + <td><code>0x86 (134)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *4</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td> + <td><code>0x86 (134)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *8</td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *6</td> + </tr> + <tr> + <th scope="row"><code>"F24"</code></th> + <td><code>0x87 (135)</code></td> + <td><code>0x87 (135)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *4</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td> + <td><code>0x87 (135)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *8</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td> + </tr> + </tbody> +</table> + +<p>*1 Tested on Fedora 20.</p> + +<p>*2 PC's <code>"PrintScreen"</code>, <code>"ScrollLock"</code> and <code>"Pause"</code> are mapped to <code>Mac's "F13"</code>, <code>"F14"</code> and <code>"F15"</code>. Firefox maps same <code>keyCode</code> values with PC's keys.</p> + +<p>*3 Tested on Fedora 20. The keys don't cause <code>GDK_Fxx</code> keysyms. If the keys cause proper keysyms, these values must be same as IE.</p> + +<p>*4 Tested on Fedora 20. The keys don't cause DOM key events on Chromium.</p> + +<p>*5 <code>keyUp</code> event's keyCode value is <code>0x83 (131)</code>.</p> + +<p>*6 Tested on Fedora 20. The keys don't cause DOM key events on Firefox.</p> + +<p>*7 Only <code>keydown</code> event is fired.</p> + +<p>*8 No DOM key events are fired on Firefox.</p> + +<h3 id="Numpad_keys">Numpad keys</h3> + +<table class="standard-table"> + <caption>keyCode values of each browser's keydown event caused by keys in numpad in NumLock state</caption> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Internet Explorer 11</th> + <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th scope="col">Safari 7</th> + <th colspan="3" rowspan="1" scope="col">Gecko 29</th> + </tr> + <tr> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + </thead> + <tfoot> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + <tr> + <th scope="col">Internet Explorer 11</th> + <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th scope="col">Safari 7</th> + <th colspan="3" rowspan="1" scope="col">Gecko 29</th> + </tr> + </tfoot> + <tbody> + <tr> + <th scope="row"><code>"NumLock"</code></th> + <td><code>0x90 (144)</code></td> + <td><code>0x90 (144)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x0C (12)</code> *1</td> + <td><code>0x90 (144)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x0C (12)</code> *1</td> + <td><code>0x90 (144)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x0C (12)</code> *1</td> + <td><code>0x90 (144)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad0"</code></th> + <td><code>0x60 (96)</code></td> + <td><code>0x60 (96)</code></td> + <td><code>0x60 (96)</code></td> + <td><code>0x60 (96)</code></td> + <td><code>0x60 (96)</code></td> + <td><code>0x60 (96)</code></td> + <td><code>0x60 (96)</code></td> + <td><code>0x60 (96)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad1"</code></th> + <td><code>0x61 (97)</code></td> + <td><code>0x61 (97)</code></td> + <td><code>0x61 (97)</code></td> + <td><code>0x61 (97)</code></td> + <td><code>0x61 (97)</code></td> + <td><code>0x61 (97)</code></td> + <td><code>0x61 (97)</code></td> + <td><code>0x61 (97)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad2"</code></th> + <td><code>0x62 (98)</code></td> + <td><code>0x62 (98)</code></td> + <td><code>0x62 (98)</code></td> + <td><code>0x62 (98)</code></td> + <td><code>0x62 (98)</code></td> + <td><code>0x62 (98)</code></td> + <td><code>0x62 (98)</code></td> + <td><code>0x62 (98)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad3"</code></th> + <td><code>0x63 (99)</code></td> + <td><code>0x63 (99)</code></td> + <td><code>0x63 (99)</code></td> + <td><code>0x63 (99)</code></td> + <td><code>0x63 (99)</code></td> + <td><code>0x63 (99)</code></td> + <td><code>0x63 (99)</code></td> + <td><code>0x63 (99)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad4"</code></th> + <td><code>0x64 (100)</code></td> + <td><code>0x64 (100)</code></td> + <td><code>0x64 (100)</code></td> + <td><code>0x64 (100)</code></td> + <td><code>0x64 (100)</code></td> + <td><code>0x64 (100)</code></td> + <td><code>0x64 (100)</code></td> + <td><code>0x64 (100)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad5"</code></th> + <td><code>0x65 (101)</code></td> + <td><code>0x65 (101)</code></td> + <td><code>0x65 (101)</code></td> + <td><code>0x65 (101)</code></td> + <td><code>0x65 (101)</code></td> + <td><code>0x65 (101)</code></td> + <td><code>0x65 (101)</code></td> + <td><code>0x65 (101)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad6"</code></th> + <td><code>0x66 (102)</code></td> + <td><code>0x66 (102)</code></td> + <td><code>0x66 (102)</code></td> + <td><code>0x66 (102)</code></td> + <td><code>0x66 (102)</code></td> + <td><code>0x66 (102)</code></td> + <td><code>0x66 (102)</code></td> + <td><code>0x66 (102)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad7"</code></th> + <td><code>0x67 (103)</code></td> + <td><code>0x67 (103)</code></td> + <td><code>0x67 (103)</code></td> + <td><code>0x67 (103)</code></td> + <td><code>0x67 (103)</code></td> + <td><code>0x67 (103)</code></td> + <td><code>0x67 (103)</code></td> + <td><code>0x67 (103)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad8"</code></th> + <td><code>0x68 (104)</code></td> + <td><code>0x68 (104)</code></td> + <td><code>0x68 (104)</code></td> + <td><code>0x68 (104)</code></td> + <td><code>0x68 (104)</code></td> + <td><code>0x68 (104)</code></td> + <td><code>0x68 (104)</code></td> + <td><code>0x68 (104)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad9"</code></th> + <td><code>0x69 (105)</code></td> + <td><code>0x69 (105)</code></td> + <td><code>0x69 (105)</code></td> + <td><code>0x69 (105)</code></td> + <td><code>0x69 (105)</code></td> + <td><code>0x69 (105)</code></td> + <td><code>0x69 (105)</code></td> + <td><code>0x69 (105)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadAdd"</code></th> + <td><code>0x6B (107)</code></td> + <td><code>0x6B (107)</code></td> + <td><code>0x6B (107)</code></td> + <td><code>0x6B (107)</code></td> + <td><code>0x6B (107)</code></td> + <td><code>0x6B (107)</code></td> + <td><code>0x6B (107)</code></td> + <td><code>0x6B (107)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadComma"</code> inputting <code>","</code></th> + <td><code>0xC2 (194)</code></td> + <td><code>0xC2 (194)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBC (188)</code></td> + <td style="background-color: rgb(153, 153, 153);"><code>Always inputs </code>"."</td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBC (188)</code></td> + <td><code>0xC2 (194)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x6C (108)</code></td> + <td style="background-color: rgb(153, 153, 153);"><code>Always inputs </code>"."</td> + </tr> + <tr> + <th scope="row"><code>"NumpadComma"</code> inputting <code>"."</code> or empty string</th> + <td><code>0xC2 (194)</code></td> + <td><code>0xC2 (194)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBE (190)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x6E (110)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBE (190)</code></td> + <td><code>0xC2 (194)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x6C (108)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x6E (110)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadDecimal"</code> inputting <code>"."</code></th> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadDecimal"</code> inputting <code>","</code></th> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x6C (108)</code></td> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x6C (108)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadDivide"</code></th> + <td><code>0x6F (111)</code></td> + <td><code>0x6F (111)</code></td> + <td><code>0x6F (111)</code></td> + <td><code>0x6F (111)</code></td> + <td><code>0x6F (111)</code></td> + <td><code>0x6F (111)</code></td> + <td><code>0x6F (111)</code></td> + <td><code>0x6F (111)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadEnter"</code></th> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadEqual"</code></th> + <td><code>0x0C (12)</code></td> + <td><code>0x0C (12)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBB (187)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBB (187)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBB (187)</code></td> + <td><code>0x0C (12)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x3D (61)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x3D (61)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadMultiply"</code></th> + <td><code>0x6A (106)</code></td> + <td><code>0x6A (106)</code></td> + <td><code>0x6A (106)</code></td> + <td><code>0x6A (106)</code></td> + <td><code>0x6A (106)</code></td> + <td><code>0x6A (106)</code></td> + <td><code>0x6A (106)</code></td> + <td><code>0x6A (106)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadSubtract"</code></th> + <td><code>0x6D (109)</code></td> + <td><code>0x6D (109)</code></td> + <td><code>0x6D (109)</code></td> + <td><code>0x6D (109)</code></td> + <td><code>0x6D (109)</code></td> + <td><code>0x6D (109)</code></td> + <td><code>0x6D (109)</code></td> + <td><code>0x6D (109)</code></td> + </tr> + </tbody> +</table> + +<p>*1 <code>"NumLock"</code> key works as <code>"Clear"</code> key on Mac.</p> + +<table class="standard-table"> + <caption>keyCode values of each browser's keydown event caused by keys in numpad without NumLock state</caption> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Internet Explorer 11</th> + <th colspan="1" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th colspan="2" rowspan="1" scope="col">Gecko 29</th> + </tr> + <tr> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Windows</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + </thead> + <tfoot> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Windows</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + <tr> + <th scope="col">Internet Explorer 11</th> + <th colspan="1" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th colspan="2" rowspan="1" scope="col">Gecko 29</th> + </tr> + </tfoot> + <tbody> + <tr> + <th scope="row"><code>"Numpad0"</code> (<code>"Insert"</code>)</th> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad1"</code> (<code>"End"</code>)</th> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad2"</code> (<code>"ArrowDown"</code>)</th> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad3"</code> (<code>"PageDown"</code>)</th> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad4"</code> (<code>"ArrowLeft"</code>)</th> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad5"</code></th> + <td><code>0x0C (12)</code></td> + <td><code>0x0C (12)</code></td> + <td><code>0x0C (12)</code></td> + <td><code>0x0C (12)</code></td> + <td><code>0x0C (12)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad6"</code> (<code>"ArrowRight"</code>)</th> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad7"</code> (<code>"Home"</code>)</th> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad8"</code> (<code>"ArrowUp"</code>)</th> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad9"</code> (<code>"PageUp"</code>)</th> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadDecimal"</code> (<code>"Delete"</code>)</th> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + </tr> + </tbody> +</table> + +<p>* Recent Mac doesn't have <code>"NumLock"</code> key and state. Therefore, unlocked state isn't available.</p> + +<h2 id="Constants_for_keyCode_value">Constants for keyCode value</h2> + +<p>Gecko defines a lot of <code>keyCode</code> values in <code>KeyboardEvent</code> for making the mapping table explicitly. These values are useful for add-on developers of Firefox, but not so useful in public web pages.</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Constant</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>DOM_VK_CANCEL</code></td> + <td style="white-space: nowrap;">0x03 (3)</td> + <td>Cancel key.</td> + </tr> + <tr> + <td><code>DOM_VK_HELP</code></td> + <td style="white-space: nowrap;">0x06 (6)</td> + <td>Help key.</td> + </tr> + <tr> + <td><code>DOM_VK_BACK_SPACE</code></td> + <td style="white-space: nowrap;">0x08 (8)</td> + <td>Backspace key.</td> + </tr> + <tr> + <td><code>DOM_VK_TAB</code></td> + <td style="white-space: nowrap;">0x09 (9)</td> + <td>Tab key.</td> + </tr> + <tr> + <td><code>DOM_VK_CLEAR</code></td> + <td style="white-space: nowrap;">0x0C (12)</td> + <td>"5" key on Numpad when NumLock is unlocked. Or on Mac, clear key which is positioned at NumLock key.</td> + </tr> + <tr> + <td><code>DOM_VK_RETURN</code></td> + <td style="white-space: nowrap;">0x0D (13)</td> + <td>Return/enter key on the main keyboard.</td> + </tr> + <tr> + <td><code>DOM_VK_ENTER</code></td> + <td style="white-space: nowrap;">0x0E (14)</td> + <td>Reserved, but not used. <code> </code><code>{{obsolete_inline(30)}} </code>(Dropped, see {{bug(969247)}}.)</td> + </tr> + <tr> + <td><code>DOM_VK_SHIFT</code></td> + <td style="white-space: nowrap;">0x10 (16)</td> + <td>Shift key.</td> + </tr> + <tr> + <td><code>DOM_VK_CONTROL</code></td> + <td style="white-space: nowrap;">0x11 (17)</td> + <td>Control key.</td> + </tr> + <tr> + <td><code>DOM_VK_ALT</code></td> + <td style="white-space: nowrap;">0x12 (18)</td> + <td>Alt (Option on Mac) key.</td> + </tr> + <tr> + <td><code>DOM_VK_PAUSE</code></td> + <td style="white-space: nowrap;">0x13 (19)</td> + <td>Pause key.</td> + </tr> + <tr> + <td><code>DOM_VK_CAPS_LOCK</code></td> + <td style="white-space: nowrap;">0x14 (20)</td> + <td>Caps lock.</td> + </tr> + <tr> + <td><code>DOM_VK_KANA</code></td> + <td style="white-space: nowrap;">0x15 (21)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_HANGUL</code></td> + <td style="white-space: nowrap;">0x15 (21)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_EISU</code></td> + <td style="white-space: nowrap;">0x 16 (22)</td> + <td>"英数" key on Japanese Mac keyboard. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_JUNJA</code></td> + <td style="white-space: nowrap;">0x17 (23)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_FINAL</code></td> + <td style="white-space: nowrap;">0x18 (24)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_HANJA</code></td> + <td style="white-space: nowrap;">0x19 (25)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_KANJI</code></td> + <td style="white-space: nowrap;">0x19 (25)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_ESCAPE</code></td> + <td style="white-space: nowrap;">0x1B (27)</td> + <td>Escape key.</td> + </tr> + <tr> + <td><code>DOM_VK_CONVERT</code></td> + <td style="white-space: nowrap;">0x1C (28)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_NONCONVERT</code></td> + <td style="white-space: nowrap;">0x1D (29)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_ACCEPT</code></td> + <td style="white-space: nowrap;">0x1E (30)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_MODECHANGE</code></td> + <td style="white-space: nowrap;">0x1F (31)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_SPACE</code></td> + <td style="white-space: nowrap;">0x20 (32)</td> + <td>Space bar.</td> + </tr> + <tr> + <td><code>DOM_VK_PAGE_UP</code></td> + <td style="white-space: nowrap;">0x21 (33)</td> + <td>Page Up key.</td> + </tr> + <tr> + <td><code>DOM_VK_PAGE_DOWN</code></td> + <td style="white-space: nowrap;">0x22 (34)</td> + <td>Page Down key.</td> + </tr> + <tr> + <td><code>DOM_VK_END</code></td> + <td style="white-space: nowrap;">0x23 (35)</td> + <td>End key.</td> + </tr> + <tr> + <td><code>DOM_VK_HOME</code></td> + <td style="white-space: nowrap;">0x24 (36)</td> + <td>Home key.</td> + </tr> + <tr> + <td><code>DOM_VK_LEFT</code></td> + <td style="white-space: nowrap;">0x25 (37)</td> + <td>Left arrow.</td> + </tr> + <tr> + <td><code>DOM_VK_UP</code></td> + <td style="white-space: nowrap;">0x26 (38)</td> + <td>Up arrow.</td> + </tr> + <tr> + <td><code>DOM_VK_RIGHT</code></td> + <td style="white-space: nowrap;">0x27 (39)</td> + <td>Right arrow.</td> + </tr> + <tr> + <td><code>DOM_VK_DOWN</code></td> + <td style="white-space: nowrap;">0x28 (40)</td> + <td>Down arrow.</td> + </tr> + <tr> + <td><code>DOM_VK_SELECT</code></td> + <td style="white-space: nowrap;">0x29 (41)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_PRINT</code></td> + <td style="white-space: nowrap;">0x2A (42)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_EXECUTE</code></td> + <td style="white-space: nowrap;">0x2B (43)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_PRINTSCREEN</code></td> + <td style="white-space: nowrap;">0x2C (44)</td> + <td>Print Screen key.</td> + </tr> + <tr> + <td><code>DOM_VK_INSERT</code></td> + <td style="white-space: nowrap;">0x2D (45)</td> + <td>Ins(ert) key.</td> + </tr> + <tr> + <td><code>DOM_VK_DELETE</code></td> + <td style="white-space: nowrap;">0x2E (46)</td> + <td>Del(ete) key.</td> + </tr> + <tr> + <td><code>DOM_VK_0</code></td> + <td style="white-space: nowrap;">0x30 (48)</td> + <td>"0" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_1</code></td> + <td style="white-space: nowrap;">0x31 (49)</td> + <td>"1" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_2</code></td> + <td style="white-space: nowrap;">0x32 (50)</td> + <td>"2" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_3</code></td> + <td style="white-space: nowrap;">0x33 (51)</td> + <td>"3" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_4</code></td> + <td style="white-space: nowrap;">0x34 (52)</td> + <td>"4" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_5</code></td> + <td style="white-space: nowrap;">0x35 (53)</td> + <td>"5" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_6</code></td> + <td style="white-space: nowrap;">0x36 (54)</td> + <td>"6" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_7</code></td> + <td style="white-space: nowrap;">0x37 (55)</td> + <td>"7" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_8</code></td> + <td style="white-space: nowrap;">0x38 (56)</td> + <td>"8" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_9</code></td> + <td style="white-space: nowrap;">0x39 (57)</td> + <td>"9" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_COLON</code></td> + <td style="white-space: nowrap;">0x3A (58)</td> + <td>Colon (":") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_SEMICOLON</code></td> + <td style="white-space: nowrap;">0x3B (59)</td> + <td>Semicolon (";") key.</td> + </tr> + <tr> + <td><code>DOM_VK_LESS_THAN</code></td> + <td style="white-space: nowrap;">0x3C (60)</td> + <td>Less-than ("<") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_EQUALS</code></td> + <td style="white-space: nowrap;">0x3D (61)</td> + <td>Equals ("=") key.</td> + </tr> + <tr> + <td><code>DOM_VK_GREATER_THAN</code></td> + <td style="white-space: nowrap;">0x3E (62)</td> + <td>Greater-than (">") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_QUESTION_MARK</code></td> + <td style="white-space: nowrap;">0x3F (63)</td> + <td>Question mark ("?") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_AT</code></td> + <td style="white-space: nowrap;">0x40 (64)</td> + <td>Atmark ("@") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_A</code></td> + <td style="white-space: nowrap;">0x41 (65)</td> + <td>"A" key.</td> + </tr> + <tr> + <td><code>DOM_VK_B</code></td> + <td style="white-space: nowrap;">0x42 (66)</td> + <td>"B" key.</td> + </tr> + <tr> + <td><code>DOM_VK_C</code></td> + <td style="white-space: nowrap;">0x43 (67)</td> + <td>"C" key.</td> + </tr> + <tr> + <td><code>DOM_VK_D</code></td> + <td style="white-space: nowrap;">0x44 (68)</td> + <td>"D" key.</td> + </tr> + <tr> + <td><code>DOM_VK_E</code></td> + <td style="white-space: nowrap;">0x45 (69)</td> + <td>"E" key.</td> + </tr> + <tr> + <td><code>DOM_VK_F</code></td> + <td style="white-space: nowrap;">0x46 (70)</td> + <td>"F" key.</td> + </tr> + <tr> + <td><code>DOM_VK_G</code></td> + <td style="white-space: nowrap;">0x47 (71)</td> + <td>"G" key.</td> + </tr> + <tr> + <td><code>DOM_VK_H</code></td> + <td style="white-space: nowrap;">0x48 (72)</td> + <td>"H" key.</td> + </tr> + <tr> + <td><code>DOM_VK_I</code></td> + <td style="white-space: nowrap;">0x49 (73)</td> + <td>"I" key.</td> + </tr> + <tr> + <td><code>DOM_VK_J</code></td> + <td style="white-space: nowrap;">0x4A (74)</td> + <td>"J" key.</td> + </tr> + <tr> + <td><code>DOM_VK_K</code></td> + <td style="white-space: nowrap;">0x4B (75)</td> + <td>"K" key.</td> + </tr> + <tr> + <td><code>DOM_VK_L</code></td> + <td style="white-space: nowrap;">0x4C (76)</td> + <td>"L" key.</td> + </tr> + <tr> + <td><code>DOM_VK_M</code></td> + <td style="white-space: nowrap;">0x4D (77)</td> + <td>"M" key.</td> + </tr> + <tr> + <td><code>DOM_VK_N</code></td> + <td style="white-space: nowrap;">0x4E (78)</td> + <td>"N" key.</td> + </tr> + <tr> + <td><code>DOM_VK_O</code></td> + <td style="white-space: nowrap;">0x4F (79)</td> + <td>"O" key.</td> + </tr> + <tr> + <td><code>DOM_VK_P</code></td> + <td style="white-space: nowrap;">0x50 (80)</td> + <td>"P" key.</td> + </tr> + <tr> + <td><code>DOM_VK_Q</code></td> + <td style="white-space: nowrap;">0x51 (81)</td> + <td>"Q" key.</td> + </tr> + <tr> + <td><code>DOM_VK_R</code></td> + <td style="white-space: nowrap;">0x52 (82)</td> + <td>"R" key.</td> + </tr> + <tr> + <td><code>DOM_VK_S</code></td> + <td style="white-space: nowrap;">0x53 (83)</td> + <td>"S" key.</td> + </tr> + <tr> + <td><code>DOM_VK_T</code></td> + <td style="white-space: nowrap;">0x54 (84)</td> + <td>"T" key.</td> + </tr> + <tr> + <td><code>DOM_VK_U</code></td> + <td style="white-space: nowrap;">0x55 (85)</td> + <td>"U" key.</td> + </tr> + <tr> + <td><code>DOM_VK_V</code></td> + <td style="white-space: nowrap;">0x56 (86)</td> + <td>"V" key.</td> + </tr> + <tr> + <td><code>DOM_VK_W</code></td> + <td style="white-space: nowrap;">0x57 (87)</td> + <td>"W" key.</td> + </tr> + <tr> + <td><code>DOM_VK_X</code></td> + <td style="white-space: nowrap;">0x58 (88)</td> + <td>"X" key.</td> + </tr> + <tr> + <td><code>DOM_VK_Y</code></td> + <td style="white-space: nowrap;">0x59 (89)</td> + <td>"Y" key.</td> + </tr> + <tr> + <td><code>DOM_VK_Z</code></td> + <td style="white-space: nowrap;">0x5A (90)</td> + <td>"Z" key.</td> + </tr> + <tr> + <td><code>DOM_VK_WIN</code></td> + <td style="white-space: nowrap;">0x5B (91)</td> + <td>Windows logo key on Windows. Or Super or Hyper key on Linux. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_CONTEXT_MENU</code></td> + <td style="white-space: nowrap;">0x5D (93)</td> + <td>Opening context menu key.</td> + </tr> + <tr> + <td><code>DOM_VK_SLEEP</code></td> + <td style="white-space: nowrap;">0x5F (95)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD0</code></td> + <td style="white-space: nowrap;">0x60 (96)</td> + <td>"0" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD1</code></td> + <td style="white-space: nowrap;">0x61 (97)</td> + <td>"1" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD2</code></td> + <td style="white-space: nowrap;">0x62 (98)</td> + <td>"2" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD3</code></td> + <td style="white-space: nowrap;">0x63 (99)</td> + <td>"3" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD4</code></td> + <td style="white-space: nowrap;">0x64 (100)</td> + <td>"4" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD5</code></td> + <td style="white-space: nowrap;">0x65 (101)</td> + <td>"5" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD6</code></td> + <td style="white-space: nowrap;">0x66 (102)</td> + <td>"6" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD7</code></td> + <td style="white-space: nowrap;">0x67 (103)</td> + <td>"7" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD8</code></td> + <td style="white-space: nowrap;">0x68 (104)</td> + <td>"8" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD9</code></td> + <td style="white-space: nowrap;">0x69 (105)</td> + <td>"9" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_MULTIPLY</code></td> + <td style="white-space: nowrap;">0x6A (106)</td> + <td>"*" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_ADD</code></td> + <td style="white-space: nowrap;">0x6B (107)</td> + <td>"+" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_SEPARATOR</code></td> + <td style="white-space: nowrap;">0x6C (108)</td> + <td> </td> + </tr> + <tr> + <td><code>DOM_VK_SUBTRACT</code></td> + <td style="white-space: nowrap;">0x6D (109)</td> + <td>"-" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_DECIMAL</code></td> + <td style="white-space: nowrap;">0x6E (110)</td> + <td>Decimal point on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_DIVIDE</code></td> + <td style="white-space: nowrap;">0x6F (111)</td> + <td>"/" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_F1</code></td> + <td style="white-space: nowrap;">0x70 (112)</td> + <td>F1 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F2</code></td> + <td style="white-space: nowrap;">0x71 (113)</td> + <td>F2 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F3</code></td> + <td style="white-space: nowrap;">0x72 (114)</td> + <td>F3 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F4</code></td> + <td style="white-space: nowrap;">0x73 (115)</td> + <td>F4 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F5</code></td> + <td style="white-space: nowrap;">0x74 (116)</td> + <td>F5 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F6</code></td> + <td style="white-space: nowrap;">0x75 (117)</td> + <td>F6 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F7</code></td> + <td style="white-space: nowrap;">0x76 (118)</td> + <td>F7 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F8</code></td> + <td style="white-space: nowrap;">0x77 (119)</td> + <td>F8 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F9</code></td> + <td style="white-space: nowrap;">0x78 (120)</td> + <td>F9 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F10</code></td> + <td style="white-space: nowrap;">0x79 (121)</td> + <td>F10 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F11</code></td> + <td style="white-space: nowrap;">0x7A (122)</td> + <td>F11 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F12</code></td> + <td style="white-space: nowrap;">0x7B (123)</td> + <td>F12 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F13</code></td> + <td style="white-space: nowrap;">0x7C (124)</td> + <td>F13 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F14</code></td> + <td style="white-space: nowrap;">0x7D (125)</td> + <td>F14 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F15</code></td> + <td style="white-space: nowrap;">0x7E (126)</td> + <td>F15 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F16</code></td> + <td style="white-space: nowrap;">0x7F (127)</td> + <td>F16 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F17</code></td> + <td style="white-space: nowrap;">0x80 (128)</td> + <td>F17 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F18</code></td> + <td style="white-space: nowrap;">0x81 (129)</td> + <td>F18 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F19</code></td> + <td style="white-space: nowrap;">0x82 (130)</td> + <td>F19 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F20</code></td> + <td style="white-space: nowrap;">0x83 (131)</td> + <td>F20 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F21</code></td> + <td style="white-space: nowrap;">0x84 (132)</td> + <td>F21 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F22</code></td> + <td style="white-space: nowrap;">0x85 (133)</td> + <td>F22 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F23</code></td> + <td style="white-space: nowrap;">0x86 (134)</td> + <td>F23 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F24</code></td> + <td style="white-space: nowrap;">0x87 (135)</td> + <td>F24 key.</td> + </tr> + <tr> + <td><code>DOM_VK_NUM_LOCK</code></td> + <td style="white-space: nowrap;">0x90 (144)</td> + <td>Num Lock key.</td> + </tr> + <tr> + <td><code>DOM_VK_SCROLL_LOCK</code></td> + <td style="white-space: nowrap;">0x91 (145)</td> + <td>Scroll Lock key.</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_FJ_JISHO</code></td> + <td style="white-space: nowrap;">0x92 (146)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for "Dictionary" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_FJ_MASSHOU</code></td> + <td style="white-space: nowrap;">0x93 (147)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for "Unregister word" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_FJ_TOUROKU</code></td> + <td style="white-space: nowrap;">0x94 (148)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for "Register word" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_FJ_LOYA</code></td> + <td style="white-space: nowrap;">0x95 (149)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for "Left OYAYUBI" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_FJ_ROYA</code></td> + <td style="white-space: nowrap;">0x96 (150)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for "Right OYAYUBI" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_CIRCUMFLEX</code></td> + <td style="white-space: nowrap;">0xA0 (160)</td> + <td>Circumflex ("^") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_EXCLAMATION</code></td> + <td style="white-space: nowrap;">0xA1 (161)</td> + <td>Exclamation ("!") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_DOUBLE_QUOTE</code></td> + <td style="white-space: nowrap;">0xA3 (162)</td> + <td>Double quote (""") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_HASH</code></td> + <td style="white-space: nowrap;">0xA3 (163)</td> + <td>Hash ("#") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_DOLLAR</code></td> + <td style="white-space: nowrap;">0xA4 (164)</td> + <td>Dollar sign ("$") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_PERCENT</code></td> + <td style="white-space: nowrap;">0xA5 (165)</td> + <td>Percent ("%") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_AMPERSAND</code></td> + <td style="white-space: nowrap;">0xA6 (166)</td> + <td>Ampersand ("&") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_UNDERSCORE</code></td> + <td style="white-space: nowrap;">0xA7 (167)</td> + <td>Underscore ("_") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_OPEN_PAREN</code></td> + <td style="white-space: nowrap;">0xA8 (168)</td> + <td>Open parenthesis ("(") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_CLOSE_PAREN</code></td> + <td style="white-space: nowrap;">0xA9 (169)</td> + <td>Close parenthesis (")") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_ASTERISK</code></td> + <td style="white-space: nowrap;">0xAA (170)</td> + <td>Asterisk ("*") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_PLUS</code></td> + <td style="white-space: nowrap;">0xAB (171)</td> + <td>Plus ("+") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_PIPE</code></td> + <td style="white-space: nowrap;">0xAC (172)</td> + <td>Pipe ("|") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_HYPHEN_MINUS</code></td> + <td style="white-space: nowrap;">0xAD (173)</td> + <td>Hyphen-US/docs/Minus ("-") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_OPEN_CURLY_BRACKET</code></td> + <td style="white-space: nowrap;">0xAE (174)</td> + <td>Open curly bracket ("{") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_CLOSE_CURLY_BRACKET</code></td> + <td style="white-space: nowrap;">0xAF (175)</td> + <td>Close curly bracket ("}") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_TILDE</code></td> + <td style="white-space: nowrap;">0xB0 (176)</td> + <td>Tilde ("~") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_VOLUME_MUTE</code></td> + <td style="white-space: nowrap;">0xB5 (181)</td> + <td>Audio mute key. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_VOLUME_DOWN</code></td> + <td style="white-space: nowrap;">0xB6 (182)</td> + <td>Audio volume down key {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_VOLUME_UP</code></td> + <td style="white-space: nowrap;">0xB7 (183)</td> + <td>Audio volume up key {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_COMMA</code></td> + <td style="white-space: nowrap;">0xBC (188)</td> + <td>Comma (",") key.</td> + </tr> + <tr> + <td><code>DOM_VK_PERIOD</code></td> + <td style="white-space: nowrap;">0xBE (190)</td> + <td>Period (".") key.</td> + </tr> + <tr> + <td><code>DOM_VK_SLASH</code></td> + <td style="white-space: nowrap;">0xBF (191)</td> + <td>Slash ("/") key.</td> + </tr> + <tr> + <td><code>DOM_VK_BACK_QUOTE</code></td> + <td style="white-space: nowrap;">0xC0 (192)</td> + <td>Back tick ("`") key.</td> + </tr> + <tr> + <td><code>DOM_VK_OPEN_BRACKET</code></td> + <td style="white-space: nowrap;">0xDB (219)</td> + <td>Open square bracket ("[") key.</td> + </tr> + <tr> + <td><code>DOM_VK_BACK_SLASH</code></td> + <td style="white-space: nowrap;">0xDC (220)</td> + <td>Back slash ("\") key.</td> + </tr> + <tr> + <td><code>DOM_VK_CLOSE_BRACKET</code></td> + <td style="white-space: nowrap;">0xDD (221)</td> + <td>Close square bracket ("]") key.</td> + </tr> + <tr> + <td><code>DOM_VK_QUOTE</code></td> + <td style="white-space: nowrap;">0xDE (222)</td> + <td>Quote (''') key.</td> + </tr> + <tr> + <td><code>DOM_VK_META</code></td> + <td style="white-space: nowrap;">0xE0 (224)</td> + <td>Meta key on Linux, Command key on Mac.</td> + </tr> + <tr> + <td><code>DOM_VK_ALTGR</code></td> + <td style="white-space: nowrap;">0xE1 (225)</td> + <td>AltGr key (Level 3 Shift key or Level 5 Shift key) on Linux. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_ICO_HELP</code></td> + <td style="white-space: nowrap;">0xE3 (227)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_ICO_00</code></td> + <td style="white-space: nowrap;">0xE4 (228)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_ICO_CLEAR</code></td> + <td style="white-space: nowrap;">0xE6 (230)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_RESET</code></td> + <td style="white-space: nowrap;">0xE9 (233)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_JUMP</code></td> + <td style="white-space: nowrap;">0xEA (234)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_PA1</code></td> + <td style="white-space: nowrap;">0xEB (235)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_PA2</code></td> + <td style="white-space: nowrap;">0xEC (236)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_PA3</code></td> + <td style="white-space: nowrap;">0xED (237)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_WSCTRL</code></td> + <td style="white-space: nowrap;">0xEE (238)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_CUSEL</code></td> + <td style="white-space: nowrap;">0xEF (239)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_ATTN</code></td> + <td style="white-space: nowrap;">0xF0 (240)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_FINISH</code></td> + <td style="white-space: nowrap;">0xF1 (241)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_COPY</code></td> + <td style="white-space: nowrap;">0xF2 (242)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_AUTO</code></td> + <td style="white-space: nowrap;">0xF3 (243)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_ENLW</code></td> + <td style="white-space: nowrap;">0xF4 (244)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_BACKTAB</code></td> + <td style="white-space: nowrap;">0xF5 (245)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_ATTN</code></td> + <td style="white-space: nowrap;">0xF6 (246)</td> + <td>Attn (Attention) key of IBM midrange computers, e.g., AS/400. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_CRSEL</code></td> + <td style="white-space: nowrap;">0xF7 (247)</td> + <td>CrSel (Cursor Selection) key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_EXSEL</code></td> + <td style="white-space: nowrap;">0xF8 (248)</td> + <td>ExSel (Extend Selection) key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_EREOF</code></td> + <td style="white-space: nowrap;">0xF9 (249)</td> + <td>Erase EOF key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_PLAY</code></td> + <td style="white-space: nowrap;">0xFA (250)</td> + <td>Play key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_ZOOM</code></td> + <td style="white-space: nowrap;">0xFB (251)</td> + <td>Zoom key. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_PA1</code></td> + <td style="white-space: nowrap;">0xFD (253)</td> + <td>PA1 key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_CLEAR</code></td> + <td style="white-space: nowrap;">0xFE (254)</td> + <td>Clear key, but we're not sure the meaning difference from <code>DOM_VK_CLEAR</code>. {{gecko_minversion_inline("21.0")}}</td> + </tr> + </tbody> +</table> + +<h3 id="OEM_specific_keys_on_Windows">OEM specific keys on Windows</h3> + +<p>On Windows, some values of virtual keycode are defined (reserved) for OEM specific key. They are available for special keys on non-standard keyboard. In other words, some values are used for different meaning by two or more vendors (or hardware).</p> + +<p>Starting Gecko 21 (and older than 15), OEM specific key values are available on the keyCode attribute only on Windows. So they are not useful for usual web applications. They are useful only for intranet applications or in similar situations.</p> + +<p>See "<a href="http://msdn.microsoft.com/en-us/library/aa452679.aspx" title="http://msdn.microsoft.com/en-us/library/aa452679.aspx">Manufacturer-specific Virtual-Key Codes (Windows CE 5.0)</a>" in MSDN for the detail.</p> + +<div id="cke_pastebin" style="position: absolute; top: 1308.5px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> </div> diff --git a/files/de/web/api/l10n.language.direction/index.html b/files/de/web/api/l10n.language.direction/index.html new file mode 100644 index 0000000000..c469794d54 --- /dev/null +++ b/files/de/web/api/l10n.language.direction/index.html @@ -0,0 +1,63 @@ +--- +title: L10n.language.direction +slug: Web/API/L10n.language.direction +translation_of: Archive/B2G_OS/API/L10n/language/direction +--- +<div class="syntaxbox">{{ non-standard_header() }}</div> + +<div class="syntaxbox"> </div> + +<div class="summary"> +<p><span class="seoSummary">The <code>language.direction</code> property returns the direction (<code>ltr</code> or <code>rtl</code>) of the currently active language.</span></p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var languageCode = navigator.mozL10n.language.direction;</pre> + +<h2 id="Value">Value</h2> + +<p>Returns the direction of the currently active language (<code>ltr</code> or <code>rtl</code>).</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">navigator.mozL10n.ready(function() { + console.log('The current language's direction is ' + navigator.mozL10n.language.direction); +}); +</pre> + +<h2 id="Specification" name="Specification">Specification</h2> + +<p>Not part of any specification.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("L10n")}}</li> + <li>{{domxref("L10n.language.code")}}</li> +</ul> + +<section id="Quick_Links"> +<ol> + <li data-default-state="open"><strong><a href="#">Guides</a></strong> + + <ol> + <li><a href="/en-US/Apps/Build/Localization">Localization</a></li> + </ol> + </li> + <li data-default-state="open"><strong><a href="#">Properties</a></strong> + <ol> + <li>{{ domxref("L10n.language.code") }}</li> + <li>{{ domxref("L10n.language.direction") }}</li> + <li>{{ domxref("L10n.readyState") }}</li> + </ol> + </li> + <li data-default-state="open"><strong><a href="#">Methods</a></strong> + <ol> + <li>{{ domxref("L10n.get") }}</li> + <li>{{ domxref("L10n.ready") }}</li> + <li>{{ domxref("L10n.once") }}</li> + </ol> + </li> +</ol> +</section> diff --git a/files/de/web/api/linkstyle/index.html b/files/de/web/api/linkstyle/index.html new file mode 100644 index 0000000000..1cc73d12ac --- /dev/null +++ b/files/de/web/api/linkstyle/index.html @@ -0,0 +1,56 @@ +--- +title: LinkStyle +slug: Web/API/LinkStyle +tags: + - API + - CSSOM + - Referenz + - Schnittstelle +translation_of: Web/API/LinkStyle +--- +<p>{{APIRef("CSSOM")}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code><strong>LinkStyle</strong></code> Schnittstelle erlaubt es, das zu einem Knoten <em>zugehöriges CSS Stylesheet</em> anzusprechen.</p> + +<p><code>LinkStyle</code> ist eine abstrakte Schnittstelle und es kann kein Objekt dieses Typs erstellt werden; Sie wird von {{domxref("HTMLLinkElement")}} und {{domxref("HTMLStyleElement")}} Objekten implementiert.</p> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<p><em>Es gibt keine vererbte Eigenschaft.</em></p> + +<dl> + <dt>{{domxref("LinkStyle.sheet")}} {{readonlyInline}}</dt> + <dd>Gibt das {{domxref("StyleSheet")}} Objekt zurück, das zu dem angegebenen Element gehört, oder <code>null</code>, falls keines existiert.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<p><em>Diese Schnittstelle implementiert keine Methoden.</em></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">Anmerkung</th> + </tr> + <tr> + <td>{{ SpecName('CSSOM', '#the-linkstyle-interface', 'LinkStyle') }}</td> + <td>{{ Spec2('CSSOM') }}</td> + <td>Keine Änderung bezüglich {{ SpecName('DOM2 Style') }}.</td> + </tr> + <tr> + <td>{{ SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-LinkStyle', 'LinkStyle') }}</td> + <td>{{ Spec2('DOM2 Style') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p> </p> diff --git a/files/de/web/api/messageevent/index.html b/files/de/web/api/messageevent/index.html new file mode 100644 index 0000000000..5f3bc4c4c8 --- /dev/null +++ b/files/de/web/api/messageevent/index.html @@ -0,0 +1,205 @@ +--- +title: MessageEvent +slug: Web/API/MessageEvent +tags: + - API + - Channels + - Interface + - Nachrichten + - Referenz + - WebSockets + - Window + - Workers + - messaging +translation_of: Web/API/MessageEvent +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>Das <code><strong>MessageEvent</strong></code> Interface representiert eine Nachricht die von einem Zielobjekt empfangen wurde.</p> + +<p>Es wird verwendet in in:</p> + +<ul> + <li><a href="/en-US/docs/Web/API/Server-sent_events">Server-sent events</a> (siehe {{domxref("EventSource.onmessage")}}).</li> + <li><a href="/en-US/docs/Web/API/WebSockets_API">Web sockets</a> (siehe <code>onmessage</code> Eigentschaft des <a href="/en-US/docs/Web/API/WebSocket">WebSocket</a> Interface).</li> + <li>Cross-document messaging (siehe {{domxref("Window.postMessage()")}} und {{domxref("Window.onmessage")}}).</li> + <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel messaging</a> (siehe {{domxref("MessagePort.postMessage()")}} und {{domxref("MessagePort.onmessage")}}).</li> + <li>Cross-worker/document messaging (wie in den oberen beiden Einträgen, aber auch in {{domxref("Worker.postMessage()")}}, {{domxref("Worker.onmessage")}}, {{domxref("ServiceWorkerGlobalScope.onmessage")}}, usw.)</li> + <li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast channels</a> (siehe {{domxref("Broadcastchannel.postMessage()")}}) und {{domxref("BroadcastChannel.onmessage")}}).</li> + <li>WebRTC data channels (siehe {{domxref("RTCDataChannel.onmessage")}}).</li> +</ul> + +<p>Welche Aktion durch dieses Event ausgeführt wird, entscheidet die Funktion die als entsprechender Eventhandler für das {{event("message")}} Event definiert wurde. Beispielsweise durch das setzen eines <code>onmessage</code> handlers. </p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}</dt> + <dd>Creates a new <code>MessageEvent</code>.</dd> +</dl> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<p><em>Dieses Interface erbt auch Eigenschaften seines parents, {{domxref("Event")}}.</em></p> + +<dl> + <dt>{{domxref("MessageEvent.data")}} {{readonlyInline}}</dt> + <dd>Die Daten die vom message emitter gesendet wurden.</dd> + <dt>{{domxref("MessageEvent.origin")}} {{readonlyInline}}</dt> + <dd>Ein {{domxref("USVString")}} der den Ursprung (Origin) des message emitters repräsentiert.</dd> + <dt>{{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}</dt> + <dd>Ein {{domxref("DOMString")}} der die einzigartige ID des Events repräsentiert.</dd> + <dt>{{domxref("MessageEvent.source")}} {{readonlyInline}}</dt> + <dd>Eine <code>MessageEventSource</code> (welch ein {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, or {{domxref("ServiceWorker")}} Objekt sein kann) welche den message emitter repräsentiert.</dd> + <dt>{{domxref("MessageEvent.ports")}} {{readonlyInline}}</dt> + <dd>Ein Array bestehend aus {{domxref("MessagePort")}} Objekten, welche die Ports repräsentieren, welche mit dem channel verbunden sind durch die die Nachricht gesendet wurde (Bespielsweise in channel messaging oder wenn eine Nachricht zu einem shared worker gesendet wird).</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<p><em>Dieses Interface erbt auch Methoden von seinem parent, {{domxref("Event")}}.</em></p> + +<dl> + <dt>{{domxref("MessageEvent.initMessageEvent()")}} {{deprecated_inline}}</dt> + <dd>Initialisiert ein Message Objekt. <strong>Bitte nicht mehr benutzen</strong> — <strong>benutzen Sie bitte den {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} constructor stattdessen.</strong></dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>In unserem <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker"> Grundlegenden Shared Worker Beispiel</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">Shared Worker ausführen</a>), haben wir zwei HTML Seiten, von denen jede eine einfache Berechnung ausführt. Die unterschiedlichen Skripte benutzen die gleiche Worker Datei um die Berechnungen auszuführen — sie können beide darauf zugreifen, selbst wenn sich ihre Seiten in verschiedenen Fenstern befinden.</p> + +<p>Der folgende Ausschnitt zeigt wie man ein <code>SharedWorker</code> Objekt mit dem {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor erzeugen kann. Beide Skripte enthalten dies:</p> + +<pre class="brush: js">var myWorker = new SharedWorker('worker.js'); +</pre> + +<p>Beide Skripte greifen durch ein {{domxref("MessagePort")}} Objekt auf den Worker zu, welcher mit der {{domxref("SharedWorker.port")}} Eigenschaft erstellt wurde. Wenn das onmessage event mittels addEventListener hinzugefügt wird, wird der port automatisch mittels seiner <code>start()</code> Methode gestartet:</p> + +<pre class="brush: js">myWorker.port.start();</pre> + +<p>Wenn der Port gestartet wurde, senden beide Skripte Nachrichten zu dem Worker und verarbeiten die Nachrichten welche vom Worker empfangen werden mittels <code>port.postMessage()</code> und <code>port.onmessage</code>:</p> + +<pre class="brush: js">first.onchange = function() { + myWorker.port.postMessage([first.value,second.value]); + console.log('Message posted to worker'); +} + +second.onchange = function() { + myWorker.port.postMessage([first.value,second.value]); + console.log('Message posted to worker'); +} + +myWorker.port.onmessage = function(e) { + result1.textContent = e.data; + console.log('Message received from worker'); +}</pre> + +<p>In dem Worker benutzen wir den {{domxref("SharedWorkerGlobalScope.onconnect")}} Handler um uns mit dem oben erwähnten Port zu verbinden. Die mit dem Worker verbundenen Ports sind durch die <code>ports</code> Eigenschaft des {{event("connect")}} Events erreichbar — dann benutzen wir die {{domxref("MessagePort")}} <code>start()</code> Methode um den Port zu starten, und den <code>onmessage</code> Handler um die Nachrichten die von den Hauptthreads gesendet wurden zu verarbeiten.</p> + +<pre class="brush: js">onconnect = function(e) { + var port = e.ports[0]; + + port.addEventListener('message', function(e) { + var workerResult = 'Result: ' + (e.data[0] * e.data[1]); + port.postMessage(workerResult); + }); + + port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter. +}</pre> + +<h2 id="Specifikationen">Specifikationen</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('HTML WHATWG', "#messageevent", "MessageEvent")}}</td> + <td>{{Spec2('HTML WHATWG')}}</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>Grundlegende Unterstützung</td> + <td>1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari('10.0+')}}</td> + </tr> + <tr> + <td><code>origin</code> als {{domxref("USVString")}} und <code>source</code> als <code>MessageEventSource</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("55.0")}}</td> + <td>{{CompatNo}}</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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>3.0+</td> + </tr> + <tr> + <td><code>origin</code> als {{domxref("USVString")}} und <code>source</code> als <code>MessageEventSource</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("55.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("ExtendableMessageEvent")}} — ist diesem Interface sehr ähnlich, wird aber in Interfaces genutzt die Authoren mehr Flexibilität geben möchten.</li> +</ul> diff --git a/files/de/web/api/mouseevent/index.html b/files/de/web/api/mouseevent/index.html new file mode 100644 index 0000000000..55d458c6a2 --- /dev/null +++ b/files/de/web/api/mouseevent/index.html @@ -0,0 +1,323 @@ +--- +title: MouseEvent +slug: Web/API/MouseEvent +tags: + - API + - DOM + - DOM Events + - Interface + - Reference +translation_of: Web/API/MouseEvent +--- +<p id="Summary">{{APIRef("DOM Events")}}</p> + +<p>Die <strong><code>MouseEvent</code></strong> Schnittstelle stellt Events bereit, die während der Benutzerinteraktion mit einem Zeigegerät (zum Beispiel eine Maus) auftreten. Häufige Events, die diese Schnittstelle nutzen sind {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}}, {{event("mousedown")}}.</p> + +<p><code>MouseEvent</code> wird vererbt von {{domxref("UIEvent")}}, welches wiederum vererbt wird von {{domxref("Event")}}. Obwohl die {{domxref("MouseEvent.initMouseEvent()")}} Methode wegen der Rückwärtskompatibilität bleibt, sollte das Erstellen eines <code>MouseEvent</code> Objekts durch den {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}} Konstruktor erfolgen.</p> + +<p>Mehrere spezifischere Events basieren auf MouseEvent, davon {{domxref("WheelEvent")}} und {{domxref("DragEvent")}}.</p> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</dt> + <dd>Erstellt ein<code>MouseEvent</code> Objekt.</dd> +</dl> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<p><em>Diese Schnittstelle erbt Eigenschaften der Elternobjekte {{domxref("UIEvent")}} und {{domxref("Event")}}.</em></p> + +<dl> + <dt>{{domxref("MouseEvent.altKey")}} {{readonlyinline}}</dt> + <dd>Gibt <code>true</code> zurück wenn die <kbd>alt</kbd> Taste gedrückt war, während das MouseEvent ausgelöst wurde.</dd> + <dt>{{domxref("MouseEvent.button")}} {{readonlyinline}}</dt> + <dd>Die Nummer des Buttons der gedrückt wurde (wenn anwendbar), während das MouseEvent ausgelöst wurde.</dd> + <dt>{{domxref("MouseEvent.buttons")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}</dt> + <dd> + <p>Die Buttons, die losgelassen wurden (sofern vorhanden) während das MouseEvent ausgelöst wurde.</p> + </dd> + <dt>{{domxref("MouseEvent.clientX")}} {{readonlyinline}}</dt> + <dd>Die x-Koordinate des Mauszeigers in lokalen (DOM Inhalt) Koordinaten.</dd> + <dt>{{domxref("MouseEvent.clientY")}} {{readonlyinline}}</dt> + <dd>Die y-Koordinate des Mauszeigers in lokalen (DOM Inhalt) Koordinaten.</dd> + <dt>{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}</dt> + <dd>Gibt <code>true</code> zurück, wenn die <kbd>control</kbd> Taste gedrückt war, während das MouseEvent ausgelöst wurde.</dd> + <dt>{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}</dt> + <dd>Gibt <code>true</code> zurück, wenn die <kbd>meta</kbd> Taste gedrückt war, während das MouseEvent ausgelöst wurde.</dd> + <dt>{{domxref("MouseEvent.movementX")}} {{readonlyinline}}</dt> + <dd>Die x-Koordinate des Mauszeigers relativ zur Position des letzten {{event("mousemove")}} Events.</dd> + <dt>{{domxref("MouseEvent.movementY")}} {{readonlyinline}}</dt> + <dd>Die y-Koordinate des Mauszeigers relativ zur Position des letzten {{event("mousemove")}} Events.</dd> + <dt>{{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}</dt> + <dd>Die x-Koordinate des Mauszeigers relativ zur Position zur padding-Kante des Zielknotens.</dd> + <dt>{{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}</dt> + <dd>Die y-Koordinate des Mauszeigers relativ zur Position zur padding-Kante des Zielknotens.</dd> + <dt>{{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}</dt> + <dd>Die x-Koordinate des Mauszeigers relativ zum gesamten Dokument.</dd> + <dt>{{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}</dt> + <dd>Die y-Koordinate des Mauszeigers relativ zum gesamten Dokument.</dd> + <dt>{{domxref("MouseEvent.region")}} {{readonlyinline}}</dt> + <dd>Gibt die id des Trefferbereichs wieder, die von dem Event betroffen ist. Wenn kein Trefferbereich betroffen ist, wird <code>null</code> zurückgegeben.</dd> + <dt>{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}</dt> + <dd> + <p>Das sekundäre Zielobjekt des Events, sofern verfügbar.</p> + </dd> + <dt>{{domxref("MouseEvent.screenX")}} {{readonlyinline}}</dt> + <dd>Die x-Koordinate des Mauszeigers in globalen (Bildschirm) Koordinaten.</dd> + <dt>{{domxref("MouseEvent.screenY")}} {{readonlyinline}}</dt> + <dd>Die y-Koordinate des Mauszeigers in globalen (Bildschirm) Koordinaten.</dd> + <dt>{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}</dt> + <dd>Gibt <code>true</code> zurück, wenn die <kbd>shift</kbd> Taste gedrückt war, während das MouseEvent ausgelöst wurde.</dd> + <dt>{{domxref("MouseEvent.which")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>Der Button, der gedrückt war, als das MouseEvent ausgelöst wurde.</dd> + <dt>{{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{readonlyinline}}</dt> + <dd>Die Stärke des Drucks, die auf ein Touch- oder Tabletgerät ausgeübt wurde, während das Event ausgelöst wurde. Der Wert bewegt sich zwischen <code>0.0</code> (Minimalste Druckstärke) und <code>1.0</code> (Maximalster Druckstärke)</dd> + <dt>{{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}}</dt> + <dd> + <p>Der Typ des Geräts das den Event generiert hat (eine der <code>MOZ_SOURCE_*</code> Konstanten die weiter unten gelistet werden). Es ermöglicht zum Beispiel die Bestimmung ob ein MouseEvent tatsächlich von einer Maus oder von einem Touchgerät ausgelöst wurde (welches den Grad der Genauigkeit beeinflusst, mit dem man die Koordinaten des Events betrachten kann).</p> + </dd> + <dt>{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}</dt> + <dd>Die Stärke des Drucks, die beim Klick angewendet wurde.</dd> + <dt>{{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}</dt> + <dd>Alias auf {{domxref("MouseEvent.clientX")}}.</dd> + <dt>{{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}</dt> + <dd>Alias auf {{domxref("MouseEvent.clientY")}}</dd> +</dl> + +<h2 id="Konstanten">Konstanten</h2> + +<dl> + <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt> + <dd>Minimum der Kraft, die für einen normalen Klick notwendig ist.</dd> + <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt> + <dd>Minimum der Kraft, die für einen Force-Click notwendig ist.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<p><em>Das Interface erbt auch die Methoden seiner Eltern, {{domxref("UIEvent")}} und {{domxref("Event")}}.</em></p> + +<dl> + <dt>{{domxref("MouseEvent.getModifierState()")}}</dt> + <dd>Gibt den aktuellen Zustand der angegebenen Modifizierungstaste zurück. Für Detailinformationen siehe {{domxref("KeyboardEvent.getModifierState()")}}.</dd> + <dt>{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}</dt> + <dd>Initialisiert den Wert eines erzeugten <code>MouseEvent</code>. Wenn der Event bereits ausgesendet wurde, wird durch diese Methode nichts passieren.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Dieses Beispiel demonstriert das Simulieren eines Klicks (die programmatische Erzeugung eines Klickereignisses) auf eine Checkbox mittels DOM Methoden. </p> + +<pre class="brush: js">function simulateClick() { + var evt = new <a href="/en-US/docs/Web/API/MouseEvent">MouseEvent</a>("click", { + bubbles: true, + cancelable: true, + view: window + }); + var cb = document.getElementById("checkbox"); //element to click on + var canceled = !cb.<a href="/en-US/docs/Web/API/EventTarget.dispatchEvent" rel="internal" title="en/DOM/element.dispatchEvent">dispatchEvent</a>(evt); + if(canceled) { + // A handler called preventDefault + alert("canceled"); + } else { + // None of the handlers called preventDefault + alert("not canceled"); + } +} +document.getElementById("button").addEventListener('click', simulateClick);</pre> + +<pre class="brush: html"><p><label><input type="checkbox" id="checkbox"> Checked</label> +<p><button id="button">Click me</button></pre> + +<p>Auf den Button klicken, um zu sehen wie das Beispiel funktioniert:</p> + +<p>{{ EmbedLiveSample('Example', '', '', '') }}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Redefines <code>MouseEvent</code> from long to double. This means that a <code>PointerEvent</code> whose <code>pointerType</code> is mouse will be a double.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>From {{SpecName('DOM3 Events')}}, added the <code>region</code> property.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>From {{SpecName('DOM3 Events')}}, added <code>movementX</code> and <code>movementY</code> properties.</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>From {{SpecName('DOM3 Events')}}, added <code>offsetX</code> and <code>offsetY</code>, <code>pageX</code> and <code>pageY</code>, <code>x,</code> and <code>y</code> properties. Redefined screen, page, client and coordinate (x and y) properties as <code>double</code> from <code>long</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + <td>From {{SpecName('DOM2 Events')}}, added the <code>MouseEvent()</code> constructor, the <code>getModifierState()</code> method and the <code>buttons</code> property.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}</td> + <td>{{Spec2('DOM2 Events')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">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>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{domxref("MouseEvent.movementX","movementX")}}<br> + {{domxref("MouseEvent.movementY","movementY")}}</td> + <td>{{CompatChrome(37)}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}} {{property_prefix("moz")}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>{{ domxref("MouseEvent.buttons", "buttons") }}</td> + <td>{{CompatChrome(43)}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{ domxref("MouseEvent.which", "which") }}</td> + <td>{{CompatChrome(1)}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>1.0</td> + <td>9.0</td> + <td>5.0</td> + <td>1.0</td> + </tr> + <tr> + <td>{{domxref("MouseEvent.getModifierState()", "getModifierState()")}}</td> + <td>{{CompatChrome(47)}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoDesktop(15)}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{domxref("MouseEvent.mozPressure", "mozPressure")}} and {{domxref("MouseEvent.mozInputSource", "mozInputSource")}} {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatGeckoDesktop(2)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</td> + <td>{{CompatChrome(45)}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatGeckoDesktop(11)}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>{{domxref("MouseEvent.region")}}</td> + <td>{{CompatChrome(51)}}<sup>[1]</sup></td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatGeckoDesktop(32)}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>{{domxref("MouseEvent.offsetX")}}, and {{domxref("MouseEvent.offsetY")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>9</td> + <td>{{CompatGeckoDesktop(40)}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>{{domxref("MouseEvent.screenX")}}, {{domxref("MouseEvent.screenY")}}, {{domxref("MouseEvent.clientX")}}, and {{domxref("MouseEvent.Y")}} are double instead of long.</td> + <td>{{CompatChrome(56)}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</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>Chrome for Android</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Setzt das Aktivieren von <code>ExperimentalCanvasFeatures</code> voraus.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Das direkte Elternobjekt, {{domxref("UIEvent")}}.</li> +</ul> diff --git a/files/de/web/api/mozmobileconnection/index.html b/files/de/web/api/mozmobileconnection/index.html new file mode 100644 index 0000000000..f4d2882aab --- /dev/null +++ b/files/de/web/api/mozmobileconnection/index.html @@ -0,0 +1,134 @@ +--- +title: MozMobileConnection +slug: Web/API/MozMobileConnection +translation_of: Archive/B2G_OS/API/MozMobileConnection +--- +<p>{{APIRef("Firefox OS")}} {{ non-standard_header() }}</p> + +<p>{{ B2GOnlyHeader2('certified') }}</p> + +<div class="summary"> +<p><span class="seoSummary">This API is used to get information about the current mobile voice and data connection states of the device. It is accessible through {{domxref("window.navigator.mozMobileConnections","navigator.mozMobileConnections")}}, which returns an array of <code>MozMobileConnection</code> objects.</span></p> +</div> + +<div class="note"> +<p><strong>Note</strong>: The syntax used to be <code>window.navigator.mozMobileConnection</code>, returning a single <a href="https://developer.mozilla.org/en-US/docs/Web/API/MozMobileConnection" title="This API is used to get information about the current mobile voice and data connection states of the device. It is accessible through navigator.mozMobileConnection."><code>MozMobileConnection</code></a> object, but this was updated in Firefox 1.3 due to the introduction of Multi-SIM support (Dual-SIM-Dual-Standby or DSDS).</p> +</div> + +<h2 id="Syntax" name="Syntax">Interface overview</h2> + +<pre class="eval">callback EventHandler = any (Event event); + +interface MozMobileConnection : EventTarget +{ + const long ICC_SERVICE_CLASS_VOICE = (1 << 0); + const long ICC_SERVICE_CLASS_DATA = (1 << 1); + const long ICC_SERVICE_CLASS_FAX = (1 << 2); + const long ICC_SERVICE_CLASS_SMS = (1 << 3); + const long ICC_SERVICE_CLASS_DATA_SYNC = (1 << 4); + const long ICC_SERVICE_CLASS_DATA_ASYNC = (1 << 5); + const long ICC_SERVICE_CLASS_PACKET = (1 << 6); + const long ICC_SERVICE_CLASS_PAD = (1 << 7); + const long ICC_SERVICE_CLASS_MAX = (1 << 7); + + readonly attribute MozMobileConnectionInfo voice; + readonly attribute MozMobileConnectionInfo data; + readonly attribute DOMString networkSelectionMode; + readonly attribute DOMString iccId; + + DOMRequest getNetworks(); + DOMRequest selectNetwork(MozMobileNetworkInfo network); + DOMRequest selectNetworkAutomatically(); + DOMRequest sendMMI(DOMString mmi); + DOMRequest cancelMMI(); + DOMRequest setCallForwardingOption(MozMobileCFInfo CFInfo); + DOMRequest getCallForwardingOption(unsigned short reason); + + attribute EventHandler onvoicechange; + attribute EventHandler ondatachange; + attribute EventHandler onussdreceived; + attribute EventHandler ondataerror; + attribute EventHandler oncfstatechange; +}; +</pre> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt> </dt> + <dt>{{domxref("MozMobileConnection.voice")}} {{readonlyinline}}</dt> + <dd>A {{domxref("MozMobileConnectionInfo")}} object that gives access to information about the voice connection.</dd> + <dt>{{domxref("MozMobileConnection.data")}} {{readonlyinline}}</dt> + <dd>A {{domxref("MozMobileConnectionInfo")}} object that gives access to information about the data connection.</dd> + <dt>{{domxref("MozMobileConnection.iccId")}} {{readonlyinline}}</dt> + <dd>A string that indicates the Integrated Circuit Card Identifier of the SIM this mobile connection corresponds to.</dd> + <dt>{{domxref("MozMobileConnection.networkSelectionMode")}} {{readonlyinline}}</dt> + <dd>A string that indicates the selection mode of the voice and data networks.</dd> + <dt>{{domxref("MozMobileConnection.oncfstatechange")}}</dt> + <dd>A handler for the {{event("cfstatechange")}} event. This event is fired when the call forwarding state changes.</dd> + <dt>{{domxref("MozMobileConnection.ondatachange")}}</dt> + <dd>A handler for the {{event("datachange")}} event. This event is fired whenever the {{domxref("MozMobileConnection.data","data")}} connection object changes values.</dd> + <dt>{{domxref("MozMobileConnection.ondataerror")}}</dt> + <dd>A handler for the {{event("dataerror")}} event. This event is fired whenever the {{domxref("MozMobileConnection.data","data")}} connection object receive an error from the <abbr title="Radio Interface Layer">RIL</abbr>.</dd> + <dt>{{domxref("MozMobileConnection.onussdreceived")}}</dt> + <dd>A handler for the {{event("ussdreceived")}} event. This event is fired whenever a new <abbr title="Unstructured Supplementary Service Data">USSD</abbr> message is received.</dd> + <dt>{{domxref("MozMobileConnection.onvoicechange")}}</dt> + <dd>A handler for the {{event("voicechange")}} event. This event is fired whenever the {{domxref("MozMobileConnection.voice","voice")}} connection object changes.</dd> +</dl> + +<h3 id="Constants">Constants</h3> + +<ul> + <li><code>ICC_SERVICE_CLASS_VOICE</code></li> + <li><code>ICC_SERVICE_CLASS_DATA</code></li> + <li><code>ICC_SERVICE_CLASS_FAX</code></li> + <li><code>ICC_SERVICE_CLASS_SMS</code></li> + <li><code>ICC_SERVICE_CLASS_DATA_SYNC</code></li> + <li><code>ICC_SERVICE_CLASS_DATA_ASYNC</code></li> + <li><code>ICC_SERVICE_CLASS_PACKET</code></li> + <li><code>ICC_SERVICE_CLASS_PAD</code></li> + <li><code>ICC_SERVICE_CLASS_MAX</code></li> +</ul> + +<h2 id="Methods">Methods</h2> + +<div class="note"> +<p><strong>Note:</strong> All original methods from the <code>MozMobileConnection</code> interface are fully asynchronous. They all return a {{domxref("DOMRequest")}} which has a <code>onsuccess</code> and <code>onerror</code> event handler to handle the success or failur of the method call.</p> +</div> + +<dl> + <dt>{{domxref("MozMobileConnection.cancelMMI()")}}</dt> + <dd>Cancel the current <abbr title="Man Machine Interface">MMI</abbr> request if one exists.</dd> + <dt>{{domxref("MozMobileConnection.getCallForwardingOption()")}}</dt> + <dd>Queries current call forward options.</dd> + <dt>{{domxref("MozMobileConnection.getNetworks()")}}</dt> + <dd>Search for available networks.</dd> + <dt>{{domxref("MozMobileConnection.selectNetwork()")}}</dt> + <dd>Manually selects a network, overriding the radio's current selection.</dd> + <dt>{{domxref("MozMobileConnection.selectNetworkAutomatically()")}}</dt> + <dd>Tell the radio to automatically select a network.</dd> + <dt>{{domxref("MozMobileConnection.sendMMI()")}}</dt> + <dd>Send a <abbr title="Man Machine Interface">MMI</abbr> message.</dd> + <dt>{{domxref("MozMobileConnection.setCallForwardingOption()")}}</dt> + <dd>Configures call forward options.</dd> +</dl> + +<p>The <code>MozMobileConnection</code> interface also inherit from the {{domxref("EventTarget")}} interface</p> + +<p>{{page("/en-US/docs/DOM/EventTarget","Methods")}}</p> + +<h2 id="Specification" name="Specification">Specification</h2> + +<p>Not part of any specification</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("window.navigator.mozMobileConnection","navigator.mozMobileConnection")}}</li> + <li>{{domxref("MozMobileConnectionInfo")}}</li> + <li>{{domxref("MozIccManager")}}</li> + <li>{{domxref("MozMobileNetworkInfo")}}</li> + <li>{{domxref("MozMobileCFInfo")}}</li> + <li>{{domxref("MozMobileCellInfo")}}</li> + <li>{{domxref("EventTarget")}}</li> +</ul> diff --git a/files/de/web/api/mozmobileconnection/selectnetworkautomatically/index.html b/files/de/web/api/mozmobileconnection/selectnetworkautomatically/index.html new file mode 100644 index 0000000000..242901b1c2 --- /dev/null +++ b/files/de/web/api/mozmobileconnection/selectnetworkautomatically/index.html @@ -0,0 +1,57 @@ +--- +title: MozMobileConnection.selectNetworkAutomatically +slug: Web/API/MozMobileConnection/selectNetworkAutomatically +translation_of: Archive/B2G_OS/API/MozMobileConnection/selectNetworkAutomatically +--- +<p>{{APIRef("Firefox OS")}} {{ non-standard_header() }}</p> + +<p>{{ B2GOnlyHeader2('certified') }}</p> + +<h2 id="Summary">Summary</h2> + +<p>The <code>selectNetworkAutomatically</code> method is used to tell the radio to automatically select a network.</p> + +<div class="note"> +<p><strong>Note:</strong> If the network is actually changed by this request, the <code>voicechange</code> and <code>datachange</code> events are fired.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre>var request = navigator.mozMobileConnection.selectNetworks();</pre> + +<h3 id="Return">Return</h3> + +<p>A {{domxref("DOMRequest")}} object to handle the success or failure of the method call.</p> + +<p>If the request fails, the request's <code>error</code> is one of:</p> + +<ul> + <li><code>RadioNotAvailable</code></li> + <li><code>RequestNotSupported</code></li> + <li><code>IllegalSIMorME</code></li> + <li><code>GenericFailure</code></li> +</ul> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">var switchNetwork = navigator.mozMobileConnection.selectNetworkAutomatically(); + +switchNetwork.onsuccess = function () { + console.log('Successful switch'); +} + +switchNetwork.onerror = function () { + console.log('Unable to switch: ' + this.error.name); +} +</pre> + +<h2 id="Specification" name="Specification">Specification</h2> + +<p>Not part of any specification.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("MozMobileConnection")}}</li> + <li>{{domxref("DOMRequest")}}</li> +</ul> diff --git a/files/de/web/api/mutationobserver/index.html b/files/de/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..c1367cea73 --- /dev/null +++ b/files/de/web/api/mutationobserver/index.html @@ -0,0 +1,287 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +tags: + - Beobachter-Muster + - DOM-Knoten + - Fortgeschrittene + - Observer Pattern + - Programmierung + - Wertänderungen verfolgen + - Änderungen überwachen +translation_of: Web/API/MutationObserver +--- +<p>{{APIRef("DOM")}}</p> + +<p>Der <code>MutationObserver</code> ermöglicht es, auf Änderungen im <a href="/en-US/docs/DOM">DOM</a>-Element zu reagieren. Er löst die <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a> aus der DOM3 Events Spezifikation ab.</p> + +<h2 id="Constructor" name="Constructor">Konstruktor</h2> + +<h3 id="MutationObserver" name="MutationObserver()"><code>MutationObserver()</code></h3> + +<p>Konstruktor zum Instanziieren neuer DOM-MutationObservers.</p> + +<pre class="eval">MutationObserver( + function callback +); +</pre> + +<h6 id="Parameters" name="Parameters">Parameters</h6> + +<dl> + <dt><code>callback</code></dt> + <dd>Die Funktion wird bei jeder Veränderung am DOM-Element ausgelöst. Der Observer (Beobachter) ruft die Callbackfunktion mit zwei Argumenten auf. Das erste ist ein Array aus <a href="#MutationRecord"><code>MutationRecord</code></a>-Objekten. Das zweite ist diese Instanz des <code>MutationObserver</code>.</dd> +</dl> + +<h2 id="Instance_methods" name="Instance_methods">Methoden</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>void <a href="#observe()">observe</a>( {{domxref("Node")}} target, <a href="#MutationObserverInit">MutationObserverInit</a> options );</code></td> + </tr> + <tr> + <td><code>void <a href="#disconnect()">disconnect</a>();</code></td> + </tr> + <tr> + <td><code>Array <a href="#takeRecords()">takeRecords</a>();</code></td> + </tr> + </tbody> +</table> + +<h3 id="observe" name="observe()"><code>observe()</code></h3> + +<p>Registriert die Instanz von <code>MutationObserver</code> , um Meldungen über Veränderungen DOM-Elements der angegebenen Node zu erhalten.</p> + +<pre class="eval">void observe( + {{domxref("Node")}} target, + <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> options +); +</pre> + +<h6 id="Parameters" name="Parameters">Parameters</h6> + +<dl> + <dt><code>target</code></dt> + <dd>Die {{domxref("Node")}} , zu dem Veränderungen im DOM beobachtet werden sollen.</dd> + <dt><code>options</code></dt> + <dd>Ein <a href="#MutationObserverInit"><code>MutationObserverInit</code></a>-Objekt, das angibt, welche DOM-Veränderungen gemeldet werden sollen.</dd> +</dl> + +<div class="note">Anmerkung: Einen Observer zu einem Element hinzufügen funktioniert genau wie addEventListener - man kann es auch von mehreren Observern gleichzeitig beobachten lassen. Das heißt, wenn man ein Element doppelt beobachtet, feuert es nicht zweimal und man muss auch nicht zweimal disconnect() aufrufen. Mit anderen Worten: wenn man ein Element beobachtet, macht es keinerlei Unterschied, wenn man es durch dasselbe Objekt nochmal beobachten lässt. Wenn es von einem anderen Objekt beobachtet wird, dann wird natürlich zusätzlich ein weiterer Observer angehängt.</div> + +<h3 id="disconnect" name="disconnect()"><code>disconnect()</code></h3> + +<p>Sorgt dafür, dass die <code>MutationObserver</code>-Instanz die Überwachung der DOM-Benachrichtigungen beendet. Bis die <a href="#observe()"><code>observe()</code></a> -Methode erneut benutzt wird, wird die Callback-Methode des Observers nicht aufgerufen.</p> + +<pre class="eval">void disconnect(); +</pre> + +<h3 id="takeRecords" name="takeRecords()"><code>takeRecords()</code></h3> + +<p>Leert die Nachrichten-Kette ("record queue") der <code>MutationObserver</code> Instanz gibt den vorher dort vorhandenen Inhalt zurück.</p> + +<pre class="eval">Array takeRecords(); +</pre> + +<h6 id="Return_value" name="Return_value">Return value</h6> + +<p>Gibt ein Array mit <a href="#MutationRecord"><code>MutationRecord</code>s</a> zurück.</p> + +<h2 id="MutationObserverInit" name="MutationObserverInit"><code>MutationObserverInit</code></h2> + +<p><code>MutationObserverInit</code> ist ein Objekt, das die folgenden Eigenschaften enthalten (und damit festlegen) kann:</p> + +<div class="note">Anmerkung: Als Mindestanforderung muss <code>childList</code>, <code>attributes</code>, oder <code>characterData</code> auf <code>true</code> gesetzt werden. Anderenfalls wird ein Fehler "Ungültiger String angegeben" ("An invalid or illegal string was specified") ausgelöst.</div> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Property</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>childList</code></td> + <td>Wenn Kindelemente (child nodes) der Ziel-Node (inklusive Textnodes) beobachtet werden sollen, muss <code>childList </code>auf <code style="font-style: normal;">true</code> gesetzt werden.</td> + </tr> + <tr> + <td><code>attributes</code></td> + <td>Muss auf <code>true</code> gesetzt werden, wenn Veränderungen an Attributen der Ziel-Node (target node) beobachtet bzw. berichtet werden sollen.</td> + </tr> + <tr> + <td><code>characterData</code></td> + <td> + <p>Muss <code>true</code> sein, wenn Veränderungen an den Daten der Ziel-Node beobachtet werden sollen.</p> + </td> + </tr> + <tr> + <td><code>subtree</code></td> + <td>Auf <code>true</code> setzen, wenn nicht nur Änderungen an der Ziel-Node (target node) beobachtet werden sollen, sondern auch Veränderungen von dessen Kindelementen (child nodes).</td> + </tr> + <tr> + <td><code>attributeOldValue</code></td> + <td>Muss auf <code>true</code> gesetzt werden, wenn <code>attributes</code> ebenfalls <code>true</code> ist und der Wert des target-node-Attributs <em>vor</em> der Veränderung ebenfalls gemeldet werden soll.</td> + </tr> + <tr> + <td><code>characterDataOldValue</code></td> + <td> + <p>Muss auf <code>true</code> gesetzt werden, wenn <code>characterData</code> ebenfalls <code>true</code> ist und der Wert von data <em>vor</em> der Veränderung ebenfalls gemeldet werden soll.</p> + </td> + </tr> + <tr> + <td><code>attributeFilter</code></td> + <td>Mit dieser Eigenschaft kann ein Array mit lokalen Attributnamen angegeben werden (ohne Namespace), wenn nicht alle Attribute beobachtet werden sollen.</td> + </tr> + </tbody> +</table> + +<h2 id="MutationRecord" name="MutationRecord"><code>MutationRecord</code></h2> + +<p>Als erstes Argument wird an die Callback-Funktion des Observers ein Array aus <code>MutationRecord</code>-Objekten übergeben. Ein <code>MutationRecord</code>-Objekt beinhaltet die folgenden Eigenschaften:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Property</td> + <td class="header">Type</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>type</code></td> + <td><code>String</code></td> + <td>Gibt <code>attributes</code> zurück, wenn die Veränderung eine Änderung an Attributen der Node gewesen ist, <code>characterData</code> wenn Veränderungen an der <code>CharacterData</code>-Node vorgenommen wurden, und <code>childList</code> wenn es sich um eine Veränderung an den untergeordneten Knoten im Baum handelt.</td> + </tr> + <tr> + <td><code>target</code></td> + <td><code>{{domxref("Node")}}</code></td> + <td>Gibt die von der Veränderung betroffene Node zurück, abhängig von <code>type</code>. Bei <code>attributes</code> das Element, von dem Attribute geändert wurden. Bei <code>characterData</code> wird die <code>CharacterData</code>-Node zurückgegeben. Bei <code>childList</code> die Node, deren untergeordnete Kindelemente verändert wurden.</td> + </tr> + <tr> + <td><code>addedNodes</code></td> + <td><code>{{domxref("NodeList")}}</code></td> + <td>Gibt die hinzugefügten Nodes zurück. Wenn keine hinzugefügt wurden, wird eine leere <span style="font-family: 'Courier New','Andale Mono',monospace;">NodeList</span> zurückgegeben.</td> + </tr> + <tr> + <td><code>removedNodes</code></td> + <td><code>{{domxref("NodeList")}}</code></td> + <td>Gibt die entfernten Nodes zurück. Wenn keine entfernt wurden, wird eine leere <span style="font-family: 'Courier New','Andale Mono',monospace;">NodeList</span> zurückgegeben.</td> + </tr> + <tr> + <td><code>previousSibling</code></td> + <td><code>{{domxref("Node")}}</code></td> + <td>Gibt den vorhergehenden Sibling der hinzugefügten oder entfernten Node(s) zurück, sonst <code>null</code>.</td> + </tr> + <tr> + <td><code>nextSibling</code></td> + <td><code>{{domxref("Node")}}</code></td> + <td>Gibt den folgenden Sibling der hinzugefügten oder entfernten Node(s) zurück, sonst <code>null</code>.</td> + </tr> + <tr> + <td><code>attributeName</code></td> + <td><code>String</code></td> + <td>Gibt den lokalen Namen des geänderten Attributs zurück, sonst <code>null</code>.</td> + </tr> + <tr> + <td><code>attributeNamespace</code></td> + <td><code>String</code></td> + <td>Gibt den lokalen Namespace des geänderten Attributs zurück, sonst <code>null</code>.</td> + </tr> + <tr> + <td><code>oldValue</code></td> + <td><code>String</code></td> + <td>Rückgabewert hängt vom <code>type </code>ab. Bei <code>attributes</code> wird der Wert des Attributs vor der Änderung zurückgegeben. Bei <code>characterData</code>, der Wert von Data vor der Änderung. Bei <code>childList</code> wird <code>null</code> zurückgegeben.</td> + </tr> + </tbody> +</table> + +<h2 id="Example_usage" name="Example_usage">Nutzungsbeispiel</h2> + +<p>Das folgende Beispiel wurde aus <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">diesem Blog-Post</a> übernommen.</p> + +<pre class="brush: js">// zu überwachende Zielnode (target) auswählen +var target = document.querySelector('#some-id'); + +// eine Instanz des Observers erzeugen +var observer = new MutationObserver(function(mutations) { + mutations.forEach(function(mutation) { + console.log(mutation.type); + }); +}); + +// Konfiguration des Observers: alles melden - Änderungen an Daten, Kindelementen und Attributen +var config = { attributes: true, childList: true, characterData: true }; + +// eigentliche Observierung starten und Zielnode und Konfiguration übergeben +observer.observe(target, config); + +// später: Observation wieder einstellen +observer.disconnect(); +</pre> + +<h2 id="Additional_reading" name="Additional_reading">Weiterführende Informationen (engl.)</h2> + +<ul> + <li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">A brief overview</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">A more in-depth discussion</a></li> + <li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">A screencast by Chromium developer Rafael Weinstein</a></li> + <li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">The mutation summary library</a></li> + <li><a href="http://dom.spec.whatwg.org/#mutation-observers">The DOM standard</a> which defines the <code>MutationObserver</code> interface</li> +</ul> + +<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>18 {{ property_prefix("WebKit") }}<br> + 26</td> + <td>{{ CompatGeckoDesktop(14) }}</td> + <td>11</td> + <td>15</td> + <td>6.0 {{ property_prefix("WebKit") }}</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>18 {{ property_prefix("WebKit") }}<br> + 26</td> + <td>{{ CompatGeckoMobile(14) }}</td> + <td>{{ CompatUnknown() }}</td> + <td>15</td> + <td> + <p>6 {{ property_prefix("WebKit")}}</p> + + <p>7</p> + </td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/api/navigator/index.html b/files/de/web/api/navigator/index.html new file mode 100644 index 0000000000..b6efb42b05 --- /dev/null +++ b/files/de/web/api/navigator/index.html @@ -0,0 +1,122 @@ +--- +title: Navigator +slug: Web/API/Navigator +tags: + - API + - HTML DOM +translation_of: Web/API/Navigator +--- +<p>{{ apiref() }}</p> + +<p>The <code><strong>Navigator</strong></code> interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.</p> + +<p>A <code>Navigator</code> object can be retrieved using the read-only {{domxref("Window.navigator")}} property.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Doesn't inherit any property, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorGeolocation")}}, {{domxref("NavigatorPlugins")}}, {{domxref("NavigatorUserMedia")}}, and {{domxref("NetworkInformation")}}.</em></p> + +<h3 id="Standard">Standard</h3> + +<dl> + <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns the internal "code" name of the current browser. Do not rely on this property to return the correct value.</dd> + <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("DOMString")}} with the official name of the browser. Do not rely on this property to return the correct value.</dd> + <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns the version of the browser as a {{domxref("DOMString")}}. Do not rely on this property to return the correct value.</dd> + <dt>{{domxref("Navigator.battery")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("BatteryManager")}} object you can use to get information about the battery charging status.</dd> + <dt>{{domxref("NetworkInformation.connection")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Provides a {{domxref("Connection")}} with information about the network connection of a device.</dd> + <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.</dd> + <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.</dd> + <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The <code>null</code> value is returned when this is unknown.</dd> + <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt> + <dd>Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.</dd> + <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.</dd> + <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating whether the browser is working online.</dd> + <dt>{{domxref("Navigator.oscpu")}}</dt> + <dd>Returns a string that represents the current operating system.</dd> + <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a string representing the platform of the browser. Do not rely on this function to return a significant value.</dd> + <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.</dd> + <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}</dt> + <dd>Always returns <code>'Gecko'</code>, on any browser. This property is kept only for compatibility purpose.</dd> + <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt> + <dd>Returns the user agent string for the current browser.</dd> + <dt>{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">associated document</a>.</dd> +</dl> + +<h3 id="Methods" name="Methods">Non-standard</h3> + +<dl> + <dt>{{domxref("window.navigator.buildID", "navigator.buildID")}} {{non-standard_inline}}</dt> + <dd>Returns the build identifier of the browser (e.g., "2006090803").</dd> + <dt>{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}</dt> + <dd>Returns a boolean indicating whether cookies are enabled in the browser or not.</dd> + <dt>{{domxref("navigator.doNotTrack")}} {{non-standard_inline}}</dt> + <dd>Reports the value of the user's do-not-track preference. When this value is "yes", your web site or application should not track the user.</dd> + <dt>{{domxref("navigator.id")}} {{non-standard_inline}}</dt> + <dd>Returns the {{domxref("window.navigator.id", "id")}} object which you can use to add support for <a href="/en-US/docs/BrowserID" title="BrowserID">BrowserID</a> to your web site.</dd> + <dt>{{domxref("window.navigator.mozApps", "navigator.mozApps")}} {{non-standard_inline}}</dt> + <dd>Returns an {{domxref("window.navigator.mozApps", "Apps")}} object you can use to install, manage, and control <a href="/Open_Web_Apps" title="Open Web apps">Open Web apps</a>.</dd> + <dt>{{domxref("Navigator.mozAudioChannelManager", "navigator.mozAudioChannelManager")}} {{non-standard_inline}}</dt> + <dd>The <code>navigator.mozAudioChannelManager</code> object provides access to the {{domxref("mozAudioChannelManager")}} interface, which is used to manage your Firefox OS device's audio channels, including setting what channel's volume to affect when the volume buttons are pressed inside a particular app.</dd> + <dt>{{domxref("window.navigator.mozNotification","navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}<br> + {{domxref("window.navigator.webkitNotification","navigator.webkitNotification")}}</dt> + <dd>Returns a {{domxref("navigator.mozNotification", "notification")}} object you can use to deliver notifications to the user from your web application.</dd> + <dt>{{domxref("navigator.mozSocial")}} {{non-standard_inline}}</dt> + <dd>The Object, returned by the <code>navigator.mozSocial</code> property, is available within the social media provider's panel to provide functionality it may need.</dd> + <dt>{{domxref("window.navigator.productSub", "navigator.productSub")}} {{non-standard_inline}}</dt> + <dd>Returns the build number of the current browser (e.g., "20060909").</dd> + <dt>{{domxref("window.navigator.securitypolicy", "navigator.securitypolicy")}} {{non-standard_inline}}</dt> + <dd>Returns an empty string. In Netscape 4.7x, returns "US & CA domestic policy" or "Export policy".</dd> + <dt>{{domxref("window.navigator.standalone", "navigator.standalone")}} {{non-standard_inline}}</dt> + <dd>Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.</dd> + <dt>{{domxref("window.navigator.vendor", "navigator.vendor")}} {{non-standard_inline}}</dt> + <dd>Returns the vendor name of the current browser (e.g., "Netscape6").</dd> + <dt>{{domxref("window.navigator.vendorSub", "navigator.vendorSub")}} {{non-standard_inline}}</dt> + <dd>Returns the vendor version number (e.g. "6.1").</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API"><code>navigator.webkitPointer</code></a> {{non-standard_inline}}</dt> + <dd>Returns a PointerLock object for the <a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API">Mouse Lock API</a>.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<p><em>Doesn't inherit any method, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, <em>{{domxref("NavigatorUserMedia")}}, </em>and {{domxref("NavigatorStorageUtils")}}.</em></p> + +<h3 id="Standard_2">Standard</h3> + +<dl> + <dt>{{domxref("NavigatorUserMedia.getUserMedia()")}}</dt> + <dd>After having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local computer.</dd> + <dt>{{domxref("window.navigator.registerContentHandler", "navigator.registerContentHandler")}}</dt> + <dd>Allows web sites to register themselves as a possible handler for a given MIME type.</dd> + <dt>{{domxref("navigator.registerProtocolHandler", "navigator.registerProtocolHandler")}}</dt> + <dd>Allows web sites to register themselves as a possible handler for a given protocol.</dd> + <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}</dt> + <dd>Returns <code>false</code>. JavaScript taint/untaint functions removed in JavaScript 1.2.</dd> + <dt>{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}</dt> + <dd>Causes vibration on devices with support for it. Does nothing if vibration support isn't available.</dd> +</dl> + +<h3 id="Specification" name="Specification">Non standard</h3> + +<dl> + <dt>{{domxref("window.navigator.mozIsLocallyAvailable", "navigator.mozIsLocallyAvailable")}} {{non-standard_inline}}</dt> + <dd>Lets code check to see if the document at a given URI is available without using the network.</dd> + <dt>{{domxref("window.navigator.mozPay", "navigator.mozPay")}} {{non-standard_inline}}</dt> + <dd>Allows in-app payment.</dd> + <dt>{{domxref("window.navigator.preference", "navigator.preference")}} {{obsolete_inline("2.0")}} {{non-standard_inline}}</dt> + <dd>Sets a user preference. This method is <a class="external" href="http://www.faqts.com/knowledge_base/view.phtml/aid/1608/fid/125/lang/en">only available to privileged code</a> and is obsolete; you should use the XPCOM <a href="/en-US/docs/Preferences_API" title="Preferences_API">Preferences API</a> instead.</dd> + <dt>{{domxref("window.navigator.requestWakeLock", "navigator.requestWakeLock")}} {{non-standard_inline}}</dt> + <dd>Request a wake lock for a resource. A wake lock prevents a specific part of a device from being turned off automatically.</dd> +</dl> diff --git a/files/de/web/api/navigator/registerprotocolhandler/index.html b/files/de/web/api/navigator/registerprotocolhandler/index.html new file mode 100644 index 0000000000..2ffd20da9d --- /dev/null +++ b/files/de/web/api/navigator/registerprotocolhandler/index.html @@ -0,0 +1,170 @@ +--- +title: Navigator.registerProtocolHandler() +slug: Web/API/Navigator/registerProtocolHandler +translation_of: Web/API/Navigator/registerProtocolHandler +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>In progress. Allows web sites to register themselves as possible handlers for particular protocols.</p> + +<p>For security reasons, by default, web sites may only register protocol handlers for themselves — the domain and protocol of the handler must match the current site. However, users may set a preference in Firefox to allow cross website installation, by setting the <code>gecko.handlerService.allowRegisterFromDifferentHost</code> pref to <code>true</code> in about:config.</p> + +<p>Extensions can register protocol handlers targeting other sites: see the 'See Also' section for how to use them from XPCOM.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">window.navigator.registerProtocolHandler(<em>protocol</em>, <em>url</em>, <em>title</em>); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>protocol</code></dt> + <dd>The protocol the site wishes to handle, specified as a string. For example, you can register to handle SMS text message links by registering to handle the "sms" scheme.</dd> + <dt><code>url</code></dt> + <dd>The URL of the handler, as a string. This string should include "%s" as a placeholder which will be replaced with the escaped URL of the document to be handled. This URL might be a true URL, or it could be a phone number, email address, or so forth. + <div class="note">The handler's URL must use one of "http" or "https" as its scheme.</div> + </dd> + <dt><code>title</code></dt> + <dd>A user-readable title string for the protocol handler. This will be displayed to the user in interface objects as needed.</dd> +</dl> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><code>SecurityError</code></dt> + <dd>The user agent blocked registration of the protocol handler. This might happen if an invalid scheme is specified, such as "http", which cannot be registered for obvious security reasons.</dd> + <dt><code>SyntaxError</code></dt> + <dd>The "%s" string is missing from the specified protocol handler URL.</dd> +</dl> + +<h2 id="Permitted_schemes">Permitted schemes</h2> + +<p>For security reasons, <code>registerProtocolHandler()</code> has restrictions on which schemes may be registered. A custom scheme may be registered as long as the scheme's name begins with "web+", is at least five characters long (including the "web+" prefix), and has only lower-case ASCII letters in its name. For example, "web+burger", as shown in the {{anch("Example")}} below.</p> + +<p>Otherwise, the scheme must be one of the schemes on the whitelist below:</p> + +<div class="threecolumns"> +<ul> + <li><code>bitcoin</code></li> + <li><code>geo</code></li> + <li><code>im</code></li> + <li><code>irc</code></li> + <li><code>ircs</code></li> + <li><code>magnet</code></li> + <li><code>mailto</code></li> + <li><code>mms</code></li> + <li><code>news</code></li> + <li><code>nntp</code></li> + <li><code>sip</code></li> + <li><code>sms</code></li> + <li><code>smsto</code></li> + <li><code>ssh</code></li> + <li><code>tel</code></li> + <li><code>urn</code></li> + <li><code>webcal</code></li> + <li><code>wtai</code></li> + <li><code>xmpp</code></li> +</ul> +</div> + +<h2 id="Example">Example</h2> + +<p>If your web application is located at <code>http://www.google.co.uk</code>, you can register a protocol handler for it to handle "web+burger" links like this:</p> + +<pre class="brush: js">navigator.registerProtocolHandler("web+burger", + "https://www.google.co.uk/?uri=%s", + "Burger handler"); +</pre> + +<p>This creates a handler that allows <code>web+burger://</code> links to direct the user to your web application, inserting the burger information specified in the link into the URL. Recall that this script must be run from the same domain (so any page location at <code>google.co.uk</code>) and the second argument passed must be of <code>http</code> or <code>https</code> scheme (in this example it is <code>https</code>) .</p> + +<p>The user will be notified that your code has asked to register the protocol handler, so that they can decide whether or not to permit it. See the screenshot below for an example.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9683/protocolregister.png"></p> + +<div class="note"> +<p>"<a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebContentHandlerRegistrar#Getting_most_recent_window">Register a webmail service as mailto handler</a>" shows how to do this from XPCOM scope.</p> +</div> + +<h2 id="Specifications">Specifications</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('HTML WHATWG', 'webappapis.html#dom-navigator-registerprotocolhandler', 'registerProtocolHandler()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</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>Basic support</td> + <td>13<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.60</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>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>{{CompatGeckoMobile("3.5")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Protocol whitelist includes <code>mailto</code>, <code>mms</code>, <code>nntp</code>, <code>rtsp</code>, and <code>webcal</code>. Custom protocols must be prefixed with <code>web+</code>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web-based_protocol_handlers">Web-based protocol handlers</a></li> + <li><a href="/en-US/docs/Web/API/Navigator/registerContentHandler">Navigator.registerContentHandler()</a></li> + <li><a href="http://blog.mozilla.com/webdev/2010/07/26/registerprotocolhandler-enhancing-the-federated-web/">RegisterProtocolHandler Enhancing the Federated Web</a> at Mozilla Webdev</li> + <li><a href="https://html.spec.whatwg.org/multipage/system-state.html#custom-handlers">Web Application APIs - Custom scheme and content handlers</a></li> + <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebContentHandlerRegistrar#Getting_most_recent_window">Register a webmail service as mailto handler</a> shows how to do <code>registerProtocolHandler</code> from XPCOM scope.</li> + <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebContentHandlerRegistrar#registerProtocolHandler">XPCOM Interface Reference > nsIWebContentHandlerRegistrar > registerContentHandler</a> - This shows how to use this function XPCOM scope</li> +</ul> diff --git a/files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html b/files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html new file mode 100644 index 0000000000..5f48e63097 --- /dev/null +++ b/files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html @@ -0,0 +1,127 @@ +--- +title: Webbasierte Protokoll-Handler +slug: Web/API/Navigator/registerProtocolHandler/Webbasierte_protokoll-handler +translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +--- +<div>{{Fx_minversion_header(3)}}</div> + +<h2 id="Background" name="Background">Hintergrund</h2> + +<p>Man findet im Web häufiger Seiten, die Verweise mit anderen Protokollen als HTTP einsetzen. Ein Beispiel ist das <code>mailto:</code> Protokoll:</p> + +<div style="overflow: hidden;"> +<pre class="brush:html"><a href="mailto:webmaster@example.com">Web Master</a></pre> +</div> + +<p>Seitenersteller können <code>mailto:</code> Verweise nutzen, wenn sie einen bequemen Weg anbieten möchten, E-Mails direkt aus ihrer Webseite heraus zu versenden. Wird der Link aktiviert, sollte der Browser das im Betriebssystem eingestelle Standardprogramm für E-Mail starten. Das ist ein Beispiel für einen desktopbasierten Protokoll-Handler.</p> + +<p>Webbasierte Protokoll-Handler erlauben webbasierten Anwendungen ebenfall an solchen Prozessen teilzunehmen. Das wird mit der Migration vieler Anwendungen ins Web zunehmend wichtiger. Tatsächlich gibt es bereits viele Webanwendungen, die einen <code>mailto:</code> Verweis verarbeiten könnten.</p> + +<h2 id="Registering" name="Registering">Registrierung</h2> + +<p>Das Einrichten einer webbasierten Anwendung als Protokoll-Handler ist unkompliziert. Die Webapp nutzt <code><a href="/en-US/docs/Web/API/navigator.registerProtocolHandler" title="DOM/window.navigator.registerProtocolHandler">registerProtocolHandler()</a></code>, um sich selbst beim Browser als potentiellen Handler für ein bestimmtes Protokoll zu registrieren. Ein Beispiel:</p> + +<pre class="brush: js">navigator.registerProtocolHandler("burger", + "http://www.google.co.uk/?uri=%s", + "Burger handler");</pre> + +<p>Die Parameter sind:</p> + +<ul> + <li>Das Protokoll.</li> + <li>Das URL Template, das als Handler genutzt werden soll. Das "%s" wird durch das <code>href</code> Attribut des Verweises ersetzt und ein GET Request mit der resultierenden URL ausgeführt.</li> + <li>Der nutzerlesbare Name des Protokoll Handlers.</li> +</ul> + +<p>Führt ein Browser diesen Code aus, wird er über einen Dialog die Erlaubnis des Nutzers einholen, die Webanwendung als Handler für dieses Protokoll zu registrieren. Firefox zeigt eine Nachricht in der Notification Bar:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9683/protocolregister.png" style="display: block; height: 401px; margin: 0px auto; width: 700px;"></p> + +<div class="note"><strong>Hinweis: </strong>Das bei der Registrierung angegebene URL Template <strong>muss</strong> mit der die Anfrage stellenden Webseite <strong>übereinstimmen</strong>, oder die Registrierung schlägt fehl. Beispielsweise kann <code class="plain">http://example.com/homepage.html</code> einen Protokoll-Handler für <code class="plain">http://example.com/handle_mailto/%s registrieren, aber nicht für</code> <code class="plain">http://example.<em><strong>org</strong></em>/handle_mailto/%s</code>.</div> + +<p>Wird derselbe Handler mehrfach registriert, meldet der Browser das durch ein weiteres Pop-Up, das auf die bereits erfolgte Registrierung hinweist. Daher ist es sinnvoll, die Registrierung mit einem vorangehenden Check abzusichern.</p> + +<h3 id="Example" name="Example">Beispiel</h3> + +<pre class="brush: js"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<html lang="en"> +<head> + <title>Web Protocol Handler Sample - Register</title> + <script type="text/javascript"> + navigator.registerProtocolHandler("burger", + "http://www.google.co.uk/?uri=%s", + "Burger handler"); + </script> +</head> +<body> + <h1>Web Protocol Handler Sample</h1> + <p>This web page will install a web protocol handler for the <code>fake:</code> protocol.</p> +</body> +</html> +</pre> + +<h2 id="Activating" name="Activating">Aktivierung</h2> + +<p>Ab jetzt wird der Browser bei jedem Klick auf einen Verweis, der das neu registrierte Protokoll verwendet, die Ausführung auf die registrierte URL umleiten. Firefox wird zuvor standardmäßig die Bestätigung durch den Nutzer einholen.</p> + +<h3 id="Example_2" name="Example_2">Beispiel</h3> + +<pre class="brush: html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<html lang="en"> +<head> + <title>Web Protocol Handler Sample - Test</title> +</head> +<body> + <p>Hey have you seen <a href="burger:cheeseburger">this</a> before?</p> +</body> +</html> +</pre> + +<h2 id="Handling" name="Handling">Handling</h2> + +<p>Der nächste Schritt ist das tatsächliche Handling. Der Browser kombiniert die <code>href </code>aus dem aktivierten Link mit dem registrierten URL Template und führt dann damit einen HTTP GET Request aus. Hervorgehend aus den vorangegangenen Beispielen würde der Request auf folgender URL stattfinden:</p> + +<pre>http://www.google.co.uk/?uri=burger:cheeseburger +</pre> + +<p>Serverseitiger Code kann dann die query String Parameter extrahieren und die gewünschte Aktion ausführen.</p> + +<div class="note"><strong>Hinweis:</strong> Dem serverseitigen Code wird der <strong>gesamte </strong>Inhalt der href übergeben. D.h. der Server muss das Protokoll aus den Daten parsen.</div> + +<h3 id="Example_3" name="Example_3">Beispiel</h3> + +<pre class="brush: php"><?php +$value = ""; +if ( isset ( $_GET["value"] ) ) { + $value = $_GET["value"]; +} +?> + +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<html lang="en"> +<head> + <title>Web Protocol Handler Sample</title> +</head> +<body> + <h1>Web Protocol Handler Sample - Handler</h1> + <p>This web page is called when handling a <code>burger:</code> protocol action. The data sent:</p> + <textarea> +<?php echo(htmlspecialchars($value, ENT_QUOTES, 'UTF-8')); ?> + </textarea> +</body> +</html> +</pre> + +<h2 id="References" name="References">Verweise</h2> + +<ul> + <li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/timers.html#custom-handlers">http://www.w3.org/TR/2011/WD-html5-20110525/timers.html#custom-handlers</a></li> +</ul> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/DOM/window.navigator.registerContentHandler" title="DOM/window.navigator.registerContentHandler">window.navigator.registerContentHandler</a></li> + <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIProtocolHandler" title="nsIProtocolHandler">nsIProtocolHandler</a> (XUL only)</li> + <li><a class="external" href="http://blog.mozilla.com/webdev/2010/07/26/registerprotocolhandler-enhancing-the-federated-web/" title="http://blog.mozilla.com/webdev/2010/07/26/registerprotocolhandler-enhancing-the-federated-web/">RegisterProtocolHandler Enhancing the Federated Web</a> at Mozilla Webdev</li> +</ul> diff --git a/files/de/web/api/navigator/sendbeacon/index.html b/files/de/web/api/navigator/sendbeacon/index.html new file mode 100644 index 0000000000..1e8ff5ea2b --- /dev/null +++ b/files/de/web/api/navigator/sendbeacon/index.html @@ -0,0 +1,144 @@ +--- +title: Navigator.sendBeacon() +slug: Web/API/Navigator/sendBeacon +translation_of: Web/API/Navigator/sendBeacon +--- +<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div> + +<p>Die <code><strong>navigator.sendBeacon()</strong></code> Methode dient dazu, kleinere Datenmengen asynchron per HTTP vom User Agent zum Server zu senden.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">navigator.sendBeacon(<em>url</em>, <em>data</em>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>url</code></dt> + <dd>Der <code>url</code> Parameter steht für die ermittelte URL, an die <code>data</code> zu senden ist. </dd> +</dl> + +<dl> + <dt><code>data</code></dt> + <dd>Der Parameter <code>data</code> enthält zu übermittelnde Daten der Art {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}} oder {{domxref("FormData")}}.</dd> +</dl> + +<h3 id="Rückgabewerte">Rückgabewerte</h3> + +<p>Die <strong>sendBeacon()</strong> Methode gibt <code>true</code> zurück, falls der User Agent erfolgreich war, <code>data</code> zum Transfer bereit zu stellen. Andernfalls ist der Rückgabewert <code>false</code>.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Diese Methode erfüllt Bedürfnisse von Analyse- und Diagnostik-Code, der regelmäßig versucht, Daten an den Server zu senden bevor der <em>unload</em> Vorgang einer Seite abgeschlossen ist. Daten schon früher zu senden, könnte eine unvollständige Datensammlung bewirken.<br> + Bislang war es für Entwickler schwierig, sicherzustellen, dass Daten während eines <em>unload</em> Vorgangs tatsächlich gesendet wurden.</p> + +<p>Üblicherweise ignorieren User Agenten asynchrone XMLHttpRequests in einem <em>unload</em> Anweisungsblock. Dieses Problem wird in Analytik- und Diagnostik-Code oft umgangen, indem in einem <em>unload</em> oder <em>beforeunload</em> Anweisungsblock ein synchroner XMLHttpRequest zum Datenversand genutzt wird.<br> + Ein synchroner XMLHttpRequest zwingt den User Agenten den unload Vorgang des Dokuments zu verzögern, sodass jedoch die weitere Navigation langsamer wirkt. Der Eindruck einer schlechten Ladezeit der Folgeseite läst sich dabei nicht verhindern.</p> + +<p>Es gibt weitere Techniken, die Datenübermittlung zu ermöglichen. Eine besteht darin, den <em>unload</em> Vorgang zu verzögern, indem man ein <em>image</em> Element erzeugt und dessen <code>src</code> Attribut innerhalb des unload Anweisungsblocks ändert. Da die meisten User Agenten den <em>unload</em> Vorgang verzögern werden bis das Nachladen des Bildes abgeschlossen ist, können so währenddessen noch Daten übermittelt werden.<br> + Noch eine andere Technnik verwendet eine einige Sekunden lange wirkungsfreie (<em>noop</em>) Schleife innerhalb des <em>unload</em> Anweisungsblocks, die das <em>unload</em> verzögert und zwischenzeitliche Datenübermittlung zum Server ermöglicht.</p> + +<p>Diese alternativen Techniken stellen allerdings nicht nur schlechte Programmiermuster dar. Einige sind schlicht unzuverlässig und erzeugen den Eindruck schlechter Seitenladezeiten.</p> + +<p>Das folgende Beispiel zeigt einen fiktiven Analytik-Code, der versucht, Daten an den Server zu schicken mittels synchronem XMLHttpRequest innerhalb des <em>unload</em> Anweisungsblocks. Dies resultiert in einer Verzögerung des <em>unload</em> Vorgangs der Seite.</p> + +<pre class="brush: js">window.addEventListener('unload', logData, false); + +function logData() { + var client = new XMLHttpRequest(); + client.open("POST", "/log", false); // der dritte Parameter bewirkt synchrones xhr + client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8"); + client.send(analyticsData); +} +</pre> + +<p>Durch Verwendung der <strong><code>sendBeacon()</code></strong> Methode werden Daten asynchron an den Server gesendet sobald der User Agent Gelegenheit dazu hat und zwar ohne das <em>unload</em> bzw. das Laden der nächsten Seite zu verzögen.</p> + +<p>Das folgende Beispiel zeigt einen fiktiven Analytik-Code, der Daten zum Server sendet mittels <strong><code>sendBeacon()</code></strong>Methode. </p> + +<pre class="brush: js">window.addEventListener('unload', logData, false); + +function logData() { + navigator.sendBeacon("/log", analyticsData); +} +</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('Beacon', '#sec-sendBeacon-method', 'sendBeacon()')}}</td> + <td>{{Spec2('Beacon')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilitä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(39.0)}}</td> + <td>{{CompatGeckoDesktop("31")}}</td> + <td>{{CompatNo}}</td> + <td>26</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>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</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(40.0)}}</td> + <td>{{CompatGeckoMobile("31")}}</td> + <td>2.5</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("navigator", "navigator")}}</li> +</ul> diff --git a/files/de/web/api/navigator/vibrate/index.html b/files/de/web/api/navigator/vibrate/index.html new file mode 100644 index 0000000000..55b453cee1 --- /dev/null +++ b/files/de/web/api/navigator/vibrate/index.html @@ -0,0 +1,107 @@ +--- +title: Navigator.vibrate() +slug: Web/API/Navigator/vibrate +translation_of: Web/API/Navigator/vibrate +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>Die <strong><code>Navigator.vibrate()</code></strong>-Methode erzeugt eine Vibration, wenn entsprechende Hardware vorhanden ist. Wenn das Gerät keine Vibration unterstützt, hat diese Methode keine Auswirkungen. Wenn eine Vibration gestartet werden soll, aber eine andere Vibration noch ausgeführt wird, wird die Alte gestoppt und die Neue gestartet!</p> + +<p>Wenn die Methode nicht ausgeführt werden konnte aufgrund eines ungültigen Parameters wird ein <em>false </em>zurückgegeben, ansonsten ein <em>true</em>. Wenn das Modell zu lang ausgeführt wird, wird es abgeschnitten: die maximale Dauer ist je nach Implementierung abhängig!</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>successBool</em> = window.navigator.vibrate(<em><var>pattern</var></em>); +</pre> + +<dl> + <dt><em>pattern</em></dt> + <dd>Bietet ein Schema von Vibrationen und Vibrationsintervallen. Jeder Wert bezeichnet eine Anzahl an Millisekunden zum vibrieren und pausieren (im Wechsel). <span id="result_box" lang="de"><span>Sie</span> <span>bieten</span> <span>entweder einen einzelnen</span> <span>Wert</span> <span>(um einmal</span> <span>für so viele</span> <span>Millisekunden</span> <span>zu vibrieren</span><span>)</span> <span>oder</span> <span>ein Array von Werten</span><span>, um abwechselnd</span> zu <span>vibrieren</span><span>,</span> pausieren<span>, dann</span> <span>wieder</span> <span>zu vibrieren.</span> </span> Siehe <a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration API</a> für weitere Details.</dd> +</dl> + +<p>Wenn man 0 als Wert, einen leeren Array oder einen Array, der nur 0 als Wert(e) enthält, angibt wird die Vibration gestoppt.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">window.navigator.vibrate(200); // vibriert 200ms lang +window.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,100,30,100,30,100]); // vibriert 'SOS' im Morsecode +</pre> + +<h2 id="Technische_Daten">Technische Daten</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Technische Daten</th> + <th scope="col">Status</th> + <th scope="col">Hinweis</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Vibration API')}}</td> + <td>{{Spec2('Vibration API')}}</td> + <td>Linked to spec is the latest editor's draft; W3C version is a REC.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td> + <td>{{CompatGeckoDesktop("11.0")}} {{property_prefix("moz")}}<br> + {{CompatGeckoDesktop("16.0")}} (no prefix) [1]</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>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td> + <td>{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}<br> + {{CompatGeckoMobile("16.0")}} (no prefix) [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Wenn die Vibration zulang ist, das heißt der Wert selbst oder das Muster, wurde bis einschließlich Firefox 26 anstatt <code>false</code>, eine Fehlermeldung zurückgegeben ({{bug("884935")}}). Ab Firefox 32 wird <code>true</code> zurückgegeben, aber das Muster gekürzt ({{bug(1014581)}}).</p> + +<h2 id="Weitere_Informationen">Weitere Informationen</h2> + +<ul> + <li><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration API</a></li> +</ul> diff --git a/files/de/web/api/navigatoronline/index.html b/files/de/web/api/navigatoronline/index.html new file mode 100644 index 0000000000..11f6707c43 --- /dev/null +++ b/files/de/web/api/navigatoronline/index.html @@ -0,0 +1,127 @@ +--- +title: NavigatorOnLine +slug: Web/API/NavigatorOnLine +tags: + - API + - HTML-DOM + - NeedsTranslation + - TopicStub +translation_of: Web/API/NavigatorOnLine +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>The <code><strong>NavigatorOnLine</strong></code> interface contains methods and properties related to the connectivity status of the browser.</p> + +<p>There is no object of type <code>NavigatorOnLine</code>, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>The <code>NavigatorOnLine</code></em><em> interface doesn't inherit any property.</em></p> + +<dl> + <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating whether the browser is working online.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>The </em><em><code>NavigatorOnLine</code></em><em> interface neither implements, nor inherit any method.</em></p> + +<h2 id="Specifications">Specifications</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('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from the latest snapshot, {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}} with its initial specification.</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>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>on {{domxref("WorkerNavigator")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(29)}}</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>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> + <tr> + <td>on {{domxref("WorkerNavigator")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(29)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{domxref("Navigator")}} interface that implements it.</li> +</ul> diff --git a/files/de/web/api/navigatoronline/online/index.html b/files/de/web/api/navigatoronline/online/index.html new file mode 100644 index 0000000000..2995101bb4 --- /dev/null +++ b/files/de/web/api/navigatoronline/online/index.html @@ -0,0 +1,190 @@ +--- +title: NavigatorOnLine.onLine +slug: Web/API/NavigatorOnLine/onLine +tags: + - API + - DOM + - Dokumentation + - Eigenschaft + - Navigation + - NavigatorOnLine + - Offline + - Online + - Reference + - WebAPI +translation_of: Web/API/NavigatorOnLine/onLine +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>Diese Eigenschaft gibt einen Wahrheitswert (Bool-Wert) zurück, der Auskunft gibt, ob der Browser eine Internetverbindung aufbauen konnte. Dieser Wert wird immer dann aktualisiert, wenn eine neue Verbindung vom Browser angefordert wurde (durch Script- oder Benutzeraktionen). Es wird "false" zurückgegeben, wenn der letzte Versuch, eine Verbindung aufzubauen, fehlgeschlagen ist.</p> + +<p><strong>Einige Browser implementieren diese Funktion verschieden.</strong></p> + +<p><span style="line-height: 1.5;">Für <em>Chrome</em> und <em>Safari</em> gilt, dass wenn keine Verbindung zum LAN oder Router aufgebaut wurde, der Browser "offline" ist. Andernfalls ist der Browser "online". Das bedeutet, dass aus dem Online-Status nicht die tatsächliche Verbindung erkennbar ist. Wenn der Rückgabewert "false" ist, dann ist mit Sicherheit keine Verbindung vorhanden. Wenn der Wert aber "true" ist, muss dies keine tatsächliche Verbindung zum Internet bedeuten. Auch kann die Ausführung innerhalb einer <em>Virtuellen Maschine </em>den Wert verfälschen. Für weitere Informationen kann dieser HTML5-Rocks Artikel hilfreich sein (in Englisch): <a href="http://www.html5rocks.com/en/mobile/workingoffthegrid/">Working Off the Grid with HTML5 Offline</a></span></p> + +<p><em>Firefox</em> und der<em> Internet Explorer</em> können diesen Wert auch durch die Funktion des "Offline-Modus" verändern. Dann wird auch "false" zurückgegeben, unabhängig vom tatsächlichen Status.</p> + +<p>Bis Firefox 41 wurde in allen anderen Fällen "true" zurückgegeben. Seit Version 41 kann der tatsächliche Verbindungsstatus erkannt werden, wenn Firefox auf OS X oder Windows installiert ist.</p> + +<p>Es sind auch folgende Ereignisse verfügbar, mit denen unmittelbar auf Änderungen des "OnLine"-Wertes reagiert werden kann.</p> + +<ul> + <li><a href="/en-US/docs/Web/API/document.ononline"><code>window.ononline</code></a></li> + <li><a href="/en-US/docs/Web/API/document.onoffline"><code>window.onoffline</code></a></li> +</ul> + +<h2 id="sect1"> </h2> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>online</em> = <em>window</em>.navigator.onLine; +</pre> + +<h3 id="Value">Value</h3> + +<p><font face="Consolas, Liberation Mono, Courier, monospace">Der Rückgabewert ist vom Typ "boolean", kann also <em>true</em> oder <em>false</em> sein.</font></p> + +<h2 id="sect2"> </h2> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Hier das <a href="http://html5-demos.appspot.com/static/navigator.onLine.html">Live-Beispiel</a></p> + +<p>Um zu bestimmen, ob der Browser mit dem Internet verbunden ist, müssen Sie den Wert von <code>window.navigator.onLine</code> wie folgt verwenden:</p> + +<pre class="brush: js">if (navigator.onLine) { + console.log('Verbunden'); +} else { + console.log('Getrennt'); +}</pre> + +<p>Wenn der Browser <code>onLine</code> nicht kennt, wird <em>false</em> oder <em>undefiniert</em> zurückgegeben.</p> + +<p>Um auf dir Veränderung des Status direkt reagieren zu können, verwenden Sie <code><a href="/en-US/docs/DOM/element.addEventListener">addEventListener</a></code> für die Ereignisse <code>window.ononline</code> und <code>window.onoffline;</code> wie in diesem Beispiel:</p> + +<pre class="brush: js">window.addEventListener("offline", function(e) { console.log("Nicht Verbunden"); }); + +window.addEventListener("online", function(e) { console.log("Verbunden"); }); +</pre> + +<h2 id="sect3"> </h2> + +<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("HTML WHATWG", "browsers.html#navigator.online", "navigator.onLine")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="sect4"> </h2> + +<h2 id="Browserkompatibilität">Browserkompatibilität</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 (WebKit)</th> + </tr> + <tr> + <td>Einfache Umsetzung</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop(1.9.1)}}<sup>[2]</sup><br> + {{CompatGeckoDesktop(2.0)}}<sup>[4]</sup></td> + <td>8<sup>[3]</sup></td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>5.0.4</td> + </tr> + <tr> + <td>on {{domxref("WorkerNavigator")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(29)}}</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>Funktion</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>BlackBerry</th> + </tr> + <tr> + <td>Einfache Umsetzung</td> + <td>2.2<sup>[5]</sup></td> + <td>{{CompatGeckoMobile(1.9.1)}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td> + <p>7<br> + 10</p> + </td> + </tr> + <tr> + <td>on {{domxref("WorkerNavigator")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(29)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Vorherige Versionen von Chrome geben true unmittelbar nach den öffnen des Tabs zurück. Erst nach der nächsten Netzwerkaktivität wird der richtige Wert zurückgegeben. Windows: 11, Mac: 14, Chrome OS: 13, Linux: Liefert immer true zurück. Siehe auch <a href="http://crbug.com/7469">crbug.com/7469</a>.</p> + +<p>[2] Seit Firefox 4 und Opera 11.10 wird false unabhängig von der tatsächlichen Verbindung zurückgegeben, wenn der "offline"-Modus des Browsers aktiviert wurde. </p> + +<p>[3] Im Internet Explorer 8 werden die "online"- and "offline"-Ereignisse duch document.body ausgelöst; seit dem IE 9 werden diese auch von <code>window</code> ausgelöst.</p> + +<p>[4] Seit Firefox 41, auf OS X und Windows, wird der tatsächliche Verbindungstatus zurückgegeben, solange der "offline"-Modus nicht aktivert wurde.</p> + +<p>[5] Fehler in der WebView-Komponenten, siehe auch: <a href="http://code.google.com/p/android/issues/detail?id=16760">bug 16760</a>.</p> + +<h2 id="sect5"> </h2> + +<h2 id="Hinweise">Hinweise</h2> + +<p>Für weitere Informationen, siehe auch die <a href="/en-US/docs/Online_and_offline_events">Online/Offline</a>-Ereignisse </p> + +<h2 id="sect6"> </h2> + +<h2 id="Verweise">Verweise</h2> + +<ul> + <li><a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html">HTML5 Rocks: Working Off the Grid With HTML5 Offline</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/offline/whats-offline/">HTML5 Rocks: "Offline": What does it mean and why should I care?</a></li> + <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/">Mozilla Blog: Offline Web Applications</a></li> +</ul> diff --git a/files/de/web/api/navigatoronline/online_and_offline_events/index.html b/files/de/web/api/navigatoronline/online_and_offline_events/index.html new file mode 100644 index 0000000000..4bceb46e36 --- /dev/null +++ b/files/de/web/api/navigatoronline/online_and_offline_events/index.html @@ -0,0 +1,120 @@ +--- +title: Online- und Offline-Events +slug: Web/API/NavigatorOnLine/Online_and_offline_events +translation_of: Web/API/NavigatorOnLine/Online_and_offline_events +--- +<p>Einige Browser implementieren <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">Online-/Offline-Events</a> basierend auf der <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WHATWG Web Applications 1.0 specification</a>.</p> + +<h2 id="Overview" name="Overview">Übersicht</h2> + +<p>Um eine gute offlinefähige Webanwendung erstellen zu können, muss die Anwendung wissen, wann sie offline ist. Zusätzlich muss die Anwendung wissen, wann die Internetverbindung wieder verfügbar ist. Die Voraussetzungen sind also:</p> + +<ol> + <li>die Anwendung erfährt, wann die Verbindung nach einem Verbindungsabbruch wieder besteht, so dass Änderungen mit dem Server abgeglichen werden können</li> + <li>die Anwendung erfährt, wann die Verbindung abbricht, um so Serveranfragen für später in eine Warteschlange einreihen zu können</li> +</ol> + +<p>Dieser Vorgang trägt dazu bei, Online-/Offline Ereignisse zu trivialisieren.</p> + +<p>Oft benötigen Webanwendungen außerdem die Möglichkeit, bestimmte Dokumente im Offline-Cache zu halten. Mehr Informationen darüber gibt es unter <a href="/en/Offline_resources_in_Firefox" title="en/Offline_resources_in_Firefox">Offline resources in Firefox</a>.</p> + +<h2 id="API" name="API">API</h2> + +<h3 id="navigator.onLine" name="navigator.onLine"><code>navigator.onLine</code></h3> + +<p><code><a href="/en/DOM/window.navigator.onLine" title="en/DOM/window.navigator.onLine">navigator.onLine</a></code> ist eine Eigenschaft mit boole'schem Wert (<code>true</code> für online, <code>false</code> für offline). Sie aktualisiert sich, sobald der Benutzer in den Offline-Modus wechselt, indem der entsprechende Menü-Eintrag angewählt wird (in Firefox: Datei -> Offline-Modus).</p> + +<p>Die Eigenschaft aktualisiert sich außerdem, sobald der Browser nicht mehr in der Lage ist, eine Verbindung herzustellen. Gemäß der Spezifikation:</p> + +<blockquote cite="http://www.whatwg.org/specs/web-apps/current-work/#offline">The <code>navigator.onLine</code> attribute must return false if the user agent will not contact the network when the user follows links or when a script requests a remote page (or knows that such an attempt would fail)...</blockquote> + +<p>Firefox 2 aktualisiert diese Eigenschaft beim Wechseln in den Offline-Modus und zurück, sowie beim Abbruch/Wiederaufbau der Netzwerkverbindung in Windows und Linux.</p> + +<p>Diese Eigenschaft existierte bereits in älteren Versionen von Firefox und Internet Explorer (die Spezifikation selbst basiert auf den vorherigen Implementierungen), sodass man sie schon jetzt einsetzen kann. Die Autoerkennung der Konnektivität wurde in Firefox 2 implementiert.</p> + +<h3 id=".22online.22_and_.22offline.22_events" name=".22online.22_and_.22offline.22_events">"<code>online</code>" und "<code>offline</code>" Events</h3> + +<p>Mit <a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_developers">Firefox 3</a> gibt es 2 neue Events: "<a href="/en-US/docs/Web/API/document.ononline"><code>online</code></a>" und "<a href="/en-US/docs/Web/API/document.onoffline"><code>offline</code></a>". Diese werden auf dem <code><body></code> jeder Sete ausgelöst, wenn der Browser zwischen Online- und Offline-Modus wechselt. Zusätzlich steigen die Events auf von <code>document.body</code>, zu <code>document</code>, und letztlich zu <code>window</code>. Beide können nicht unterbunden werden (man kann den Benutzer nicht daran hindern, online oder offline zu gehen).</p> + +<p>Die Events können auf bekannte Art und Weise registriert werden:</p> + +<ul> + <li>Verwendung von <code><a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">addEventListener</a> auf</code> <code>window</code>, <code>document</code> oder <code>document.body</code></li> + <li> + <p>Zuweisen eines JavaScript <code>Function</code> Objekts auf die Eigenschaften <code>.ononline</code> oder <code>.onoffline</code> von <code>document</code> oder <code>document.body</code> (<strong>Hinweis:</strong> <code>window.ononline</code> oder <code>window.onoffline</code> funktionieren aus Kompatibilitätsgründen nicht.)</p> + </li> + <li> + <p>Angeben der Attribute <code>ononline="..."</code> oder <code>onoffline="..."</code> an dem <code><body>-T</code>ag im HTML-Code.</p> + </li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<p>Es gibt einen <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">einfachen Test</a>, um zu überprüfen, ob die Events funktionieren:</p> + +<p>Hier ist der JavaScript-Teil:</p> + +<pre class="brush: js">window.addEventListener('load', function() { + var status = document.getElementById("status"); + + function updateOnlineStatus(event) { + var condition = navigator.onLine ? "online" : "offline"; + + status.className = condition; + status.innerHTML = condition.toUpperCase(); + + log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition); + } + + window.addEventListener('online', updateOnlineStatus); + window.addEventListener('offline', updateOnlineStatus); +});</pre> + +<p>Ein bißchen CSS:</p> + +<pre class="brush: css">#status { + position : fixed; + width: 100%; + font : bold 1em sans-serif; + color: #FFF: + padding : 0.5em +} + +#log { + padding: 2.5em 0.5em 0.5em; + font: 1em sans-serif; +} + +.online { + background: green; +} + +.offline { + background: red; +} +</pre> + +<p>Und das entsprechende HTML:<span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span></p> + +<pre class="brush: html"><div id="status"></div> +<div id="log"></div> +<p>This is a test</p> +</pre> + +<p>Hier ist das Live-Ergebnis:</p> + +<p>{{ EmbedLiveSample('Example', '100%', '150') }}</p> + +<h2 id="References" name="References">Hinweise</h2> + +<p>Wenn die API im Browser nicht implementiert ist, gibt es andere Möglichkeiten herauszufinden, ob der Benutzer offline ist: zum Beispiel durch das Reagieren auf <a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-appcache">AppCache error Ereignissen</a> oder auf<a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-xml-http-request"> Antworten von XMLHttpRequest</a>.</p> + +<h2 id="References" name="References">Verweise</h2> + +<ul> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">'Online/Offline events' section from the WHATWG Web Applications 1.0 Specification</a></li> + <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">The bug tracking online/offline events implementation in Firefox</a> and a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">follow-up</a></li> + <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">A simple test case</a></li> + <li><a class="external" href="http://ejohn.org/blog/offline-events/">An explanation of Online/Offline events</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li> +</ul> diff --git a/files/de/web/api/node/appendchild/index.html b/files/de/web/api/node/appendchild/index.html new file mode 100644 index 0000000000..519f6f9a0d --- /dev/null +++ b/files/de/web/api/node/appendchild/index.html @@ -0,0 +1,144 @@ +--- +title: Node.appendChild() +slug: Web/API/Node/appendChild +tags: + - API + - DOM + - Method + - Node + - Reference +translation_of: Web/API/Node/appendChild +--- +<div>{{APIRef("DOM")}}</div> + +<p>Die <code><strong>Node.appendChild()</strong></code> Methode fügt einen Kind-Knoten am Ende der Liste aller Kinder des angegebenen Eltern-Knotens an (to append = anhängen).</p> + +<p>Wenn das gegebene Kind eine Referenz zu einem existierenden Knoten im Dokument ist, wird <code>appendChild()</code> es von der aktuellen Position zu der neuen Position bewegen. Es gibt also keine Notwendigkeit den Knoten erst zu entfernen, weil ein Knoten in einem Dokument nicht gleichzeitig an zwei Stellen vorkommen kann. Also, wenn der Knoten bereits einen Eltern-Knoten hat, wird der Knoten zuerst entfernt und dann erneut am Ende der Kind-Knoten-Liste angehängt.</p> + +<p>Das {{domxref("Node.cloneNode()")}} kann genutzt werden um eine Kopie des Knotens zu machen, bevor es an einen neuen Eltern-Knoten angehängt wird. Zu beachten: Kopien die mit <code>cloneNode</code> gemacht wurden, werden nicht automatisch Synchron gehalten.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>aChild</em> = <em>element</em>.appendChild(<em>aChild</em>);</pre> + +<h2 id="Example" name="Example">Parameter</h2> + +<p><code>aChild</code></p> + +<p>Der Knoten, der an den gegebenen Eltern-Knoten angehängt wird (für gewöhnlich ein Element).</p> + +<h2 id="Example" name="Example">Rückgabewert</h2> + +<p>Der Rückgabewert ist das angehängte Kindelement (<code>aChild</code>), außer wenn aChild ein {{domxref("DocumentFragment")}} ist. In diesem Fall wird ein {{domxref("DocumentFragment")}} zurückgegeben.</p> + +<h2 id="Example" name="Example">Anmerkungen</h2> + +<p>Eine Verkettung kann anders ablaufen als erwartet, da appendChild() das Kindelement zurück gibt.</p> + +<pre class="line-numbers language-html"><code class="language-html">var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));</code></pre> + +<p>Setzt nur <code>aBlock</code> auf <code><b></b></code>, was möglicherweise nicht das gewünschte ist.</p> + +<h2 id="Example" name="Example">Beispiele</h2> + +<pre class="brush:js">// Erstellen Sie ein neues Absatz-Element und fügen Sie es an das Ende des Dokument-Körpers (body) +var p = document.createElement("p"); +document.body.appendChild(p);</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('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change from {{SpecName("DOM3 Core")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>No change from {{SpecName("DOM2 Core")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>No change from {{SpecName("DOM1")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM1')}}</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</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>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> + <li>{{domxref("ParentNode.append()")}}</li> +</ul> diff --git a/files/de/web/api/node/childnodes/index.html b/files/de/web/api/node/childnodes/index.html new file mode 100644 index 0000000000..afbddd274e --- /dev/null +++ b/files/de/web/api/node/childnodes/index.html @@ -0,0 +1,70 @@ +--- +title: Node.childNodes +slug: Web/API/Node/childNodes +translation_of: Web/API/Node/childNodes +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Allgemein</h3> +<p><code>childNodes</code> gibt eine {{ domxref('NodeList') }}, welche alle Kindknoten (<code>childNodes</code>) eines bestimmten HTML-Elements enthält, zurück.</p> +<h3 id="Syntax" name="Syntax">Syntax</h3> +<pre class="eval">var <var>nodeList</var> = referenzElement.childNodes; +</pre> +<p><var>nodeList</var> ist eine Liste, die alle Kindknoten eines bestimmten Elements der Reihenfolge nach enthält. Falls das Element keine Kindknoten enthält, gibt <code>childNodes</code> eine leere <code>NodeList</code> zurück.<br> + <br> + Diese Eigenschaft kann nur ausgelesen werden (read-only).</p> +<h3 id="Beispiel" name="Beispiel">Beispiel</h3> +<p>Folgendes HTML-Dokument liegt vor:</p> +<pre class="brush:html"><!DOCTYPE html> +<html> + <body> + <h3>Neue Mitarbeiter eingestellt</h3> + <p>Dank der guten Konjunktur letzten Jahres [...]</p> + </body> +</html> +</pre> +<p>Nun sollen die <code>childNodes</code> von <code><body></code> ausgelesen und in einer Liste namens <code><var>nodeList</var></code> gespeichert werden:</p> +<pre class="brush:javascript">var bd = document.body; + +// Zuerst werden wir überprüfen, ob das <body>-Element überhaupt Kindknoten hat. +if (bd.hasChildNodes()) { + // Nun werden wir die Eigenschaft childNodes auslesen + var nodeList = bd.childNodes; + + for(var i = 0; i < nodeList.length; i++) { + // So wird nodeList durchlaufen und folgender Code wird an jedem Eintrag ausgeführt + // In diesem Fall soll der Name ausgegeben werden + alert(nodeList[i].nodeName); + } +} +</pre> +<p><br> + Diese Liste ist ständig aktuell. Jede Änderung am referenz-Element (hier <code><body></code>) bewirkt eine aktualisierung der Liste.<br> + Wenn Sie also beispielsweise das erste Element in der Liste löschen, rückt automatisch das zweite Element an Stelle des Ersten.<br> + Deshalb lassen sich z.B. auf diese Art alle Kindknoten eines Elements löschen:</p> +<pre class="brush:javascript">while(bd.firstChild) { + bd.removeChild(bd.firstChild); +} +</pre> +<h3 id="Notes" name="Notes">Anmerkungen</h3> +<p>Mit <code>childNodes</code> erhalten Sie eine Liste <strong>aller</strong> Kindknoten, <strong>einschließlich</strong> derer vom Typ {{ domxref("CharacterData") }}. Wenn Sie diese Datenknoten nicht im Index haben wollen, verwenden Sie statt <code>childNodes</code> die Eigenschaft {{ domxref('Element.children') }}.</p> +<p>Die Einträge in <var><code>nodeList</code></var> sind Objekte, keine Zeichenketten. Für diese Objekte gelten wiederum alle Methoden und Eigenschaften von {{ domxref("Node") }}. Um also Daten aus diesen Objekten auszulesen, müssen deren Eigenschaften ausgelesen werden. Um beispielsweise den Namen eines in <var><code>nodeList</code></var> aufgeführten Elements auszulesen, muss man die eigenschaft <code>nodeName</code> auslesen:</p> +<pre class="brush:javascript">var name = nodeList[i].nodeName;</pre> +<p>Das <code>document</code> Objekt hat zwei Kindknoten: Die <code>Doctype</code>-Deklaration und das <code>root</code>-Element, das eine Eigenschaft von {{ domxref("Document") }} ist.<br> + Folgendermaßen kann darauf zugegriffen werden:</p> +<pre class="brush:javascript">var root = document.documentElement;</pre> +<p>In (X)HTML-Dokumenten stellt das <code>HTML</code>-Element das <code>root</code>-Element dar.</p> +<h4 id="See_Also" name="See_Also">Siehe auch</h4> +<ul> + <li>{{ domxref("Node") }}</li> + <li>{{ domxref("Node.firstChild") }}</li> + <li>{{ domxref("Node.nodeName") }}</li> + <li>{{ domxref('Element.children') }}</li> + <li>{{ domxref("CharacterData") }}</li> +</ul> +<h3 id="Specification" name="Specification">Spezifikationen</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1451460987">W3C DOM 2 Core: childNodes</a> (en)</li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1451460987">W3C DOM 3 Core: childNodes</a> (en)</li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">W3C DOM 3 NodeList interface</a> (en)</li> +</ul> +<p>{{ languages( { "fr": "fr/DOM/element.childNodes", "ja": "ja/DOM/element.childNodes", "pl": "pl/DOM/element.childNodes", "zh-cn": "cn/DOM/element.childNodes", "de": "de/DOM/element.childNodes" } ) }}</p> diff --git a/files/de/web/api/node/clonenode/index.html b/files/de/web/api/node/clonenode/index.html new file mode 100644 index 0000000000..d51a489a69 --- /dev/null +++ b/files/de/web/api/node/clonenode/index.html @@ -0,0 +1,135 @@ +--- +title: Node.cloneNode +slug: Web/API/Node/cloneNode +translation_of: Web/API/Node/cloneNode +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Summary" name="Summary">Übersicht</h2> + +<p>Gibt ein Duplikat des Knotens, auf dem diese Methode aufgerufen wurde, zurück.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>dupNode</var> = <var>node</var>.cloneNode(<var>deep</var>); +</pre> + +<dl> + <dt><code>node</code></dt> + <dd>Der Knoten, welcher dupliziert werden soll.</dd> + <dt><code>dupNode</code></dt> + <dd>Der duplizierte Knoten.</dd> + <dt><code>deep</code></dt> + <dd><code>true</code> wenn die Kindknoten des Knotens ebenfalls dupliziert werden sollen, <code>false</code> wenn nur der Knoten dupliziert werden soll.</dd> +</dl> + +<div class="note"> +<p><strong>Hinweis:</strong> In der DOM4 Spezifikation (implementiert in Gecko 13.0 {{geckoRelease(13)}}), ist das Argument <code>deep</code> optional. Es ist dann laut Spezifikation <strong><code>true</code></strong>.</p> + +<p>Leider wurde dies in der letzten Spezifikation geändert, sodass der Standardwert nun <strong><code>false</code></strong> ist. Auch wenn es immer noch optional ist, sollte man das Argument <code>deep</code> aus diesen Kompatibilitätsgründen setzen. Ab Gecko 28.0 {{geckoRelease(28)}} warnt die Konsole den Entwickler, wenn das Argument nicht gesetzt ist.</p> +</div> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: js"> var p = document.getElementById("para1"); + var p_prime = p.cloneNode(true); +</pre> + +<h2 id="Notes" name="Notes">Hinweise</h2> + +<p id="not-event-listeners">Der duplizierte Knoten enthält alle Attribute und deren Werte, aber nicht die Eventlistener welche via <a href="/en-US/docs/DOM/element.addEventListener" title="/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> oder über die jeweilige Elementeigenschaft (z.B. <code>node.onclick = function</code>) gesetzt wurden. Im Fall eines <code><canvas></code>-Elements wird das gezeichnete Bild <em>nicht</em> mitkopiert.</p> + +<p>Der mit <code>cloneNode()</code> duplizierte Knoten ist noch nicht Teil des Dokuments und hat keinen Elternknoten bis er mithilfe der Methode {{domxref("Node.appendChild()")}} oder einer anderen vergleichbaren Methode in das Dokument eingefügt wird.</p> + +<p>Wenn <code>deep</code> auf <code>false</code> gesetzt ist, werden die Kindknoten nicht mitkopiert. Dies schließt ebenfalls alle Textelemente mit ein, da diese in einem oder mehreren Kindknoten enthalten sind.</p> + +<div class="warning"><strong>Warnung:</strong> Die Verwendung von <code>cloneNode()</code> kann dazu führen, dass die selbe ID im Dokument mehrmals existiert.</div> + +<p>Wenn der Originalknoten eine ID hat, sollte diese im dupliziertem Knoten geändert oder gelöscht werden, um Probleme zu vermeiden. Dies sollte auch für das <code>name</code> Attribut überlegt werden.</p> + +<p>Um einen Knoten aus einem anderen Dokument zu kopieren sollte die {{domxref("Document.importNode()")}} verwendet werden.</p> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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><code>deep</code> as an optional parameter</td> + <td> + <p>Ja</p> + + <p>(Standard: <code>false</code>)</p> + </td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td> + <p>Yes</p> + + <p>(default is <code>false</code>)</p> + </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome für 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> + <tr> + <td><code>deep</code> as an optional parameter</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<ul> + <li>{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}</li> + <li>{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}</li> + <li><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode" title="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode">DOM4: cloneNode</a> (draft)</li> +</ul> diff --git a/files/de/web/api/node/firstchild/index.html b/files/de/web/api/node/firstchild/index.html new file mode 100644 index 0000000000..38703904ec --- /dev/null +++ b/files/de/web/api/node/firstchild/index.html @@ -0,0 +1,62 @@ +--- +title: Node.firstChild +slug: Web/API/Node/firstChild +translation_of: Web/API/Node/firstChild +--- +<p>{{ ApiRef() }}</p> + +<h2 id="Allgemein" name="Allgemein">Allgemein</h2> + +<p><code>firstChild</code> gibt den ersten Kindknoten (<code>childNode</code>) eines Datenknotens zurück.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval">var ersterKindknoten = element.firstChild; +</pre> + +<p>Die Variable <var>ersterKindknoten</var> enthält einen Datenknoten.</p> + +<h2 id="Beispiel" name="Beispiel">Beispiel</h2> + +<p>Folgendes HTML-Dokument ist gegeben:</p> + +<pre class="brush:html"><!DOCTYPE html> +<html> + <body> + <h3>Texte</h3> + <p>Hier steht Text!</p> + </body> +</html> +</pre> + +<p>Um auf das erste Kindelement zuzugreifen, kann man folgenden Code verwenden:</p> + +<pre class="brush:javascript">var ersterKindknoten = document.body.firstChild; +</pre> + +<p>In diesem Fall ist der erste Kindknoten ein Textknoten, da sich zwischen dem Schlusstag des <code>Paragraphs</code> und dem Start-Tag von <code><body></code> ein Zeilenumbruch und vier Leerzeichen befinden.</p> + +<h2 id="Anmerkungen" name="Anmerkungen">Anmerkungen</h2> + +<ul> + <li>Gibt <code>null</code> zurück, wenn der gegebene Datenknoten keine Kindknoten hat.</li> + <li><code>firstChild</code> berücksichtigt wie bereits erwähnt auch <code>TextNodes</code>. Daher wird jede Art von Whitespace innerhalb eines Elements als Kindknoten interpretiert. Im obigen Beispiel geschieht das durch die Einrückungen im HTML-Dokument. Falls Sie Textknoten als Rückgabewert ausschließen, und nur HTML-Elemente erhalten wollen, verwenden Sie statt <code>firstChild</code> bitte {{ domxref("Element.firstElementChild") }}.</li> +</ul> + +<h2 id="Spezifikationen" name="Spezifikationen">Spezifikationen</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a> (en)</li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a> (en)</li> +</ul> + +<h2 id="Siehe_auch">Siehe auch:</h2> + +<ul> + <li>{{ domxref("Node") }}</li> + <li>{{ domxref("Node.lastChild") }}</li> + <li>{{ domxref("Node.previousSibling") }}</li> + <li>{{ domxref("Node.childNodes") }}</li> +</ul> + +<p>{{ languages( { "fr": "fr/DOM/element.firstChild", "ja": "ja/DOM/element.firstChild", "pl": "pl/DOM/element.firstChild", "zh-cn": "zh-cn/DOM/Node.firstChild" } ) }}</p> diff --git a/files/de/web/api/node/haschildnodes/index.html b/files/de/web/api/node/haschildnodes/index.html new file mode 100644 index 0000000000..1ecfb52b48 --- /dev/null +++ b/files/de/web/api/node/haschildnodes/index.html @@ -0,0 +1,120 @@ +--- +title: Node.hasChildNodes() +slug: Web/API/Node/hasChildNodes +tags: + - API DOM Methode Node +translation_of: Web/API/Node/hasChildNodes +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>Die <code><strong>Node.hasChildNodes()</strong></code> Methode liefert einen <strong>Boolean</strong> Wert der anzeigt ob die aktuelle {{domxref("Node")}} <a href="/en-US/docs/Web/API/Node.childNodes" title="DOM/Node.childNodes">child nodes</a> hat oder nicht.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><em>result</em> = <em>node</em>.hasChildNodes();</code></pre> + +<dl> + <dt><code>result</code></dt> + <dd>enthält den return Wert <code>true</code> oder <code>false</code>.</dd> +</dl> + +<h2 id="Example" name="Example">Beispiele</h2> + +<p>Das nächste Beispiel entfernt die erste child node innerhalb dem element mit der id <code>"foo"</code> wenn foo child nodes enthält.</p> + +<pre class="brush:js">var foo = document.getElementById("foo"); +if (foo.hasChildNodes()) { + // do something with 'foo.childNodes' +} +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush:js">;(function(prototype) { + prototype.hasChildNodes = prototype.hasChildNodes || function() { + return !!this.firstChild; + } +})(Node.prototype); +</pre> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Es gibt unterschiedliche Wege herauszufinden ob die node eine child node enthält.</p> + +<ul> + <li>node.hasChildNodes()</li> + <li>node.firstChild != null (or just node.firstChild)</li> + <li>node.childNodes && node.childNodes.length (or node.childNodes.length > 0)</li> +</ul> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a href="https://dom.spec.whatwg.org/#dom-node-haschildnodes">WHATWG: hasChildNodes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes</a></li> +</ul> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilitä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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>7.0</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>Edge</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> + +<p> </p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{domxref("Node.childNodes")}}</li> + <li>{{domxref("Node.hasAttributes")}}</li> +</ul> diff --git a/files/de/web/api/node/index.html b/files/de/web/api/node/index.html new file mode 100644 index 0000000000..9f725381a2 --- /dev/null +++ b/files/de/web/api/node/index.html @@ -0,0 +1,365 @@ +--- +title: Node +slug: Web/API/Node +translation_of: Web/API/Node +--- +<div>{{APIRef("DOM")}}</div> + +<p>A <strong><code>Node</code></strong> is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.</p> + +<p>The following interfaces all inherit from <code>Node</code> its methods and properties: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p> + +<p>These interfaces may return null in particular cases where the methods and properties are not relevant. They may throw an exception - for example when adding children to a node type for which no children can exist.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last <code>'/'</code>.</dd> + <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}</dt> + <dd>(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.</dd> + <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt> + <dd>Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{domxref("NodeList")}} object is automatically updated.</dd> + <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd> + <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd> + <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{ gecko_minversion_inline("1.9.2") }}<br> + Though recent specifications require <code>localName</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> + <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>The namespace URI of this node, or <code>null</code> if it is no namespace. In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2") }}<br> + Though recent specifications require <code>namespaceURI</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> + <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd> + <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the name of the <code>Node</code>. The structure of the name will differ with the name type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like <code>'audio'</code> for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the <code>'#text'</code> string, or a {{domxref("Document")}} node will have the <code>'#document'</code> string.</dd> + <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}</dt> + <dd>A {{ Interface("nsIPrincipal") }} representing the node principal.</dd> + <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt> + <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are: + <table class="standard-table"> + <tbody> + <tr> + <th scope="col">Name</th> + <th scope="col">Value</th> + </tr> + <tr> + <td><code>ELEMENT_NODE</code></td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td> + <td><code>2</code></td> + </tr> + <tr> + <td><code>TEXT_NODE</code></td> + <td><code>3</code></td> + </tr> + <tr> + <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td> + <td><code>4</code></td> + </tr> + <tr> + <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td> + <td><code>6</code></td> + </tr> + <tr> + <td><code>PROCESSING_INSTRUCTION_NODE</code></td> + <td><code>7</code></td> + </tr> + <tr> + <td><code>COMMENT_NODE</code></td> + <td><code>8</code></td> + </tr> + <tr> + <td><code>DOCUMENT_NODE</code></td> + <td><code>9</code></td> + </tr> + <tr> + <td><code>DOCUMENT_TYPE_NODE</code></td> + <td><code>10</code></td> + </tr> + <tr> + <td><code>DOCUMENT_FRAGMENT_NODE</code></td> + <td><code>11</code></td> + </tr> + <tr> + <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td> + <td><code>12</code></td> + </tr> + </tbody> + </table> + </dd> + <dt>{{domxref("Node.nodeValue")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the value of an object. For most <code>Node</code> type, this returns <code>null</code> and any set operation is ignored. For nodes of type <code>TEXT_NODE</code> ({{domxref("Text")}} objects), <code>COMMENT_NODE</code> ({{domxref("Comment")}} objects), and <code>PROCESSING_INSTRUCTION_NODE</code> ({{domxref("ProcessingInstruction")}} objects), the value corresponds to the text data contained in the object.</dd> + <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt> + <dd>Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns <code>null</code>.</dd> + <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns <code>null</code>.</dd> + <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt> + <dd>Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns <code>null</code>.</dd> + <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.<br> + Though recent specifications require <code>prefix</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> + <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd> + <dt>{{domxref("Node.textContent")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the textual content of an element and all its descendants.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{domxref("Node.appendChild()")}}</dt> + <dd>Insert a {{domxref("Node")}} as the last child node of this element.</dd> + <dt>{{domxref("Node.cloneNode()")}}</dt> + <dd>Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd> + <dt>{{domxref("Node.compareDocumentPosition()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.contains()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt> + <dd>...</dd> + <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt> + <dd>Allows a user to get some {{domxref("DOMUserData")}} from the node.</dd> + <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating if the element has any attributes, or not.</dd> + <dt>{{domxref("Node.hasChildNodes()")}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating if the element has any child nodes, or not.</dd> + <dt>{{domxref("Node.insertBefore()")}}</dt> + <dd>Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.</dd> + <dt>{{domxref("Node.isDefaultNamespace()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.isEqualNode()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.isSameNode()")}} {{obsolete_inline}}</dt> + <dd> </dd> + <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt> + <dd>Returns a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a> flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.</dd> + <dt>{{domxref("Node.lookupPrefix()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.normalize()")}}</dt> + <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd> + <dt>{{domxref("Node.removeChild()")}}</dt> + <dd>Removes a child node from the current element, which must be a child of the current node.</dd> + <dt>{{domxref("Node.replaceChild()")}}</dt> + <dd>Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.</dd> + <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt> + <dd>Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.</dd> + <dd> </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Browse_all_child_nodes">Browse all child nodes</h3> + +<p>The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).</p> + +<pre class="brush: js">function DOMComb (oParent, oCallback) { + if (oParent.hasChildNodes()) { + for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) { + DOMComb(oNode, oCallback); + } + } + oCallback.call(oParent); +}</pre> + +<h4 id="Syntax">Syntax</h4> + +<pre>DOMComb(parentNode, callbackFunction);</pre> + +<h4 id="Description">Description</h4> + +<p>Recursively cycle all child nodes of <code>parentNode</code> and <code>parentNode</code> itself and execute the <code>callbackFunction</code> upon them as <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a> objects.</p> + +<h4 id="Parameters">Parameters</h4> + +<dl> + <dt><code>parentNode</code></dt> + <dd>The parent node (<code><strong>Node</strong> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>).</dd> + <dt><code>callbackFunction</code></dt> + <dd>The callback function (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd> +</dl> + +<h4 id="Sample_usage">Sample usage</h4> + +<p>The following example send to the <code>console.log</code> the text content of the body:</p> + +<pre class="brush: js">function printContent () { + if (this.nodeValue) { console.log(this.nodeValue); } +} + +onload = function () { + DOMComb(document.body, printContent); +};</pre> + +<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3> + +<pre class="brush: js">Element.prototype.removeAll = function () { + while (this.firstChild) { this.removeChild(this.firstChild); } + return this; +};</pre> + +<h4 id="Sample_usage_2">Sample usage</h4> + +<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */ +document.body.removeAll();</pre> + +<h2 id="Specifications">Specifications</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('DOM WHATWG', '#interface-node', 'Node')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Removed the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> + Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>isSameNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{domxref("Document")}}.<br> + The <code>normalize()</code> method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.<br> + Added the following methods: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br> + Added the following properties: <code>baseURI</code> and <code>textContent</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>The <code>ownerDocument</code> property was slightly modified so that {{domxref("DocumentFragment")}} also returns <code>null</code>.<br> + Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> + Added the following methods: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p> </p> + +<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>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>getFeature()</code>{{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.<br> + Removed in {{CompatGeckoDesktop("7.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>getUserData()</code>, <code>setUserData()</code> and <code>hasAttributes()</code> {{deprecated_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> + Removed in {{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>isSameNode()</code> {{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("9.0")}}.<br> + Removed in {{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>isSupported()</code> {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> + Removed in {{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>attributes</code></td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> + Moved to {{domxref("Element")}} in {{CompatGeckoDesktop("22.0")}}</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>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>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>getFeature()</code>{{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.<br> + Removed in {{CompatGeckoDesktop("7.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Webkit and Blink incorrectly do not make <code>Node</code> inherit from {{domxref("EventTarget")}}.</p> diff --git a/files/de/web/api/node/innertext/index.html b/files/de/web/api/node/innertext/index.html new file mode 100644 index 0000000000..bd1594471a --- /dev/null +++ b/files/de/web/api/node/innertext/index.html @@ -0,0 +1,90 @@ +--- +title: Node.innerText +slug: Web/API/Node/innerText +tags: + - API DOM Property Reference +translation_of: Web/API/HTMLElement/innerText +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p><code><strong>Node.innerText</strong></code> ist eine Eigenschaft die die "gerenderten" Text Inhalte einer node und ihrer nachfahren representiert. Als getter nähert es sich dem Text an, den ein User erhalten würde wenn sie/er den Inhalt des Elementes mit dem Kursor highlighten und dann zum Clipboard kopieren würde. Dieses Feature wurde ursprünglich von Internet Explorer eingeführt, und wurde förmlich in den HTML standards von 2016 spezifiziert nachdem es von allen Hauptbrowsern übernommen wurde.</p> + +<p>{{domxref("Node.textContent")}} ist eine etwas ähnliche Alternative. Es gibt allerdings wichtige Unterschiede zwischen den beiden.</p> + +<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('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> + <p>Eingeführt, basiert auf dem <a href="https://github.com/rocallahan/innerText-spec">draft of the innerText specification</a>. Siehe <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> und <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> für die Historie.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Kompatibilitä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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>{{ CompatGeckoDesktop(45) }}</td> + <td>6</td> + <td>9.6 (probably earlier)</td> + <td>3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>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>2.3 (probably earlier)</td> + <td>{{ CompatGeckoMobile(45) }}</td> + <td>10 (probably earlier)</td> + <td>12</td> + <td>4.1 (probably earlier)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("HTMLElement.outerText")}}</li> + <li>{{domxref("Element.innerHTML")}}</li> +</ul> diff --git a/files/de/web/api/node/lastchild/index.html b/files/de/web/api/node/lastchild/index.html new file mode 100644 index 0000000000..9b6f98e59e --- /dev/null +++ b/files/de/web/api/node/lastchild/index.html @@ -0,0 +1,41 @@ +--- +title: Node.lastChild +slug: Web/API/Node/lastChild +translation_of: Web/API/Node/lastChild +--- +<p>{{ ApiRef() }}</p> +<h2 id="Allgemein" name="Allgemein">Allgemein</h2> +<p><code>lastChild</code> gibt den letzten Kindknoten (<code>childNode</code>) eines Datenknotens zurück.</p> +<h2 id="Syntax" name="Syntax">Syntax</h2> +<pre class="eval">var letzterKindknoten = element.lastChild; +</pre> +<p>Die Variable <var>letzterKindknoten</var> enthält einen Datenknoten.</p> +<h2 id="Beispiel" name="Beispiel">Beispiel</h2> +<p>Folgendes HTML-Dokument ist gegeben:</p> +<pre class="brush:html"><!DOCTYPE html> +<html> + <body> + <h3>Texte</h3> + <p>Hier steht Text!</p> + </body> +</html> +</pre> +<p>Um auf das letzte Kindelement zuzugreifen, kann man folgenden Code verwenden:</p> +<pre class="brush:javascript">var letzterKindknoten = document.body.lastChild; +</pre> +<p>In diesem Fall ist der letzte Kindknoten ein Textknoten, da sich zwischen dem Schlusstag des <code>Paragraphs</code> und dem Schlusstag des <code>body</code>-Tags ein Zeilenumbruch und zwei Leerzeichen befinden.</p> +<h2 id="Anmerkungen" name="Anmerkungen">Anmerkungen</h2> +<ul> + <li>Gibt <code>null</code> zurück, wenn der gegebene Datenknoten keine Kindknoten hat.</li> + <li><code>lastChild</code> berücksichtigt wie bereits erwähnt auch <code>TextNodes</code>. Daher wird jede Art von Whitespace innerhalb eines Elements als Kindknoten interpretiert. Im obigen Beispiel geschieht das durch die Einrückungen im HTML-Dokument. Falls Sie Textknoten als Rückgabewert ausschließen, und nur HTML-Elemente erhalten wollen, verwenden Sie statt <code>lastChild</code> bitte {{ domxref("Element.lastElementChild") }}.</li> +</ul> +<h2 id="Spezifikation" name="Spezifikation">Spezifikation</h2> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB">lastChild</a> (en)</p> +<h2 id="Siehe_auch">Siehe auch:</h2> +<ul> + <li>{{ domxref("Node") }}</li> + <li>{{ domxref("Node.firstChild") }}</li> + <li>{{ domxref("Node.nextSibling") }}</li> + <li>{{ domxref("Node.childNodes") }}</li> +</ul> +<p>{{ languages( { "fr": "fr/DOM/element.lastChild", "ja": "ja/DOM/element.lastChild", "pl": "pl/DOM/element.lastChild" , "zh-cn": "zh-cn/DOM/Node.lastChild" } ) }}</p> diff --git a/files/de/web/api/node/nextsibling/index.html b/files/de/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..414e75a8ce --- /dev/null +++ b/files/de/web/api/node/nextsibling/index.html @@ -0,0 +1,60 @@ +--- +title: Node.nextSibling +slug: Web/API/Node/nextSibling +translation_of: Web/API/Node/nextSibling +--- +<p>{{ ApiRef() }}</p> +<h3 id="Allgemein" name="Allgemein">Allgemein</h3> +<p>Gibt den Datenknoten zurück, der entsprechend der <code>childNodes</code>-Liste des Elternelements direkt auf den gegebenen Datenknoten folgt. Falls der übergebene Knoten bereits der letzte dieser Liste ist, wird <code>null</code> zurückgegeben.</p> +<h3 id="Syntax" name="Syntax">Syntax</h3> +<pre class="eval">nextNode = node.nextSibling; +</pre> +<h3 id="Beispiel" name="Beispiel">Beispiele</h3> +<p>Folgendes HTML-Dokument ist gegeben:</p> +<pre class="brush:html"><!DOCTYPE html> +<html> + <body> + <div>Das ist eine DIV-Box</div> + <p>Hier steht Text!</p> + </body> +</html> +</pre> +<p>Mit folgendem Code kann der Name des Geschwisterelements der DIV-Box ermittelt werden:</p> +<pre class="brush:javascript">// Diese Variable speichert eine Referenz auf das Erste Element, das <body> enthält, also die DIV-Box + var element = document.body.children[0]; + + // Nun ermitteln wir das folgende Element + var folgeElement = element.nextSibling; + + // Ausgabe des nodeNames + alert(folgeElement.nodeName); +</pre> +<p><strong>Erläuterung:</strong></p> +<p>Die Variable <code><var>element</var></code> enthält das erste Kindelement des <code><body></code>-Tags, also die <code>DIV</code>-Box.<br> + <code><var>folgeElement</var></code> speichert den ersten Geschwisterknoten der DIV-Box. In diesem Fall ist das ein Textknoten der einen Zeilenvorschub und vier Leerzeichen enthält, die sich in dem HTML-Dokument zwischen dem <code>></code> der DIV-Box und dem <code><</code> des <code><p></code> befinden. Das <code>alert()</code>-Fenster gibt somit <code>#text</code> aus.</p> +<p>Folgendermaßen können alle nachfolgenden Geschwisterknoten ermittelt werden:</p> +<pre class="brush:javascript">var element = document.body.children[0]; +var liste = []; + +while(element.nextSibling) { + var element = liste[liste.push(element.nextSibling)-1]; +} +</pre> +<p>Das Skript erzeugt ein Array <code>liste</code> mit folgendem Inhalt:</p> +<pre class="eval">Array[3] + 0: Text + 1: HTMLParagraphElement + 2: Text +</pre> +<h3 id="Anmerkungen">Anmerkungen</h3> +<p>Am obigen Beispiel lässt sich klar erkennen, dass einige Male ein <code>#text</code>-Knoten im Index auftaucht. Das kommt immer dann vor, wenn sich zwischen den Elementen Whitespace befindet. Da die Eigenschaft <code>nextSibling</code> auch Textknoten berücksichtigt, landet dieser Whitespace letztendlich als Solcher im Index. Falls dies nicht erwünscht ist, sollten Sie statt <code>nextSibling</code> die Eigenschaft {{ domxref("Element.nextElementSibling") }} verwenden</p> +<h3 id="Specification" name="Specification">Spezifikationen</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a> (en)</li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a> (en)</li> +</ul> +<p>{{ languages( { "fr": "fr/DOM/element.nextSibling", "ja": "ja/DOM/element.nextSibling", "pl": "pl/DOM/element.nextSibling" } ) }}</p> +<h3 id="Siehe_auch">Siehe auch</h3> +<ul> + <li><a href="/En/DOM/Element.nextElementSibling" title="En/DOM/Element.nextElementSibling">Element.nextElementSibling</a></li> +</ul> diff --git a/files/de/web/api/node/nodevalue/index.html b/files/de/web/api/node/nodevalue/index.html new file mode 100644 index 0000000000..ab9720812e --- /dev/null +++ b/files/de/web/api/node/nodevalue/index.html @@ -0,0 +1,88 @@ +--- +title: Node.nodeValue +slug: Web/API/Node/nodeValue +tags: + - API DOM Gecko Property +translation_of: Web/API/Node/nodeValue +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>Die <code><strong>Node.nodeValue</strong></code> Eigenschaft gibt den Wert der aktuellen Node zurück oder setzt ihn.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>value</var> = <var>node</var>.nodeValue; +</pre> + +<p><code>value</code> ist ein string der den Inhalt, falls es ihn gibt, der aktuellen node enthält.</p> + +<h2 id="Notes" name="Notes">Notizen</h2> + +<p>Für das Dokument selbst, gibt <code>nodeValue</code> <code>null</code> zurück. Für Text, Kommentar, und CDATA nodes, gibt <code>nodeValue</code> den Inhalt der node zurück. Für attribute nodes, wird der Inhalt des Attributes zurückgegeben.</p> + +<p>Die folgende Tabelle zeigt die return Werte der unterschiedlichen Elemente:</p> + +<table> + <thead> + <tr> + <th>Attr</th> + <th>value of attribute</th> + </tr> + </thead> + <tbody> + <tr> + <td>CDATASection</td> + <td>Inhalt der CDATA Section</td> + </tr> + <tr> + <td>Comment</td> + <td>Inhalt des comments</td> + </tr> + <tr> + <td>Document</td> + <td>null</td> + </tr> + <tr> + <td>DocumentFragment</td> + <td>null</td> + </tr> + <tr> + <td>DocumentType</td> + <td>null</td> + </tr> + <tr> + <td>Element</td> + <td>null</td> + </tr> + <tr> + <td>NamedNodeMap</td> + <td>null</td> + </tr> + <tr> + <td>EntityReference</td> + <td>null</td> + </tr> + <tr> + <td>Notation</td> + <td>null</td> + </tr> + <tr> + <td>ProcessingInstruction</td> + <td>Gesamter Inhalt, ausgenommen des target</td> + </tr> + <tr> + <td>Text</td> + <td>Inhalt der text node</td> + </tr> + </tbody> +</table> + +<p>Wenn <code>nodeValue</code> als <code>null</code> definiert wird, hat das null setzen keine Auswirkung.</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080">DOM Level 2 Core: Node.nodeValue</a></li> +</ul> diff --git a/files/de/web/api/node/normalize/index.html b/files/de/web/api/node/normalize/index.html new file mode 100644 index 0000000000..e49f29e397 --- /dev/null +++ b/files/de/web/api/node/normalize/index.html @@ -0,0 +1,49 @@ +--- +title: Node.normalize() +slug: Web/API/Node/normalize +tags: + - API + - DOM + - Méthode + - Node + - Referenz +translation_of: Web/API/Node/normalize +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>Die <code><strong>Node.normalize()</strong></code> Methode fügt die ausgewählte Node und all Ihre Kindelemente in eine "normalisierte" Form. In einer normalisierten Node sind keine Textnodes leer und es gibt keine parallel existierenden Textnodes.</p> + +<h2 id="Syntax" name="Syntax">Schreibweise</h2> + +<pre class="syntaxbox"><em>element</em>.normalize(); +</pre> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:js">var wrapper = document.createElement("div"); + +wrapper.appendChild( document.createTextNode("Teil 1 ") ); +wrapper.appendChild( document.createTextNode("Teil 2 ") ); + +// Her wäre: wrapper.childNodes.length === 2 +// wrapper.childNodes[0].textContent === "Teil 1 " +// wrapper.childNodes[1].textContent === "Teil 2 " + +wrapper.normalize(); + +// Jetzt: wrapper.childNodes.length === 1 +// wrapper.childNodes[0].textContent === "Teil 1 Teil 2 "</pre> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize</a></li> +</ul> + +<h2 id="See_also" name="See_also">Verwandte Themen</h2> + +<ul> + <li><a href="/en-US/docs/DOM/Text.splitText" title="DOM/Text.splitText"><code>Text.splitText</code></a></li> +</ul> diff --git a/files/de/web/api/node/parentnode/index.html b/files/de/web/api/node/parentnode/index.html new file mode 100644 index 0000000000..6481d10a86 --- /dev/null +++ b/files/de/web/api/node/parentnode/index.html @@ -0,0 +1,79 @@ +--- +title: Node.parentNode +slug: Web/API/Node/parentNode +translation_of: Web/API/Node/parentNode +--- +<p>{{ ApiRef() }}</p> +<h2 id="Allgemein" name="Allgemein">Allgemein</h2> +<p>Gibt das Elternelement des gegebenen Datenknotens, entsprechend des DOM-Baums zurück.</p> +<h2 id="Syntax" name="Syntax">Syntax</h2> +<pre class="eval">elternelement = node.parentNode +</pre> +<p><code><var>elternelement</var></code> enthält das Elternelement des gegebenen Datenknotens.</p> +<h2 id="Beispiel" name="Beispiel">Beispiel</h2> +<pre class="brush:javascript">var dokument = document.documentElement.parentNode; +</pre> +<h2 id="Anmerkungen" name="Anmerkungen">Anmerkungen</h2> +<ul> + <li>Es kann sich bei dem Elternelement um ein {{ domxref("Element") }}, ein {{ domxref("Document") }} oder ein {{ domxref("DocumentFragment") }} handeln.</li> + <li><code>parentNode</code> gibt <code>null</code> zurück bei folgenden Knotentypen: <code>Attr</code>, <code>Document</code>, <code>DocumentFragment</code>, <code>Entity</code>, and <code>Notation</code>.</li> + <li>Außerdem wird <code>null</code> zurückgegeben, wenn der Knoten bisher nicht an den DOM-Baum angefügt wurde (weil er womöglich gerade erst erstellt wurde).</li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li>{{ domxref("Node") }}</li> + <li>{{ Domxref("Node.firstChild") }}</li> + <li>{{ Domxref("Node.lastChild") }}</li> + <li>{{ Domxref("Node.childNodes") }}</li> + <li>{{ Domxref("Node.nextSibling") }}</li> + <li>{{ Domxref("Node.previousSibling") }}</li> +</ul> +<h2 id="Browserunterstützung">Browserunterstützung</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>0.2</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>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>{{ CompatGeckoMobile(1) }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Spezifikation">Spezifikation</h2> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a> (en)</p> +<p>{{ languages( { "it": "it/DOM/element.parentNode", "ja": "ja/DOM/element.parentNode", "fr": "fr/DOM/element.parentNode", "pl": "pl/DOM/element.parentNode" , "zh-cn": "zh-cn/DOM/Node.parentNode" } ) }}</p> diff --git a/files/de/web/api/node/previoussibling/index.html b/files/de/web/api/node/previoussibling/index.html new file mode 100644 index 0000000000..0a5bd2f518 --- /dev/null +++ b/files/de/web/api/node/previoussibling/index.html @@ -0,0 +1,69 @@ +--- +title: Node.previousSibling +slug: Web/API/Node/previousSibling +translation_of: Web/API/Node/previousSibling +--- +<p>{{ ApiRef() }}</p> +<p>{{ languages( { "fr": "fr/DOM/element.previousSibling", "ja": "ja/DOM/element.previousSibling", "pl": "pl/DOM/element.previousSibling", "zh-cn": "zh-cn/DOM/Node.previousSibling" } ) }}</p> +<h3 id="Summary" name="Summary">Allgemein</h3> +<p>Gibt den Datenknoten zurück, der entsprechend der childNodes-Liste des Elternelements dem gegebenen Datenknoten direkt vorangestellt ist. Falls der übergebene Knoten bereits der erste in dieser Liste ist, wird null zurückgegeben.</p> +<h3 id="Syntax" name="Syntax">Syntax</h3> +<pre class="eval">vorangestellterKnoten = node.previousSibling; +</pre> +<h3 id="Example" name="Example">Beispiele</h3> +<p>Folgendes HTML-Dokument ist gegeben:</p> +<pre class="brush:html"><!DOCTYPE html> +<html> + <body> + <div>Das ist eine DIV-Box</div> + <p>Hier steht Text!</p> + <ul> + <li>Punkt 1</li> + <li>Punkt 2</li> + </ul> + </body> +</html> +</pre> +<p>So kann der vorangestellte Datenknoten von <code><ul></code> ermittelt werden:</p> +<pre class="brush:javascript"> // Diese Variable speichert eine Referenz auf das letzte Element, das <body> enthält, also <ul> + var element = document.body.children[2]; + + // Nun ermitteln wir durch previousSibling den vorangestellten Knoten + var vorangestellterKnoten = element.previousSibling; + + // Ausgabe des Knoten-Namens + alert(vorangestellterKnoten.nodeName); +</pre> +<p><strong>Erläuterung:</strong></p> +<p>Die Variable <code><var>element</var></code> enthält das letzte Kindelement des -Tags, also <code><ul></code>. <code><var>vorangestellterKnoten</var></code> speichert den direkt vorangestellten Geschwisterknoten von <code><ul></code>. In diesem Fall ist das ein Textknoten der einen Zeilenvorschub und vier Leerzeichen enthält, die sich in dem HTML-Dokument zwischen dem <code>></code> von <code><p></code> und dem <code><</code> des <code><ul></code> befinden. Das alert()-Fenster gibt somit <code>#text</code> aus.</p> +<p>So können alle vorangestellten Datenknoten eines Elements ermittelt werden:</p> +<pre class="brush:javascript">var element = document.body.children[2]; +var liste = []; + +while(element.previousSibling) { + var element = liste[liste.push(element.previousSibling)-1]; +} +</pre> +<p>Das Skript erzeugt ein Array <code><var>liste</var></code> mit folgendem Inhalt:</p> +<pre class="eval">Array[5] + 0: Text + 1: HTMLParagraphElement + 2: Text + 3: HTMLDivElement + 4: Text +</pre> +<h3 id="Notes" name="Notes">Anmerkungen</h3> +<p>Um statt dem vorangestellten Datenknoten den Nächsten zu erhalten, verwenden Sie {{ domxref("Node.nextSibling") }}.<br> + Da die Eigenschaft <code>previousSibling</code> Textknoten berücksichtigt, kann es sein, dass Sie statt des vorangestellten Elements einen Textknoten als Rückgabewert erhalten. Oft passiert das durch Whitespace aller Art (z.B. Leerzeichen, Zeilenvorschübe), der sich zwischen den beiden Elementen befindet und von <code>previousSibling</code> als Textknoten interpretiert wird.<br> + Falls Textknoten nicht berücksichtigt werden sollen, verwenden Sie stattdessen {{ domxref("Element.previousElementSibling") }}</p> +<h3 id="Specification" name="Specification">Spezifikationen</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a> (en)</li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a> (en)</li> +</ul> +<h3 id="Siehe_auch">Siehe auch</h3> +<ul> + <li>{{ domxref("Node.nextSibling") }}</li> + <li>{{ domxref("Element.previousElementSibling") }}</li> + <li>{{ domxref("Node.childNodes") }}</li> +</ul> diff --git a/files/de/web/api/node/removechild/index.html b/files/de/web/api/node/removechild/index.html new file mode 100644 index 0000000000..86a8dfd460 --- /dev/null +++ b/files/de/web/api/node/removechild/index.html @@ -0,0 +1,82 @@ +--- +title: Node.removeChild() +slug: Web/API/Node/removeChild +tags: + - API + - DOM + - Entfernen + - Knoten + - Löschen + - Methode(2) + - Referenz +translation_of: Web/API/Node/removeChild +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>Die Methode <code><strong>Node.removeChild()</strong></code> entfernt einen Kindknoten aus dem DOM. Gibt den entfernten Knoten zurück.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>var oldChild</em> = <em>element</em>.removeChild(<em>child</em>); +<strong>ODER</strong> +<em>element</em>.removeChild(<em>child</em>); +</pre> + +<ul> + <li><code>child</code> ist der Kindknoten, der aus dem DOM entfernt werden soll.</li> + <li><code>element</code> is der Elternknoten von <code>child</code>.</li> + <li><code>oldChild</code> hält eine Referenz auf den entfernten Kindknoten. <code>oldChild</code> === <code>child</code>.</li> +</ul> + +<p>Der entfernte Kindknoten bleibt im Speicher erhalten, ist aber nicht länger Teil des DOM. Mit der ersten Syntax-Form ist es möglich, den entfernten Knoten später im Code wieder zu verwenden, über die <code>oldChild</code> Objektreferenz. In der zweiten Form wird jedoch keine <code style="font-style: normal;">oldChild</code>-Refernenz behalten, also wird (vorausgesetzt dass nirgendwo anders im Code eine Referenz gehalten wird) der Knoten unbenutzbar und nicht erreichbar, und wird nach kurzer Zeit <a href="/en-US/docs/Web/JavaScript/Memory_Management">automatisch aus dem Speicher entfernt</a>. </p> + +<p>Wenn <code>child</code> kein Kind des Knotens <code>element</code> ist, wirft die Methode eine Exception. Dies passiert auch wenn <code>child</code> zwar zum Aufruf der Methode ein Kind von <code>element</code> war, aber durch einen beim Entfernen des Knotens aufgerufenen Event Handler bereits aus dem DOM entfernt wurde (z.B. blur).</p> + +<p> </p> + +<h2 id="Example" name="Example">Beispiele</h2> + +<pre><!-- Beispiel HTML --> + +<div id="top" align="center"> + <div id="nested"></div> +</div> +</pre> + +<pre class="brush:js">// Ein bestimmtes Element entfernen, wenn der Elternknoten bekannt ist +var d = document.getElementById("top"); +var d_nested = document.getElementById("nested"); +var throwawayNode = d.removeChild(d_nested); +</pre> + +<pre class="brush:js">// Ein bestimmtes Element entfernen, ohne den Elternknoten zu kennen +var node = document.getElementById("nested"); +if (node.parentNode) { + node.parentNode.removeChild(node); +} +</pre> + +<pre class="brush:js">// Alle Kindknoten eines Elements entfernen +var element = document.getElementById("top"); +while (element.firstChild) { + element.removeChild(element.firstChild); +} +</pre> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li> +</ul> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{domxref("Node.replaceChild")}}</li> + <li>{{domxref("Node.parentNode")}}</li> + <li>{{domxref("ChildNode.remove")}}</li> +</ul> diff --git a/files/de/web/api/node/replacechild/index.html b/files/de/web/api/node/replacechild/index.html new file mode 100644 index 0000000000..09886ba653 --- /dev/null +++ b/files/de/web/api/node/replacechild/index.html @@ -0,0 +1,61 @@ +--- +title: Node.replaceChild +slug: Web/API/Node/replaceChild +translation_of: Web/API/Node/replaceChild +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Summary" name="Summary">Zusammenfassung</h3> + +<p><strong>Die <code>Node.replaceChild()</code></strong>-Methode ersetzt den Kind-Knoten (<code>child node)</code> <u>innerhalb</u> des gegebenen Eltern-Knotens (<code>parent node</code>) durch einen anderen.</p> + +<h3 id="Syntax" name="Syntax">Syntax</h3> + +<pre class="eval"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>); +</pre> + +<ul> + <li><code>newChild</code> ist der neue, <code>oldChild</code> der zu ersetzende Knoten. Falls er bereits im DOM vorhanden ist, wird er zuerst von dort entfernt.</li> + <li><code>oldChild</code> ist der zu ersetzende Knoten.</li> + <li><code>replacedNode</code> ist der ersetzte Knoten, also der selbe wie <code>oldChild</code>.</li> +</ul> + +<h3 id="Example" name="Example">Beispiel</h3> + +<pre>// <div> +// <span id="childSpan">foo bar</span> +// </div> + +// erzeuge einen leeren Element-Knoten +// ohne ID, Attribute oder Inhalt +var sp1 = document.createElement("span"); + +// setze sein id Attribut auf 'newSpan' +sp1.setAttribute("id", "newSpan"); + +// Inhalt für das neue Element erzeugen +var sp1_content = document.createTextNode("new replacement span element."); + +// den erzeugten Inhalt an das Element anhängen +sp1.appendChild(sp1_content); + +// Referenz auf den zu ersetzenden Knoten erzeugen +var sp2 = document.getElementById("childSpan"); +var parentDiv = sp2.parentNode; + +// den existierenden Knoten sp2 mit dem neuen Span-Element sp1 ersetzen +parentDiv.replaceChild(sp1, sp2); + +// Ergebnis: +// <div> +// <span id="newSpan">new replacement span element.</span> +// </div> +</pre> + +<h3 id="Specification" name="Specification">Spezifikation</h3> + +<p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></p> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></p> + +<p>{{ languages( { "fr": "fr/DOM/element.replaceChild", "ja": "ja/DOM/element.replaceChild", "pl": "pl/DOM/element.replaceChild", "zh-cn": "zh-cn/DOM/Node.replaceChild" } ) }}</p> diff --git a/files/de/web/api/node/setuserdata/index.html b/files/de/web/api/node/setuserdata/index.html new file mode 100644 index 0000000000..7c4c714d01 --- /dev/null +++ b/files/de/web/api/node/setuserdata/index.html @@ -0,0 +1,121 @@ +--- +title: Node.setUserData() +slug: Web/API/Node/setUserData +translation_of: Web/API/Node/setUserData +--- +<div>{{APIRef("DOM")}}{{obsolete_header}}</div> + +<p>Die Methode <code><strong>Node.setUserData()</strong></code>erlaubt es dem Benutzer Daten dem Element hinzuzufügen (oder löschen), ohne dabei die DOM zu modifizieren. Beachte dabei, dass die Daten durch das Nutzen von {{domxref("Node.importNode")}}, {{domxref("Node.cloneNode()")}} und {{domxref("Node.renameNode()")}} nicht mitgegeben werden kann (jedoch kann {{domxref("Node.adoptNode")}} die Information behalten), und bei Vergleichstest mit {{domxref("Node.isEqualNode()")}} werden die Daten nicht berücksichtigt.</p> + +<p>This method offers the convenience of associating data with specific nodes without needing to alter the structure of a document and in a standard fashion, but it also means that extra steps may need to be taken if one wishes to serialize the information or include the information upon clone, import, or rename operations.</p> + +<div class="note"> +<p>The <code>Node.getUserData</code> and {{domxref("Node.setUserData")}} methods are no longer available from Web content. {{domxref("Element.dataset")}} or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> can be used instead.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>var prevUserData</var> = <var>someNode</var>.setUserData(<var>userKey</var>, <var>userData</var>, <var>handler</var>);</pre> + +<h3 id="Parameters">Parameters</h3> + +<ul> + <li><code>userKey</code> is used as the key by which one may subsequently obtain the stored data. More than one key can be set for a given node.</li> + <li><code>handler</code> is a callback which will be called any time the node is being cloned, imported, renamed, as well as if deleted or adopted; a function can be used or an object implementing the <code>handle</code> method (part of the {{domxref("UserDataHandler")}} interface). The handler will be passed five arguments: an operation type integer (e.g., 1 to indicate a clone operation), the user key, the data on the node, the source node (<code>null</code> if being deleted), the destination node (the newly created node or <code>null</code> if none).If no handler is desired, one must specify <code>null</code>.</li> + <li><code>userData</code> is the object to associate to <code>userKey</code> on someNode. If <code>null</code>, any previously registered object and UserDataHandler associated to <code>userKey</code> on this node will be removed.</li> +</ul> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: js">var d = document.implementation.createDocument('', 'test', null); +d.documentElement.setUserData('key', 15, {handle:function (o, k, d, s, ds) {console.log(o+'::'+k+'::'+d+'::'+s+'::'+ds)}}); // 2::key::15::[object Element]::[object Element] +console.log(d.documentElement.getUserData('key')); // 15 +var e = document.importNode(d.documentElement, true); // causes handler to be called +console.log(e.getUserData('key')); // null since user data is not copied +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikationen</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Removed from the specification.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#Node3-setUserData', 'Node.setUserData()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompabilität">Browser Kompabilitä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.0")}}<br> + {{CompatNo}} {{CompatGeckoDesktop("22.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</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>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>{{CompatGeckoMobile("1.0")}}<br> + {{CompatNo}} {{CompatGeckoMobile("22.0")}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] The method is still available from within chrome scripts.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("Node.getUserData()")}}</li> + <li>{{domxref("UserDataHandler")}}</li> + <li>{{domxref("DOMUserData")}}</li> +</ul> diff --git a/files/de/web/api/node/textcontent/index.html b/files/de/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..c237b6ee70 --- /dev/null +++ b/files/de/web/api/node/textcontent/index.html @@ -0,0 +1,69 @@ +--- +title: Node.textContent +slug: Web/API/Node/textContent +tags: + - API + - DOM + - Eigenschaft + - Kommando API + - NeedsSpecTable + - Referenz +translation_of: Web/API/Node/textContent +--- +<div>{{APIRef("DOM")}}</div> + +<p>Die <code><strong>Node.textContent</strong></code> Eigenschaft repräsentiert den Text-Inhalt einer Node und ihrer untergeordneten Elemente.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>text</em> = element.textContent; +element.textContent = "Dies ist ein Beispiel-Text"; +</pre> + +<h2 id="Notes" name="Notes">Beschreibung</h2> + +<ul> + <li><code>textContent</code> gibt <code>null</code> zurück, wenn das Element ein D<a href="/en-US/docs/DOM/document" title="DOM/Document">ocument</a>, ein Dokumenten-Typ oder eine Notation ist. Um den gesamten Text und die CDATA Daten für das gesamte Dokument zu bekommen, kann man <code><a href="/en-US/docs/DOM/document.documentElement" title="DOM/document.documentElement">document.documentElement</a>.textContent</code> benutzen.</li> + <li>Handelt es sich bei der Node um eine CDATA Sektion, einen Kommentar, eine Prozess-Anweisun oder eine Text-Node, dann gibt <code>textContent</code> den Text in dieser Node zurück (den <a href="/en-US/docs/DOM/Node.nodeValue" title="DOM/Node/NodeValue/Node.nodeValue">nodeValue</a>).</li> + <li>Für andere Node-Typen gibt <code>textContent</code> die aneinander gehängten <code>textContent</code> Attribute aller Kind-Nodes zurück, aber ohne Kommentare und Prozess-Anweisungen. Dies ist ein leerer String, wenn die Node keine Kinder hat.</li> + <li>Wenn man diese Eigenschaft setzt, werden alle Kinder der Node ersetzt und mit einer einzelnen Text-Node ersetzt, die den neuen Wert beinhaltet.</li> +</ul> + +<h3 id="Unterschiede_zu_innerText">Unterschiede zu <code>innerText</code></h3> + +<p>Internet Explorer hat <code>element.innerText</code> eingeführt. Die Absicht ist ähnlich, weist aber die folgenden Unterschiede auf:</p> + +<ul> + <li>Während <code>textContent</code> den Inhalt aller Element, inklusive {{HTMLElement("script")}} und {{HTMLElement("style")}} Elementen, liefert, macht die IE-spezifische Eigenschaft <code>innerText</code> dies nicht.</li> + <li><code>innerText</code> kennt den Stil und gibt keinen Text versteckter Elemente zurück, was <code>textContent</code> hingegen tut.</li> + <li>Da <code>innerText</code> den CSS-Stil kennt, verursacht es einen Reflow, während <code>textContent</code> dies nicht tut.</li> +</ul> + +<h3 id="Unterschiede_zu_innerHTML">Unterschiede zu <code>innerHTML</code></h3> + +<p><code>innerHTML</code> gibt, wie der Name schon sagt, das HTML zurück. Sehr häufig wird dies benutzt, um den Text aus einem Element abzurufen oder ihn zu ändern. Stattdessen sollte lieber <code>textContent</code> verwendet werden. Da der Text nicht als HTML geparst wird, ist es sehr wahrscheinlich, dass die Performance besser ist. Weiterhin umgeht man so auch einen möglichen XSS-Angriffspunkt.</p> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: js">// Nehmen wir das folgende HTML Fragment: +// <div id="divA">Hier ist <span>etwas</span> Text</div> + +// Abrufen des Text-Inhalts: +var text = document.getElementById("divA").textContent; +// |text| wird auf "Hier ist etwas Text" gesetzt + +// Setzen des Text-Inhalts: +document.getElementById("divA").textContent = "Hier ist auch Text"; +// Das HTML von divA sieht nun so aus: +// <div id="divA">Hier ist auch Text</div> +</pre> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("api.Node.textContent")}}</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent">textContent</a></li> +</ul> diff --git a/files/de/web/api/notification/index.html b/files/de/web/api/notification/index.html new file mode 100644 index 0000000000..aaf5188c37 --- /dev/null +++ b/files/de/web/api/notification/index.html @@ -0,0 +1,265 @@ +--- +title: Notification +slug: Web/API/notification +translation_of: Web/API/Notification +--- +<div>{{APIRef("Web Notifications")}} {{ SeeCompatTable() }}</div> + +<div>Das Notification interface wird zum konfigurieren und Anzeigen von desktop notifications verwendet.</div> + +<h3 id="Permissions" name="Permissions">Permissions</h3> + +<p>Wenn Sie notifications in einer offenen web app verwenden, fügen sie die <span style="font-family: consolas,monaco,andale mono,monospace;">desktop-notification permission zu ihrem <a href="/de/docs/Apps/Manifest">manifest</a> file hinzu. </span>Notifications können für jedes permission level, hosted oder darüber verwendet werden.</p> + +<pre class="brush: json"><code><span class="str">"permissions"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> + </span><span class="str">"desktop-notification"</span><span class="pun">:{}</span><span class="pln"> +</span><span class="pun">}</span></code></pre> + +<h2 id="Method_overview" name="Method_overview">Konstruktor</h2> + +<pre class="brush: js">var notification = new Notification(title, options);</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>title</code></dt> + <dd>Titel der innerhalb der Notification angezeigt werden muss.</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>Ein Objekt das optionale Konfigurationsparamter enthält. Es kann die folgenden Einträge enthalten: + <ul> + <li><code>dir</code> : Die Ausrichtung des Textes; Verfügbar sind <code>auto</code>, <code>ltr</code>, oder <code>rtl</code>.</li> + <li><code>lang</code>: Spezifiziere die verwendete Sprache. Dieser String muss ein valides <a href="http://tools.ietf.org/html/bcp47" title="http://tools.ietf.org/html/bcp47">BCP 47 language tag</a> sein.</li> + <li><code>body</code>: Ein String, welcher jeglichen extra Inhalt einer notification beinhaltet.</li> + <li><code>tag</code>: Die ID einer gegebene notification, um diese abzurufen, zu löschen, zu ersetzen oder zu löschen. </li> + <li><code>icon</code>: Die Url für das verwendete Icon in einer notification.</li> + <li><code>data</code>: Ein Benutzerdefiniertes Datenfeld.</li> + </ul> + </dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<h3 id="Static_properties">Static properties</h3> + +<p>Diese Eigenschaften sind nur im Notification-Objekt selbst verfügbar.</p> + +<dl> + <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt> + <dd>Eine Zeichenkette, die die aktuell gesetzten Berechtigungen Notifications anzuzeigen darstellt. Mögliche Werte sind: denied (der Nutzer erlaubt keine Benachrichtigungen), granted (der Nutzer akzeptiert, dass Benachrichtigungen angezeigt werden) oder default (die Nutzerwahl ist unbekannt, daher verhält sich der Browser wie bei denied).</dd> +</dl> + +<h3 id="Instance_properties">Instance properties</h3> + +<p>Diese Eigenschaften sind nur in Instanzen des Notification-Objekts verfügbar.</p> + +<dl> + <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt> + <dd>Der Titel der Benachrichtigung der in den Parametern des Konstruktors spezifiziert wurde.</dd> + <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt> + <dd>Textausrichtung der Benachrichtung welche in den Parametern des Konstruktors spezifiziert wurde.</dd> + <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt> + <dd>Sprachcode der Benachrichtung welche in den Parametern des Konstruktors spezifiziert wurde.</dd> + <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt> + <dd>Textinhalt der Benachrichtung welche in den Parametern des Konstruktors spezifiziert wurde.</dd> + <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt> + <dd>ID der Benachrichtung (if any) welche in den Parametern des Konstruktors spezifiziert wurde.</dd> + <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt> + <dd>URL des Bildes welches als Icon der Benachrichtgung verwendet wird, wie in den Parametern des Konstruktors spezifiziert wurde</dd> + <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt> + <dd>Returns a structured clone of the notification’s data.</dd> +</dl> + +<h4 id="Event_handlers">Event handlers</h4> + +<dl> + <dt>{{domxref("Notification.onclick")}}</dt> + <dd>A handler for the {{event("click")}} event. It is triggered each time the user clicks on the notification.</dd> + <dt>{{domxref("Notification.onshow")}}</dt> + <dd>A handler for the {{event("show")}} event. It is triggered when the notification is displayed.</dd> + <dt>{{domxref("Notification.onerror")}}</dt> + <dd>A handler for the {{event("error")}} event. It is triggered each time the notification encounters an error.</dd> + <dt>{{domxref("Notification.onclose")}}</dt> + <dd>A handler for the {{event("close")}} event. It is triggered when the user closes the notification.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<h3 id="Static_methods">Static methods</h3> + +<p>These methods are available only on the <code>Notification</code> object itself.</p> + +<dl> + <dt>{{domxref("Notification.requestPermission()")}}</dt> + <dd>Requests permission from the user to display notifications. This method must be called as the result of a user action (for example, an onclick event), and cannot be used without it.</dd> +</dl> + +<h3 id="Instance_methods">Instance methods</h3> + +<p>These properties are available only on an instance of the <code>Notification</code> object or through its <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain" title="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain"><code>prototype</code></a>. The <code>Notification</code> objects also inherit from the {{domxref("EventTarget")}} interface.</p> + +<dl> + <dt>{{domxref("Notification.close()")}}</dt> + <dd>Programmatically closes a notification.</dd> +</dl> + +<p>{{page("/en-US/docs/Web/API/EventTarget","Methods")}}</p> + +<h2 id="Example">Example</h2> + +<p>Assume this basic HTML:</p> + +<pre class="brush: html"><button onclick="notifyMe()">Notify me!</button></pre> + +<p>It's possible to send a notification as follows:</p> + +<pre class="brush: js">function notifyMe() { + // Let's check if the browser supports notifications + if (!("Notification" in window)) { + alert("This browser does not support desktop notification"); + } + + // Let's check whether notification permissions have alredy been granted + else if (Notification.permission === "granted") { + // If it's okay let's create a notification + var notification = new Notification("Hi there!"); + } + + // Otherwise, we need to ask the user for permission + else if (Notification.permission !== 'denied') { + Notification.requestPermission(function (permission) { + // If the user accepts, let's create a notification + if (permission === "granted") { + var notification = new Notification("Hi there!"); + } + }); + } + + // At last, if the user has denied notifications, and you + // want to be respectful there is no need to bother them any more. +}</pre> + +<h3 id="See_the_live_result">See the live result</h3> + +<p>{{ EmbedLiveSample('Example', '100%', 30) }}</p> + +<h2 id="Specifications">Specifications</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('Web Notifications')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Initial specification.</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>Basic support</td> + <td>5 {{ property_prefix("webkit") }} (see notes)<br> + 22</td> + <td>4.0 {{ property_prefix("moz") }} (see notes)<br> + 22</td> + <td>{{ CompatNo() }}</td> + <td>25</td> + <td>6 (see notes)</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>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>4.0 {{ property_prefix("moz") }} (see notes)<br> + 22</td> + <td>1.0.1 {{ property_prefix("moz") }} (see notes)<br> + 1.2</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<ul> + <li>Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification must be done with the {{ domxref("window.navigator.mozNotification","navigator.mozNotification") }} object through its <code>createNotification</code> method.</li> + <li>Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the <code>show</code> method and was supporting the <code>click</code> and <code>close</code> events only.</li> + <li>Nick Desaulniers has written a <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> to cover both newer and older implementations.</li> + <li>One particular Firefox OS issue is that you can <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L171">pass a path to an icon</a> to use in the notification, but if the app is packaged you cannot use a relative path like <code>/my_icon.png</code>. You also can't use <code>window.location.origin + "/my_icon.png"</code> because <code>window.location.origin</code> is null in packaged apps. The <a href="https://developer.mozilla.org/en-US/Apps/Developing/Manifest#origin">manifest origin field</a> fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS <1.1 is to <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L168">pass an absolute URL to an externally hosted version of the icon</a>. This is less than ideal as the notification is displayed immediately with the icon missing, then the icon is fetched, but it works on all versions of Firefox OS.</li> +</ul> + +<h3 id="Chrome_notes">Chrome notes</h3> + +<ul> + <li>Prior to Chrome 22, the support for notification was following an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification" title="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and was using the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.</li> + <li>Prior to Chrome 32, {{domxref("Notification.permission")}} was not supported.</li> +</ul> + +<h3 id="Android_notes">Android notes</h3> + +<ul> + <li>The Android browser has been deprecated since Android 4.0. Newer versions use Chrome.</li> +</ul> + +<h3 id="Safari_notes">Safari notes</h3> + +<ul> + <li>Safari started supporting notification with Safari 6 but only on Mac OSX 10.8+ (Mountain Lion).</li> +</ul> + +<h2 id="Notes">Notes</h2> + +<p>{{ref("1")}} Deprecated since Android 4.0.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Using Web Notifications</a></li> + <li><a class="external" href="https://github.com/soapdog/firefoxos-sample-app-image-uploader" title="Firefox OS Image Uploader Sample App">Firefox OS Image Uploader Sample App</a></li> +</ul> diff --git a/files/de/web/api/notification/permission/index.html b/files/de/web/api/notification/permission/index.html new file mode 100644 index 0000000000..bd381fe34c --- /dev/null +++ b/files/de/web/api/notification/permission/index.html @@ -0,0 +1,187 @@ +--- +title: Notification.permission +slug: Web/API/notification/permission +tags: + - API + - DOM + - Notifications + - Property + - Reference +translation_of: Web/API/Notification/permission +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p>Die schreibgeschützte Berechtigungseigenschaft der Schnittstelle {{domxref ("Notificaton")}} gibt die aktuelle Berechtigung an, die der Benutzer für den aktuellen Ursprung zur Anzeige von Web-Benachrichtigungen erteilt hat.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>permission</em> = Notification.permission;</pre> + +<h3 id="Return_Value" name="Return_Value">Value</h3> + +<p>Ein {{domxref ("DOMString")}} repräsentiert die aktuelle Berechtigung. Der Wert kann sein:</p> + +<ul> + <li><code>granted</code>: Der Benutzer hat explizit die Berechtigung für den aktuellen Ursprung zur Anzeige von Systembenachrichtigungen erteilt.</li> + <li><code>denied</code>: Der Benutzer hat die Berechtigung für den aktuellen Ursprung explizit abgelehnt, um Systembenachrichtigungen anzuzeigen.</li> + <li><code>default</code>: Die Benutzerentscheidung ist unbekannt; In diesem Fall wird die Anwendung so tun, als ob die Erlaubnis verweigert wurde.</li> +</ul> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Das folgende ziemlich ausführliche Snippet könnte verwendet werden, wenn Sie zuerst überprüfen möchten, ob Benachrichtigungen unterstützt werden, und prüfen Sie dann, ob für den aktuellen Ursprung die Erlaubnis für das Senden von Benachrichtigungen gewährt wurde, und fordern Sie dann bei Bedarf eine Genehmigung an, bevor Sie eine Benachrichtigung senden.</p> + +<pre class="brush: js">function notifyMe() { + // Let's check if the browser supports notifications + if (!("Notification" in window)) { + console.log("This browser does not support desktop notification"); + } + + // Let's check whether notification permissions have alredy been granted + else if (Notification.permission === "granted") { + // If it's okay let's create a notification + var notification = new Notification("Hi there!"); + } + + // Otherwise, we need to ask the user for permission + else if (Notification.permission !== 'denied' || Notification.permission === "default") { + Notification.requestPermission(function (permission) { + // If the user accepts, let's create a notification + if (permission === "granted") { + var notification = new Notification("Hi there!"); + } + }); + } + + // At last, if the user has denied notifications, and you + // want to be respectful there is no need to bother them any more. +}</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName("Web Notifications","#dom-notification-permission","permission")}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Lebensstandard</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkombatibilität">Browserkombatibilitä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>Grundlegende Unterstützung</td> + <td>5 {{ property_prefix("webkit") }} (see notes)<br> + 22</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0 {{ property_prefix("moz") }} (see notes)<br> + 22</td> + <td>{{ CompatNo() }}</td> + <td>25</td> + <td>6 (see notes)</td> + </tr> + <tr> + <td>Vorhanden in den Arbeitskräften</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("41.0")}}</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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td> + <p>Grundlegende Unterstützung</p> + </td> + <td>{{ CompatUnknown() }}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0 {{ property_prefix("moz") }} (see notes)<br> + 22</td> + <td>1.0.1 {{ property_prefix("moz") }} (see notes)<br> + 1.2</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + </tr> + <tr> + <td>Vorhanden in den Arbeitskräften</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(41.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Firefox_OS_Notizen">Firefox OS Notizen</h3> + +<p id="Page(en-USdocsWebAPINotifications_API_Firefox_OS_notes)"><span style="color: #3b3c40; font-size: 14px; line-height: 1.5;">{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}</span></p> + +<h3 id="Chrome_Notizen">Chrome Notizen</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p> + +<h3 id="Safari_Notizen">Safari Notizen</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Verwenden der Benachrichtigungs-API</a></li> + <li>{{domxref("Permissions_API","Permissions API")}}</li> +</ul> diff --git a/files/de/web/api/page_visibility_api/index.html b/files/de/web/api/page_visibility_api/index.html new file mode 100644 index 0000000000..c6ad0ac2e4 --- /dev/null +++ b/files/de/web/api/page_visibility_api/index.html @@ -0,0 +1,189 @@ +--- +title: Page Visibility API +slug: Web/API/Page_Visibility_API +translation_of: Web/API/Page_Visibility_API +--- +<p id="Summary">{{DefaultAPISidebar("Page Visibility API")}}</p> + +<p><span class="seoSummary">Die <strong>Page Visibility API</strong> informiert sobald eine Webseite sichtbar ist und sich im Fokus befindet.</span> Mit dem Konzept des "tabbed browsing" ist es recht wahrscheinlich, dass sich jede Webseite irgendwann im Hintergrund befindet und deshalb nicht aktiv sichtbar für den Benutzer ist. Wenn der Benutzer die Webseite minimiert oder in einen anderen Tab wechselt, sendet die API ein {{event("visibilitychange")}} Event über die geänderte Sichtbarkeit der Seite. Anhand des Events können dann spezifische Aktionen ausgeführt oder ein von der Sichtbarkeit abhängiges Verhalten aktiviert werden. Wenn etwa ein Video in der Webseite abgespielt wird, könnte dieses pausieren solange die Seite für den Benutzer unsichtbar ist und automatisch fortsetzen, sobald er zu ihr zurückkehrt. Der Benutzer verliert somit die Stelle in dem Video nicht und kann dieses einfach weiter anschauen.</p> + +<p>Die Status eines {{HTMLElement("iframe")}} sind dieselben wie die des übergeordneten document. Wenn der iframe über CSS Eigenschaften versteckt wird, löst dies nicht die visibility events aus und ändert auch nicht den Status der umliegenden Seite.</p> + +<h3 id="Vorteile">Vorteile</h3> + +<p>Die API ist besonders hilfreich, um Ressourcen zu sparen und gibt den Entwicklern die Möglichkeit, nicht benötigte Aufgaben einer Webseite oder Web App zu pausieren solange diese nicht sichtbar ist.</p> + +<h3 id="Use_cases">Use cases</h3> + +<p>Einige Beispiele für die Nutzung sind:</p> + +<ul> + <li>Eine Webseite beinhaltet ein image carousel, welches nur dann automatisch auf das nächste Bild wechseln soll, wenn der Benutzer die Webseite betrachtet.</li> + <li>Eine Dashboard-Applikation pollt nur dann nach Updates, wenn diese auch sichtbar ist und pausiert diesen Vorgang solange sie unsichtbar ist.</li> + <li>Eine Seite benötigt die Information, wenn sie per "prerender" geladen, um die Anzahl der page views richtig zu ermitteln.</li> + <li>Es können Sounds deaktiviert werden, wenn sich ein Gerät im standby mode befindet (also wenn der Benutzer den Bildschirm seines Smartphones oder Tablets sperrt)</li> +</ul> + +<p>Bisher mussten hierfür Workarounds von den Entwicklern implementiert werden. Dafür wurden Lösungen verwendet etwa auf Basis von onblur/onfocus Event-Handlern auf dem window, worüber sich ermitteln lässt ob die Webseite gerade die aktive ist oder nicht. Allerdings teilt dies nicht mit, ob die Webseite gerade für den Benutzer effektiv sichtbar ist oder nicht. Die Page Visibility API addressiert genau das. (Verglichen mit der onblur/onfocus basierten Lösung ist ein zentraler Unterschied, dass dort die Webseite <em>nicht</em> unsichtbar wurde, wenn ein ganz anderes Fenster aktiv wurde oder der Browser selbst den Fokus verloren hat, weil der Benutzer zu einer anderen Applikation gewechselt ist. Eine Webseite wird hier nur unsichtbar, wenn der Benutzer innerhalb des Browserfensters zu einem anderen Tab wechselt oder das Fenster minimiert.)</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Hier ist ein <a href="http://daniemon.com/tech/webapps/page-visibility/">live Code-Beispiel</a> (eines Videos mit Sound).</p> + +<p>Das Beispiel wurde über folgenden Code realisiert:</p> + +<pre class="brush: js">// Set the name of the hidden property and the change event for visibility +var hidden, visibilityChange; +if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support + hidden = "hidden"; + visibilityChange = "visibilitychange"; +} else if (typeof document.msHidden !== "undefined") { + hidden = "msHidden"; + visibilityChange = "msvisibilitychange"; +} else if (typeof document.webkitHidden !== "undefined") { + hidden = "webkitHidden"; + visibilityChange = "webkitvisibilitychange"; +} + +var videoElement = document.getElementById("videoElement"); + +// If the page is hidden, pause the video; +// if the page is shown, play the video +function handleVisibilityChange() { + if (document[hidden]) { + videoElement.pause(); + } else { + videoElement.play(); + } +} + +// Warn if the browser doesn't support addEventListener or the Page Visibility API +if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") { + console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API."); +} else { + // Handle page visibility change + document.addEventListener(visibilityChange, handleVisibilityChange, false); + + // When the video pauses, set the title. + // This shows the paused + videoElement.addEventListener("pause", function(){ + document.title = 'Paused'; + }, false); + + // When the video plays, set the title. + videoElement.addEventListener("play", function(){ + document.title = 'Playing'; + }, false); + +} +</pre> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<h3 id="document.hidden_Read_only"><code>document.hidden</code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></h3> + +<p>Liefert <code>true</code> wenn die Webseite als unsichtbar für den Benutzer gewertet wird und <code>false</code> andernfalls.</p> + +<h3 id="document.visibilityState_Read_only"><code>document.visibilityState</code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></h3> + +<p>Ist ein <code>string</code> welcher den aktuellen Sichtbarkeitsstatus angibt. Mögliche Werte sind:</p> + +<ul> + <li><code>visible</code> : der Seiteninhalt ist mindestens teilweise oder unvollständig sichtbar. In der Praxis bedeutet dies, dass sich die Seite in dem aktiven Tab eines nicht minimierten Fensters befindet.</li> + <li><code>hidden</code> : der Seiteninhalt ist nicht für den Benutzer sichtbar. In der Praxis bedeutet dies, die Seite befindet sich in einem nicht aktiven (Hintergrund-)Tab des Browserfensters, das Browserfenster ist minimiert oder die Bildschirmsperre des Betriebssystems ist aktiv.</li> + <li><code>prerender</code> : der Seiteninhalt wird gerade über "prerender" verarbeitet und ist noch nicht sichtbar für den Benutzer (es gilt somit als "hidden" für <code>document.hidden</code>). Ein Dokument kann den Initialzustand "prerender" erhalten und später den Status zu einem anderen Wert wechseln. Dieser kann aber nicht von einem anderen Status zu "prerender" wechseln. Achtung: Nicht alle Browser unterstützen diesen Status.</li> + <li><code>unloaded</code> : Die Seite wird aus dem Speicher freigegeben / gelöscht. Achtung: Nicht alle Browser unterstützen diesen Status.</li> +</ul> + +<pre class="brush: js">//startSimulation and pauseSimulation defined elsewhere +function handleVisibilityChange() { + if (document.hidden) { + pauseSimulation(); + } else { + startSimulation(); + } +} + +document.addEventListener("visibilitychange", handleVisibilityChange, false); +</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">Bemerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Page Visibility API')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>13 {{property_prefix("webkit")}}<br> + 33</td> + <td>{{CompatGeckoDesktop(18)}} [2]</td> + <td>10</td> + <td>12.10[1]</td> + <td>7</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4 {{property_prefix("webkit")}}</td> + <td>{{CompatGeckoMobile(18)}} [2]</td> + <td>10</td> + <td>12.10[1]</td> + <td>7</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Feuert das {{event("visibilitychange")}} Event nicht, wenn das Browserfenster minimiert wird. Ebenso wird <code>hidden</code> nicht auf <code>true </code>gesetzt.</p> + +<p>[2] In den Versionen Firefox 10 bis Firefox 51 einschließlich, konnte diese Eigenschaft verwendet werden mit Vendor-Prefix <code>-moz-</code>.</p> + +<h2 id="Weitere_Informationen">Weitere Informationen</h2> + +<ul> + <li>Beschreibung der <a href="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx" title="Page Visibility on IEBlog">Page Visibility API</a> im IEBlog.</li> + <li>Beschreibung der <a href="http://code.google.com/chrome/whitepapers/pagevisibility.html" title="Page Visibility API by Google">Page Visibility API</a> von Google</li> +</ul> diff --git a/files/de/web/api/performance/index.html b/files/de/web/api/performance/index.html new file mode 100644 index 0000000000..14f80850bb --- /dev/null +++ b/files/de/web/api/performance/index.html @@ -0,0 +1,135 @@ +--- +title: Performance +slug: Web/API/Performance +tags: + - API + - Interface + - Navigation Timing + - NeedsTranslation + - Performance + - Reference + - TopicStub + - Web Performance +translation_of: Web/API/Performance +--- +<div>{{APIRef("High Resolution Time")}}</div> + +<p>The <strong><code>Performance</code></strong> interface provides access to performance-related information for the current page. It's part of the High Resolution Time API, but is enhanced by the Performance Timeline API, the <a href="/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing API</a>, the <a href="/en-US/docs/Web/API/User_Timing_API">User Timing API</a>, and the <a href="/en-US/docs/Web/API/Resource_Timing_API">Resource Timing API</a>.</p> + +<p>An object of this type can be obtained by calling the {{domxref("Window.performance")}} read-only attribute.</p> + +<div class="note"> +<p><strong><em>Note</em>: </strong>This interface and its members are available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>, except where indicated below. Also note that performance markers and measures are per context. If you create a mark on the main thread (or other worker), you cannot see it in a worker thread, and vice versa.</p> +</div> + +<h2 id="Properties">Properties</h2> + +<p><em>The <code>Performance</code> interface doesn't inherit any properties.</em></p> + +<dl> + <dt>{{domxref("Performance.navigation")}} {{readonlyInline}}</dt> + <dd>A {{domxref("PerformanceNavigation")}} object that provides useful context about the operations included in the times listed in <code>timing</code>, including whether the page was a load or a refresh, how many redirections occurred, and so forth. Not available in workers.</dd> + <dt>{{domxref("Performance.timing")}} {{readonlyInline}}</dt> + <dd>A {{domxref("PerformanceTiming")}} object containing latency-related performance information. Not available in workers.</dd> + <dt>{{domxref("Performance.memory", "performance.memory")}} {{Non-standard_inline}}</dt> + <dd>A <em>non-standard</em> extension added in Chrome, this property provides an object with basic memory usage information. <em>You <strong>should not use</strong> this non-standard API.</em></dd> +</dl> + +<dl> + <dt> + <h3 id="Event_handlers">Event handlers</h3> + </dt> + <dt>{{domxref("Performance.onresourcetimingbufferfull")}}</dt> + <dd>An {{domxref("EventTarget")}} which is a callback that will be called when the {{event("resourcetimingbufferfull")}} event is fired.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em><em>The <code>Performance</code> interface doesn't inherit any </em>methods</em>.</p> + +<dl> + <dt>{{domxref("Performance.clearMarks()")}}</dt> + <dd>Removes the given <em>mark</em> from the browser's performance entry buffer.</dd> + <dt>{{domxref("Performance.clearMeasures()")}}</dt> + <dd>Removes the given <em>measure</em> from the browser's performance entry buffer.</dd> + <dt>{{domxref("Performance.clearResourceTimings()")}}</dt> + <dd>Removes all {{domxref("PerformanceEntry","performance entries")}} with a {{domxref("PerformanceEntry.entryType","entryType")}} of "<code>resource</code>" from the browser's performance data buffer.</dd> + <dt>{{domxref("Performance.getEntries()")}}</dt> + <dd>Returns a list of {{domxref("PerformanceEntry")}} objects based on the given <em>filter</em>.</dd> + <dt>{{domxref("Performance.getEntriesByName()")}}</dt> + <dd>Returns a list of {{domxref("PerformanceEntry")}} objects based on the given <em>name</em> and <em>entry type</em>.</dd> + <dt>{{domxref("Performance.getEntriesByType()")}}</dt> + <dd>Returns a list of {{domxref("PerformanceEntry")}} objects of the given <em>entry type</em>.</dd> + <dt>{{domxref("Performance.mark()")}}</dt> + <dd>Creates a {{domxref("DOMHighResTimeStamp","timestamp")}} in the browser's <em>performance entry buffer</em> with the given name.</dd> + <dt>{{domxref("Performance.measure()")}}</dt> + <dd>Creates a named {{domxref("DOMHighResTimeStamp","timestamp")}} in the browser's performance entry buffer between two specified marks (known as the <em>start mark</em> and <em>end mark</em>, respectively).</dd> + <dt>{{domxref("Performance.now()")}}</dt> + <dd>Returns a {{domxref("DOMHighResTimeStamp")}} representing the amount of milliseconds elapsed since a reference instant.</dd> + <dt>{{domxref("Performance.setResourceTimingBufferSize()")}}</dt> + <dd>Sets the browser's resource timing buffer size to the specified number of "<code>resource</code>" {{domxref("PerformanceEntry.entryType","type")}} {{domxref("PerformanceEntry","performance entry")}} objects.</dd> + <dt>{{domxref("Performance.toJSON()")}}</dt> + <dd>Is a jsonizer returning a json object representing the <code>Performance</code> object.</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('Highres Time Level 2', '#the-performance-interface', 'toJSON()')}}</td> + <td>{{Spec2('Highres Time Level 2')}}</td> + <td>Defines <code>toJson()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('Highres Time', '#the-performance-interface', 'Performance')}}</td> + <td>{{Spec2('Highres Time')}}</td> + <td>Defines <code>now()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Defines <code>timing</code> and <code>navigation</code> properties.</td> + </tr> + <tr> + <td>{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td>Changes <code>getEntries()</code> interface.</td> + </tr> + <tr> + <td>{{SpecName('Performance Timeline', '#sec-window.performance-attribute', 'Performance extensions')}}</td> + <td>{{Spec2('Performance Timeline')}}</td> + <td>Defines <code>getEntries()</code>, <code>getEntriesByType()</code> and <code>getEntriesByName()</code> methods.</td> + </tr> + <tr> + <td>{{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Defines <code>clearResourceTimings()</code> and <code>setResourceTimingBufferSize()</code> methods and the <code>onresourcetimingbufferfull</code> property.</td> + </tr> + <tr> + <td>{{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}</td> + <td>{{Spec2('User Timing Level 2')}}</td> + <td>Clarifies <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> and <code>clearMeasure()</code> methods.</td> + </tr> + <tr> + <td>{{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}</td> + <td>{{Spec2('User Timing')}}</td> + <td>Defines <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> and <code>clearMeasure()</code> methods.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> +<div> + + +<p>{{Compat("api.Performance")}}</p> +</div> +</div> diff --git a/files/de/web/api/performance/now/index.html b/files/de/web/api/performance/now/index.html new file mode 100644 index 0000000000..019bafeb55 --- /dev/null +++ b/files/de/web/api/performance/now/index.html @@ -0,0 +1,164 @@ +--- +title: performance.now() +slug: Web/API/Performance/now +tags: + - API + - Méthode + - Performanz + - Referenz + - Web Performance API +translation_of: Web/API/Performance/now +--- +<div>{{APIRef("High Resolution Timing")}}</div> + +<p>Die <code><strong>performance.now()</strong></code> Methode gibt einen {{domxref("DOMHighResTimeStamp")}} zurück, der in Millisekunden gemessen wird und auf fünf Tausendstel einer Millisekunde (5 Mikrosekunden) genau ist.</p> + +<p>Der zurückgegebene Wert stellt die Zeit dar, die seit <strong>time origin </strong>(der {{domxref("PerformanceTiming.navigationStart")}} Eigenschaft und damit der Startzeit) vergangen ist. In einem Web Worker ist die Startzeit die Zeit, in der ihr Ausführungskontext (Thread oder Prozess) erstellt wurde. In einem Browserfenster ist es die Zeit, zu der eine Nutzerin zu dem aktuellen Dokument navigierte (oder die Navigation bestätigte, sollte Bestätigung notwendig gewesen sein). Folgende Punkte sind dabei zu beachten:</p> + +<ul> + <li>In dedizierten web workern, die im {{domxref("Window")}}-Kontext erstellt wurden, wird der Wert kleiner sein, als <code>performance.now()</code> in dem Browserfenster, aus dem der worker hervorging. Ehemals gleich <code>t0</code> dem Hauptkontext wurde dies in der Vergangenheit auf das heutige Verhalten geändert.</li> + <li>In geteilten Worker oder Service Workern kann es passieren, dass der Wert im Worker größer ist als der des Hauptkontextes, da das Fenster nach den Workern erschaffen werden kann.</li> +</ul> + +<pre class="syntaxbox"><em>t</em> = performance.now();</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: js">var zeit0 = performance.now(); +machEtwas(); +var zeit1 = performance.now(); +console.log("Der Aufruf von machEtwas dauerte " + (zeit1 - zeit0) + " Millisekunden."); +</pre> + +<p>Anders als andere Zeitmessungsdaten, die in JavaScript verfügbar sind (beispielsweise <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now"><code>Date.now</code></a>), sind die Zeitstempel, die von <code>Performance.now()</code> zurückgegeben werden nicht auf eine Auflösung von einer Millisekunde beschränkt. Stattdessen repräsentieren sie Zeit als Fließkommazahl mit einer Präzision von bis zu einer Mikrosekunde.</p> + +<p>Ebenso anders als <code>Date.now()</code>, wachsen die Werte, die von <code>Performance.now() </code>zurückgegeben werden immer in einem konstanten Tempo, unabhängig von der Systemuhr (die manuell eingestellt oder durch Software wie NTP ungenau geworden sein kann). Ansonsten wird <code>performance.timing.navigationStart + performance.now()</code> annähernd ähnlich zu <code>Date.now() sein</code>.</p> + +<h2 id="Spezifkationen">Spezifkationen</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('Highres Time Level 2', '#dom-performance-now', 'performance.now()')}}</td> + <td>{{Spec2('Highres Time Level 2')}}</td> + <td>Strengere Definition von Schnittstellen und Typen</td> + </tr> + <tr> + <td>{{SpecName('Highres Time', '#dom-performance-now', 'performance.now()')}}</td> + <td>{{Spec2('Highres Time')}}</td> + <td>Ursprüngliche 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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundsätzliche Unterstützung</td> + <td>{{CompatChrome("20.0")}} {{property_prefix("webkit")}}<br> + {{CompatChrome("24.0")}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>10.0</td> + <td>{{CompatOpera("15.0")}}</td> + <td>{{CompatSafari("8.0")}}</td> + </tr> + <tr> + <td>in Web Workern</td> + <td>{{CompatChrome("33")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("34.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>now()</code> in einem dedizierten Worker ist nun unabhängig vom <code>now() </code>des Hauptkontextes.</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("45.0")}}</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>Edge</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>Grundsätzliche Unterstützung</td> + <td>{{CompatAndroid("4.0")}}</td> + <td>{{CompatChrome("25.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>10.0</td> + <td>{{CompatNo}}</td> + <td>9</td> + <td>{{CompatChrome("25.0")}}</td> + </tr> + <tr> + <td>in Web Workern</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("34.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>now()</code> in einem dedizierten Worker ist nun unabhängig vom <code>now() </code>des Hauptkontextes.</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("45.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Windows Versionen von Chrome 20 bis 33 geben <code>performance.now()</code> nur mit einer Millisekundengenauigkeit zurück.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now">When milliseconds are not enough: performance.now() </a>bei HTML5 Rocks.</li> +</ul> diff --git a/files/de/web/api/push_api/index.html b/files/de/web/api/push_api/index.html new file mode 100644 index 0000000000..84451b1ac4 --- /dev/null +++ b/files/de/web/api/push_api/index.html @@ -0,0 +1,180 @@ +--- +title: Push API +slug: Web/API/Push_API +translation_of: Web/API/Push_API +--- +<div>{{SeeCompatTable}}</div> + +<p class="summary">Die <strong>Push API</strong> verleiht Web Applikationen die Fähigkeit, Benachrichtigungen zu empfangen, die von einem Server gesendet werden. Das funktioniert auch, wenn die Web Applikation selbst nicht im Vordergrund oder überhaupt aktuell geladen ist. Dies ermöglicht Entwicklern asynchrone Notizen und Updates an Benutzer zu senden, die sich dafür angemeldet haben. Das Ergebnis ist besseres Engagement mit aktuellem Inhalt.</p> + +<h2 id="Push_Konzepte_und_Anwendung">Push Konzepte und Anwendung</h2> + +<div class="warning"> +<p>When implementing PushManager subscriptions, it is vitally important that you protect against CSRF/XSRF issues in your app. See the following articles for more information:</p> + +<ul> + <li><a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet">Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet</a></li> + <li><a href="https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/">Preventing CSRF and XSRF Attacks</a></li> +</ul> +</div> + +<p>Wenn eine App Push Nachrichten erhalten soll, muss sie ein <a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a> sein. Wenn der <em>Service Worker</em> aktiv ist, kann er Push Benachrichtigungen abonnieren wie folgt: {{domxref("PushManager.subscribe()")}}.</p> + +<p>Das Resultat {{domxref("PushSubscription")}} enthält sämtliche Information, die die App braucht, um Push Nachrichten zu senden: einen Endpunkt und den Kodierungsschlüssel zum Datenversand.</p> + +<p>Der<em> Service Worker</em> startet bei Bedarf, um eintreffende Nachrichten zu verarbeiten, welche an den Event Handler {{domxref("ServiceWorkerGlobalScope.onpush")}} geliefert werden. Dies erlaubt der App auf einlaufende Push Nachrichten zu reagieren, beispielsweise mit der Darstellung einer Notiz (mit dem Befehl {{domxref("ServiceWorkerRegistration.showNotification()")}}.)</p> + +<p>Jedes Abonnement ist eindeutig für einen <em>Service Worker</em>. Der Endpunkt des Abonnements ist eine eindeutige <a href="http://www.w3.org/TR/capability-urls/">capability URL</a>: Kenntnis des Endpunkts ist alles was nötig ist, um eine Nachricht an Ihre Applikation zu senden. Die Endpunkt URL ist daher geheim zu halten, da sonst andere Applikationen Nachrichten an Ihre Applikation senden könnten.</p> + +<p>Die Aktivierung einen <em>Service Worker</em>s kann eine erhöhte Ressourcennutzung begründen, besonders der Batterie. Die verschiedenen Browser behandeln dies verschieden. Es gibt aktuell keinen Standard dafür. Firefox erlaubt eine begrenzte Anzahlt (quota) Push Nachrichten, die an eine Applikation gesendet werden dürfen, wobei Push Nachrichten, die Notizen generieren, davon ausgenommen sind. Das Limit wird bei jedem Seitenbesuch erneuert. Zum Vergleich verwendet Chrome kein Limit, sondern erfordert, dass jede Push Nachricht mit einer Notiz angezeigt wird.</p> + +<div class="note"> +<p><strong>Note</strong>: As of Gecko 44, the allowed quota of push messages per application is not incremented when a new notification fires, when another is still visible, for a period of three seconds. This handles cases where a burst of Push messages is received, and not all generate a visible notification.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: Chrome versions earlier than 52 require you to set up a project on <a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> to send push messages, and use the associated project number and API key when sending push notifications. It also requires an app manifest, with some special parameters to use this service.</p> +</div> + +<h2 id="Interfaces">Interfaces</h2> + +<dl> + <dt>{{domxref("PushEvent")}}</dt> + <dd>Represents a push action, sent to the <a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope">global scope</a> of a {{domxref("ServiceWorker")}}. It contains information sent from an application to a {{domxref("PushSubscription")}}.</dd> + <dt>{{domxref("PushManager")}}</dt> + <dd>Provides a way to receive notifications from third-party servers, as well as request URLs for push notifications. This interface has replaced the functionality offered by the obsolete {{domxref("PushRegistrationManager")}} interface.</dd> + <dt>{{domxref("PushMessageData")}}</dt> + <dd>Provides access to push data sent by a server, and includes methods to manipulate the received data.</dd> + <dt>{{domxref("PushSubscription")}}</dt> + <dd>Provides a subcription's URL endpoint, and allows unsubscription from a push service.</dd> +</dl> + +<h2 id="Service_worker_additions">Service worker additions</h2> + +<p>The following additions to the <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> have been specified in the Push API spec to provide an entry point for using Push messages. They also monitor and respond to push and subscription change events.</p> + +<dl> + <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt> + <dd>Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. This is the entry point into using Push messaging.</dd> + <dt>{{domxref("ServiceWorkerGlobalScope.onpush")}}</dt> + <dd>An event handler fired whenever a {{Event("push")}} event occurs; that is, whenever a server push message is received.</dd> + <dt>{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}</dt> + <dd>An event handler fired whenever a {{Event("pushsubscriptionchange")}} event occurs; for example, when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time.)</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>Mozilla's <a href="https://serviceworke.rs/">ServiceWorker Cookbook</a> contains many useful Push examples.</p> + +<h2 id="Specifications">Specifications</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("Push API")}}</td> + <td>{{Spec2("Push API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(44.0)}}<sup>[1][3]</sup></td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("PushEvent.data")}},<br> + {{domxref("PushMessageData")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(44.0)}}<sup>[3]</sup></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>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</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>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(48.0)}}<sup>[4]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + <tr> + <td>{{domxref("PushEvent.data")}},<br> + {{domxref("PushMessageData")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(48.0)}}<sup>[4]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<ul> + <li>[1] Currently available only on desktop versions of Firefox; also, push messages are only delivered when Firefox is running.</li> + <li>[2] This is currently not implemented. See the <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/pushapi/">Microsoft Edge status information</a>.</li> + <li>[3] Push (and <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</li> + <li>[4] Push has been enabled by default on Firefox for Android version 48.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">Sending VAPID identified WebPush Notifications via Mozilla’s Push Service</a></li> + <li><a href="https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/">Web Push Notifications: Timely, Relevant, and Precise</a>, Joseph Medley</li> + <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li> +</ul> + +<div>{{DefaultAPISidebar("Push API")}}</div> diff --git a/files/de/web/api/pushmanager/index.html b/files/de/web/api/pushmanager/index.html new file mode 100644 index 0000000000..96627b0fb0 --- /dev/null +++ b/files/de/web/api/pushmanager/index.html @@ -0,0 +1,161 @@ +--- +title: PushManager +slug: Web/API/PushManager +tags: + - API + - Experimental + - Interface + - NeedsTranslation + - Push + - Push API + - Reference + - Service Workers + - TopicStub + - WebAPI +translation_of: Web/API/PushManager +--- +<p>{{SeeCompatTable}}{{ApiRef("Push API")}}</p> + +<p>The <code>PushManager</code> interface of the <a href="/en-US/docs/Web/API/Push_API">Push API</a> provides a way to receive notifications from third-party servers as well as request URLs for push notifications.</p> + +<p>This interface is accessed via the {{domxref("ServiceWorkerRegistration.pushManager")}} property.</p> + +<div class="note"> +<p><strong>Note</strong>: This interface replaces functionality previously offered by the obsolete {{domxref("PushRegistrationManager")}} interface.</p> +</div> + +<h2 id="Properties">Properties</h2> + +<p><em>None.</em></p> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("PushManager.getSubscription()")}}</dt> + <dd>Retrieves an existing push subscription. It returns a {{jsxref("Promise")}} that resolves to a {{domxref("PushSubscription")}} object containing details of an existing subscription. If no existing subscription exists, this resolves to a <code>null</code> value.</dd> + <dt>{{domxref("PushManager.permissionState()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} that resolves to the permission state of the current {{domxref("PushManager")}}, which will be one of <code>'granted'</code>, <code>'denied'</code>, or <code>'prompt'</code>.</dd> + <dt>{{domxref("PushManager.subscribe()")}}</dt> + <dd>Subscribes to a push service. It returns a {{jsxref("Promise")}} that resolves to a {{domxref("PushSubscription")}} object containing details of a push subscription. A new push subscription is created if the current service worker does not have an existing subscription.</dd> +</dl> + +<h3 id="Deprecated_methods">Deprecated methods</h3> + +<dl> + <dt>{{domxref("PushManager.hasPermission()")}} {{deprecated_inline}}</dt> + <dd>Returns a {{jsxref("Promise")}} that resolves to the <code>PushPermissionStatus</code> of the requesting webapp, which will be one of <code>granted</code>, <code>denied</code>, or <code>default</code>. Replaced by {{domxref("PushManager.permissionState()")}}.</dd> + <dt>{{domxref("PushManager.register()")}} {{deprecated_inline}}</dt> + <dd>Subscribes to a push subscription. Replaced by {{domxref("PushManager.subscribe()")}}.</dd> + <dt>{{domxref("PushManager.registrations()")}} {{deprecated_inline}}</dt> + <dd>Retrieves existing push subscriptions. Replaced by {{domxref("PushManager.getSubscription()")}}.</dd> + <dt>{{domxref("PushManager.unregister()")}} {{deprecated_inline}}</dt> + <dd>Unregisters and deletes a specified subscription endpoint. In the updated API, a subscription is unregistered by calling the {{domxref("PushSubscription.unsubscribe()")}} method.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">this.onpush = function(event) { + console.log(event.data); + // From here we can write the data to IndexedDB, send it to any open + // windows, display a notification, etc. +} + +navigator.serviceWorker.register('serviceworker.js').then( + function(serviceWorkerRegistration) { + serviceWorkerRegistration.pushManager.subscribe().then( + function(pushSubscription) { + console.log(pushSubscription.subscriptionId); + console.log(pushSubscription.endpoint); + // The push subscription details needed by the application + // server are now available, and can be sent to it using, + // for example, an XMLHttpRequest. + }, function(error) { + // During development it often helps to log errors to the + // console. In a production environment it might make sense to + // also report information about errors back to the + // application server. + console.log(error); + } + ); + });</pre> + +<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('Push API','#pushmanager-interface','PushManager')}}</td> + <td>{{Spec2('Push API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(44.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</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>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</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>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a></li> + <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li> + <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li> +</ul> diff --git a/files/de/web/api/pushmanager/subscribe/index.html b/files/de/web/api/pushmanager/subscribe/index.html new file mode 100644 index 0000000000..5d82a28916 --- /dev/null +++ b/files/de/web/api/pushmanager/subscribe/index.html @@ -0,0 +1,143 @@ +--- +title: PushManager.subscribe() +slug: Web/API/PushManager/subscribe +translation_of: Web/API/PushManager/subscribe +--- +<p>{{SeeCompatTable}}{{ApiRef("Push API")}}</p> + +<p>Die Methode <strong><code>subscribe()</code></strong> des {{domxref("PushManager")}} Interfaces meldet die API an einem Push-Service an.</p> + +<p>Sie bekommt {{jsxref("Promise")}} als Rückgabewert, welcher sich zu einem {{domxref("PushSubscription")}} Objekt auflösen lässt, und weitere Details der Push-Subscription enthält. Eine neue Push-Subscription wird erstellt falls der aktuelle Service-Worker nicht bereits eine existierende Push-Subscription enthält.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">PushManager.subscribe(options).then(function(pushSubscription) { ... } );</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>options {{optional_inline}}</code></dt> + <dd>Ein Objekt das optionale Konfigurationsparameter enthält. Das Objekt kann die folgenden Eigenschaften (properties) haben: + <ul> + <li><code>userVisibleOnly</code>: Ein boolscher Wert der anzeigt, dass die zurückgegebene Push-Subscription nur für Nachrichten genutz wird, dessen Effekt den sie (die Push-Subscription) auslöst, auch nur für den Anwender sichtbar sind.</li> + </ul> + </dd> +</dl> + +<h3 id="Returnwert">Returnwert</h3> + +<p>{{jsxref("Promise")}} welcher ein {{domxref("PushSubscription")}} Objekt auflöst.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: js">this.onpush = function(event) { + console.log(event.data); + /********************************************** + ++ Die Überstzung des Kommentars, folgt noch ++ + **********************************************/ + // From here we can write the data to IndexedDB, send it to any open + // windows, display a notification, etc. +} + +navigator.serviceWorker.register('serviceworker.js').then( + function(serviceWorkerRegistration) { + serviceWorkerRegistration.pushManager.subscribe().then( + function(pushSubscription) { + console.log(pushSubscription.endpoint); + /********************************************** + ++ Die Überstzung des Kommentars, folgt noch ++ + **********************************************/ + // The push subscription details needed by the application + // server are now available, and can be sent to it using, + // for example, an XMLHttpRequest. + }, function(error) { + /********************************************** + ++ Die Überstzung des Kommentars, folgt noch ++ + **********************************************/ + // During development it often helps to log errors to the + // console. In a production environment it might make sense to + // also report information about errors back to the + // application server. + console.log(error); + } + ); + });</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('Push API', '#widl-PushManager-subscribe-Promise-PushSubscription--PushSubscriptionOptions-options', 'subscribe()')}}</td> + <td>{{Spec2('Push API')}}</td> + <td>Initial-Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(44.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</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>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</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>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Weitere_Informationen">Weitere Informationen</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Die Push API verwenden</a></li> +</ul> diff --git a/files/de/web/api/range/index.html b/files/de/web/api/range/index.html new file mode 100644 index 0000000000..2dd5008afc --- /dev/null +++ b/files/de/web/api/range/index.html @@ -0,0 +1,254 @@ +--- +title: Range +slug: Web/API/Range +tags: + - API + - DOM + - NeedsTranslation + - TopicStub +translation_of: Web/API/Range +--- +<p>{{ APIRef("DOM") }}</p> + +<p>The <strong><code>Range</code></strong> interface represents a fragment of a document that can contain nodes and parts of text nodes.</p> + +<p>A range can be created using the {{ domxref("Document.createRange", "createRange()") }} method of the {{ domxref("Document") }} object. Range objects can also be retrieved by using the {{ domxref("Selection/getRangeAt", "getRangeAt()") }} method of the {{ domxref("Selection") }} object or the {{domxref("Document/caretRangeFromPoint", "caretRangeAtPoint()")}} method of the {{domxref("Document")}} object.</p> + +<p>There also is the {{domxref("Range.Range()", "Range()")}} constructor available.</p> + +<h2 id="Properties" name="Properties">Properties</h2> + +<p><em>There are no inherited properties.</em></p> + +<dl> + <dt>{{domxref("Range.collapsed")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating whether the range's start and end points are at the same position.</dd> + <dt>{{domxref("Range.commonAncestorContainer")}} {{readonlyInline}}</dt> + <dd>Returns the deepest {{ domxref("Node") }} that contains the <code>startContainer</code> and <code>endContainer</code> nodes.</dd> + <dt>{{domxref("Range.endContainer")}} {{readonlyInline}}</dt> + <dd>Returns the {{ domxref("Node") }} within which the <code>Range</code> ends.</dd> + <dt>{{domxref("Range.endOffset")}} {{readonlyInline}}</dt> + <dd>Returns a number representing where in the <code>endContainer</code> the <code>Range</code> ends.</dd> + <dt>{{domxref("Range.startContainer")}} {{readonlyInline}}</dt> + <dd>Returns the {{ domxref("Node") }} within which the <code>Range</code> starts.</dd> + <dt>{{domxref("Range.startOffset")}} {{readonlyInline}}</dt> + <dd>Returns a number representing where in the <code>startContainer</code> the <code>Range</code> starts.</dd> +</dl> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{ domxref("Range.Range()", "Range()") }} {{experimental_inline}}</dt> + <dd>Returns a <code>Range</code> object with the global {{domxref("Document")}} as its start and end.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<p><em>There are no inherited methods.</em></p> + +<dl> + <dt>{{ domxref("Range.setStart()")}}</dt> + <dd>Sets the start position of a <code>Range</code>.</dd> + <dt>{{ domxref("Range.setEnd()")}}</dt> + <dd>Sets the end position of a <code>Range</code>.</dd> + <dt>{{ domxref("Range.setStartBefore()")}}</dt> + <dd>Sets the start position of a <code>Range</code> relative to another {{ domxref("Node") }}.</dd> + <dt>{{ domxref("Range.setStartAfter()")}}</dt> + <dd>Sets the start position of a <code>Range</code> relative to another {{ domxref("Node") }}.</dd> + <dt>{{ domxref("Range.setEndBefore()")}}</dt> + <dd>Sets the end position of a <code>Range</code> relative to another {{ domxref("Node") }}.</dd> + <dt>{{ domxref("Range.setEndAfter()")}}</dt> + <dd>Sets the end position of a <code>Range</code> relative to another {{ domxref("Node") }}.</dd> + <dt>{{ domxref("Range.selectNode()")}}</dt> + <dd>Sets the <code>Range</code> to contain the {{ domxref("Node") }} and its contents.</dd> + <dt>{{ domxref("Range.selectNodeContents()")}}</dt> + <dd>Sets the <code>Range</code> to contain the contents of a {{ domxref("Node") }}.</dd> + <dt>{{ domxref("Range.collapse()")}}</dt> + <dd>Collapses the <code>Range</code> to one of its boundary points.</dd> + <dt>{{ domxref("Range.cloneContents()")}}</dt> + <dd>Returns a {{ domxref("DocumentFragment") }} copying the nodes of a <code>Range</code>.</dd> + <dt>{{ domxref("Range.deleteContents()")}}</dt> + <dd>Removes the contents of a <code>Range</code> from the {{ domxref("Document") }}.</dd> + <dt>{{ domxref("Range.extractContents()")}}</dt> + <dd>Moves contents of a <code>Range</code> from the document tree into a {{ domxref("DocumentFragment") }}.</dd> + <dt>{{ domxref("Range.insertNode()")}}</dt> + <dd>Insert a {{ domxref("Node") }} at the start of a <code>Range</code>.</dd> + <dt>{{ domxref("Range.surroundContents()")}}</dt> + <dd>Moves content of a <code>Range</code> into a new {{ domxref("Node") }}.</dd> + <dt>{{ domxref("Range.compareBoundaryPoints()")}}</dt> + <dd>Compares the boundary points of the <code>Range</code> with another <code>Range</code>.</dd> + <dt>{{ domxref("Range.cloneRange()")}}</dt> + <dd>Returns a <code>Range</code> object with boundary points identical to the cloned <code>Range</code>.</dd> + <dt>{{ domxref("Range.detach()")}}</dt> + <dd>Releases the <code>Range</code> from use to improve performance.</dd> + <dt>{{ domxref("Range.toString()")}}</dt> + <dd>Returns the text of the <code>Range</code>.</dd> + <dt>{{ domxref("Range.compareNode()")}} {{ Obsolete_inline }}{{non-standard_inline}}</dt> + <dd>Returns a constant representing whether the {{domxref("Node")}} is before, after, inside, or surrounding the range.</dd> + <dt>{{ domxref("Range.comparePoint()")}} {{experimental_inline}}</dt> + <dd>Returns -1, 0, or 1 indicating whether the point occurs before, inside, or after the <code>Range</code>.</dd> + <dt>{{ domxref("Range.createContextualFragment()")}}{{experimental_inline}}</dt> + <dd>Returns a {{ domxref("DocumentFragment") }} created from a given string of code.</dd> + <dt>{{ domxref("Range.getBoundingClientRect()") }} {{experimental_inline}}</dt> + <dd>Returns a {{ domxref("DOMRect") }} object which bounds the entire contents of the <code>Range</code>; this would be the union of all the rectangles returned by {{ domxref("range.getClientRects()") }}.</dd> + <dt>{{ domxref("Range.getClientRects()") }} {{experimental_inline}}</dt> + <dd>Returns a list of {{ domxref("DOMRect") }} objects that aggregates the results of {{ domxref("Element.getClientRects()") }} for all the elements in the <code>Range</code>.</dd> + <dt>{{ domxref("Range.intersectsNode()")}} {{experimental_inline}}</dt> + <dd>Returns a <code>boolean</code> indicating whether the given node intersects the <code>Range</code>.</dd> + <dt>{{ domxref("Range.isPointInRange()")}} {{experimental_inline}}</dt> + <dd>Returns a <code>boolean</code> indicating whether the given point is in the <code>Range</code>.</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('DOM WHATWG', '#interface-range', 'Range')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Do not use <code>RangeException</code> anymore, use <code>DOMException</code> instead.<br> + Made the second parameter of <code>collapse()</code> optional.<br> + Added the methods <code>isPointInRange()</code>, <code>comparePoint()</code>, and <code>intersectsNode()</code>.<br> + Added the constructor <code>Range()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM Parsing', '#extensions-to-the-range-interface', 'Extensions to Range')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>Added the method <code>createContextualFragment()</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#extensions-to-the-range-interface', 'Extensions to Range')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Added the methods <code>getClientRects()</code> and <code>getBoundingClientRect()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-Interface', 'Range')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial specification.</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>Edge</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>{{CompatGeckoDesktop("1.0")}} [1]</td> + <td>9.0</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>Range()</code> constructor {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("24.0")}}</td> + <td>{{CompatNo}}</td> + <td>15.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>compareNode()</code> {{obsolete_inline}}{{non-standard_inline()}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<br> + Removed in {{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>isPointInRange()</code>, and <code>comparePoint()</code>{{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>15.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>intersectsNode()</code> {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("17.0")}} [2]</td> + <td>{{CompatNo}}</td> + <td>15.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>getClientRects()</code> and <code>getBoundingClientRect()</code>{{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9</td> + <td>15.0</td> + <td>5</td> + </tr> + <tr> + <td><code>createContextualFragment()</code>{{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>11</td> + <td>15.0</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>Edge</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>{{CompatGeckoMobile("1.0")}} [1]</td> + <td>9.0</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Starting with Gecko 13.0 {{ geckoRelease("13.0") }} the <code>Range</code> object throws a {{ domxref("DOMException") }} as defined in DOM 4, instead of a <code>RangeException</code> defined in prior specifications.</p> + +<p>[2] Gecko supported it up to Gecko 1.9, then removed it until Gecko 17 where it was reimplemented, matching the spec.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/de/web/api/range/range/index.html b/files/de/web/api/range/range/index.html new file mode 100644 index 0000000000..f4dddfe830 --- /dev/null +++ b/files/de/web/api/range/range/index.html @@ -0,0 +1,95 @@ +--- +title: Range() +slug: Web/API/Range/Range +translation_of: Web/API/Range/Range +--- +<p>{{ APIRef("DOM") }}{{seeCompatTable}}</p> + +<p>Der <code><strong>Range()</strong></code> Konstrukteur gibt ein neu generiertes Objekt wieder, wessen Start und Ende das globale {{domxref("Document")}} Objekt ist.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>range</em> = new Range()</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js language-js"><code class="language-js">range <span class="operator token">=</span> new <span class="function token">Range<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> +endNode <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName<span class="punctuation token">(</span></span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">item<span class="punctuation token">(</span></span><span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +endOffset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName<span class="punctuation token">(</span></span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">item<span class="punctuation token">(</span></span><span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">.</span>childNodes<span class="punctuation token">.</span>length<span class="punctuation token">;</span> +range<span class="punctuation token">.</span><span class="function token">setEnd<span class="punctuation token">(</span></span>endNode<span class="punctuation token">,</span>endOffset<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-range', 'Range.Range()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</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>Basis Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("24.0")}}</td> + <td>{{CompatNo}}</td> + <td>15.0</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>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("24.0")}}</td> + <td>{{CompatNo}}</td> + <td>15.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> + <li><a href="/en-US/docs/Web/API/Document/createRange">Document.createRange()</a></li> +</ul> + +<p> </p> diff --git a/files/de/web/api/readablestream/index.html b/files/de/web/api/readablestream/index.html new file mode 100644 index 0000000000..43873c162b --- /dev/null +++ b/files/de/web/api/readablestream/index.html @@ -0,0 +1,101 @@ +--- +title: ReadableStream +slug: Web/API/ReadableStream +tags: + - API + - Fetch + - Interface + - Reference + - Streams +translation_of: Web/API/ReadableStream +--- +<p>{{APIRef("Streams")}}{{SeeCompatTable}}</p> + +<p><span class="seoSummary">Das <code>ReadableStream</code> Interface der <a href="/en-US/docs/Web/API/Streams_API">Streams API</a> repräsentiert einen lesbaren Datenstrom von Bytes.</span></p> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt>{{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}</dt> + <dd>Erstellt eine Instanz des <code>ReadableStream</code> Interfaces.</dd> +</dl> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<dl> + <dt>{{domxref("ReadableStream.locked")}} {{readonlyInline}}</dt> + <dd>Gibt zurück, ob der Stream bereits für einen Reader gesperrt ist.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<dl> + <dt>{{domxref("ReadableStream.cancel()")}}</dt> + <dd>Bricht den Stream ab und signalisiert dadurch, dass der Konsument sein Interesse am Stream verloren hat. Das angegebene <code>reason</code> Argument wird an die darunterliegende Quelle weitergegeben, welche dieses benutzen kann. </dd> + <dt>{{domxref("ReadableStream.getReader()")}}</dt> + <dd>Erstellt einen Reader, dessen Typ durch die <code>mode</code> Option angegeben wird, und sperrt den Stream für den neuen Reader. Während der Stream gesperrt ist kann kein anderer Reader angelegt werden bis dieser freigegeben wurde.</dd> + <dt>{{domxref("ReadableStream.getIterator()")}}</dt> + <dd>Erstellt einen asyncronen ReadableStream-Iterator und sperrt den Stream für ihn, sodass der Iterator der einzige Leser ist. Während der Stream gesperrt ist kann kein anderer Reader angelegt werden bis dieser freigegeben wurde.</dd> + <dt>{{domxref("ReadableStream.pipeThrough()")}}</dt> + <dd>Bietet die Möglichkeit den Stream mit transformierenden Streams zu verketten.</dd> + <dt>{{domxref("ReadableStream.pipeTo()")}}</dt> + <dd>Pipet den aktuellen <code>ReadableStream</code> zu einem gegebenen {{domxref("WritableStream")}} und gibt ein {{domxref("Promise")}} zurück welches erfüllt ist, wenn der Piping-Prozess erfolgreich beendet wurde oder verwirft es, wenn irgendein anderer Fehler auftritt.</dd> + <dt>{{domxref("ReadableStream.tee()")}}</dt> + <dd>Verzweigt den <code>ReadableStream</code> in zwei neue Stream-Instanzen, auf denen parallel gelesen werden kann.</dd> + <dt>{{domxref("ReadableStream[@@asyncIterator]()")}}</dt> + <dd>Alias der <code>getIterator</code>-Methode.</dd> +</dl> + +<h2 id="Benutzung">Benutzung</h2> + +<p>Im folgenden Beispiel wird eine {{domxref("Response")}} erzeugt, die HTML-Fragmente einer anderen Ressource fetched und an den Browser streamt.</p> + +<p>Dadurch wird die Benutzung von {{domxref("ReadableStream")}} in Kombination mit {{domxref("Uint8Array")}} gezeigt.</p> + +<pre class="brush: js notranslate">fetch("https://www.example.org/").then((response) => { + const reader = response.body.getReader(); + const stream = new ReadableStream({ + start(controller) { + // Die folgende Funktion behandelt jeden Daten-Chunk + function push() { + // "done" ist ein Boolean und "value" ein "Uint8Array" + return reader.read().then(({ done, value }) => { + // Gibt es weitere Daten zu laden? + if (done) { + // Teile dem Browser mit, dass wir fertig mit dem Senden von Daten sind + controller.close(); + return; + } + + // Bekomme die Daten und sende diese an den Browser durch den Controller weiter + controller.enqueue(value); + }).then(push); + }; + + push(); + } + }); + + return new Response(stream, { headers: { "Content-Type": "text/html" } }); +});</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('Streams','#rs-class','ReadableStream')}}</td> + <td>{{Spec2('Streams')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{Compat("api.ReadableStream")}}</div> diff --git a/files/de/web/api/renderingcontext/index.html b/files/de/web/api/renderingcontext/index.html new file mode 100644 index 0000000000..d290eb830d --- /dev/null +++ b/files/de/web/api/renderingcontext/index.html @@ -0,0 +1,41 @@ +--- +title: RenderingContext +slug: Web/API/RenderingContext +translation_of: Web/API/RenderingContext +--- +<p>{{APIRef("Canvas API")}}</p> + +<p><span class="seoSummary"><strong><code>RenderingContext</code></strong> ist eine WebIDL-<code>typedef</code>, die auf eine beliebige der Schnittstellen verweisen kann, die einen Grafik-Rendering-Kontext innerhalb eines {{HTMLElement("canvas")}} Elements darstellen: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} oder {{domxref("WebGL2RenderingContext")}}.</span></p> + +<p>Durch die Verwendung der Kurzform <code>RenderingContext</code> können Methoden und Eigenschaften, die eine beliebige dieser Schnittstellen verwenden können, einfacher spezifiziert und geschrieben werden; da <code><canvas></code> mehrere Rendering-Systeme unterstützt, ist es aus Sicht der Spezifikation und der Browser-Implementierung hilfreich, eine Kurzform zu verwenden, die "eine dieser Schnittstellen" bedeutet.</p> + +<p>Als solches ist <code>RenderingContext</code> ein Implementierungsdetail und nicht etwas, das Webentwickler direkt verwenden. Es gibt keine <code>RenderingContext</code>-Schnittstelle, und es gibt keine Objekte, die den Typ <code>RenderingContext</code> implementieren.</p> + +<p>Die primäre Verwendung dieses Typs ist die Definition der {{domxref("HTMLCanvasElement.getContext()")}} Methode des <code><canvas></code>-Elements, die einen <code>RenderingContext</code> (d.h. einen beliebigen der Rendering-Kontext Typen) zurückgibt.</p> + +<h2 id="Spezifikationen"><span class="tlid-translation translation" lang="de"><span title="">Spezifikationen</span></span></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col"><span class="tlid-translation translation" lang="de"><span title="">Spezifikationen</span></span></th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#renderingcontext", "RenderingContext")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Erstdefinition.</td> + </tr> + </tbody> +</table> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Die Rendering-Kontext-Schnittstellen:<br> + {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}}, und {{domxref("WebGL2RenderingContext")}}</li> + <li><a href="/de/docs/Web/Guide/Graphics">Grafiken im Internet</a></li> + <li><a href="/de/docs/Web/API/Canvas_API">Canvas API</a> und {{HTMLElement("canvas")}}</li> + <li><a href="/de/docs/Web/API/WebGL_API">WebGL</a></li> +</ul> diff --git a/files/de/web/api/response/index.html b/files/de/web/api/response/index.html new file mode 100644 index 0000000000..ee370f462e --- /dev/null +++ b/files/de/web/api/response/index.html @@ -0,0 +1,120 @@ +--- +title: Response +slug: Web/API/Response +translation_of: Web/API/Response +--- +<div>{{APIRef("Fetch API")}}</div> + +<p>Die <strong><code>Response</code></strong> Schnittstelle der <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> stellt die Antwort auf eine Anfrage dar.</p> + +<p>Sie können ein neues <code>Response</code>-Objekt mithilfe des Konstruktors {{domxref("Response.Response()")}} erstellen. Es ist jedoch wahrscheinlicher, dass Sie ein Response-Objekt als Rückgabewert einer API Operation erhalten, z. B. durch einen Service Worker {{domxref("Fetchevent.respondWith")}} oder ein simples {{domxref("GlobalFetch.fetch()")}}.</p> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt>{{domxref("Response.Response","Response()")}}</dt> + <dd>Erstell ein neues <code>Response</code> Objekt.</dd> +</dl> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<dl> + <dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt> + <dd>Enthält das {{domxref("Headers")}} Objekt der Antwort.</dd> + <dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt> + <dd>Enthält einen boolschen Wert, ob die anfrage Erfolgreich war (Status im Bereich von 200-299) oder nicht.</dd> + <dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt> + <dd>Gibt an, ob die Antwort das Ergebnis einer Weiterleitung ist, d. h. die URL-Liste enthält mehrere Einträge.</dd> + <dt>{{domxref("Response.status")}} {{readonlyinline}}</dt> + <dd>Enthält den Status-Code der Antwort (z. B. <code>200</code> bei Erfolg).</dd> + <dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt> + <dd>Enthält die Statusmeldung, die dem Statuscode entspricht (z. B. <code>OK</code> für <code>200</code>).</dd> + <dt>{{domxref("Response.type")}} {{readonlyinline}}</dt> + <dd>Enthält den Typ der Antwort (z. B. <code>basic</code>, <code>cors</code>).</dd> + <dt>{{domxref("Response.url")}} {{readonlyinline}}</dt> + <dd>Enthält die URL der Antwort.</dd> + <dt>{{domxref("Response.useFinalURL")}}</dt> + <dd>Enthält einen booleschen Wert, der angibt, ob dies die endgültige URL der Antwort ist.</dd> +</dl> + +<p><code>Response</code> implementiert {{domxref("Body")}}, daher stehen darüber hinaus auch folgende Eigenschaften zur Verfügung:</p> + +<dl> + <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt> + <dd>Ein einfacher Getter, der verwendet wird, um einen {{domxref("ReadableStream")}} des Body-Inhalts verfügbar zu machen.</dd> + <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt> + <dd>Speichert einen {{domxref("Boolean")}}, der angibt, ob der Body bereits in einer Antwort verwendet wurde.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<dl> + <dt>{{domxref("Response.clone()")}}</dt> + <dd>Klont <code>Response</code> Objekt.</dd> + <dt>{{domxref("Response.error()")}}</dt> + <dd>Gibt ein neues <code>Response</code> Objekt zurück, das einem Netzwerkfehler zugeordnet ist.</dd> + <dt>{{domxref("Response.redirect()")}}</dt> + <dd>Erstellt eine neue Antwort mit einer anderen URL.</dd> +</dl> + +<p><code>Response</code> implementiert {{domxref("Body")}}, daher stehen darüber hinaus auch folgende Methoden zur Verfügung:</p> + +<dl> + <dt>{{domxref("Body.arrayBuffer()")}}</dt> + <dd>Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches in einen {{domxref("ArrayBuffer")}} aufgelöst wird.</dd> + <dt>{{domxref("Body.blob()")}}</dt> + <dd>Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches in einen {{domxref("Blob")}} aufgelöst wird.</dd> + <dt>{{domxref("Body.formData()")}}</dt> + <dd>Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches in einen {{domxref("FormData")}} Objekt aufgelöst wird.</dd> + <dt>{{domxref("Body.json()")}}</dt> + <dd>Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches den Inhalt des Body als {{jsxref("JSON")}} einliest.</dd> + <dt>{{domxref("Body.text()")}}</dt> + <dd>Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches in einen {{domxref("USVString")}} (Text) aufgelöst wird.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/basic-fetch">grundlegenden Beispiel zu Fetch</a> (<a href="https://mdn.github.io/fetch-examples/basic-fetch/">Beispiel live ausführen</a>) verwenden wir einen einfachen Aufruf von <code>fetch()</code>, um ein Bild abzurufen und es in einem {{htmlelement("img")}} Tag anzuzeigen. Der Aufruf von <code>fetch()</code> gibt ein Promise zurück, das zu einem Response Objekt aufgelöst wird, welches mit der Anforderung der Ressource verknüpft ist. Da wir ein Bild anfordern, werden Sie feststellen, dass wir {{domxref("Body.blob")}} ausführen müssen ({{domxref("Response")}} implementiert <code>Body</code>), um der Antwort den richtigen MIME-Type zuzuordnen.</p> + +<pre class="brush: js">const image = document.querySelector('.my-image'); +fetch('flowers.jpg').then(function(response) { + return response.blob(); +}).then(function(blob) { + const objectURL = URL.createObjectURL(blob); + image.src = objectURL; +});</pre> + +<p>Sie können auch den {{domxref("Response.Response()")}} Konstruktor verwenden, um Ihr eigenes benutzerdefiniertes <code>Response</code> Objekt zu erstellen:</p> + +<pre class="brush: js">const response = new Response();</pre> + +<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#response-class','Response')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Response")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/de/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/de/web/api/response/response/index.html b/files/de/web/api/response/response/index.html new file mode 100644 index 0000000000..53f3eff566 --- /dev/null +++ b/files/de/web/api/response/response/index.html @@ -0,0 +1,75 @@ +--- +title: Response() +slug: Web/API/Response/Response +translation_of: Web/API/Response/Response +--- +<div>{{APIRef("Fetch")}}</div> + +<p>Der <code><strong>Response()</strong></code> Konstruktor erstellt ein neues {{domxref("Response")}} Objekt.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>myResponse</var> = new Response(<var>body</var>, <var>init</var>);</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>body</code> {{optional_inline}}</dt> + <dd>Ein Objekt, welches den Body für eine Antwort definiert. Das kann entweder <code>null</code> oder eins der folgenden sein: + <ul> + <li>{{domxref("Blob")}}</li> + <li>{{domxref("BufferSource")}}</li> + <li>{{domxref("FormData")}}</li> + <li>{{domxref("ReadableStream")}}</li> + <li>{{domxref("URLSearchParams")}}</li> + <li>{{domxref("USVString")}}</li> + </ul> + </dd> + <dt><code>init</code> {{optional_inline}}</dt> + <dd>Ein Objekt mit Optionen, welches benutzerdefinierte Einstellungen enthält, die auf die Antwort angewendet werden sollen. Mögliche Optionen sind: + <ul> + <li><code>status</code>: Der Statuscode der Antwort, z. B. <code>200</code>.</li> + <li><code>statusText</code>: Die Statusnachricht die dem Statuscode zugeordnet ist, z. B. <code>OK</code>.</li> + <li><code>headers</code>: Etwaige Header die Sie Ihrer Antwort hinzufügen wollen, die einem {{domxref("Headers")}} Objekt or einem Objekt-Literal von {{domxref("ByteString")}} Schlüsselwertpaaren enthalten sind (siehe <a href="/de/docs/Web/HTTP/Headers">HTTP Header</a> für Referenzen).</li> + </ul> + </dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Beispiel für eine Fetch Antwort</a> (<a href="http://mdn.github.io/fetch-examples/fetch-request/">live ausführen</a>) erstellen wir ein neues <code>Response</code> Objekt mit dem Konstruktor, dem wir einen neuen {{domxref("Blob")}} als Body und ein <code>init</code> Objekt übergeben, welches einen benutzerdefinierten <code>status</code> und <code>statusText</code> enthält:</p> + +<pre class="brush: js">var myBlob = new Blob(); +var init = { "status" : 200 , "statusText" : "SuperSmashingGreat!" }; +var myResponse = new Response(myBlob,init);</pre> + +<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-response','Response()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Response.Response")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/de/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/de/web/api/rtcicecandidate/index.html b/files/de/web/api/rtcicecandidate/index.html new file mode 100644 index 0000000000..4479c64bb6 --- /dev/null +++ b/files/de/web/api/rtcicecandidate/index.html @@ -0,0 +1,121 @@ +--- +title: RTCIceCandidate +slug: Web/API/RTCIceCandidate +translation_of: Web/API/RTCIceCandidate +--- +<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}{{draft}}</p> + +<p>Das <strong><code>RTCIceCandidate</code></strong> Interface der <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a> repräsentiert einen Kandidaten für einen Internet Connectivity Establishment (ICE) Server, welcher eine {{domxref("RTCPeerConnection")}} herstellt.</p> + +<h2 id="Konstruktoren">Konstruktoren</h2> + +<dl> + <dt>{{domxref("RTCIceCandidate.RTCIceCandidate()","RTCIceCandidate()")}}</dt> + <dd>Erstellt ein <code>RTCIceCandidate</code> Objekt.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("RTCIceCandidate.candidate")}} {{readonlyInline}}</dt> + <dd>Ein {{domxref("DOMString")}}, der die Transportadresse für den Kadidaten repräsentiert, welche zur Konnektivitätsprüfung verwendet werden kann. Das Format der Adresse ist ein <code>candidate-attribute</code>, wie in {{RFC(5245)}} definiert. Dieser String ist leer (<code>""</code>), wenn der <code>RTCIceCandidate</code> einen "end of candidates" Indikator repräsentiert.</dd> + <dt>{{domxref("RTCIceCandidate.foundation")}} {{readonlyInline}}</dt> + <dd>Gibt einen eindeutigen Identifikator zurück, der es dem ICE erlaubt, Kandidaten, die in mehreren {{domxref("RTCIceTransport")}} Objekten vorhanden sind, in Beziehung zu setzen.</dd> + <dt>{{domxref("RTCIceCandidate.ip")}} {{readonlyInline}}</dt> + <dd>Gibt die IP-Adresse des Kandidaten zurück.</dd> + <dt>{{domxref("RTCIceCandidate.port")}} {{readonlyInline}}</dt> + <dd>Gibt den Port des Kandidaten zurück.</dd> + <dt>{{domxref("RTCIceCandidate.priority")}} {{readonlyInline}}</dt> + <dd>Gibt die zugewiesene Priorität des Kandidaten zurück.</dd> + <dt>{{domxref("RTCIceCandidate.protocol")}} {{readonlyInline}}</dt> + <dd>Gibt das vom Kandidaten verwendete Protokoll zurück, entweder TCP oder UDP.</dd> + <dt>{{domxref("RTCIceCandidate.relatedAddress")}} {{readonlyInline}}</dt> + <dd>Für einen Kandidaten, welcher von einem anderen abgeleitet ist, wie etwa ein Relay- oder Reflexivkandidat, ist <dfn><code>relatedAddress</code></dfn> die IP-Adresse des Kandidaten, von dem er abgeleitet ist. Für Hostkandidaten ist sie <code>null</code>.</dd> + <dt>{{domxref("RTCIceCandidate.relatedPort")}} {{readonlyInline}}</dt> + <dd>Für einen Kandidaten, welcher von einem anderen abgeleitet ist, wie etwa ein Relay- oder Reflexivkandidat, ist <dfn><code>relatedPort</code></dfn> der Port des Kandidaten, von dem er abgeleitet ist. Für Hostkandidaten ist er <code>null</code>.</dd> + <dt>{{domxref("RTCIceCandidate.sdpMid")}} {{readonlyInline}}</dt> + <dd>Enthält, wenn nicht <code>null</code>, den Identifikator der "media stream identification" (wei definiert in <cite><a href="https://tools.ietf.org/html/rfc5888">RFC 5888</a>) für die Medienkomponente, zu der dieser Kandidat zugeordnet ist.</cite></dd> + <dt>{{domxref("RTCIceCandidate.sdpMLineIndex")}} {{readonlyInline}}</dt> + <dd>Enthält, wenn nicht <code>null</code>, den Index (beginnend bei 0) der Medienbeschreibung (wie definiert in <a href="https://tools.ietf.org/html/rfc4566">RFC 4566</a>) im SDP, dem dieser Kandidat zugeordnet ist.</dd> + <dt>{{domxref("RTCIceCandidate.tcpType")}} {{readonlyInline}}</dt> + <dd>Wenn <code>protocol</code> den Wert <code>tcp</code> enthält, dann repräsentiert <code>tcpType</code> den Typ des TCP Kandidats. Ansonsten enthält <code>tcpType</code> den Wert <code>null</code>.</dd> + <dt>{{domxref("RTCIceCandidate.type")}} {{readonlyInline}}</dt> + <dd>Einer aus <code>host</code>, <code>srflx</code>, <code>prflx</code>, oder <code>relay</code>.</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('WebRTC 1.0', '#rtcicecandidate-interface', 'RTCIceCandidate')}}</td> + <td>{{Spec2('WebRTC 1.0')}}</td> + <td>Initiale definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(22)}}</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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/api/rtcpeerconnection/index.html b/files/de/web/api/rtcpeerconnection/index.html new file mode 100644 index 0000000000..df67ef624c --- /dev/null +++ b/files/de/web/api/rtcpeerconnection/index.html @@ -0,0 +1,379 @@ +--- +title: RTCPeerConnection +slug: Web/API/RTCPeerConnection +translation_of: Web/API/RTCPeerConnection +--- +<p>{{APIRef}}{{SeeCompatTable}}</p> + +<p>The <strong><code>RTCPeerConnection</code></strong> interface represents a WebRTC connection between the local computer and a remote peer. It is used to handle efficient streaming of data between the two peers.</p> + +<div class="note"> +<p><strong>Note:</strong> <code>RTCPeerConnection</code> and {{domxref("RTCSessionDescription")}} are currently prefixed in most browsers, and the {{domxref("navigator.getUserMedia()")}} method is prefixed in many versions of some browsers; you should use code like the following to access these:</p> + +<pre class="brush: js">var peerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || + window.webkitRTCPeerConnection || window.msRTCPeerConnection; +var sessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription || + window.webkitRTCSessionDescription || window.msRTCSessionDescription; + +navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || + navigator.webkitGetUserMedia || navigator.msGetUserMedia; +</pre> + +<p>Simple code such as this is all it takes to ensure that your project will work on as many versions of as many browsers as possible.</p> +</div> + +<h2 id="Basic_usage">Basic usage</h2> + +<p>Basic <code>RTCPeerConnection</code> usage involves negotiating a connection between your local machine and a remote one by generating <a href="http://en.wikipedia.org/wiki/Session_Description_Protocol">Session Description Protocol</a> to exchange between the two. The caller starts the process by sending an offer to the remote machine, which responds by either accepting or rejecting the call.</p> + +<p>Both parties (the caller and the called party) need to set up their own <code>RTCPeerConnection</code> instances to represent their end of the peer-to-peer connection:</p> + +<pre class="brush: js">var pc = new RTCPeerConnection(); +pc.onaddstream = function(obj) { + var vid = document.createElement("video"); + document.appendChild(vid); + vid.srcObject = obj.stream; +} + +// Helper functions +function endCall() { + var videos = document.getElementsByTagName("video"); + for (var i = 0; i < videos.length; i++) { + videos[i].pause(); + } + + pc.<a href="#close()">close</a>(); +} + +function error(err) { + endCall(); +} +</pre> + +<h3 id="Initializing_the_call">Initializing the call</h3> + +<p>If you are the one initiating the call, you would use {{domxref("navigator.getUserMedia()")}} to get a video stream, then add the stream to the <code>RTCPeerConnection</code>. Once that's been done, call {{domxref("RTCPeerConnection.createOffer()")}} to create an offer, configure the offer, then send it to the server through which the connection is being mediated.</p> + +<pre class="brush: js">// Get a list of friends from a server +// User selects a friend to start a peer connection with +navigator.getUserMedia({video: true}, function(stream) { + // Adding a local stream won't trigger the onaddstream callback, + // so call it manually. + pc.onaddstream({stream: stream}); + pc.<a href="#addStream()">addStream</a>(stream); + + pc.<a href="#createOffer()">createOffer</a>(function(offer) { + pc.<a href="#setLocalDescription()">setLocalDescription</a>(new <span class="nx">RTCSessionDescription</span>(offer), function() { + // send the offer to a server to be forwarded to the friend you're calling. + }, error); + }, error); +}); +</pre> + +<h3 id="Answering_a_call">Answering a call</h3> + +<p>On the opposite end, the friend will receive the offer from the server using whatever protocol is being used to do so. Once the offer arrives, {{domxref("navigator.getUserMedia()")}} is once again used to create the stream, which is added to the <code>RTCPeerConnection</code>. An {{domxref("RTCSessionDescription")}} object is created and set up as the remote description by calling {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</p> + +<p>Then an answer is created using {{domxref("RTCPeerConnection.createAnswer()")}} and sent back to the server, which forwards it to the caller.</p> + +<pre class="brush: js">var offer = getOfferFromFriend(); +navigator.getUserMedia({video: true}, function(stream) { + pc.onaddstream({stream: stream}); + pc.<a href="#addStream()">addStream</a>(stream); + + pc.setRemoteDescription(new <span class="nx">RTCSessionDescription</span>(offer), function() { + pc.<a href="#createAnswer()">createAnswer</a>(function(answer) { + pc.<a href="#setLocalDescription()">setLocalDescription</a>(new <span class="nx">RTCSessionDescription</span>(answer), function() { + // <span style="font-size: 1rem;">send the answer to a server to be forwarded back to the caller (you)</span> + }, error); + }, error); + }, error); +}); +</pre> + +<h3 id="Handling_the_answer">Handling the answer</h3> + +<p>Back on the original machine, the response is received. Once that happens, call {{domxref("RTCPeerConnection.setRemoteDescription()")}} to set the response as the remote end of the connection.</p> + +<pre class="brush: js">// pc was set up earlier when we made the original offer +var offer = getResponseFromFriend(); +pc.<a href="#createAnswer()">setRemoteDescription</a>(new <span class="nx">RTCSessionDescription</span>(offer), function() { }, error); +</pre> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("RTCPeerConnection.RTCPeerConnection", "RTCPeerConnection()")}}</dt> + <dd>Constructor; returns a new <code>RTCPeerConnection</code> object.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface inherits properties from its parent interface, {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("RTCPeerConnection.iceConnectionState")}} {{ReadOnlyInline}}</dt> + <dd>Returns an enum of type <code>RTCIceConnectionState</code> that describes the ICE connection state for the connection. When this value changes, a {{event("iceconnectionstatechange")}} event is fired on the object.</dd> + <dt>{{domxref("RTCPeerConnection.iceGatheringState")}} {{ReadOnlyInline}}</dt> + <dd>Returns an enum of type <code>RTCIceGatheringState</code> that describes the ICE gathering state for the connection.</dd> + <dt>{{domxref("RTCPeerConnection.localDescription")}} {{ReadOnlyInline}}</dt> + <dd>Returns a {{domxref("RTCSessionDescription")}} describing the session for the local end of the connection. If it has not yet been set, it can be <code>null</code>.</dd> + <dt>{{domxref("RTCPeerConnection.peerIdentity")}} {{ReadOnlyInline}}</dt> + <dd>Returns a <code>RTCIdentityAssertion</code>, that is a couple of a domain name (<code>idp</code>) and a name (<code>name</code>) representing the identity of the remote peer of this connection, once set and verified. If no peer has yet been set and verified, this property will return <code>null</code>. Once set, via the appropriate method, it can't be changed.</dd> + <dt>{{domxref("RTCPeerConnection.remoteDescription")}} {{ReadOnlyInline}}</dt> + <dd>Returns a {{domxref("RTCSessionDescription")}} describing the session for the remote end of the connection. If it has not yet been set, it can be <code>null</code>.</dd> + <dt>{{domxref("RTCPeerConnection.signalingState")}} {{ReadOnlyInline}}</dt> + <dd>Returns an enum of type <code>RTCSignalingState</code> that describes the signaling state of the local connection. This state describes the SDP offer, that defines the configuration of the connections like the description of the locally associated objects of type {{domxref("MediaStream")}}, the codec/RTP/RTCP options, the candidates gathered by the ICE Agent. When this value changes, a {{event("signalingstatechange")}} event is fired on the object.</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("RTCPeerConnection.onaddstream")}}</dt> + <dd>Is the event handler called when the {{event("addstream")}} event is received. Such an event is sent when a {{domxref("MediaStream")}} is added to this connection by the remote peer. The event is sent immediately after the call {{domxref("RTCPeerConnection.setRemoteDescription()")}} and doesn't wait for the result of the SDP negotiation.</dd> + <dt>{{domxref("RTCPeerConnection.ondatachannel")}}</dt> + <dd>Is the event handler called when the {{event("datachannel")}} event is received. Such an event is sent when a {{domxref("RTCDataChannel")}} is added to this connection.</dd> + <dt>{{domxref("RTCPeerConnection.onicecandidate")}}</dt> + <dd>Is the event handler called when the {{event("icecandidate")}} event is received. Such an event is sent when a {{domxref("RTCICECandidate")}} object is added to the script.</dd> + <dt>{{domxref("RTCPeerConnection.oniceconnectionstatechange")}}</dt> + <dd>Is the event handler called when the {{event("iceconnectionstatechange")}} event is received. Such an event is sent when the value of {{domxref("RTCPeerConnection.iceConnectionState", "iceConnectionState")}} changes.</dd> + <dt>{{domxref("RTCPeerConnection.onidentityresult")}}</dt> + <dd>Is the event handler called when the {{event("identityresult")}} event is received. Such an event is sent when an identity assertion is generated, via {{domxref("RTCPeerConnection.getIdentityAssertion()", "getIdentityAssertion()")}}, or during the creation of an offer or an answer.</dd> + <dt>{{domxref("RTCPeerConnection.onidpassertionerror")}}</dt> + <dd>Is the event handler called when the {{event("idpassertionerror")}} event is received. Such an event is sent when the associated identity provider (IdP) encounters an error while generating an identity assertion.</dd> + <dt>{{domxref("RTCPeerConnection.onidpvalidationerror")}}</dt> + <dd>Is the event handler alled when the {{event("idpvalidationerror")}} event is received. Such an event is sent when the associated identity provider (IdP) encounters an error while validating an identity assertion.</dd> + <dt>{{domxref("RTCPeerConnection.onnegotiationneeded")}}</dt> + <dd>Is the event handler called when the {{event("negotiationneeded")}} event, sent by the browser to inform that negotiation will be required at some point in the future, is received.</dd> + <dt>{{domxref("RTCPeerConnection.onpeeridentity")}}</dt> + <dd>Is the event handler called when the {{event("peeridentity")}} event, sent when a peer identity has been set and verified on this connection, is received.</dd> + <dt>{{domxref("RTCPeerConnection.onremovestream")}}</dt> + <dd>Is the event handler called when the {{event("removestream")}} event, sent when a {{domxref("MediaStream")}} is removed from this connection, is received.</dd> + <dt>{{domxref("RTCPeerConnection.onsignalingstatechange")}}</dt> + <dd>Is the event handler called when the {{event("signalingstatechange")}} event, sent when the value of {{domxref("RTCPeerConnection.signalingState", "signalingState")}} changes, is received.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("RTCPeerConnection.addIceCandidate()")}}</dt> + <dd> </dd> + <dt>{{domxref("RTCPeerConnection.addStream()")}}</dt> + <dd>Adds a {{domxref("MediaStream")}} as a local source of audio or video. If the negotiation already happened, a new one will be needed for the remote peer to be able to use it.</dd> + <dt>{{domxref("RTCPeerConnection.close()")}}</dt> + <dd>Abruptly closes a connection.</dd> + <dt>{{domxref("RTCPeerConnection.createAnswer()")}}</dt> + <dd>Creates an answer to the offer received by the remote peer, in a two-part offer/answer negotiation of a connection. The two first parameters are respectively success and error callbacks, the optional third one represent options for the answer to be created.</dd> + <dt>{{domxref("RTCPeerConnection.createDataChannel()")}}</dt> + <dd>Creates a new {{domxref("RTCDataChannel")}} associated with this connection. The method takes a dictionary as parameter, with the configuration required for the underlying data channel, like its reliability.</dd> + <dt>{{domxref("RTCPeerConnection.createDTMFSender()")}}</dt> + <dd>Creates a new {{domxref("RTCDTMFSender")}}, associated to a specific {{domxref("MediaStreamTrack")}}, that will be able to send {{Glossary("DTMF")}} phone signaling over the connection.</dd> + <dt>{{domxref("RTCPeerConnection.createOffer()")}}</dt> + <dd>Creates a request to find a remote peer with a specific configuration. </dd> + <dt>{{domxref("RTCPeerConnection.generateCertificate()")}}</dt> + <dd>Creates and stores an X.509 certificate and corresponding private key then returns an {{domxref("RTCCertificate")}}, providing access to it.</dd> + <dt>{{domxref("RTCPeerConnection.getConfiguration()")}}</dt> + <dd> </dd> + <dt>{{domxref("RTCPeerConnection.getIdentityAssertion()")}}</dt> + <dd>Initiates the gathering of an identity assertion. This has an effect only if the {{domxref("RTCPeerConnection.signalingState", "signalingState")}} is not <code>"closed"</code>. It is not expected for the application dealing with the <code>RTCPeerConnection</code>: this is automatically done; an explicit call only allows to anticipate the need.</dd> + <dt>{{domxref("RTCPeerConnection.getLocalStreams()")}}</dt> + <dd>Returns an array of {{domxref("MediaStream")}} associated with the local end of the connection. The array may be empty.</dd> + <dt>{{domxref("RTCPeerConnection.getRemoteStreams()")}}</dt> + <dd>Returns an array of {{domxref("MediaStream")}} associated with the remote end of the connection. The array may be empty.</dd> + <dt>{{domxref("RTCPeerConnection.getStats()")}}</dt> + <dd>Creates a new {{domxref("RTCStatsReport")}} that contains and allows access to statistics regarding the connection.</dd> + <dt>{{domxref("RTCPeerConnection.getStreamById()")}}</dt> + <dd>Returns the {{domxref("MediaStream")}} with the given id that is associated with local or remote end of the connection. If no stream matches, it returns <code>null</code>.</dd> + <dt>{{domxref("RTCPeerConnection.removeStream()")}}</dt> + <dd>Removes a {{domxref("MediaStream")}} as a local source of audio or video. If the negotiation already happened, a new one will be needed for the remote peer to stop using it.</dd> + <dt>{{domxref("RTCPeerConnection.setIdentityProvider()")}}</dt> + <dd>Sets the Identity Provider (IdP) to the triplet given in parameter: its name, the protocol used to communicate with it (optional) and an optional username. The IdP will be used only when an assertion will be needed.</dd> + <dt>{{domxref("RTCPeerConnection.setLocalDescription()")}}</dt> + <dd>Changes the local description associated with the connection. The description defines the properties of the connection like its codec. The connection is affected by this change and must be able to support both old and new descriptions. The method takes three parameters, a {{domxref("RTCSessionDescription")}} object to set, and two callbacks, one called if the change of description succeeds, another called if it failed.</dd> + <dt>{{domxref("RTCPeerConnection.setRemoteDescription()")}}</dt> + <dd>Changes the remote description associated with the connection. The description defines the properties of the connection like its codec. The connection is affected by this change and must be able to support both old and new descriptions. The method takes three parameters, a {{domxref("RTCSessionDescription")}} object to set, and two callbacks, one called if the change of description succeeds, another called if it failed.</dd> + <dt>{{domxref("RTCPeerConnection.updateIce()")}}</dt> + <dd> </dd> +</dl> + +<h3 id="Constructor_2">Constructor</h3> + +<pre>new RTCPeerConnection({{domxref("RTCConfiguration")}} configuration, optional {{domxref("MediaConstraints")}} constraints);</pre> + +<div class="note"> +<p><strong>Note:</strong> While the PeerConnection specification reads like passing an RTCConfiguration object is required, Firefox will supply a default if you don't.</p> +</div> + +<h2 id="Methods_2">Methods</h2> + +<h3 id="createOffer">createOffer</h3> + +<p><code>void createOffer({{domxref("RTCSessionDescriptionCallback")}} successCallback, {{domxref("RTCPeerConnectionErrorCallback")}} failureCallback, optional {{domxref("MediaConstraints")}} constraints);</code></p> + +<p>Create offer generates a blob of description data to facilitate a PeerConnection to the local machine. Use this when you've got a remote Peer connection and you want to set up the local one.</p> + +<h4 id="Example">Example</h4> + +<pre class="prettyprint">var pc = new PeerConnection(); +pc.addStream(video); +pc.createOffer(function(desc){ + pc.setLocalDescription(desc, function() { + // send the offer to a server that can negotiate with a remote client + }); +}</pre> + +<h4 id="Arguments">Arguments</h4> + +<dl> + <dt>successCallback</dt> + <dd>An {{domxref("RTCSessionDescriptionCallback")}} which will be passed a single {{domxref("RTCSessionDescription")}} object</dd> + <dt>errorCallback</dt> + <dd>An {{domxref("RTCPeerConnectionErrorCallback")}} which will be passed a single {{domxref("DOMError")}} object</dd> + <dt>[optional] constraints</dt> + <dd>An optional {{domxref("MediaConstraints")}} object.</dd> +</dl> + +<h3 id="createAnswer">createAnswer</h3> + +<p><code>void createAnswer({{domxref("RTCSessionDescriptionCallback")}} successCallback, {{domxref("RTCPeerConnectionErrorCallback")}} failureCallback, optional {{domxref("MediaConstraints")}} constraints)")</code></p> + +<p>Respond to an offer sent from a remote connection.</p> + +<h4 id="Example_2">Example</h4> + +<pre class="line">var pc = new PeerConnection(); +pc.setRemoteDescription(new RTCSessionDescription(offer), function() { + pc.createAnswer(function(answer) { + pc.setLocalDescription(answer, function() { + // send the answer to the remote connection + }) + }) +});</pre> + +<h4 id="Arguments_2">Arguments</h4> + +<dl> + <dt>successCallback</dt> + <dd>An {{domxref("RTCSessionDescriptionCallback")}} which will be passed a single {{domxref("RTCSessionDescription")}} object</dd> + <dt>errorCallback</dt> + <dd>An {{domxref("RTCPeerConnectionErrorCallback")}} which will be passed a single {{domxref("DOMError")}} object</dd> + <dt>[optional] constraints</dt> + <dd>An optional {{domxref("MediaConstraints")}} object.</dd> +</dl> + +<h3 id="updateIce()">updateIce()</h3> + +<p>updateIce(optional {{domxref("RTCConfiguration")}} configuration, optional {{domxref("MediaConstraints")}} constraints)</p> + +<p>The updateIce method updates the ICE Agent process of gathering local candidates and pinging remote candidates. If there is a mandatory constraint called "IceTransports" it will control how the ICE engine can act. This can be used to limit the use to TURN candidates by a callee to avoid leaking location information prior to the call being accepted. This call may result in a change to the state of the ICE Agent, and may result in a change to media state if it results in connectivity being established.</p> + +<h4 id="Example_3">Example</h4> + +<pre> </pre> + +<h3 id="addIceCandidate()">addIceCandidate()</h3> + +<p>addIceCandidate ({{domxref("RTCIceCandidate")}} candidate, {{domxref("Function")}} successCallback, {{domxref("RTCPeerConnectionErrorCallback")}} failureCallback);</p> + +<p>The addIceCandidate() method provides a remote candidate to the ICE Agent. In addition to being added to the remote description, connectivity checks will be sent to the new candidates as long as the "IceTransports" constraint is not set to "none". This call will result in a change to the connection state of the ICE Agent, and may result in a change to media state if it results in different connectivity being established.</p> + +<h4 id="Example_4">Example</h4> + +<pre> pc.addIceCandidate(new RTCIceCandidate(candidate)); +</pre> + +<h3 id="createDataChannel">createDataChannel</h3> + +<p><code>{{domxref("RTCDataChannel")}} createDataChannel ({{domxref("DOMString")}} label, optional {{domxref("RTCDataChannelInit")}} dataChannelDict);</code></p> + +<p>Creates a data channel for sending non video or audio data across the peer connection</p> + +<h4 id="Example_5">Example</h4> + +<pre class="brush: js">var pc = new PeerConnection(); +var channel = pc.createDataChannel("Mydata"); +channel.onopen = function(event) { + <code>channel.send('sending a message');</code> +} +channel.onmessage = function(event) { console.log(event.data); }</pre> + +<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('WebRTC 1.0')}}</td> + <td>{{Spec2('WebRTC 1.0')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</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>Firefox OS</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>{{CompatVersionUnknown}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js">https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple">http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple</a></li> + <li><a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html">http://dev.w3.org/2011/webrtc/editor/webrtc.html</a></li> +</ul> diff --git a/files/de/web/api/rtcrtptransceiver/direction/index.html b/files/de/web/api/rtcrtptransceiver/direction/index.html new file mode 100644 index 0000000000..644e007d52 --- /dev/null +++ b/files/de/web/api/rtcrtptransceiver/direction/index.html @@ -0,0 +1,82 @@ +--- +title: RTCRtpTransceiver.direction +slug: Web/API/RTCRtpTransceiver/direction +tags: + - API + - Attribut + - RTCRtpTransceiver + - RTP + - Richtung + - Transceiver + - Transceiver Richtung + - WebRTC + - direction +translation_of: Web/API/RTCRtpTransceiver/direction +--- +<div>{{APIRef("WebRTC")}}</div> + +<p><span class="seoSummary">Das {{domxref("RTCRtpTransceiver")}} <code><strong>direction</strong></code> Attribut gibt als String die bevorzugte Transceiver-Richtung an. Es muss sich hierbei um einen Wert des</span> {{domxref("RTCRtpTransceiverDirection")}} Enum handeln.</p> + +<p>Die tatsächliche, aktuelle Richtung des Transceivers kann über das {{domxref("RTCRtpTransceiver.currentDirection", "currentDirection")}} Attribut abgelesen werden.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>direction</em> = <em>RTCRtpTransceiver</em>.direction</pre> + +<h3 id="Value">Value</h3> + +<p>Ein {{domxref("DOMString")}}, dessen Wert einem Wert des <code>RTCRtpTransceiverDirection</code> Enum / Aufzählungstypen entspricht und die bevorzugte Transceiver-Richtung angibt. {{page("/en-US/docs/Web/API/RTCRtpTransceiverDirection", "Values")}}</p> + +<h3 id="Exceptions">Exceptions</h3> + +<p>Wird der <code>direction</code> Wert eines Transceivers gesetzt, können folgende Fehler auftreten:</p> + +<dl> + <dt><code>InvalidStateError</code></dt> + <dd>Der Receiver des Transceivers {{domxref("RTCPeerConnection")}} wurde bereits geschlossen und befindet sich nun im <code>closed</code> Zustand oder der {{domxref("RTCRtpReceiver")}} wurde gestoppt und befinet sich im <code>stopped</code> Zustand.</dd> +</dl> + +<h2 id="Hinweise_zur_Nutzung">Hinweise zur Nutzung</h2> + +<h3 id="Ändern_der_Übertragungsrichtung">Ändern der Übertragungsrichtung</h3> + +<p>Wird der Wert des <code>direction</code> Attributes geändert, wird eine <code>InvalidStateError</code> Ausnahme geworfen, insofern die RTCPeerConnection bereits geschlossen wurde oder aber der jeweils betroffene Receiver oder Sender bereits gestoppt wurde.</p> + +<p>Wenn der neu gesetzte Wert für <code>direction</code> sich vom aktuellen Wert unterscheidet, muss die Übertragung mit dem Peer neu verhandelt werden, es wird also ein {{event("negotiationneeded")}} Event auf der {{domxref("RTCPeerConnection")}} ausgelöst.</p> + +<h3 id="Transceiver-Richtung_in_SDP">Transceiver-Richtung in SDP</h3> + +<p>Der <code>direction</code> Wert wird von {{domxref("RTCPeerConnection.createOffer()")}} bzw. {{domxref("RTCPeerConnection.createAnswer()")}} genutzt, um die entsprechenden SDP-Nachrichten zu generieren. SDP stellt die Richtung über eine Attribut-Zeile (a-line) dar. Wenn die Richtung des Transceivers als <code>"sendrecv"</code> definiert wurde, so enthält die hierzu erzeugte SDP-Nachricht folgende Attribut-Zeile:</p> + +<pre>a=sendrecv</pre> + +<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("WebRTC 1.0", "#dom-rtcrtptransceiver-direction", "RTCRtpTransceiver.direction")}}</td> + <td>{{Spec2("WebRTC 1.0")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.RTCRtpTransceiver.direction")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("RTCRtpTransceiver.currentDirection")}}</li> +</ul> diff --git a/files/de/web/api/rtcrtptransceiver/index.html b/files/de/web/api/rtcrtptransceiver/index.html new file mode 100644 index 0000000000..0bf844cf0f --- /dev/null +++ b/files/de/web/api/rtcrtptransceiver/index.html @@ -0,0 +1,85 @@ +--- +title: RTCRtpTransceiver +slug: Web/API/RTCRtpTransceiver +tags: + - API + - Interface + - Media + - MediaStreamTrack + - NeedsTranslation + - RTCRtpTransceiver + - RTP + - Reference + - SDP + - TopicStub + - Transceiver + - WebRTC +translation_of: Web/API/RTCRtpTransceiver +--- +<div>{{APIRef("WebRTC")}}</div> + +<p><span class="seoSummary">The WebRTC interface <strong><code>RTCRtpTransceiver</code></strong> describes a permanent pairing of an {{domxref("RTCRtpSender")}} and an {{domxref("RTCRtpReceiver")}}, along with some shared state.</span></p> + +<p>Each {{Glossary("SDP")}} media section describes one bidirectional SRTP ("Secure Real Time Protocol") stream (excepting the media section for {{domxref("RTCDataChannel")}}, if present). This pairing of send and receive SRTP streams is significant for some applications, so <code>RTCRtpTransceiver</code> is used to represent this pairing, along with other important state from the media section. Each non-disabled SRTP media section is always represented by exactly one transceiver.</p> + +<p>A transceiver is uniquely identified using its {{domxref("RTCRtpTransceiver.mid", "mid")}} property, which is the same as the media ID (<code>mid</code>) of its corresponding m-line. An <code>RTCRtpTransceiver</code> is <strong>associated</strong> with an m-line if its <code>mid</code> is non-null; otherwise it's considered disassociated.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("RTCRtpTransceiver.currentDirection", "currentDirection")}} {{ReadOnlyInline}}</dt> + <dd>A string from the enum {{domxref("RTCRtpTransceiverDirection")}} which indicates the transceiver's current directionality, or <code>null</code> if the transceiver is stopped or has never participated in an exchange of offers and answers.</dd> + <dt>{{domxref("RTCRtpTransceiver.direction", "direction")}}</dt> + <dd>A string from the enum {{domxref("RTCRtpTransceiverDirection")}} which is used to set the transceiver's desired direction.</dd> + <dt>{{domxref("RTCRtpTransceiver.mid", "mid")}} {{ReadOnlyInline}}</dt> + <dd>The media ID of the m-line associated with this transceiver. This association is established, when possible, whenever either a local or remote description is applied. This field is <code>null</code> if neither a local or remote description has been applied, or if its associated m-line is rejected by either a remote offer or any answer.</dd> + <dt>{{domxref("RTCRtpTransceiver.receiver", "receiver")}} {{ReadOnlyInline}}</dt> + <dd>The {{domxref("RTCRtpReceiver")}} object that handles receiving and decoding incoming media.</dd> + <dt>{{domxref("RTCRtpTransceiver.sender", "sender")}} {{ReadOnlyInline}}</dt> + <dd>The {{domxref("RTCRtpSender")}} object responsible for encoding and sending data to the remote peer.</dd> + <dt>{{domxref("RTCRtpTransceiver.stopped", "stopped")}}</dt> + <dd>Indicates whether or not sending and receiving using the paired <code>RTCRtpSender</code> and <code>RTCRtpReceiver</code> has been permanently disabled, either due to SDP offer/answer, or due to a call to {{domxref("RTCRtpTransceiver.stop", "stop()")}}.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("RTCRtpTransceiver.setCodecPreferences", "setCodecPreferences()")}}</dt> + <dd>A list of {{domxref("RTCRtpCodecParameters")}} objects which override the default preferences used by the {{Glossary("user agent")}} for the transceiver's codecs.</dd> + <dt>{{domxref("RTCRtpTransceiver.stop", "stop()")}}</dt> + <dd>Permanently stops the <code>RTCRtpTransceiver</code>. The associated sender stops sending data, and the associated receiver likewise stops receiving and decoding incoming data.</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("WebRTC 1.0", "#rtcrtptransceiver-interface", "RTCRtpTransceiver")}}</td> + <td>{{Spec2("WebRTC 1.0")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.RTCRtpTransceiver")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li> + <li><a href="/en-US/docs/Web/API/WebRTC_API/Intro_to_RTP">Introduction to the Real-time Transport Protocol (RTP)</a></li> + <li>{{domxref("RTCPeerConnection.addTrack()")}} and {{domxref("RTCPeerConnection.addTransceiver()")}} both create transceivers</li> + <li>{{domxref("RTCRtpReceiver")}} and {{domxref("RTCRtpSender")}}</li> +</ul> diff --git a/files/de/web/api/service_worker_api/index.html b/files/de/web/api/service_worker_api/index.html new file mode 100644 index 0000000000..54e3e1d86e --- /dev/null +++ b/files/de/web/api/service_worker_api/index.html @@ -0,0 +1,280 @@ +--- +title: Service Worker API +slug: Web/API/Service_Worker_API +tags: + - API + - Offline + - Referenz + - Service-Worker + - Worker +translation_of: Web/API/Service_Worker_API +--- +<div> +<p>{{ServiceWorkerSidebar}}</p> + +<p>{{ SeeCompatTable() }}</p> + +<p class="summary">Service-Worker verhalten sich im Wesentlichen wie Proxy-Server, welche zwischen der Webanwendung bzw. dem Browser und dem Netzwerk (sofern dieses verfügbar ist) sitzen. Sie sollen u. a. das Erstellen wirksamer Offline-Erfahrungen ermöglichen und können Netzwerkanfragen abfangen und passende Maßnahmen abhängig davon ergreifen, ob das Netzwerk verfügbar ist und ob der Server veränderte Ressourcen enthält. Sie erlauben außerdem den Zugriff auf Push-Benachrichtigungen und Background Sync APIs.</p> +</div> + +<h2 id="Konzepte_von_Service-Workern_und_deren_Nutzung">Konzepte von Service-Workern und deren Nutzung</h2> + +<p>Ein Service-Worker ist ein ereignisgesteuerter <a href="/de/docs/Web/API/Worker">Worker</a>, der an einem Ursprung und einem Pfad registriert ist. Sie ist eine JavaScript-Datei, die in Abhängigkeit zu einer Webseite steht, Anfragen von Ressourcen abfängt und cached. In manchen Situationen kann es das Verhalten der Webseite beeinflussen. Ein häufiger Anwendungsfall ist die Abfrage, ob ein Netzwerk verfügbar ist, oder nicht.</p> + +<p>Ein Service-Worker läuft in einem Worker-Kontext. Es hat keinerlei Zugriff auf das DOM und läuft in einem separaten Thread, also isoliert vom JavaScript, dass die Hauptinteraktionslogik der Website steuert. Es läuft vollständig asynchron und verhindert die Ausführung anderer Scripte nicht. Daraus resultiert, dass APIs wie <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a> oder <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage">LocalStorage</a> nicht in Service-Workern benutzt werden können.</p> + +<p>Service-Worker laufen aus Sicherheitsgründen nur über das HTTPS-Protokoll. Veränderte Netzwerkanfragen könnten "Man in the middle"-Angriffe deutlich leichter machen.</p> + +<div class="note"> +<p><strong>Hinweis: </strong>Service-Worker haben in Bereichen wie <a href="http://alistapart.com/article/application-cache-is-a-douchebag">AppCache</a> gezeigt, dass sie dort besonders gut genutzt werden können, da sie keine Vermutungen darüber treffen, was Sie machen wollen und brechen ihre Aktionen entsprechend ab. Sie haben deshalb die Kontrolle über alles.</p> +</div> + +<div class="note"> +<p><strong>Hinweis</strong>: Service-Worker basieren auf <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a>. Generell sind sie abhängig von Anfragen und sie werden mit einer erfolgreichen oder einer fehlerhaften Aktion antworten. Die Architektur ist deshalb ideal dafür.</p> +</div> + +<h3 id="Registrierung">Registrierung</h3> + +<p>Ein Service-Worker wird über die {{domxref("ServiceWorkerContainer.register()")}}-Methode registriert. Falls sie erfolgreich war, wird Ihr Service-Worker vom Client heruntergeladen und versucht eine Installation/Aktivierung (siehe unten) für URLs, die innerhalb der Quelle liegen oder die URLs, die Sie vorgeben.</p> + +<h3 id="Download_Installation_und_Aktivierung">Download, Installation und Aktivierung</h3> + +<p>Ihr Service-Worker muss folgenden Lebenszyklus durchlaufen:</p> + +<ol> + <li>Download</li> + <li>Installation</li> + <li>Aktivierung</li> +</ol> + +<p>Der Service-Worker wird sofort mit heruntergeladen, sobald der Nutzer erstmals eine von Service-Workern kontrollierte Seite aufruft.</p> + +<p>Danach wird es alle 24 Stunden neu heruntergeladen. Es kann auch in kürzeren Abständen heruntergeladen werden, aber die 24 Stunden können <strong>nicht </strong>überschritten werden. Damit sollen die Ladezeiten kürzer werden.</p> + +<p>Eine Installation wird versucht, wenn die heruntergeladene Datei neu ist, also Unterschiede byteweise verglichen mit dem bestehenden Service-Worker aufweist oder es der erste Service-Worker ist, der für diese Seite heruntergeladen wurde.</p> + +<p>Wenn ein Service-Worker erstmals verfügbar ist, wird eine Installation versucht. Nach einer erfolgreichen Installation ist es aktiviert.</p> + +<p>Wenn bereits ein bestehender Service-Worker installiert wurde, wird die neue Version im Hintergrund installiert, aber noch nicht aktiviert. Zu diesen Zeitpunkt wartet der Worker, bis alle Seiten heruntergeladen wurden, die noch den alten Service-Worker nutzen. Sobald alle Seiten geladen worden sind, wird der neue Service-Worker aktiviert.</p> + +<p>Sie können ein Ereignishandler für das {{domxref("InstallEvent")}} erstellen. Standardmäßig wird der Worker für den Einsatz vorbereitet, wenn das Event feuert. Zum Beispiel beim erstellen eines Caches, bei der die Built-In Storage API verwendet wird und Assets hineingeladen werden, damit die App offline verwendet werden kann.</p> + +<p>Außerdem existiert ein <code>activate</code>-Event. Wenn es feuert, ist es ein guter Zeitpunkt die alten Caches und andere Daten zu bereinigen, die mit der vorherigen Version ihres Workers zusammenhängen.</p> + +<p>Ihr Service-Worker kann mit dem {{domxref("FetchEvent")}} auf Anfragen antworten. Sie können die Antworten auf die Anfragen verändern, wie Sie wollen. Nutzen Sie dazu die {{domxref("FetchEvent.respondWith") }}-Methode.</p> + +<div class="blockIndicator note"> +<p><strong>Hinweis:</strong> Weil <code>oninstall</code>/<code>onactivate </code>eine Weile benötigen, um ihre Aktionen abzuschließen, ist es empfehlenswert, eine <code>waitUntil</code>-Methode bereitzustellen, die, wenn <code>oninstall </code>oder<code> onactivate</code> gefeuert werden, ein <code>Promise</code> geliefert wird. Events, die der Funktion dienen, werden dem Service-Worker nicht enthalten und der <code>Promise</code> wird erfolgreich ausgeführt.</p> +</div> + +<p>Für eine komplette Anleitung, die zeigt, wie Sie Ihr erstes Beispiel erstellen, siehe <a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a>.</p> + +<h2 id="Weitere_Anwendungsbereiche">Weitere Anwendungsbereiche</h2> + +<p>Service-Worker werden auch benutzt für:</p> + +<ul> + <li>die Synchronisation von Hintergrunddaten</li> + <li>um auf Anfragen anderer Quellen zu antworten</li> + <li>Um Updates von Daten zu erhalten, die sehr teuer in der Kalkulation sind, wie z. B. Standort-Daten, die dann in einem Datensatz verwendet werden können.</li> + <li>Das clientseitige Kompilieren von CoffeeScript aus Entwicklergründen</li> + <li>Hooks für Hintergrunddienste</li> + <li>Zum Erstellen benutzerdefinierter Templates anhand von URL-Mustern</li> + <li>Performancebeschleunigung wie z. B. das Vorladen von Bildern</li> +</ul> + +<p>In Zukunft werden Service-Worker zu weiteren nützlichen Dingen fähig sein, die sie näher an eine native App bringen. Andere Spezifikationen können und werden den Service-Worker-Kontext benutzen. Zum Beispiel:</p> + +<ul> + <li><a href="https://github.com/slightlyoff/BackgroundSync">Hintergrund-Synchronisation</a>: Ein Service-Worker kann gestartet werden, wenn keine Nutzer auf der Seite sind, um den Cache zu aktualisieren usw.</li> + <li><a href="/en-US/docs/Web/API/Push_API">Auf Push-Benachrichtigungen reagieren</a>: Ein Service-Worker kann Benachrichtigungen an Nutzer senden, um mitzuteilen, dass neuer Inhalt verfügbar ist,</li> + <li><span class="tlid-translation translation" lang="de"><span title="">Auf eine bestimmte Uhrzeit und ein bestimmtes Datum reagieren</span></span></li> + <li>Damit kann geofencing betrieben werden</li> +</ul> + +<h2 id="Schnittstellen">Schnittstellen</h2> + +<dl> + <dt>{{domxref("Cache") }}</dt> + <dd>Repräsentiert einen Speicher für {{domxref("Request")}} / {{domxref("Response")}}-Objeltpaare, die als ein Teil des {{domxref("ServiceWorker")}}-Lifecycles agieren.</dd> + <dt>{{domxref("CacheStorage") }}</dt> + <dd>Repräsentiert einen Speicher für {{domxref("Cache")}}-Objekte. Es ist das Hauptverzeichnis für {{domxref("ServiceWorker")}}. Es beinhaltet alle benannten Caches basierend auf Strings, auf die der Worker zugreifen kann.</dd> + <dt>{{domxref("Client") }}</dt> + <dd>Repräsentiert den Gültigkeitsbereich von einem Service-Worker-Client. Ein Service-Worker-Client ist entweder ein Dokument in einem Browser-Kontext oder ein {{domxref("SharedWorker")}}, welches von einem aktiven Worker gesteuert wird.</dd> + <dt>{{domxref("Clients") }}</dt> + <dd>Repräsentiert einen Container von {{domxref("Client")}}-Objekten; die hauptsächtliche Methode, um die aktiven Service-Worker-Clients anzusteuern.</dd> + <dt>{{domxref("ExtendableEvent") }}</dt> + <dd>Erweitert die Lebensdauer der <code>install </code>und <code>activate</code>-Events, die vom {{domxref("ServiceWorkerGlobalScope")}} entfernt werden als teil des Service-Worker-Lebenszyklus. Dies versichert, dass einige Events wie z. B. das {{domxref("FetchEvent")}} nicht vom {{domxref("ServiceWorker")}}, solange sie veraltete Cache-Einträge löschen usw.</dd> + <dt>{{domxref("ExtendableMessageEvent") }}</dt> + <dd>Das Event-Objekt von einem {{event("message_(ServiceWorker)","message")}}-Event, welches von einem Service-Worker gefeuert wird.</dd> + <dt>{{domxref("FetchEvent") }}</dt> + <dd>Die Parameter, die dem {{domxref("ServiceWorkerGlobalScope.onfetch")}}-Handler übergeben werden. <code>FetchEvent </code>repräsentiert eine Fetch-Aktion, die vom {{domxref("ServiceWorkerGlobalScope")}} eines {{domxref("ServiceWorker")}} entfernt wird. Es beinhaltet Information über die Anfrage und der daraus resultierenden Antwort, und stellt die {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}}-Methode bereit. Es ermöglicht eine willkürliche Antwort, die zurück zur kontrollierten Seite gesendet wird.</dd> + <dt>{{domxref("InstallEvent") }}</dt> + <dd>The parameter passed into the {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}} handler, the <code>InstallEvent</code> interface represents an install action that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a {{domxref("ServiceWorker")}}. As a child of {{domxref("ExtendableEvent")}}, it ensures that functional events such as {{domxref("FetchEvent")}} are not dispatched during installation. </dd> + <dt>{{domxref("Navigator.serviceWorker") }}</dt> + <dd>Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">associated document</a>.</dd> + <dt>{{domxref("NotificationEvent") }}</dt> + <dd>The parameter passed into the {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}} handler, the <code>NotificationEvent</code> interface represents a notification click event that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a {{domxref("ServiceWorker")}}.</dd> + <dt>{{domxref("ServiceWorker") }}</dt> + <dd>Represents a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same <code>ServiceWorker</code> object.</dd> + <dt>{{domxref("ServiceWorkerContainer") }}</dt> + <dd>Provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.</dd> + <dt>{{domxref("ServiceWorkerGlobalScope") }}</dt> + <dd>Represents the global execution context of a service worker.</dd> + <dt>{{domxref("ServiceWorkerMessageEvent")}}</dt> + <dd>Contains information about an event sent to a {{domxref("ServiceWorkerContainer")}} target. </dd> + <dt>{{domxref("ServiceWorkerRegistration") }}</dt> + <dd>Represents a service worker registration.</dd> + <dt>{{domxref("SyncEvent")}} {{non-standard_inline}}</dt> + <dd> + <p>The SyncEvent interface represents a sync action that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a ServiceWorker. </p> + </dd> + <dt>{{domxref("SyncManager")}} {{non-standard_inline}}</dt> + <dd>Provides an interface for registering and listing sync registrations.</dd> + <dt>{{domxref("WindowClient") }}</dt> + <dd>Represents the scope of a service worker client that is a document in a browser context, controlled by an active worker. This is a special type of {{domxref("Client")}} object, with some additional methods and properties available.</dd> +</dl> + +<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('Service Workers', '')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div>{{ CompatibilityTable() }}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatGeckoDesktop("44.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>24</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>install/activate events</td> + <td>{{ CompatChrome(40.0) }}</td> + <td>{{ CompatGeckoDesktop("44.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>fetch event/request/<br> + <code>respondWith()</code></td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatGeckoDesktop("44.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>caches/cache</td> + <td> + <p class="p1">{{CompatChrome(42.0)}}</p> + </td> + <td>{{ CompatGeckoDesktop("39.0") }}</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>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td></td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatGeckoMobile("44.0") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td> install/activate events</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatGeckoMobile("44.0") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>fetch event/request/<br> + <code>respondWith()</code></td> + <td>{{ CompatNo() }}</td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatGeckoMobile("44.0") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>caches/cache</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatGeckoMobile("39.0") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div class="note"> +<p><strong>Note</strong>: For backwards compatibility, you could choose to use service workers and AppCache on the same web app to do equivalent things (if the AppCache will support doing those things, of course.) What happens in such a case is that browsers that don’t support Service Workers will use AppCache, and those that do will ignore the AppCache and let the service worker take over.</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://serviceworke.rs">ServiceWorker Cookbook</a></li> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> + <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li> + <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li> + <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> +</ul> diff --git a/files/de/web/api/service_worker_api/using_service_workers/index.html b/files/de/web/api/service_worker_api/using_service_workers/index.html new file mode 100644 index 0000000000..f45d69025f --- /dev/null +++ b/files/de/web/api/service_worker_api/using_service_workers/index.html @@ -0,0 +1,507 @@ +--- +title: Service-Worker benutzen +slug: Web/API/Service_Worker_API/Using_Service_Workers +tags: + - Anleitung + - Grundlagen +translation_of: Web/API/Service_Worker_API/Using_Service_Workers +--- +<p>{{ServiceWorkerSidebar}}</p> + +<p>{{ SeeCompatTable() }}</p> + +<div class="summary"> +<p>Dieser Artikel informiert über die ersten Schritte mit Service-Workern, inklusive der Basisarchitektur, der Registrierung eines Service-Workers, der Installation und des Aktivierungsprozesses für einen neuen Service-Worker, Aktualisierung eines Service-Workers, Cache-Kontrolle und benutzerdefinierte Antworten, alles im Kontext von einer simplen App mit Offline-Funktionalität. </p> +</div> + +<h2 id="Die_Voraussetzung_von_Service-Workern">Die Voraussetzung von Service-Workern</h2> + +<p>Ein großes Problem, unter dem Web-User seit Jahren leiden, ist der Verlust der Internetverbindung. Selbst die beste Webanwendung liefert eine furchtbare Benutzererfahrung, wenn sie nicht heruntergeladen werden kann. Es gab verschiedene Versuche, Technologien zu erstellen, die dieses Problem lösen (wie unsere <a href="/en-US/Apps/Build/Offline">Offline</a>-Seite zeigt) und einige Themen konnten so angegangen werden. Das größte Problem aber ist, dass es immer noch keinen guten allgemeinen Kontroll-Mechanismus für Asset-Caching und eigene Netzwerkanfragen gibt. <br> + <br> + Der vorausgegangene Versuch — AppCache — schien eine gute Idee, da er der Entwicklerin erlaubte, Assets zu spezifizieren, die leicht zu cachen sein sollten. Die Technologie traf jedoch Annahmen darüber, was die Entwicklerin zu tun gedachte und schlug an mehreren Stellen fehl, wenn die Webanwendung diesen Annahmen nicht eins zu eins folgte. Mehr Details dazu finden sich in Jake Archibalds "<a href="http://alistapart.com/article/application-cache-is-a-douchebag">Application Cache is a Douchebag</a>".</p> + +<div class="note"> +<p><strong>Beachte</strong>: Wird <a href="/en-US/docs/Web/HTML/Using_the_application_cache">AppCache</a> verwendet, um Offline-Support für eine Seite zur Verfügung zu stellen, wird seit Firefox 44 eine Warnmeldung auf der Console angezeigt, die Entwicklern statt dessen die Verwendung von <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service-Workern</a> empfiehlt ({{bug("1204581")}}).</p> +</div> + +<p>Service-Worker sollen diese Probleme schließlich beheben. Ihre Syntax ist komplexer als die des AppCaches, der Vorteil ist aber, dass nun JavaScript benutzt werden kann, um die vom AppCache getroffenen Annahmen feinschrittig zu kontrollieren, was das zuvor beschriebene Problem und viele weitere löst. Mit Hilfe eines Service-Workers, kann die Webanwendung leicht aufgesetzt werden, um vorrangig gecachte Assets zu benutzen und so auch im Offline-Fall eine bestimmte Benutzererfahrung zu ermöglichen, bevor weitere Daten aus dem Netzwerk geladen werden (auch bekannt als <a href="http://offlinefirst.org/">Offline First</a>-Ansatz). Native Apps stellen dieses Feature bereits bereit, was der Grund dafür ist, dass native Apps oft Webanwendungen vorgezogen werden.</p> + +<h2 id="Einrichtung_zur_Verwendung_von_Service-Workern">Einrichtung zur Verwendung von Service-Workern</h2> + +<p>Viele der Eigenschaften von Service-Workern sind inzwischen in neueren Versionen unterstützender Browser standardmäßig eingestellt. Sollte der Beispielcode in einem der installierten Browser jedoch nicht funktionieren, kann die explizite Aktivierung einer Einstellung vonnöten sein:</p> + +<ul> + <li><strong>Firefox Nightly</strong>: Navigieren Sie zu <code>about:config</code> und setzen Sie <code>dom.serviceWorkers.enabled</code> auf true; Starten Sie den Browser anschließend neu.</li> + <li><strong>Chrome Canary</strong>: Navigieren Sie zu <code>chrome://flags</code> und aktivieren Sie <code>experimental-web-platform-features</code>; Starten Sie den Browser anschließend neu (Beachten Sie, dass einige Funktionen jetzt standardmäßig in Chrome aktiviert sind).</li> + <li><strong>Opera</strong>: Navigieren Sie zu <code>opera://flags</code> und aktivieren Sie <code>Support for ServiceWorker</code>; Starten Sie den Browser anschließend neu.</li> +</ul> + +<p>Stellen Sie weiterhin sicher, dass Ihr Code über HTTPS gesendet wird — Service-Worker sind aus Sicherheitsgründen auf HTTPS beschränkt. Da GitHub (resp. GitHub Pages) HTTPS unterstüzt, ist es ein guter Ort, um Experimente zu hosten.</p> + +<h2 id="Grundarchitektur">Grundarchitektur</h2> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8241/flowchart-production-version.png" style="float: right; height: 600px; margin-left: 20px; width: 300px;"></p> + +<p>Ein einfache Implementierung von Service-Workern folgt für gewöhnlich den folgenden Schritten:</p> + +<ol> + <li>Die URL des Service-Workers wird aufgerufen und via {{domxref("serviceWorkerContainer.register()")}} registriert.</li> + <li>War dies erfolgreich, wird der Service-Worker in einem {{domxref("ServiceWorkerGlobalScope")}} ausgeführt; Im Prinzip ist dies eine besondere Art von Worker-Kontext, welcher außerhalb des Threads des Hauptscriptes läuft und keinen Zugriff auf das DOM hat.</li> + <li>Der Service-Worker kann nun Events verarbeiten.</li> + <li>Die Installation des Workers wird versucht, wenn Seiten, die durch Service-Worker verwaltet werden, wiederholt besucht werden. Ein Install-Event ist immer das erste, welches an einen Service-Worker gesendet wird (Dies kann beispielsweise benutzt werden, um den Prozess zu starten, der die IndexDB befüllt und Seiten-Assets cacht). Das ist der gleiche Ablauf, der bei der Installation einer nativen oder FirefoxOS App stattfindet - alles für die Offline-Nutzung vorbereiten.</li> + <li>Sobald der <code>oninstall</code>-Handler abgeschlossen ist, wird der Service-Worker als installiert betrachtet.</li> + <li>Der nächste Schritt ist Aktivierung. Sobald der Service-Worker installiert wurde, erhält dieser ein <code>activate</code>-Event. Der Hauptnutzen von <code>onactivate</code> ist das Aufräumen von Ressourcen, die in vorherigen Versionen des Service-Worker-Scripts genutzt wurden.</li> + <li>Der Service-Worker kann nun Webseiten verwalten, aber nur wenn diese nach dem erfolgreichen Abschluss von <code>register()</code> aufgerufen wurden. So wird ein Dokument, welches ohne Service-Worker gestartet wurde bis zu einem Neuladen nicht von einem Service-Worker verwaltet werden.</li> +</ol> + +<h3 id="Promises">Promises</h3> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> sind ein sehr guter Mechanismus um asynchrone Operationen, deren Erfolg voneinander abhängt, auszuführen. Diese Technologie ist zentral für die Arbeitsweise von Service-Workern.<br> + <br> + Promises ermöglichen viele verschiedene Dinge, für unseren Zweck reicht es allerdings aus zu wissen, dass, wenn eine Funktion eine Promise zurück gibt, ein <code>.then()</code> an das Ende des Aufrufs gehangen werden und mit Callbacks für Erfolg, Misserfolg, etc. versehen werden kann. Des Weiteren kann <code>.catch()</code> am Ende benutzt werden, um einen besonderen Callback für den Misserfolg hinzuzufügen.</p> + +<p>Vergleichen wir nun die traditionelle synchrone Callback-Struktur mit ihrem asynchronen Promise-Äquivalent.</p> + +<h4 id="sync">sync</h4> + +<pre class="brush: js">try { + var value = myFunction(); + console.log(value); +} catch(err) { + console.log(err); +}</pre> + +<h4 id="async">async</h4> + +<pre class="brush: js">myFunction().then(function(value) { + console.log(value); + }).catch(function(err) { + console.log(err); +});</pre> + +<p>Im ersten Beispiel müssen wir warten, bis die <code>myFunction()</code> ausgeführt wird und <code>value</code> zurückgegeben wird bevor weiterer Code ausgeführt werden kann. Im zweiten Beispiel gibt <code>myFunction()</code> eine Promise für <code>value </code>zurück, danach kann weiterer Code ausgeführt werden. Wenn die Promise aufgelöst wird, wird der Code in <code>then</code> asynchron ausgeführt.<br> + <br> + Nun zu einem echten Beispiel: Was, wenn wir Bilder dynamisch laden, aber sicher stellen wollen, dass sie erst angezeigt werden, wenn sie vollständig geladen sind? Dies ist etwas, was häufig gemacht werden soll, aber sehr kompliziert werden kann. <code>.onload</code> kann benutzt werden, um ein Bild erst anzuzeigen, wenn es geladen wurde. Was aber geschieht mit Events, die stattfinden, bevor wir auf diese hören können? Man könnte versuchen, dieses Problem mit Hilfe von <code>.complete</code> zu umgehen, was jedoch nicht betriebssicher ist und den Umgang mit mehreren Bildern gleichzeitig nicht abdeckt. Auch ist dieser Ansatz weiterhin synchron und blockiert somit den Haupt-Thread.<br> + <br> + Wir können jedoch stattdessen eine eigene Promise bauen, die diesen Fall abdeckt. (Siehe unser <a href="https://github.com/mdn/promises-test">Promises-Test-Beispiel</a> für den entsprechenden Quellcode, oder <a href="https://mdn.github.io/promises-test/"> hier </a> für eine Liveanwendung.)</p> + +<p>{{note("Eine echte Service-Worker-Implementierung würde Caching und das <code>onfetch</code>-Event statt der überholten XMLHttpRequest API benutzen. Diese Features wurden hier nicht benutzt, um den Fokus auf Promises setzen zu können.")}}</p> + +<pre class="brush: js">function imgLoad(url) { + return new Promise(function(resolve, reject) { + var request = new XMLHttpRequest(); + request.open('GET', url); + request.responseType = 'blob'; + + request.onload = function() { + if (request.status == 200) { + resolve(request.response); + } else { + reject(Error('Bild wurde nicht geladen; Fehlercode:' + request.statusText)); + } + }; + + request.onerror = function() { + reject(Error('Ein Netzwerkfehler ist aufgetreten.')); + }; + + request.send(); + }); +}</pre> + +<p>Wir geben eine neue Promise mit Hilfe des <code>Promise()</code>-Konstruktors zurück, der als Parameter eine Callback-Funktion mit <code>resolve</code>- und <code>reject</code>- Parametern erhält. Innerhalb dieser Funktion müssen wir definieren, was passieren muss, dass die Promise erfolgreich aufgelöst oder zurückgewiesen wird — In diesem Fall also entweder einen <code>200 OK</code> Status zurückgegeben bekommen oder nicht — und dann bei Erfolg <code>resolve</code> und bei Misserfolg <code>reject</code> aufzurufen. Der restliche Inhalt dieser Funktion sind Schritte zum Umgang mit XHR, über die wir uns im Moment keine Gedanken machen müssen.</p> + +<p>Wenn wir beim Aufruf der <code>imgLoad()</code>-Funktion angelangt sind, rufen wir diese mit der URL zu dem Bild, welches wir laden möchten, wie erwartet auf, der restliche Code ist jedoch ein bisschen anders:</p> + +<pre class="brush: js">var body = document.querySelector('body'); +var myImage = new Image(); + +imgLoad('myLittleVader.jpg').then(function(response) { + var imageURL = window.URL.createObjectURL(response); + myImage.src = imageURL; + body.appendChild(myImage); +}, function(Error) { + console.log(Error); +});</pre> + +<p>Die <code>then()</code>-Methode wird an das Ende des Funktionsaufrufes gehangen, und enthält zwei Funktionen – die erste wird ausgeführt, wenn die Promise aufgelöst wird, die zweite, wenn sie zurückgewiesen wird. Im Auflösungsfall zeigen wir das Bild innerhalb von <code>myImage</code> an und fügen es an den body an (Das Argument der <code>then()</code>-Funktion ist die request.response innerhalb der resolve-Methode des Promises); im Zurückweisungsfall geben wir einen Fehler in der Konsole aus.</p> + +<p>Dies alles geschieht asynchron.</p> + +<div class="note"> +<p><strong>Beachte</strong>: Promises können aneinandergekettet werden, zum Beispiel:<br> + <code>myPromise().then(success, failure).then(success).catch(failure);</code></p> +</div> + +<div class="note"> +<p><strong>Beachte</strong>: Weitere Informationen zu Promises finden sich in Jake Archibalds Artikel <a href="http://www.html5rocks.com/en/tutorials/es6/promises/">JavaScript Promises: there and back again</a>.</p> +</div> + +<h2 id="Service-Worker_Demo">Service-Worker Demo</h2> + +<p>Um die Grundlagen der Registrierung und Installation eines Service-Workers zu demonstrieren, haben wir eine kleine Demo namens <a href="https://github.com/mdn/sw-test">sw-test</a> geschaffen, die eine überschaubare Star-Wars-Lego-Bildergalerie ist. Sie nutzt eine Promise-unterstützte Funktion um Bilddaten von einem JSON-Objekt zu lesen und diese Bilder mit Hilfe von Ajax zu laden, bevor sie untereinander auf der Webseite angezeigt werden. Die Anwendung ist statisch und einfach gehalten. Sie registriert, installiert und aktiviert des Weiteren einen Service-Worker und cacht die erforderlichen Dateien für die Offline-Nutzung, sollten weitere Aspekte dieser Spezifikation bei den aufrufenden Browsern aktiviert sein.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8243/demo-screenshot.png" style="display: block; height: 410px; margin: 0px auto; width: 480px;"><br> + <br> + <br> + Der <a href="https://github.com/mdn/sw-test/">Quellcode</a> ist auf GithHub zu finden, eine Live-Version kann <a href="https://mdn.github.io/sw-test/">hier</a> betrachtet werden. Der Aspekt, den wir hier betrachten wollen, ist die Promise (siehe <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L17-L42">app.js Zeilen 17-42</a>), die eine modifizierte Version dessen ist, was in der <a href="https://github.com/mdn/promises-test">Promises Test Demo</a> zu lesen war. Die Unterschiede sind die folgenden:</p> + +<ol> + <li>Im Original haben wir nur eine URL zu einem Bild, welches wir laden wollen, hineingereicht. In dieser Version reichen wir ein JSON-Fragment hinein, welches alle Daten für ein einzelnes Bild beinhaltet (in <a href="https://github.com/mdn/sw-test/blob/gh-pages/image-list.js">image-list.js</a> kann ein Blick darauf geworfen werden). Das geschieht, weil wegen der Asynchronität die gesamten Daten für jedes Auflösen der Promise in in diese hineingereicht werden müssen. Würde nur die URL hineingereicht werden und versucht werden, während der <code>for()-</code>Schleife, auf andere Dinge im JSON zuzugreifen, schlüge dies fehl, da die Promise nicht zeitgleich mit dem Abschluss der Iteration auflösen würde, da dies ein synchroner Prozess ist.</li> + <li>Wir lösen die Promise des Weiteren mit einem Array auf, da wir den geladenen Bild-Blob, aber auch Bildname, Bildnachweis und Alt-Text später der auflösenden Funktion zur Verfügung stellen wollen. (siehe <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L26-L29">app.js Zeilen 26-29</a>). Promises lösen mit einem einzigen Argument auf, werden also mehrere Werte gebraucht, muss dies über ein Array bzw. Objekt gelöst werden.</li> + <li>Um auf die Werte der aufgelösten Promise zuzugreifen, greifen wir auf eben jene Funktion zu. (siehe <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L55-L59">app.js Zeilen 55-59</a>.) Dies mag auf den ersten Blick seltsam erscheinen, ist aber die korrekte Handhabung von Promises.</li> +</ol> + +<h2 id="Service-Worker_auf_die_Bühne_bitte!">Service-Worker auf die Bühne, bitte!</h2> + +<p>Auf geht's zu Service-Workern!</p> + +<h3 id="Service-Worker_registrieren">Service-Worker registrieren</h3> + +<p>Der erste Code-Block in der JavaScript-Datei unserer App — <code>app.js</code> — sieht wie folgt aus. Dies ist unser Startpunkt für die Nutzung von Service-Workern.</p> + +<pre class="brush: js">if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) { + // Registrierung erfolgreich + console.log('Registrierung erfolgreich. Scope ist ' + reg.scope); + }).catch(function(error) { + // Registrierung fehlgeschlagen + console.log('Registrierung fehlgeschlagen mit ' + error); + }); +};</pre> + +<ol> + <li>Der äußere Block kümmert sich um die Feature-Erkennung um sicher zu stellen, dass Service-Worker unterstützt werden, bevor einer registriert wird.</li> + <li>Als nächstes nutzen wir die {{domxref("ServiceWorkerContainer.register()") }}-Funktion, um den Service Worker für diese Seite zu registrieren. Dieser ist nur eine JavaScript-Datei innerhalb unserer App. (Beachte, dass die URL der Datei relativ zum Ursprung ist, und nicht zur JavaScript-Datei, die sie referenziert.)</li> + <li>Der <code>scope</code> Parameter ist optional, und kann benutzt werden, um den Teil der. Applikation einzuschränken, den der Service-Worker kontrollieren soll. In diesem Fall, haben wir '<code>/sw-test/' </code>spezifiziert, was alle Inhalte unter dem App-Ursprungsverzeichnis beinhaltet. Wird der Parameter weggelassen, würde standardmäßig dieses Verzeichnis gewählt werden. Wir haben es hier zu Anschauungszwecken jedoch spezifiziert..</li> + <li>Die <code>.then()</code> Promise-Funktion wird genutzt, um den Erfolgsfall an unsere Promise-Struktur zu hängen. Wenn die Promise erfolgreich auflöst, wird der Programmcode innerhalb dieser Funktion ausgeführt.</li> + <li>Zuletzt fügen wir die<code>.catch()</code>-Funktion ans Ende an, die ausgeführt wird, sollte die Promise zurückgewiesen werden.</li> +</ol> + +<p>Jetzt ist ein Service-Worker registriert, der in einem Worker-Kontext läuft und daher keinen Zugriff auf das DOM hat. Code im Service-Worker wird außerhalb der normalen Seiten ausgeführt, um deren Laden zu kontrollieren.<br> + <br> + Ein einzelner Service-Worker kann viele Seiten kontrollieren. Wird eine Seite innerhalb des spezifizierten Codes geladen, wird der Service-Worker für diese eingerichtet und nimmt seine Arbeit auf. Es sollte daher nicht vergessen werden, dass vorsichtig mit globalen Variablen im Service-Worker-Script umgegangen werden muss: Jede Seite im Scope hat den selben Worker, mit dem sie arbeitet.</p> + +<div class="note"> +<p><strong>Beachte</strong>: Service-Worker funktionieren wie Proxy-Server, was es unter anderem erlaubt, Netzwerkanfragen und -antworten zu modifizieren und mit Objekten aus dem Cache zu ersetzen.</p> +</div> + +<div class="note"> +<p><strong>Beachte</strong>: Eine gute Sache an Service-Workern ist, dass, wenn Feature-Erkennung wie im obigen Beispiel verwendet wird, Browser, die Service-Worker nicht unterstützen, die App dennoch normal und wie erwartet benutzen können. Wenn weiterhin AppCache und Service-Worker gemeinsam auf einer Seite benutzt werden, werden Browser, die AppCache aber nicht Service-Worker unterstützen, ersteres benutzen. Browser die beides unterstützen, werden AppCache zu Gunsten von Service-Workern ignorieren.</p> +</div> + +<h4 id="Wieso_schlägt_die_Registrierung_meines_Service_Workers_fehl">Wieso schlägt die Registrierung meines Service Workers fehl?</h4> + +<p>Dies kann aus folgenden Gründen passieren:</p> + +<ol> + <li>Die Applikation läuft nicht unter HTTPS</li> + <li>Der Pfad zur Service-Worker-Datei ist nicht korrekt beschrieben — er muss relativ zum Ursprung geschrieben sein, nicht relativ zum Wurzelverzeichnis der App. In unserem Beispiel liegt der Worker unter <code>https://mdn.github.io/sw-test/sw.js</code>, wohingegen das Wurzelverzeichnis der App <code>https://mdn.github.io/sw-test/ </code>ist. Der Pfad muss also als <code>/sw-test/sw.js</code>, geschrieben werden, und nicht als <code>/sw.js</code>.</li> + <li>Der Service-Worker, auf den verwiesen wird, hat einen anderen Ursprung als die App. Auch das ist nicht gestattet.</li> +</ol> + +<p>Weiterhin zu beachten:</p> + +<ul> + <li>Der Service-Worker wird nur Netzwerkanfragen von Clients innerhalb seines Scopes abgreifen.</li> + <li>Der maximale Scope eines Service-Workers ist der Ort des Workers selbst.</li> + <li>Ist der Service-Worker auf einem Client aktiv, der mit dem <code>Service-Worker-Allowed-</code>Header ausgeliefert wird, kann eine Liste von maximalen Scopes für diesen Worker definiert werden.</li> + <li>Im Firefox sind Service-Worker-APIs versteckt und können nicht genutzt werden, wenn die Nutzer sich im Inkognito-Modus befinden.</li> +</ul> + +<h3 id="Installation_und_Aktivierung_Füllen_des_Caches">Installation und Aktivierung: Füllen des Caches</h3> + +<p>Nachdem der Service-Worker registriert wurde, versucht der Browser den Service-Worker für die entsprechende Seite zu installieren und zu aktivieren.<br> + <br> + Das Install-Event wird abgesetzt wenn eine Installation erfolgreich abgeschlossen wurde. Dieses Event wird für gewöhnlich dazu genutzt, den Offline-Cache des Browsers mit den Assets zu befüllen, die benötigt werden, damit die App offline laufen kann. Um das zu erreichen, nutzen wir die Storage-API der Service-Worker — {{domxref("cache")}} — ein globales Objekt des Service-Workers, welches uns erlaubt Assets, die durch Netzwerkantworten geliefert wurden, zu speichern. Diese API arbeitet ähnlich wie der Browser interne Cache, ist allerdings Domain spezifisch und besteht, bis Gegenteiliges gesagt wird, was erneut volle Kontrolle erlaubt.</p> + +<div class="note"> +<p><strong>Beachte</strong>: Die Cache API ist nicht in jedem Browser unterstützt. (Siehe auch den Abschnitt {{anch("Browserkompabilität")}} für weitere Informationen.) Soll sie jetzt genutzt werden, kann ein Polyfill in Betracht gezogen werden, wie er beispielsweise in <a href="https://github.com/Polymer/topeka/blob/master/sw.js">Googles Topeka Demo</a> enthalten ist, oder die Assets in <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> gespeichert werden.</p> +</div> + +<p>Wir beginnen diesen Abschnitt mit einem Blick auf ein Code-Beispiel — Das ist der <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L18">erste Block in unserem Service-Worker</a>:</p> + +<pre class="brush: js">this.addEventListener('install', function(event) { + event.waitUntil( + caches.open('v1').then(function(cache) { + return cache.addAll([ + '/sw-test/', + '/sw-test/index.html', + '/sw-test/style.css', + '/sw-test/app.js', + '/sw-test/image-list.js', + '/sw-test/star-wars-logo.jpg', + '/sw-test/gallery/', + '/sw-test/gallery/bountyHunters.jpg', + '/sw-test/gallery/myLittleVader.jpg', + '/sw-test/gallery/snowTroopers.jpg' + ]); + }) + ); +});</pre> + +<ol> + <li>Hier wird dem Service-Worker (mit Hilfe von <code>this</code>) ein <code>install</code>Event-Listener hinzugefügt, und die {{domxref("ExtendableEvent.waitUntil()") }}-Methode dem Event angehängt — das stellt sicher, dass der Service-Worker nicht installiert wird, bis der Code innerhalb von <code>waitUntil()</code> erfolgreich ausgeführt wurde.</li> + <li>Innerhalb von <code>waitUntil()</code> benutzen wir die <a href="/en-US/docs/Web/API/CacheStorage/open"><code>caches.open()</code></a>-Methode um einen neuen Cache mit dem Namen <code>v1</code> zu erstellen, welcher die erste Version des Ressourcenspeichers unserer Seite sein wird. Das gibt eine Promise für den erstellten Cache zurück; sobald diese aufgelöst ist, rufen wir eine Funktion auf, die wiederum <code>addAll()</code> auf dem erstellten Cache aufruft und als Parameter einen Array mit zum Ursprung relativen URLs der zu cachenden Ressourcen enthält.</li> + <li>Sollte die Promise zurückgewiesen werden, schlägt die Installation fehl und der Worker tut nichts. Das ist in Ordnung und bietet die Möglichkeit, den Code zu korrigieren und es bei der nächsten Registrierung erneut zu versuchen.</li> + <li>Nach erfolgreicher Installation wird der Service-Worker aktiviert. Wurde der Service-Worker zum ersten mal installiert und aktiviert ist dies nicht weiter von Bedeutung, aber wichtig, wenn der Service-Worker aktiviert wird. (Siehe den Abschnitt {{anch("Aktualisieren des Service-Workers") }} im späteren Verlauf.)</li> +</ol> + +<div class="note"> +<p><strong>Beachte</strong>: <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a> funktioniert ähnlich wie der Service-Worker-Cache, ist aber synchron und daher in Service-Workern nicht gestattet.</p> +</div> + +<div class="note"> +<p><strong>Beachte</strong>: <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> kann, wenn nötig, innerhalb eines Service-Workers benutzt werden.</p> +</div> + +<h3 id="Eigene_Antworten_auf_Netzwerkanfragen">Eigene Antworten auf Netzwerkanfragen</h3> + +<p>Da jetzt die Assets der Seite gecacht wurden, kann nun den Service-Workern mitgeteilt werden, was sie mit dem gecachten Inhalt tun sollen. Dies geschieht mit Hilfe des <code>fetch</code>-Events.</p> + +<p>Ein <code>fetch</code>-Event wird jedes Mal abgesetzt, wenn eine Ressource, die vom Service-Worker kontrolliert wird (also die Dokumente innerhalb seines Scopes sowie die dort referenzierten Ressourcen), geladen wird. (Wenn also <code>index.html</code> eine Cross-Origin-Anfrage an ein eingebettetes Bild absetzt, geht auch das durch den Service-Worker.)</p> + +<p>Ein <code>fetch</code> Event-Listener kann dem Service-Worker hinzugefügt, und die <code>respondWith()</code>-Methode des Events aufgerufen werden, um die HTTP-Antworten abzufangen und mit unseren eigenen zu ersetzen.</p> + +<pre class="brush: js">this.addEventListener('fetch', function(event) { + event.respondWith( + // Hier eigene Antworten + ); +});</pre> + +<p>Es kann damit begonnen werden, jedes Mal mit der Ressource zu antworten, deren URL der der Netzwerkanfrage entspricht:</p> + +<pre class="brush: js">this.addEventListener('fetch', function(event) { + event.respondWith( + caches.match(event.request) + ); +});</pre> + +<p><code>caches.match(event.request)</code> erlaubt uns, jede Ressource, die vom Netzwerk angefragt wird, mit der entsprechenden Ressource des Caches zu ersetzen, so diese verfügbar ist. Der Abgleich geschieht wie bei normalen HTTP-Anfragen über URLs und Header.</p> + +<p>Betrachten wir einige weitere Optionen, die wir haben, wenn wir unsere eigenen Antworten definieren wollen (siehe auch die <a href="/en-US/docs/Web/API/Fetch_API">Fetch-API Dokumentation</a> für weitere Informationen über {{domxref("Request")}}- und {{domxref("Response")}}-Objekte.)</p> + +<ol> + <li> + <p>Der <code>{{domxref("Response.Response","Response()")}}</code>-Konstruktor erlaubt uns das Erstellen einer benutzerdefinierten Antwort. In diesem Fall geben wir eine einfache Zeichenkette zurück:</p> + + <pre class="brush: js">new Response('Hallo vom freundlichen Service-Worker!');</pre> + </li> + <li> + <p>Das folgende komplexere <code>Response</code>-Beispiel zeigt, dass optional eine Anzahl an Headern in der Antwort gesetzt werden können, die die Standard HTTP-Responce-Header emulieren. Hier wird dem Browser nut der Content-Type unserer künstlichen Antwort mitgeteilt:</p> + + <pre class="brush: js">new Response('<p>Hallo from freundlichen Service-Worker!</p>', { + headers: { 'Content-Type': 'text/html' } +})</pre> + </li> + <li> + <p>Wenn im Cache kein Treffer gefunden wurde, könnte der Browser angewiesen werden, die standardmäßigen Netzwerkanfrage mit {{domxref("GlobalFetch.fetch","fetch")}} auszuführen, um die Ressource aus dem Netzwerk zu laden, wenn dieses verfügbar ist:</p> + + <pre class="brush: js">fetch(event.request)</pre> + </li> + <li> + <p>Wenn es keinen Treffer gab und auch das Netzwerk nicht verfügbar ist, kann die Anfrage mit einer Ausweichseite beantwortet werden, indem {{domxref("CacheStorage.match","match()")}} folgendermaßen verwendet wird:</p> + + <pre class="brush: js">caches.match('/fallback.html');</pre> + </li> + <li> + <p>Viele Informationen über jeden Request können erhalten werden, indem Parameter des {{domxref("Request")}}-Objekts, welches vom {{domxref("FetchEvent")}} zurückgegeben wird, aufgerufen werden.</p> + + <pre class="brush: js">event.request.url +event.request.method +event.request.headers +event.request.body</pre> + </li> +</ol> + +<h2 id="Umgang_mit_fehlgeschlagenen_Cache-Anfragen">Umgang mit fehlgeschlagenen Cache-Anfragen</h2> + +<p><code>caches.match(event.request)</code>ist hilfreich, wenn es einen Treffer im Service-Worker-Cache gibt. Was aber, wenn das nicht der Fall ist? Stellten wir keine Möglichkeit zur Behandlung einer scheiternden Cache-Anfrage bereit, würde unsere Promise zurückgewiesen werden und wir würden einem Netzwerkfehler gegenüber stehen, wenn es keinen Treffer im Cache gibt.</p> + +<p>Glücklicherweise erlaubt die Promise basierte Struktur des Service-Workers weitere Optionen bereitzustellen. Beispielsweise:</p> + +<pre class="brush: js">this.addEventListener('fetch', function(event) { + event.respondWith( + caches.match(event.request).catch(function() { + return fetch(event.request); + }) + ); +});</pre> + +<p>Falls die Promise zurückgewiesen wird, gibt die <code>catch()</code>-Funktion die Standard-Netzwerkanfrage für die Ressource zurück, was es erlaubt, diese vom Server zu laden, sollte eine Netzwerkverbindung bestehen.</p> + +<p>Ein weiterer Weg wäre, die Ressource nicht bloß aus dem Netzwerk zu laden, sondern für zukünftige Anfragen im Cache zu speichern, damit diese ebenfalls offline verwendet werden können. Das bedeutet, sollten weitere Bilder zur Star-Wars-Galerie hinzugefügt werden, kann unsere App diese laden und cachen. Es würde folgendermaßen implementiert werden:</p> + +<pre class="brush: js">this.addEventListener('fetch', function(event) { + event.respondWith( + caches.match(event.request).catch(function() { + return fetch(event.request).then(function(response) { + return caches.open('v1').then(function(cache) { + cache.put(event.request, response.clone()); + return response; + }); + }); + }) + ); +});</pre> + +<p>Wir geben an dieser Stelle die Standard-Netzwerkanfrage mit <code>return</code><code> fetch(event.request) </code>zurück, die wiederum eine Promise zurückgibt. Wenn diese Promise aufgelöst wird, reagieren wir mit einer Funktion, die unseren Cache mit <code>caches.open('v1')</code> öffnet, was eine weitere Promise zurückgibt. Wenn diese auflöst, wird <code>cache.put()</code> benutzt, um die Ressource dem Cache hinzuzufügen. Diese wird aus <code>event.request </code>gezogen, die Netzwerkantwort mit <code>response.clone()</code> kopiert und dem Cache hinzugefügt. Die Kopie wird gespeichert und die Original-Netzwerkantwort an den Browser und somit an die Seite, die die Anfrage gestellt hat, zurückgegeben.</p> + +<p>Warum das alles? Der Datenstrom von Netzwerkanfrage und -antwort kann nur ein einziges Mal gelesen werden. Damit die Netzwerkantwort an den Browser zurückgegeben werden und trotzdem auch im Cache gespeichert werden kann, muss sie kopiert werden. Dadurch kann das Original an den Browser gereicht und die Kopie im Cache gespeichert werden. Original und Kopie werden somit jeweils nur einmal gelesen.</p> + +<p>Zuletzt bleibt noch das Problem, was passieren soll, wenn es weder einen Treffer im Cache noch eine verfügbare Netzwerkverbindung gibt. Zur Zeit schlägt unsere Anfrage an die Ressource fehl. Wenn wir eine Ausweichlösung bereitstellen, werden, egal was passiert, die Nutzer eine Antwort bekommen:</p> + +<pre><code>this.addEventListener('fetch', function(event) { + event.respondWith( + caches.match(event.request).then(function(resp) { + return resp || fetch(event.request).then(function(response) { + caches.open('v1').then(function(cache) { + cache.put(event.request, response.clone()); + }); + return response; + }); + }).catch(function() { + return caches.match('/sw-test/gallery/myLittleVader.jpg'); + }) + ); +});</code></pre> + +<p>Wir haben uns an dieser Stelle für ein Ausweichbild entschieden, da die einzigen Anfragen, die potentiell fehlschlagen, die für neue Bilder in der Galerie sein werden. Um alles andere wurde sich bereits während des <code>install</code>-Events der Installation gekümmert.</p> + +<h2 id="Aktualisieren_des_Service-Workers"><font color="#83d0f2">Aktualisieren des Service-Workers</font></h2> + +<p>Wurde der Service-Worker bereits installiert, aber eine neue Version bei Neuladen der Seite bereitgestellt werden, wird dieser neue Worker im Hintergrund installiert, jedoch noch nicht aktiviert. Das geschieht erst dann, wenn keine der Seiten, die den alten Worker nutzen, mehr geladen werden. Sobald dies der Fall ist, wird der neue Service-Worker aktiviert.</p> + +<p>Damit dies geschehen kann, muss der<code>install</code>-Event-Listener im neuen Service-Worker ungefähr folgendermaßen angepasst werden (Augenmerk auf die neue Versionsnummer):</p> + +<pre class="brush: js">this.addEventListener('install', function(event) { + event.waitUntil( + caches.open('v2').then(function(cache) { + return cache.addAll([ + '/sw-test/', + '/sw-test/index.html', + '/sw-test/style.css', + '/sw-test/app.js', + '/sw-test/image-list.js', + + … + + // hier können weitere neue Ressourcen stehen... + ]); + }); + ); +});</pre> + +<p>Während dies alles geschieht, ist weiterhin die vorherige Version des Service-Workers für die Verwaltung der Anfragen verantwortlich und die neue Version wird im Hintergrund installiert. Der neue Cache hat in diesem Beispiel den Namen <code>v2</code>, so dass der Cache mit dem Namen <code>v1</code> nicht beeinträchtigt wird.</p> + +<p>Wenn keine Seiten mehr die aktuelle Version benutzen, wird der neue Worker aktiviert und verwaltet die Netzwerkanfragen.</p> + +<h3 id="Löschen_des_alten_Caches">Löschen des alten Caches</h3> + +<p>Es steht weiterhin ein <code>activate</code>-Event zur Verfügung. Es wird generell genutzt, um Dinge abzuhandeln, die die alte Version stark beeinträchtigt hätten, würden sie zu deren Laufzeit ausgeführt werden. Dies betrifft zum Beispiel das Löschen der alten Caches. Das Event ist auch nützlich, um Daten zu löschen, die nicht mehr gebraucht werden und so zu verhindern, dass zu viel Speicherplatz verbraucht wird — jeder Browser hat eine feste Obergrenze für die Menge an Cache-Speicherplatz, die ein Service-Worker nutzen kann. Der Browser selbst verwaltet den Speicherplatz an sich selbstständig, aber es kann passieren, dass der Cache-Speicherplatz für eine Seite gelöscht wird, denn wenn der Browser Daten dieser Art löscht, dann entweder alle oder keine Daten der Seite.</p> + +<p>Promises, die <code>waitUntil()</code> hineingereicht werden, blockieren weitere Events bis diese abgearbeitet wurden, so dass sicher gestellt werden kann, dass alle Aufräumarbeiten abgeschlossen sind, bevor die erste Netzwerkanfrage an den neuen Cache gestellt wird.</p> + +<pre class="brush: js">this.addEventListener('activate', function(event) { + var cacheWhitelist = ['v2']; + + event.waitUntil( + caches.keys().then(function(keyList) { + return Promise.all(keyList.map(function(key) { + if (cacheWhitelist.indexOf(key) === -1) { + return caches.delete(key); + } + })); + }) + ); +});</pre> + +<h2 id="Entwicklertools">Entwicklertools</h2> + +<p>Chrome hat <code>chrome://inspect/#service-workers</code>, wo Aktivität und Speicherplatz der aktuellen Service-Worker eingesehen werden können, und <code>chrome://serviceworker-internals</code>, wo mehr Details zu finden sind und Service-Worker gestartet, beendet und der Fehlersuche unterworfen werden können. Zukünftige Versionen werden zusätzlich Mittel zur Netzwerkdrosselung und einen Offline-Modus bereitsellen, um schlechte oder nicht vorhandene Netzwerkverbindungen zu simulieren.</p> + +<p>Auch Firefox hat die Entwicklung nützlicher Werkzeuge in Bezug auf Service-Worker begonnen:</p> + +<ul> + <li>Unter <a>about:serviceworkers</a> können registrierte Service-Worker eingesehen und aktualisiert oder entfernt werden</li> + <li>Für Testzwecke kann die HTTPS-Beschränkung durch Aktivieren der "Service-Worker über HTTP aktivieren (bei geöffneten Entwicklerwerkzeugen)"-Option in den Firefox-Entwicklerwerkzeug-Optionen (Zahnrad-Menü)</li> +</ul> + +<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('Service Workers', '')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstüzung</td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatGeckoDesktop("33.0") }}</td> + <td>{{CompatNo}}</td> + <td>24</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>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstüzung</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li> + <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> +</ul> diff --git a/files/de/web/api/serviceworker/index.html b/files/de/web/api/serviceworker/index.html new file mode 100644 index 0000000000..38d160b96b --- /dev/null +++ b/files/de/web/api/serviceworker/index.html @@ -0,0 +1,103 @@ +--- +title: ServiceWorker +slug: Web/API/ServiceWorker +translation_of: Web/API/ServiceWorker +--- +<div>{{APIRef("Service Workers API")}}</div> + +<p>Die <strong> <code>ServiceWorker-Schnittstelle</code> </strong> der <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker-API</a> stellt einen Verweis auf einen Serviceworker bereit. Mehrere "Glossary"-Glossar-("Browsing-Kontexte", "Browsing-Kontexte") (z. B. .pages, Arbeitskräfte usw.) können demselben Service-Worker zugeordnet werden, jeder durch ein eindeutiges Objekt.<code>ServiceWorker</code></p> + +<p>Ein Objekt ist in der Eigenschaft ""ServiceWorkerRegistration.active"" und in der Eigenschaft ""ServiceWorkerContainer.controller"" verfügbar – dies ist ein Service-Worker, der aktiviert wurde und die Seite steuert (der Service-Worker wurde erfolgreich registriert, und die gesteuerte Seite wurde neu geladen).)<code>ServiceWorker</code></p> + +<p>Die Schnittstelle wird eine Reihe von Lebenszyklusereignissen – und – und funktionalen Ereignissen einschließlich ausgelöst. Einem Objekt ist ein Objekt zugeordnet, dem der Lebenszyklus von "ServiceWorker.state") zugeordnet ist.<code>ServiceWorker</code><code>install</code><code>activate</code><code>fetch</code><code>ServiceWorker</code></p> + +<h2 id="Properties">Properties</h2> + +<p><em>The <code>ServiceWorker</code> interface inherits properties from its parent, {{domxref("Worker")}}.</em></p> + +<dl> + <dt>{{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}}</dt> + <dd>Returns the serialized script URL defined as part of {{domxref("ServiceWorkerRegistration")}}. The URL must be on the same origin as the document that registers the .<code>ServiceWorker</code><code>ServiceWorker</code></dd> + <dt>{{domxref("ServiceWorker.state")}} {{readonlyinline}}</dt> + <dd>Returns the state of the service worker. It returns one of the following values: , , , or .<code>installing</code><code>installed,</code><code>activating</code><code>activated</code><code>redundant</code></dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}}</dt> + <dd>An {{domxref("EventListener")}} property called whenever an event of type is fired; it is basically fired anytime the {{domxref("ServiceWorker.state")}} changes.<code>statechange</code></dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>The <code>ServiceWorker</code> interface inherits methods from its parent, {{domxref("Worker")}}, with the exception of {{domxref("Worker.terminate")}} — this should not be accessible from service workers.</em></p> + +<h2 id="Examples">Examples</h2> + +<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">service worker registration-events sample</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/">live demo</a>). The code listens for any change in the {{domxref("ServiceWorker.state")}} and returns its value.</p> + +<pre class="brush: js notranslate">if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('service-worker.js', { + scope: './' + }).then(function (registration) { + var serviceWorker; + if (registration.installing) { + serviceWorker = registration.installing; + document.querySelector('#kind').textContent = 'installing'; + } else if (registration.waiting) { + serviceWorker = registration.waiting; + document.querySelector('#kind').textContent = 'waiting'; + } else if (registration.active) { + serviceWorker = registration.active; + document.querySelector('#kind').textContent = 'active'; + } + if (serviceWorker) { + // logState(serviceWorker.state); + serviceWorker.addEventListener('statechange', function (e) { + // logState(e.target.state); + }); + } + }).catch (function (error) { + // Something went wrong during registration. The service-worker.js file + // might be unavailable or contain a syntax error. + }); +} else { + // The current browser doesn't support service workers. +}</pre> + +<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('Service Workers', '#serviceworker', 'ServiceWorker')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.ServiceWorker")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://serviceworke.rs">ServiceWorker Cookbook</a></li> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> + <li><a href="https://github.com/mdn/sw-test">Service worker basic code example</a></li> + <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> + <li>{{jsxref("Promise")}}</li> + <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using web workers</a></li> +</ul> diff --git a/files/de/web/api/serviceworkercontainer/index.html b/files/de/web/api/serviceworkercontainer/index.html new file mode 100644 index 0000000000..2899d05b7c --- /dev/null +++ b/files/de/web/api/serviceworkercontainer/index.html @@ -0,0 +1,158 @@ +--- +title: ServiceWorkerContainer +slug: Web/API/ServiceWorkerContainer +tags: + - API + - Draft + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - ServiceWorkerContainer + - TopicStub + - Workers +translation_of: Web/API/ServiceWorkerContainer +--- +<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p> + +<p>The <code>ServiceWorkerContainer</code> interface of the <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.</p> + +<p>Most importantly, it exposes the {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register(scriptURL, scope[, base])")}} method used to register service workers, and the {{domxref("ServiceWorkerContainer.controller")}} property used to determine whether or not the current page is actively controlled.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}</dt> + <dd>Returns a {{domxref("ServiceWorker")}} object if its state is <code>activated</code> (the same object returned by {{domxref("ServiceWorkerRegistration.active")}}). This property returns <code style="font-style: normal;">null</code> if the request is a force refresh (<em>Shift</em> + refresh) or if there is no active worker.</dd> +</dl> + +<dl> + <dt>{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}</dt> + <dd>Defines whether a service worker is ready to control a page or not. It returns a {{jsxref("Promise")}} that will never reject, which resolves to a {{domxref("ServiceWorkerRegistration")}} with an {{domxref("ServiceWorkerRegistration.active")}} worker.</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("ServiceWorkerContainer.oncontrollerchange")}}</dt> + <dd>An event handler fired whenever a {{Event("controllerchange")}} event occurs — when the document's associated {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active")}} worker.</dd> + <dt>{{domxref("ServiceWorkerContainer.onerror")}}</dt> + <dd>An event handler fired whenever an {{Event("error")}} event occurs in the associated service workers.</dd> + <dt>{{domxref("ServiceWorkerContainer.onmessage")}}</dt> + <dd>An event handler fired whenever a {{Event("message")}} event occurs — when incoming messages are received to the {{domxref("ServiceWorkerContainer")}} object (e.g. via a {{domxref("MessagePort.postMessage()")}} call.)</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} </dt> + <dd>Creates or updates a {{domxref("ServiceWorkerRegistration")}} for the given <code>scriptURL</code>.</dd> + <dt>{{domxref("ServiceWorkerContainer.getRegistration()")}}</dt> + <dd>Gets a {{domxref("ServiceWorkerRegistration")}} object whose scope URL matches the provided document URL. If the method can't return a {{domxref("ServiceWorkerRegistration")}}, it returns a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="text-decoration: underline;" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. </dd> + <dt>{{domxref("ServiceWorkerContainer.getRegistrations()")}}</dt> + <dd>Returns all {{domxref("ServiceWorkerRegistration")}}s associated with a <code>ServiceWorkerContainer</code> in an array. If the method can't return {{domxref("ServiceWorkerRegistration")}}s, it returns a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="text-decoration: underline;" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/fallback-response/index.html#L126">service worker fallback-response sample</a> (see <a href="http://googlechrome.github.io/samples/service-worker/fallback-response/">fallback-response live</a>). The code checks to see if the browser supports service workers. Then the code registers the service worker and determines if the page is actively controlled by the service worker. If it isn't, it prompts the user to reload the page so the service worker can take control. The code also reports any registration failures.</p> + +<pre class="brush: js">if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function() { + if (navigator.serviceWorker.controller) { + document.querySelector('#status').textContent = 'The service worker is currently handling network operations.'; + showRequestButtons(); + } else { + document.querySelector('#status').textContent = 'Please reload this page to allow the service worker to handle network operations.'; + } + }).catch(function(error) { + document.querySelector('#status').textContent = error; + }); +} else { + var aElement = document.createElement('a'); + aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq'; + aElement.textContent = 'unavailable'; + document.querySelector('#status').appendChild(aElement); +}</pre> + +<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('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatGeckoDesktop("44.0") }}</td> + <td>{{CompatNo}}</td> + <td>24</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>Firefox Mobile (Gecko)</th> + <th>Firefox OS</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>{{ CompatGeckoMobile("44.0") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li> + <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> + <li>{{jsxref("Promise")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> +</ul> diff --git a/files/de/web/api/serviceworkercontainer/register/index.html b/files/de/web/api/serviceworkercontainer/register/index.html new file mode 100644 index 0000000000..e900e8085c --- /dev/null +++ b/files/de/web/api/serviceworkercontainer/register/index.html @@ -0,0 +1,122 @@ +--- +title: ServiceWorkerContainer.register() +slug: Web/API/ServiceWorkerContainer/register +translation_of: Web/API/ServiceWorkerContainer/register +--- +<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p> + +<p>Die <strong><code>register()</code></strong> Methode der <code><a href="/de/docs/Web/API/ServiceWorkerContainer">ServiceWorkerContainer</a></code> Schnittstelle erstellt oder aktualisiert eine <code><a href="/de/docs/Web/API/ServiceWorkerRegistration">ServiceWorkerRegistration</a></code> für die gegebene <code>scriptURL</code>. </p> + +<p>Nach erfolgreicher Registrierung verwendet die Service Worker Registrierung die übergebene <code>scriptURL</code> und ihren Bereich für den Navigationsabgleich. Die Methode gibt ein <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> zurück, welches zu einer <code><a href="/de/docs/Web/API/ServiceWorkerRegistration">ServiceWorkerRegistration</a></code> aufgelöst wird. Die Funktion kann bedingungslos aufgerufen werden - Es muss vorher nicht kontrolliert werden, ob eine aktive Registrierung vorhanden ist.</p> + +<p>Es entstehen häufig Verwirrungen über die Bedeutung und Verwendung des <code>scope</code>. Da ein ServiceWorker keinen größeren Bereich abdecken kann als seinen einen Pfad, sollte man den Parameter nur verwenden, wenn man einen kleineren Bereich als den Standardbereich abdecken will.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">ServiceWorkerContainer.register(scriptURL, options).then(function(ServiceWorkerRegistration) { + // Do something with ServiceWorkerRegistration. +});</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>scriptURL</code></dt> + <dd>Die Url des Service Workers Scripts.</dd> + <dt><code>options</code> <code>{{optional_inline}}</code></dt> + <dd>Ein Object, welches verschiedene Registrierungsoptionen beinhaltet. Zur Zeit stehen folgende Optionen zur Verfügung: + <ul> + <li><code>scope</code>: Ein <code><a href="/de/docs/Web/API/USVString">USVString</a></code>, welcher eine URL darstellt, die zur Festlegung des Bereiches des Service Workers verwendet wird. Dies ist normalerweise eine relative URL. Der Standardwert ist die URL, die man bekommen würde, wenn man './' mit dem Pfad des Service Worker Scripts verwenden würde.</li> + </ul> + </dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, welches zu einem <code><a href="/de/docs/Web/API/ServiceWorkerRegistration">ServiceWorkerRegistration</a></code> Objekt aufgelöst wird.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function(registration) { + document.querySelector('#status').textContent = 'succeeded'; + }).catch(function(error) { + document.querySelector('#status').textContent = error; + }); +} else { + // Der verwendete Browser unterstützt Service Worker nicht. + var aElement = document.createElement('a'); + aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq'; + aElement.textContent = 'unavailable'; + document.querySelector('#status').appendChild(aElement); +}</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('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatiblität">Browserkompatiblität</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatGeckoDesktop("44.0") }}</td> + <td>{{CompatNo}}</td> + <td>24</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>Firefox Mobile (Gecko)</th> + <th>Firefox OS</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>{{ CompatGeckoMobile("44.0") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(40.0)}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/api/sharedworker/index.html b/files/de/web/api/sharedworker/index.html new file mode 100644 index 0000000000..52ecc8075b --- /dev/null +++ b/files/de/web/api/sharedworker/index.html @@ -0,0 +1,117 @@ +--- +title: SharedWorker +slug: Web/API/SharedWorker +tags: + - API + - Interface + - Reference + - SharedWorker + - WebWorkers + - Workers +translation_of: Web/API/SharedWorker +--- +<div>{{APIRef("Web Workers API")}}</div> + +<p>Das <code><strong>SharedWorker</strong></code> Interface repräsentiert eine spezielle Art von Worker, auf welchen durch mehrere Kontexte zugegeriffen werden kann. Hier kann es sich um verschiedene Tabs, iFrames oder auch Worker handeln. Diese implementieren ein anderes Interface als dedicated Worker und haben einen anderen Global Scope {{domxref("SharedWorkerGlobalScope")}}.</p> + +<div class="note"> +<p><strong>Note:</strong> Wenn auf einen SharedWorker von mehreren Browser Kontexten aus zugegriffen wird müssen all diese denselben Urpsrung haben. (Dasselbe Protocol, Host und Port)</p> +</div> + +<h2 id="Konstruktoren">Konstruktoren</h2> + +<dl> + <dt>{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}</dt> + <dd>Erstellt einen Shared Web Worker, der ein Script zu einer angegebenen URL ausführt.</dd> +</dl> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<p><em>Erbt Eigenschaften von dem Parent {{domxref("EventTarget")}} und implementiert Eigenschaften von {{domxref("AbstractWorker")}}.</em></p> + +<dl> + <dt>{{domxref("AbstractWorker.onerror")}}</dt> + <dd>Ist ein{{domxref("EventListener")}} der immer aufgerufen wird wenn ein {{domxref("ErrorEvent")}} vom Typ <code>error</code> durch den Worker läuft.</dd> + <dt>{{domxref("SharedWorker.port")}} {{readonlyInline}}</dt> + <dd>Returnt ein {{domxref("MessagePort")}} Objekt, welches zum Kommunizieren und Kontrollieren des Shared Workers verwendet wird.</dd> +</dl> + +<dl> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<p><em>Erbt Methoden von dem Parent {{domxref("EventTarget")}} und implementiert Methoden von {{domxref("AbstractWorker")}}.</em></p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>In unserem <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Grundlegenden Shared Worker Beispiel</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">Shared Worker ausführen</a>), haben wir zwei HTML Seiten, von denen beide etwas JavaScript verwenden um simple Kalkulationen auszuführen. Die verschiedenen Skripte verwenden dasselbe Worker File um die Kalkulation durchzuführen. Beide können auf dieses zugreifen, auch wenn diese in verschiedenen Fenstern ausgeführt werden.</p> + +<p>Das folgende Code Beispiel zeigt das Erstellen eines <code>SharedWorker</code> Objekts unter der Verwendung des {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} Konstruktors. Beide Skripte enthalten:</p> + +<pre class="brush: js">var myWorker = new SharedWorker('worker.js'); +</pre> + +<p>Beide Skripte greifen dann auf den Worker durch ein {{domxref("MessagePort")}} Objekt zu, welches mithilfe von {{domxref("SharedWorker.port")}} erstellt wurde. Wenn das onmessage Event mithilfe von addEventListener angehängt wurde, wird der Port automatisch gestartet mittels der <code>start()</code> Methode:</p> + +<pre class="brush: js">myWorker.port.start();</pre> + +<p>Wenn der Port gestartet ist senden beide Skripte Nachrichten an den Worker und behandeln die empfangenen Nachrichten von <code>port.postMessage()</code> und <code>port.onmessage</code>:</p> + +<pre class="brush: js">first.onchange = function() { + myWorker.port.postMessage([first.value,second.value]); + console.log('Message posted to worker'); +} + +second.onchange = function() { + myWorker.port.postMessage([first.value,second.value]); + console.log('Message posted to worker'); +} + +myWorker.port.onmessage = function(e) { + result1.textContent = e.data; + console.log('Message received from worker'); +}</pre> + +<p>Innerhalb des Workers verwenden wird den {{domxref("SharedWorkerGlobalScope.onconnect")}} Handler um uns an den oben genannten Port zu verbinden. Die mit dem Worker verbundenen Ports sind durch die Eigenschaft <code>ports im</code> {{event("connect")}} Event zugänglich. Anschließend verwenden wir die {{domxref("MessagePort")}} <code>start()</code> Methode um den Port zu starten und verwenden den <code>onmessage</code> Handler um die Nachrichten aus dem Main Thread zu behandeln.</p> + +<pre class="brush: js">onconnect = function(e) { + var port = e.ports[0]; + + port.addEventListener('message', function(e) { + var workerResult = 'Result: ' + (e.data[0] * e.data[1]); + port.postMessage(workerResult); + }); + + port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter. +}</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('HTML WHATWG', "#sharedworker", "SharedWorker")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderung von {{SpecName("Web Workers")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("api.SharedWorker")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("Worker")}}</li> + <li><a class="internal" href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Worker verwenden</a></li> +</ul> diff --git a/files/de/web/api/speechsynthesis/index.html b/files/de/web/api/speechsynthesis/index.html new file mode 100644 index 0000000000..b90f40aa6f --- /dev/null +++ b/files/de/web/api/speechsynthesis/index.html @@ -0,0 +1,134 @@ +--- +title: SpeechSynthesis +slug: Web/API/SpeechSynthesis +translation_of: Web/API/SpeechSynthesis +--- +<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p> + +<p>Die <strong><code>SpeechSynthesis</code></strong>-Schnittstelle der <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> ist die Controller-Schnittstelle für den Sprachdienst. Sie kann genutzt werden um Informationen über die Synthesestimmen, die auf dem Gerät verfügbar sind, zu erhalten. Außerdem um die Sprache zu starten, zu pausieren und andere Befehle auszuführen.</p> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<p><em><code>SpeechSynthesis</code> erbt ebenfalls Eigenschaften seiner Elternschnittstelle, {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("SpeechSynthesis.paused")}} {{readonlyinline}}</dt> + <dd>Ein {{domxref("Boolean")}} der <code>true</code> zurückgibt, wenn das <code>SpeechSynthesis</code>-Objekt sich im pausierten Zustand befindet.</dd> + <dt>{{domxref("SpeechSynthesis.pending")}} {{readonlyinline}}</dt> + <dd>Ein {{domxref("Boolean")}} der <code>true</code> zurückgibt, wenn die Äußerungen-Warteschlange bisher ungesprochene Äußerungen enthält.</dd> + <dt>{{domxref("SpeechSynthesis.speaking")}} {{readonlyinline}}</dt> + <dd>Ein {{domxref("Boolean")}} der <code>true</code> zurückgibt, wenn eine Äußerung aktuell gesprochen wird — auch wenn <code>SpeechSynthesis</code> sich aktuell im pausierten Zustand befindet.</dd> +</dl> + +<h3 id="Event-Handler">Event-Handler</h3> + +<dl> + <dt>{{domxref("SpeechSynthesis.onvoiceschanged")}}</dt> + <dd>Wird ausgelöst, wenn sich die Liste von {{domxref("SpeechSynthesisVoice")}}-Objekten, die von der {{domxref("SpeechSynthesis.getVoices()")}}-Methode zurückgegeben würde, geändert hat.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<p><em><code>SpeechSynthesis</code> erbt ebenfalls Methoden von seiner Elternschnittstelle, {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("SpeechSynthesis.cancel()")}}</dt> + <dd>Entfernt alle Äußerungen aus der Äußerungen-Warteschlange.</dd> + <dt>{{domxref("SpeechSynthesis.getVoices()")}}</dt> + <dd>Gibt eine Liste von {{domxref("SpeechSynthesisVoice")}}-Objecten zurück die alle verfügbaren Stimmen auf dem aktuellen Gerät repräsentiert.</dd> + <dt>{{domxref("SpeechSynthesis.pause()")}}</dt> + <dd>Versetzt das <code>SpeechSynthesis</code>-Objekt in den pausierten Zustand.</dd> + <dt>{{domxref("SpeechSynthesis.resume()")}}</dt> + <dd>Versetzt das <code>SpeechSynthesis</code>-Object in den nicht-pausierten Zustand: setzt es fort, wenn es bereits pausiert war.</dd> + <dt>{{domxref("SpeechSynthesis.speak()")}}</dt> + <dd>Fügt eine {{domxref("SpeechSynthesisUtterance", "Äußerung")}} Äußerung zur Äußerungen-Warteschlange hinzu; sie wird gesprochen, wenn alle anderen davor eingereihten Äußerungen fertig gesprochen wurden.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>In our basic <a href="https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis">Speech synthesiser demo</a>, we first grab a reference to the SpeechSynthesis controller using <code>window.speechSynthesis</code>. After defining some necessary variables, we retrieve a list of the voices available using {{domxref("SpeechSynthesis.getVoices()")}} and populate a select menu with them so the user can choose what voice they want.</p> + +<p>Inside the <code>inputForm.onsubmit</code> handler, we stop the form submitting with <a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a>, create a new {{domxref("SpeechSynthesisUtterance")}} instance containing the text from the text {{htmlelement("input")}}, set the utterance's voice to the voice selected in the {{htmlelement("select")}} element, and start the utterance speaking via the {{domxref("SpeechSynthesis.speak()")}} method.</p> + +<pre class="brush: js">var synth = window.speechSynthesis; + +var inputForm = document.querySelector('form'); +var inputTxt = document.querySelector('.txt'); +var voiceSelect = document.querySelector('select'); + +var pitch = document.querySelector('#pitch'); +var pitchValue = document.querySelector('.pitch-value'); +var rate = document.querySelector('#rate'); +var rateValue = document.querySelector('.rate-value'); + +var voices = []; + +function populateVoiceList() { + voices = synth.getVoices(); + + for(i = 0; i < voices.length ; i++) { + var option = document.createElement('option'); + option.textContent = voices[i].name + ' (' + voices[i].lang + ')'; + + if(voices[i].default) { + option.textContent += ' -- DEFAULT'; + } + + option.setAttribute('data-lang', voices[i].lang); + option.setAttribute('data-name', voices[i].name); + voiceSelect.appendChild(option); + } +} + +populateVoiceList(); +if (speechSynthesis.onvoiceschanged !== undefined) { + speechSynthesis.onvoiceschanged = populateVoiceList; +} + +inputForm.onsubmit = function(event) { + event.preventDefault(); + + var utterThis = new SpeechSynthesisUtterance(inputTxt.value); + var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name'); + for(i = 0; i < voices.length ; i++) { + if(voices[i].name === selectedOption) { + utterThis.voice = voices[i]; + } + } + utterThis.pitch = pitch.value; + utterThis.rate = rate.value; + synth.speak(utterThis); + + inputTxt.blur(); +}</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('Web Speech API', '#tts-section', 'SpeechSynthesis')}}</td> + <td>{{Spec2('Web Speech API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wurde aus strukturierten Daten erzeugt. Wenn du zu den Daten beitragen möchtest, lies bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und sende uns einen Pull-Request.</div> + +<p>{{Compat("api.SpeechSynthesis")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li> +</ul> diff --git a/files/de/web/api/storage/clear/index.html b/files/de/web/api/storage/clear/index.html new file mode 100644 index 0000000000..5e6c6d5678 --- /dev/null +++ b/files/de/web/api/storage/clear/index.html @@ -0,0 +1,61 @@ +--- +title: Storage.clear() +slug: Web/API/Storage/clear +tags: + - API Methode Storage +translation_of: Web/API/Storage/clear +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p><font><font>Die Methode </font></font><code>clear()</code> der {{domxref("Storage")}}-Schnittstelle löscht sämtliche Datensätze des Objekts.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js"><em>storage</em>.clear();</pre> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p><font><font>Die folgende Funktion speichert drei Datensätze und löscht sie abschließend mit </font></font><code>clear()</code>.</p> + +<pre class="brush: js">function populateStorage() { + localStorage.setItem('bgcolor', 'red'); + localStorage.setItem('font', 'Helvetica'); + localStorage.setItem('image', 'miGato.png'); + + localStorage.clear(); +}</pre> + +<div class="note"> +<p><strong>Hinweis</strong>: Weitere Beispiele sind im <a href="https://mdn.github.io/dom-examples/web-storage/">Web-Storage-Demo</a> zu finden.</p> +</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('HTML WHATWG', 'webstorage.html#dom-storage-clear', 'Storage.clear')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Storage.clear")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p> diff --git a/files/de/web/api/storage/getitem/index.html b/files/de/web/api/storage/getitem/index.html new file mode 100644 index 0000000000..364c3cbc83 --- /dev/null +++ b/files/de/web/api/storage/getitem/index.html @@ -0,0 +1,78 @@ +--- +title: Storage.getItem() +slug: Web/API/Storage/getItem +tags: + - API Methode Storage +translation_of: Web/API/Storage/getItem +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>Die Methode <code>getItem()</code> der {{domxref("Storage")}}-Schnittstelle gibt bei Nennung des Schlüssels im Parameter keyName den Wert des zugehörigen Datensatzes zurück.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>aValue</em> = <em>storage</em>.getItem(<em>keyName</em>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><em><code>keyName</code></em></dt> + <dd>Ein {{domxref("DOMString")}}, der den Namen des Schlüssels, dessen Wert ausgelesen werden soll, enthält.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein {{domxref("DOMString")}}, der den Wert des Schlüssels enthält. Falls der Schlüssel nicht existiert, wird <code>null</code> zurückgegeben.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Die folgende Funktion liest drei Datenwerte aus dem lokalen Speicher und verwendet sie, um einen benutzerdefinierten Style auf einer Seite zu setzen.</p> + +<pre class="brush: js">function setStyles() { + var currentColor = localStorage.getItem('bgcolor'); + var currentFont = localStorage.getItem('font'); + var currentImage = localStorage.getItem('image'); + + document.getElementById('bgcolor').value = currentColor; + document.getElementById('font').value = currentFont; + document.getElementById('image').value = currentImage; + + htmlElem.style.backgroundColor = '#' + currentColor; + pElem.style.fontFamily = currentFont; + imgElem.setAttribute('src', currentImage); +}</pre> + +<div class="note"> +<p><strong>Hinweis:</strong> Weitere Beispiele sind im <a href="https://mdn.github.io/dom-examples/web-storage/">Web-Storage-Demo</a> zu finden.</p> +</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('HTML WHATWG', 'webstorage.html#dom-storage-getitem', 'Storage.getItem')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Storage.getItem")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de-DE/docs/Web/API/Storage/setItem">Storage.setItem()</a></li> + <li><a href="/de-DE/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li> +</ul> diff --git a/files/de/web/api/storage/index.html b/files/de/web/api/storage/index.html new file mode 100644 index 0000000000..7b5d09b041 --- /dev/null +++ b/files/de/web/api/storage/index.html @@ -0,0 +1,161 @@ +--- +title: Storage +slug: Web/API/Storage +translation_of: Web/API/Storage +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>Die <code>Storage</code>-Schnittstelle der Web-Storage-API ermöglicht den Zugriff auf einfache Schlüssel-Wert-Datenbanken des Browsers, in denen Daten mit einer Domain verknüpft gespeichert werden können.</p> + +<p>In {{domxref("Window.sessionStorage")}} gespeicherte Daten verfallen mit Ablauf der Sitzung (in der Regel dem Schließen des Browsers), {{domxref("Window.localStorage")}} speichert die Daten hingegen grundsätzlich zeitlich unbegrenzt.</p> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<dl> + <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt> + <dd>Anzahl der in diesem <code>Storage</code>-Objekt gespeicherten Datensätze.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<dl> + <dt>{{domxref("Storage.key()")}}</dt> + <dd>Gibt unter Angabe einer Zahl n den Schlüssel des n-ten Datensatzes zurück.</dd> +</dl> + +<dl> + <dt>{{domxref("Storage.getItem()")}}</dt> + <dd>Gibt den zum Schlüssel gehörigen Wert zurück.</dd> + <dt>{{domxref("Storage.setItem()")}}</dt> + <dd>Speichert den gegebenen Wert im Storage-Objekt unter dem gegebenen Schlüssel. Ist unter diesem Schlüssel bereits ein Datensatz vorhanden, wird sein Wert mit dem gegebenen überschrieben.</dd> + <dt>{{domxref("Storage.removeItem()")}}</dt> + <dd>Löscht den Datensatz des gegebenen Schlüssels.</dd> + <dt>{{domxref("Storage.clear()")}}</dt> + <dd>Löscht sämtliche Datensätze des Storage-Objekts.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>In diesem Beispiel wird auf das <code>Storage</code>-Objekt <code>localStorage</code> zugegriffen.</p> + +<p>Zuerst wird mit <code>!localStorage.getItem('bgcolor') </code>geprüft, ob das Objekt keinen Datensatz namens <code>bgcolor</code> enthält. Ist der Datensatz <code>bgcolor</code> nicht vorhanden, wird <code>populateStorage()</code> aufgerufen, um Werte aus der Seite auszulesen und mittels {{domxref("Storage.setItem()")}} im <code>Storage</code>-Objekt zu speichern.<br> + Anschließend folgt der Aufruf der Funktion <code>setStyles()</code>, die alle Daten mittels {{domxref("Storage.getItem()")}} ausliest und die Darstellung der Seite entsprechend ändert.<br> + </p> + +<pre class="brush: js">if(!localStorage.getItem('bgcolor')) { + populateStorage(); +} +setStyles(); + +function populateStorage() { + localStorage.setItem('bgcolor', document.getElementById('bgcolor').value); + localStorage.setItem('font', document.getElementById('font').value); + localStorage.setItem('image', document.getElementById('image').value); +} + +function setStyles() { + var currentColor = localStorage.getItem('bgcolor'); + var currentFont = localStorage.getItem('font'); + var currentImage = localStorage.getItem('image'); + + document.getElementById('bgcolor').value = currentColor; + document.getElementById('font').value = currentFont; + document.getElementById('image').value = currentImage; + + htmlElem.style.backgroundColor = '#' + currentColor; + pElem.style.fontFamily = currentFont; + imgElem.setAttribute('src', currentImage); +}</pre> + +<div class="note"> +<p><strong>Anmerkung</strong>: Dieses Beispiel kann unter <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a> ausprobiert werden.</p> +</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('Web Storage', '#the-storage-interface', 'Storage')}}</td> + <td>{{Spec2('Web Storage')}}</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 (WebKit)</th> + </tr> + <tr> + <td>localStorage</td> + <td>4</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.5</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>sessionStorage</td> + <td>5</td> + <td>{{CompatUnknown}}</td> + <td>2</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown }}</td> + <td>8</td> + <td>11</td> + <td>3.2[1]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Seit iOS 5.1 speichert Safari Mobile in <code>localStorage</code> abgelegte Daten im Cache-Verzeichnis. Dieses wird in unregelmäßigen Abständen vom Betriebssystem teilweise geleert, spätestens jedoch, sobald nur noch wenig Speicherplatz zur Verfügung steht.<br> + Desweiteren verhindert der private Modus von Safari Mobile jegliche Nutzung von <code>localStorage</code>.</p> + +<p>Die Speicherkapazität von <code>localStorage</code> und <a class="new" href="https://developer.mozilla.org/de/docs/Web/API/SessionStorage" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>sessionStorage</code></a>. unterscheidet sich von Browser zu Browser (siehe diese <a class="external external-icon" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailierte Aufstellung der Speicherkapazitäten für verschiedene Browser</a>).</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p> diff --git a/files/de/web/api/storage/key/index.html b/files/de/web/api/storage/key/index.html new file mode 100644 index 0000000000..65e56c9ec0 --- /dev/null +++ b/files/de/web/api/storage/key/index.html @@ -0,0 +1,75 @@ +--- +title: Storage.key() +slug: Web/API/Storage/key +tags: + - API Methode Storage +translation_of: Web/API/Storage/key +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>Die Methode <code>key()</code> der {{domxref("Storage")}}-Schnittstelle gibt durch Übergabe des Parameters n den Schlüssel des n-ten Datensatzes zurück.<br> + Die Reihenfolge der Schlüssel folgt keiner Vorgabe und hängt alleine vom Browser ab.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>aKeyName</em> = <em>storage</em>.key(<em>index</em>);</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><em>index</em></dt> + <dd>Ein Integer, der die Position des gewünschten Schlüssels bestimmt. Die Nummerierung beginnt bei 0.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein {{domxref("DOMString")}} mit dem Namen des Schlüssels.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Die folgende Funktion liest in einer Schleife für jeden Datensatz den Schlüssel und übergibt diesen an die Funktion callback():</p> + +<pre class="brush: js">function forEachKey(callback) { + for (var i = 0; i < localStorage.length; i++) { + callback(localStorage.key(i)); + } +}</pre> + +<p>Nachfolgend wird in einer Schleife zu jedem Datensatz erst der Schlüssel, dann mit dem Schlüssel der Wert gelesen und dieser in der Konsole ausgegeben.</p> + +<pre class="brush: js">for (var i = 0; i < localStorage.length; i++) { + var key = localStorage.key(i); + var value = localStorage.getItem(key); + console.log(value); +}</pre> + +<div class="note"> +<p><strong>Hinweis</strong>: Weitere Beispiele sind in der <a href="https://mdn.github.io/dom-examples/web-storage/">Web-Storage-Demo</a> zu finden.</p> +</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">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Storage.key")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p> diff --git a/files/de/web/api/storage/length/index.html b/files/de/web/api/storage/length/index.html new file mode 100644 index 0000000000..767ef0c21b --- /dev/null +++ b/files/de/web/api/storage/length/index.html @@ -0,0 +1,63 @@ +--- +title: Storage.length +slug: Web/API/Storage/length +tags: + - API Eigenschaft Storage +translation_of: Web/API/Storage/length +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>Die <code>length</code>-Eigenschaft der {{domxref("Storage")}}-Schnittstelle enthält die Anzahl der im <code>Storage</code>-Objekt gespeicherten Datensätze.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>aLength</em> = <em>Storage</em>.length;</pre> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein Integer.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Die folgende Funktion fügt drei Datensätze hinzu und liest abschließend die Anzahl der vorhandenen Datensätze:</p> + +<pre class="brush: js">function populateStorage() { + localStorage.setItem('bgcolor', 'yellow'); + localStorage.setItem('font', 'Helvetica'); + localStorage.setItem('image', 'cats.png'); + + localStorage.length; // sollte 3 zurückgeben +}</pre> + +<div class="note"> +<p><strong>Hinweis</strong>: Weitere Beispiele sind im <a href="https://mdn.github.io/dom-examples/web-storage/">Web-Storage-Demo</a> zu finden.</p> +</div> + +<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('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Storage.length")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li> +</ul> diff --git a/files/de/web/api/storage/removeitem/index.html b/files/de/web/api/storage/removeitem/index.html new file mode 100644 index 0000000000..6b180f52db --- /dev/null +++ b/files/de/web/api/storage/removeitem/index.html @@ -0,0 +1,68 @@ +--- +title: Storage.removeItem() +slug: Web/API/Storage/removeItem +tags: + - API Methode Storage Speicher +translation_of: Web/API/Storage/removeItem +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>Die Methode <code>removeItem()</code> der {{domxref("Storage")}}-Schnittstelle löscht den im Parameter keyName benannten Datensatz aus dem Speicher. Ist kein Datensatz unter diesem Schlüssel vorhanden, tut diese Funktion nichts.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>storage</em>.removeItem(<em>keyName</em>);</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><em><u>keyName</u></em></dt> + <dd>Ein {{domxref("DOMString")}}, der den Schlüssel des zu löschenden Datensatzes enthält.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Keiner.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Die nachfolgende Funktion speichert drei Datensätze und löscht abschließend den Datensatz mit dem Schlüssel <code>image</code>.</p> + +<pre class="brush: js">function populateStorage() { + localStorage.setItem('bgcolor', 'red'); + localStorage.setItem('font', 'Helvetica'); + localStorage.setItem('image', 'myCat.png'); + + localStorage.removeItem('image'); +}</pre> + +<div class="note"> +<p><strong>Hinweis</strong>: Weitere Beispiele sind im <a href="https://mdn.github.io/dom-examples/web-storage/">Web-Storage-Demo</a> zu finden.</p> +</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('HTML WHATWG', 'webstorage.html#dom-storage-removeitem', 'Storage.removeItem')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Storage.removeItem")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p> diff --git a/files/de/web/api/storage/setitem/index.html b/files/de/web/api/storage/setitem/index.html new file mode 100644 index 0000000000..94145670a9 --- /dev/null +++ b/files/de/web/api/storage/setitem/index.html @@ -0,0 +1,146 @@ +--- +title: Storage.setItem() +slug: Web/API/Storage/setItem +tags: + - API + - Méthode + - Referenz + - Speicher + - Webspeicher + - localStorage + - sessionStorage +translation_of: Web/API/Storage/setItem +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>Die Methode <code>setItem()</code> der {{domxref("Storage")}}-Schnittstelle fügt das gegebene Schlüssel-Wert-Paar zum Speicher hinzu oder überschreibt ein bereits unter diesem Schlüssel im Speicher vorhandenes.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>storage</em>.setItem(<em>keyName</em>, <em>keyValue</em>);</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><em>keyName</em></dt> + <dd>Ein {{domxref("DOMString")}} mit dem Schlüssel des Datensatzes, der erstellt oder überschrieben werden soll.</dd> + <dt><em>keyValue</em></dt> + <dd>Ein {{domxref("DOMString")}} mit dem Wert, der in den mit keyName benannten Datensatz geschrieben werden soll.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Keiner.</p> + +<h3 id="Fehler">Fehler</h3> + +<p><code>setItem()</code> kann bei vollem Speicher eine Exception auslösen. Insbesondere im mobilen Safari (ab iOS 5) wird sie immer ausgelöst, falls der Nutzer sich im privaten Modus befindet, da Safari in diesem Modus das Speicherkontingent auf 0 Bytes setzt. Andere Browser nutzen für den privaten Modus einen separaten Daten-Container.<br> + Deshalb sollte immer sichergestellt sein, dass <strong>ein möglicher Fehler eingeplant und entsprechend behandelt wird.</strong></p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Die folgende Funktion erstellt drei Datensätze im <a href="/de/docs/Web/API/Window/localStorage">localStorage</a>-Objekt.</p> + +<pre class="syntaxbox">function populateStorage() { + localStorage.setItem('bgcolor', 'red'); + localStorage.setItem('font', 'Helvetica'); + localStorage.setItem('image', 'myCat.png'); +}</pre> + +<div class="note"> +<p><strong>Hinweis</strong>: Weitere Beispiele sind im <a href="https://mdn.github.io/dom-examples/web-storage/">Web-Storage-Demo</a> zu finden.</p> +</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('HTML WHATWG', 'webstorage.html#dom-storage-setitem', 'Storage.setItem')}}</td> + <td>{{Spec2('HTML WHATWG')}}</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 (WebKit)</th> + </tr> + <tr> + <td>localStorage</td> + <td>4</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.5</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>sessionStorage</td> + <td>5</td> + <td>{{CompatUnknown}}</td> + <td>2</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown }}</td> + <td>8</td> + <td>11</td> + <td>iOS 3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>Alle Browser haben verschiedene Kapazitäten für localStorage und sessionStorage. Hier gibt es eine <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detaillierten Übersicht der Kapazitäten verschiedener Browser</a>.</p> + +<div class="note"> +<p><strong>Hinweis: </strong>Seit iOS 5.1, speichert Safari Mobile localStorage-Daten im Cache-Ordner, der gelegentlich durch das Betriebssystem geleert wird, insbesondere falls nur noch wenig freier Speicher zur Verfügung steht.</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de-DE/docs/Web/API/Storage/getItem">Storage.getItem()</a></li> + <li><a href="/de-DE/docs/Web/API/Storage/removeItem">Storage.removeItem()</a></li> + <li><a href="/de-DE/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li> +</ul> diff --git a/files/de/web/api/transferable/index.html b/files/de/web/api/transferable/index.html new file mode 100644 index 0000000000..20ed3dfccd --- /dev/null +++ b/files/de/web/api/transferable/index.html @@ -0,0 +1,122 @@ +--- +title: Transferable +slug: Web/API/Transferable +tags: + - API + - Interface + - Reference + - Web Workers + - postMessage +translation_of: Web/API/Transferable +--- +<p>{{ ApiRef("HTML DOM") }}</p> + +<p>Das <code><strong>Transferable</strong></code> Interface stellt ein Objekt dar, welches zwischen unterschiedlichen Ausführungskontexten, wie zum Beispiel dem main thread und Web Workers, ausgetauscht werden kann.</p> + +<p>Es existiert von dem Interface keine Instanz und kein Objekt. Ebenso definiert es keinerlei Eigenschaften und Methoden. Zweck des <code><strong>Transferable</strong></code> Interface ist lediglich die Möglichkeit der Kennzeichnung von Objekten für die spezifische Situation eines Transfers und Austauschs etwa zwischen Anwendung und {{domxref("Worker")}} via {{domxref("Worker.postMessage()")}}.</p> + +<p>Die Typen {{jsxref("ArrayBuffer")}}, {{domxref("MessagePort")}} and {{domxref("ImageBitmap")}} implementieren dieses Interface.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Das </em><em><code>Transferable</code></em><em> Interface implementiert und erbt keine spezifischen Eigenschaften.</em></p> + +<h2 id="Methods">Methods</h2> + +<p><em>Das </em><em><code>Transferable</code> Interface implementiert und erbt keine spezifischen Methoden.</em></p> + +<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('HTML WHATWG', "infrastructure.html#transferable-objects", "Transferable")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderung von {{SpecName("HTML5 W3C")}}, wenngleich das neue {{domxref("CanvasProxy")}} auch <code>Transferable</code> implementiert.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "infrastructure.html#transferable-objects", "Transferable")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10.0 [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>MessagePort</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</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>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>10.0 [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>MessagePort</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer 10 only accepts a single {{domxref("Transferable")}} object as parameter, but not an array.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Interfaces implementing it: {{jsxref("ArrayBuffer")}}, {{domxref("MessagePort")}}, {{domxref("ImageBitmap")}}.</li> +</ul> diff --git a/files/de/web/api/url/createobjecturl/index.html b/files/de/web/api/url/createobjecturl/index.html new file mode 100644 index 0000000000..f3668e7f70 --- /dev/null +++ b/files/de/web/api/url/createobjecturl/index.html @@ -0,0 +1,139 @@ +--- +title: URL.createObjectURL() +slug: Web/API/URL/createObjectURL +tags: + - API + - Experimentell + - Méthode + - URL + - URL API +translation_of: Web/API/URL/createObjectURL +--- +<p>{{ApiRef("URL API")}}{{SeeCompatTable}}</p> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p>Die statische Methode <strong><code>URL.createObjectURL()</code></strong> erzeugt einen {{domxref("DOMString")}}, welcher eine URL enthält, die das übergebene Objekt repräsentiert. Die Gültigkeitsdauer der URL ist von dem Dokumentobjekt {{domxref("document")}} abhängig, in dessen Fenster sie erzeugt wurde. Die neue Objekt-URL repräsentiert das angegebene {{domxref("File")}}- bzw. {{domxref("Blob")}}-Objekt.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>objectURL</em> = URL.createObjectURL(<em>blob</em>); +</pre> + +<h2 id="Parameter">Parameter</h2> + +<dl> + <dt><em>blob</em></dt> +</dl> + +<dl> + <dd>Ist ein {{domxref("File")}}-Objekt oder ein {{domxref("Blob")}}-Objekt, für das eine URL generiert werden soll.</dd> +</dl> + +<ul> +</ul> + +<h2 id="Example" name="Example">Beispiele</h2> + +<p>Siehe "<a href="/en-US/docs/Using_files_from_web_applications#Example_Using_object_URLs_to_display_images" title="https://developer.mozilla.org/en/Using_files_from_web_applications#Example:_Using_object_URLs_to_display_images">Using object URLs to display images</a>".</p> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p>Immer, wenn <code>createObjectURL()</code> aufgerufen wird, wird eine neue Objekt-URL erzeugt, auch wenn schon eine URL für das gleiche Objekt existiert. Jede dieser URLs muss durch einen Aufruf von {{domxref("URL.revokeObjectURL()")}} wieder freigegeben werden, sofern sie nicht mehr benötigt wird. Wenn das Dokument geschlossen wird, gibt der Browser die URLs automatisch wieder frei. Für eine optimale Performance and Speichernutzung sollten die URLs freigegeben werden, sofern sichergestellt werden kann, dass sie nicht mehr benötigt werden.</p> + +<h2 id="Specifications" name="Specifications">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('File API', '#dfn-createObjectURL', 'URL')}}</td> + <td>{{Spec2('File API')}}</td> + <td>Erste Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">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 (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>8 mit vorangestelltem <code>webkitURL</code> für <code>URL</code><br> + {{CompatChrome(23)}}</td> + <td>{{CompatGeckoDesktop(2)}}</td> + <td>{{CompatIE(10)}}</td> + <td>{{CompatOpera(15)}}</td> + <td>{{CompatSafari(6)}} mit vorangestelltem <code>webkitURL</code> für <code>URL</code><br> + {{CompatSafari(7)}}</td> + </tr> + <tr> + <td>In a {{ domxref("Worker", "Web Worker") }}</td> + <td>10 mit vorangestelltem <code>webkitURL</code> für <code>URL</code><br> + {{CompatChrome(23)}}</td> + <td>{{CompatGeckoDesktop(21)}}</td> + <td>{{CompatIE(11)}}</td> + <td>{{CompatOpera(15)}}</td> + <td>{{CompatSafari(6)}} mit vorangestelltem <code>webkitURL</code> für <code>URL</code><br> + {{CompatSafari(7)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table" style="height: 57px; width: 922px;"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome for Android</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>18 mit vorangestelltem <code>webkitURL</code> für <code>URL</code></td> + <td>4.0 mit vorangestelltem <code>webkitURL</code> für <code>URL</code></td> + <td>{{CompatGeckoMobile(14)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(15)}} mit vorangestelltem <code>webkitURL</code> für <code>URL</code></td> + <td>6.0 mit vorangestelltem <code>webkitURL</code> für <code>URL</code></td> + </tr> + <tr> + <td>In einem {{ domxref("Worker", "Web Worker") }}</td> + <td>18 mit vorangestelltem <code>webkitURL</code> für <code>URL</code></td> + <td>{{CompatVersionUnknown}} mit vorangestelltem <code>webkitURL</code> für <code>URL</code></td> + <td>{{CompatGeckoMobile(14)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(15)}} mit vorangestelltem <code>webkitURL</code> für <code>URL</code></td> + <td>6.0 mit vorangestelltem <code>webkitURL</code> für <code>URL</code></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{domxref("URL.revokeObjectURL()")}}</li> + <li><a href="/en-US/docs/Using_files_from_web_applications" title="Using files from web applications">Using files from web applications</a></li> +</ul> diff --git a/files/de/web/api/url/index.html b/files/de/web/api/url/index.html new file mode 100644 index 0000000000..6f1bb53686 --- /dev/null +++ b/files/de/web/api/url/index.html @@ -0,0 +1,222 @@ +--- +title: URL +slug: Web/API/URL +tags: + - API + - Experimental + - NeedsTranslation + - TopicStub + - URL API +translation_of: Web/API/URL +--- +<div>{{ApiRef("URL API")}} {{SeeCompatTable}}</div> + +<p>The <strong><code>URL</code></strong><strong> </strong>interface represent an object providing static methods used for creating object URLs.</p> + +<p>When using a user agent where no constructor has been implemented yet, it is possible to access such an object using the {{domxref("Window.URL")}} properties (prefixed with Webkit-based browser as <code>Window.webkitURL</code>).</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Implements properties defined in {{domxref("URLUtils")}}.</em></p> + +<dl> + <dt>{{domxref("URLUtils.href")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the whole URL.</dd> + <dt>{{domxref("URLUtils.protocol")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final <code>':'</code>.</dd> + <dt>{{domxref("URLUtils.host")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the host, that is the <em>hostname</em>, a <code>':'</code>, and the <em>port</em> of the URL.</dd> + <dt>{{domxref("URLUtils.hostname")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the domain of the URL.</dd> + <dt>{{domxref("URLUtils.port")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the port number of the URL.</dd> + <dt>{{domxref("URLUtils.pathname")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing an initial <code>'/'</code> followed by the path of the URL.</dd> + <dt>{{domxref("URLUtils.search")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing a <code>'?'</code> followed by the parameters of the URL.</dd> + <dt>{{domxref("URLUtils.hash")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing a <code>'#'</code> followed by the fragment identifier of the URL.</dd> + <dt>{{domxref("URLUtils.username")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the username specified before the domain name.</dd> + <dt>{{domxref("URLUtils.password")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the password specified before the domain name.</dd> + <dt>{{domxref("URLUtils.origin")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the origin of the URL, that is its scheme, its domain and its port.</dd> +</dl> + +<dl> + <dt>{{domxref("URLUtils.searchParams")}}</dt> + <dd>Returns a {{domxref("URLSearchParams")}} object allowing to access the GET query arguments contained in the URL.</dd> +</dl> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("URL.URL", "URL()")}}</dt> + <dd>Creates and return a <code>URL</code> object composed from the given parameters.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>The <code>URL</code> interface implements methods defined in {{domxref("URLUtils")}}.</em></p> + +<dl> + <dt>{{domxref("URLUtils.toString()")}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.</dd> +</dl> + +<h2 id="Static_methods">Static methods</h2> + +<dl> + <dt>{{ domxref("URL.createObjectURL()") }}</dt> + <dd>Returns a {{domxref("DOMString")}} containing a unique blob URL, that is a URL with <code>blob:</code> as its scheme, followed by an opaque string uniquely identifying the object in the browser.</dd> + <dt>{{ domxref("URL.revokeObjectURL()") }}</dt> + <dd>Revokes an object URL previously created using {{ domxref("URL.createObjectURL()") }}.</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('File API', '#creating-revoking', 'URL')}}</td> + <td>{{Spec2('File API')}}</td> + <td>Added the static methods <code>URL.createObjectURL()</code> and <code>URL.revokeObjectURL</code><code>()</code>.</td> + </tr> + <tr> + <td>{{SpecName('URL', '#api', 'Node')}}</td> + <td>{{Spec2('URL')}}</td> + <td>Initial definition (implements <code>URLUtils</code>).</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>Basic support</td> + <td>8.0 as <code>webkitURL</code><br> + 35</td> + <td>{{CompatGeckoDesktop("2.0")}} (non-standard name) [1]<br> + {{CompatGeckoDesktop("19.0")}}</td> + <td>10.0</td> + <td>15.0 as <code>webkitURL<br> + {{CompatVersionUnknown}}</code></td> + <td>6.0 as <code>webkitURL</code><br> + 7.0</td> + </tr> + <tr> + <td><code>URLUtils</code> properties</td> + <td>32</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>19</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>username</code>, <code>password</code>, and <code>origin</code></td> + <td>32</td> + <td>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>19</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>protocol, host, hostname, port, href</code>, <code>pathname</code>, <code>search</code>, <code>hash</code></td> + <td>32</td> + <td>{{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>19</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>searchParams</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>19</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>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}as <code>webkitURL</code></td> + <td>{{CompatGeckoMobile("14.0")}}(non-standard name) [1]<br> + {{CompatGeckoMobile("19.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>15.0 as <code>webkitURL</code></td> + <td> + <p>6.0 as <code>webkitURL</code></p> + + <p> </p> + </td> + </tr> + <tr> + <td><code>URLUtils </code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>username</code>, <code>password</code>, <code>href</code>, and <code>origin</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] From Gecko 2 (Firefox 4) to Gecko 18 included, Gecko supported this interface with the non-standard <code>nsIDOMMozURLProperty</code> internal type. As the only to access such an object was through {{domxref("window.URL")}}, in practice, this didn't make any difference.</p> + +<h2 id="Chrome_Code_-_Scope_Availability">Chrome Code - Scope Availability</h2> + +<p>To use from chrome code, JSM and Bootstrap scope, you have to import it like this:</p> + +<pre class="brush: js">Cu.importGlobalProperties(['URL']); +</pre> + +<p><code>URL</code> is available in Worker scopes.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Property allowing to get such an object: {{domxref("Window.URL")}}.</li> + <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> +</ul> diff --git a/files/de/web/api/url/protocol/index.html b/files/de/web/api/url/protocol/index.html new file mode 100644 index 0000000000..08d4ad6b6f --- /dev/null +++ b/files/de/web/api/url/protocol/index.html @@ -0,0 +1,61 @@ +--- +title: URL.protocol +slug: Web/API/URL/protocol +tags: + - API + - Property + - Protocols + - Reference + - URL +translation_of: Web/API/URL/protocol +--- +<div>{{ApiRef("URL API")}}</div> + +<p>Die <code><strong>protocol </strong></code>Eigenschaft der {{domxref("URL")}} Schnittstelle ist ein {{domxref("USVString")}} der das Protokollschema der URL, einschließlich des finalen <code>':' </code>darstellt.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax"><code>Syntax</code></h2> + +<pre class="syntaxbox"><em>string</em> = <em>object</em>.protocol; +<em>object</em>.protocol = <em>string</em>; +</pre> + +<h3 id="Wert">Wert</h3> + +<p>Ein {{domxref("USVString")}}.</p> + +<h2 id="Beispiele"><code>Beispiele</code></h2> + +<pre class="brush: js">var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/protocol'); +var result = url.protocol; // Gibt "https:" zurück. +</pre> + +<h2 id="Spezifikationen"><code>Spezifikationen</code></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('URL', '#dom-url-protocol', 'protocol')}}</td> + <td>{{Spec2('URL')}}</td> + <td>Erste Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität"><code>Browserkompatibilität</code></h2> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wurde automatisch aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen wollen, besuchen Sie <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine pull-request.</div> + +<p>{{Compat("api.URL.protocol")}}</p> + +<h2 id="Siehe_auch"><code>Siehe auch</code></h2> + +<ul> + <li>Die {{domxref("URL")}} Schnittstelle zu der es gehört.</li> +</ul> diff --git a/files/de/web/api/urlsearchparams/index.html b/files/de/web/api/urlsearchparams/index.html new file mode 100644 index 0000000000..3c635d180d --- /dev/null +++ b/files/de/web/api/urlsearchparams/index.html @@ -0,0 +1,211 @@ +--- +title: URLSearchParams +slug: Web/API/URLSearchParams +tags: + - API + - Experimentell + - Interface + - Referenz + - URL API +translation_of: Web/API/URLSearchParams +--- +<p>{{ApiRef("URL API")}}</p> + +<p>Das <strong><code>URLSearchParams</code></strong> Interface definiert Hilfsmethoden um mit dem Query-String einer URL zu arbeiten.</p> + +<p>Ein Objekt, welches <code>URLSearchParams</code> implementiert, kann auch direkt in einem {{jsxref("Statements/for...of", "for...of")}} Konstrukt genutzt werden, anstatt {{domxref('URLSearchParams.entries()', 'entries()')}}: <code>for (var p of mySearchParams)</code> ist äquivalent zu <code>for (var p of mySearchParams.entries())</code>.</p> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt>{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}</dt> + <dd>Konstruktor erzeugt ein <code>URLSearchParams</code> Objekt von einem Query-String.</dd> +</dl> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<p><em>Dieses Interface erbt keine Eigenschaften.</em></p> + +<h2 id="Methoden">Methoden</h2> + +<p><em>Dieses Interface erbt keine Methoden.</em></p> + +<dl> + <dt>{{domxref("URLSearchParams.append()")}}</dt> + <dd>Hängt ein Schlüssel/Wert - Paar an den Query-String.</dd> + <dt>{{domxref("URLSearchParams.delete()")}}</dt> + <dd>Löscht einen Schlüssel und den zugehörigen Wert aus dem Query-String.</dd> + <dt>{{domxref("URLSearchParams.entries()")}}</dt> + <dd>Gibt einen {{jsxref("Iteration_protocols","Iterator")}} über alle Schlüssel/Wert - Paare im Query-String.</dd> + <dt>{{domxref("URLSearchParams.get()")}}</dt> + <dd>Gibt den ersten Wert, der im Query-String mit einem Schlüssel assoziiert ist.</dd> + <dt>{{domxref("URLSearchParams.getAll()")}}</dt> + <dd>Gibt alle Werte, die im Query-String mit einem Schlüssel assoziiert sind.</dd> + <dt>{{domxref("URLSearchParams.has()")}}</dt> + <dd>Gibt einen {{jsxref("Boolean")}}, der anzeigt ob ein Schlüssel im Query-String vorkommt.</dd> + <dt>{{domxref("URLSearchParams.keys()")}}</dt> + <dd>Gibt einen {{jsxref("Iteration_protocols", "Iterator")}} über alle Schlüssel im Query-String.</dd> + <dt>{{domxref("URLSearchParams.set()")}}</dt> + <dd>Setzt den Wert eines Schlüssels. Wenn der Schlüssel mehrfach im Query-String vorkommt, werden die Restlichen gelöscht.</dd> + <dt>{{domxref("URLSearchParams.sort()")}}</dt> + <dd>Sortiert alle Schlüssel/Wert Paare, nach dem Schlüssel.</dd> + <dd>Sorts all key/value pairs, if any, by their keys.</dd> + <dt>{{domxref("URLSearchParams.toString()")}}</dt> + <dd>Gibt den Query-String, in der passenden Form um in einer URL einzusetzen.</dd> + <dt>{{domxref("URLSearchParams.values()")}}</dt> + <dd>Gibt einen {{jsxref("Iteration_protocols", "Iterator")}} über alle Werte im Query-String.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: js">var paramsString = "q=URLUtils.searchParams&topic=api" +var searchParams = new URLSearchParams(paramsString); + +//Iteriert über die Suchparameter +for (let p of searchParams) { + console.log(p); +} + +searchParams.has("topic") === true; // true +searchParams.get("topic") === "api"; // true +searchParams.getAll("topic"); // ["api"] +searchParams.get("foo") === null; // true +searchParams.append("topic", "webdev"); +searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev" +searchParams.set("topic", "More webdev"); +searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev" +searchParams.delete("topic"); +searchParams.toString(); // "q=URLUtils.searchParams" +</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('URL', '#urlsearchparams', "URLSearchParams")}}</td> + <td>{{Spec2('URL')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilitä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(49)}}</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatNo}}</td> + <td>36</td> + <td>10.1</td> + </tr> + <tr> + <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, and support of <code>for...of</code></td> + <td>{{CompatChrome(49)}}</td> + <td>{{CompatGeckoDesktop("44.0")}}</td> + <td>{{CompatNo}}</td> + <td>36</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>USVString</code> for constructor <code>init</code> object</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("53.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Record for constructor <code>init</code> object</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("54.0")}}</td> + <td>{{CompatNo}}</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 Webview</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>{{CompatChrome(49)}}</td> + <td>{{CompatChrome(49)}}</td> + <td>{{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, and support of <code>for...of</code></td> + <td>{{CompatChrome(49)}}</td> + <td>{{CompatChrome(49)}}</td> + <td>{{CompatGeckoMobile("44.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>USVString</code> for constructor <code>init</code> object</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("53.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Record for constructor <code>init</code> object</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("54.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Verweise">Verweise</h2> + +<ul> + <li>Andere URL-bezogene Interfaces: {{domxref("URL")}}, {{domxref("URLUtils")}}.</li> + <li><a href="https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en">Google Developers: Easy URL manipulation with URLSearchParams</a></li> +</ul> + +<dl> +</dl> diff --git a/files/de/web/api/usvstring/index.html b/files/de/web/api/usvstring/index.html new file mode 100644 index 0000000000..4021cc4cc8 --- /dev/null +++ b/files/de/web/api/usvstring/index.html @@ -0,0 +1,42 @@ +--- +title: USVString +slug: Web/API/USVString +tags: + - API + - DOM + - DOM Referenz + - Referenz + - String + - WebIDL +translation_of: Web/API/USVString +--- +<p>{{APIRef("DOM")}}</p> + +<p>Ein <strong><code>USVString</code></strong> entspricht der Menge aller möglichen Folgen von Unicode-Skalarwerten. <code>USVString</code> konvertiert zu <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>, wenn es in JavaScript zurückgegeben wird; Es wird allgemein nur für APIs verwendet, die Text verarbeiten und einen String mit Unicode-Skalarwerten benötigen. <code>USVString</code> ist gleich zu <code><a href="/de/docs/Web/API/DOMString">DOMString</a></code>, mit der Ausnahme, dass USVString ungepaarte Ersatzcodepoints nicht erlaubt. Ungepaarte Ersatzcodepoints in einem USVString werden vom Browser zum Unicode 'Ersatzzeichen' <code>U+FFFD</code> konvertiert.</p> + +<h2 id="Specification" name="Specification">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('WebIDL', '#idl-USVString', 'USVString')}}</td> + <td>{{Spec2('WebIDL')}}</td> + <td>Initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code></li> + <li><code><a href="/de/docs/Web/API/DOMString">DOMString</a></code></li> + <li><code><a href="/de/docs/Web/API/CSSOMString">CSSOMString</a></code></li> + <li><a href="/de/docs/Archive/Add-ons/Code_snippets/StringView"><code>StringView</code> - eine C-like Repräsentation von Strings basierend auf Arrays</a></li> + <li><code><a href="/de/docs/Web/API/DOMString/Binary">Binary strings</a></code></li> +</ul> diff --git a/files/de/web/api/vollbild_api/index.html b/files/de/web/api/vollbild_api/index.html new file mode 100644 index 0000000000..1ddce4c572 --- /dev/null +++ b/files/de/web/api/vollbild_api/index.html @@ -0,0 +1,305 @@ +--- +title: Vollbild API +slug: Web/API/Vollbild_API +tags: + - API + - DOM + - JS + - Tutorial + - Vollbild API +translation_of: Web/API/Fullscreen_API +--- +<p>{{DefaultAPISidebar("Fullscreen API")}}</p> + +<p class="summary">Die <strong><code>Vollbild-API</code></strong> bietet einen einfachen Weg, um Webinhalte auf dem gesamten Bildschirm des Nutzers anzuzeigen. Der Browser kann einfach angewiesen werden, Elemente und, falls vorhanden, deren Kinder den gesamten Bildschirm einnehmen zu lassen, wodurch jegliche andere Inhalte vorübergehend ausgeblendet werden.</p> + +<div class="note"> +<p>Momentan benutzen nicht alle Browser die Version der API ohne Präfixe. Siehe <a href="#Prefixing">Vendor Präfixe</a> für Unterschiede zwischen Präfixen und Namen. </p> + +<p>Für eine universelle Lösung des Problems siehe <a href="https://github.com/rafrex/fscreen">Fscreen</a>.</p> +</div> + +<h2 id="Specification" name="Specification">Aktivieren des Vollbildmodus</h2> + +<p>Wenn sie ein Element gefunden haben, welches Sie im Vollbildmodus anzeigen möchten (etwa ein {{ HTMLElement("video") }}), wir der Vollbildmodus einfach durch den Aufruf der {{ domxref("Element.requestFullscreen()") }}-Methode gestartet.</p> + +<p>Nehmen wir dieses {{ HTMLElement("video") }}-Element als Beispiel:</p> + +<pre class="brush: html"><video controls id="myvideo"> + <source src="somevideo.webm"></source> + <source src="somevideo.mp4"></source> +</video> +</pre> + +<p>Wir können dieses Video mit folgendem Skript in den Vollbildmodus versetzen:</p> + +<pre class="brush: js">var elem = document.getElementById("myvideo"); +if (elem.requestFullscreen) { + elem.requestFullscreen(); +} +</pre> + +<h3 id="Anzeige-Schwierigkeiten">Anzeige-Schwierigkeiten</h3> + +<p>An dieser Stelle lohnt es sich, einen wichtigen Unterschied zwischen Gecko und WebKit aufzuzeigen: Gecko fügt automatisch CSS-Regeln zum betroffenen Element hinzu, damit es den ganzen Bildschirm einnimmt: "<code>width: 100%; height: 100%</code>". WebKit tut dies allerdings nicht; stattdessen wird das Vollbild-Element in der selben Größe zentriert vor einem schwarzen Hintergrund dargestellt. Um das gleich Vollbild-Verhalten in WebKit zu erhalten, müssen Sie selbst eine "<code>width: 100%; height: 100%;</code>"-CSS-Regel zum entsprechenden Element hinzufügen:</p> + +<pre class="brush: css">#myvideo:-webkit-full-screen { + width: 100%; + height: 100%; +} +</pre> + +<p>Andererseits, wenn Sie stattdessen versuchen, das WebKit-Verhalten auf Gecko zu erreichen, müssen sie das Element, das präsentiert werden soll, in einem anderen Element platzieren, welches sie stattdessen in den Vollbild-Modus versetzen. Dann können sie CSS-Regeln verwenden, um das innere Element so zu layouten, wie Sie wünschen.</p> + +<h3 id="Benachrichtigung">Benachrichtigung</h3> + +<p>Wenn der Vollbild-Modus erfolgreich gestartet wird, erhält das <code>document</code>, welches das entsprechende Element enthält ein {{ event("fullscreenchange") }}-Event. Wenn der Vollbild-Modus wieder verlassen wird, erhält das <code>document</code> wiederum ein {{ event("fullscreenchange") }}-Event. Beachten Sie jedoch, dass das {{ event("fullscreenchange") }}-Event selbst keine Informationen darüber bereitstellt, ob das <code>document</code> in oder aus den Vollbild-Modus wechselt. Stattdessen muss überprüft werden, ob das Attribut {{ domxref("document.fullscreenElement", "fullscreenElement") }}, des <code>document</code> nicht <code>null</code> ist. In diesem Fall befindet sich der Browser im Vollbild-Modus.</p> + +<h3 id="Wenn_die_Vollbild-Anfrage_scheitert">Wenn die Vollbild-Anfrage scheitert</h3> + +<p>Es ist nicht garantiert, dass der Wechsel in den Vollbild-Modus möglich ist. {{ HTMLElement("iframe") }}-Elements etwa haben das {{ HTMLAttrXRef("allowfullscreen", "iframe") }}-Attribut, um ihrem Inhalt zu erlauben, in den Vollbild-Modus zu wechseln. Zusätzlich gibt es bestimmte Arten von Inhalten, wie etwa windowed plug-ins, welche nicht im Vollbild-Modus angezeigt werden können. Wenn versucht wird, ein Element, welches nicht im Vollbild-Modus dargestellt werden kann (oder ein Eltern- bzw. Kind-Knoten eines solchen Elements), wird dies nicht funktionieren. Stattdessen wird das Element, welches den Vollbild-Modus angefragt hat, ein <code>mozfullscreenerror</code>-Event erhalten. Wenn eine Vollbild-Anfrage scheitert, wird Firefox eine Fehlermeldung auf der Web-Konsole ausgeben, welche erklärt, warum die Anfrage fehlgeschlagen ist. In Chrome und neueren Versionen von Opera werden allerdings keine solchen Warnungen produziert.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Vollbild-Anfragen müssen aus einem Event-Handler heraus gestellt werden oder die Anfrage wird abgelehnt. </p> +</div> + +<h2 id="Verlassen_des_Vollbildmodus">Verlassen des Vollbildmodus</h2> + +<p>Der Nutzer hat immer die Möglichkeit, selbst den Vollbildmodus zu verlassen; siehe {{ anch("Things your users want to know") }}. Der Vollbildmodus kann aber auch programmatisch mithilfe der {{domxref("Document.exitFullscreen()")}}-Methode beendet werden.</p> + +<h2 id="Weitere_Informationen">Weitere Informationen</h2> + +<p>Das {{ domxref("document") }} hält weitere Informationen bereit, welche bei der Entwicklung von Vollbild-Web-Apps hilfreich sein können:</p> + +<dl> + <dt>{{ domxref("document.fullscreenElement", "fullscreenElement") }}</dt> + <dd>Das <code>fullscreenElement</code>-Attribut gibt das {{ domxref("element") }} an, welches aktuell im Vollbild-Modus angezeigt wird. Wenn dies nicht <code>null</code> ist, befindet sich das <code>document</code> im Vollbildmodus. Sonst, wenn dieses Attribut <code>null</code> ist, befindet sich das Dokument nicht im Vollbildmodus.</dd> + <dt>{{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}</dt> + <dd>Das <code>fullscreenEnabled</code>-Attribut gibt an, ob das <code>document</code> aktuell in einem Zustand ist, in welchem der Vollbild-Modus erlaubt ist.</dd> +</dl> + +<h2 id="Things_your_users_want_to_know" name="Things_your_users_want_to_know">Was die Nutzer wissen wollen</h2> + +<p>Sie sollten die Nutzer wissen lassen, dass sie den Vollbildmodus jederzeit mit <kbd>ESC</kbd> (oder <kbd>F11</kbd>) verlassen können.</p> + +<p>Zusätzlich beendet das Navigieren zu einer anderen Seite oder das Wechseln von Tabs oder Programmen (etwa mit <kbd>Alt</kbd>+<kbd>Tab</kbd>) auch den Vollbildmodus.</p> + +<h2 id="Specification" name="Specification">Beispiel</h2> + +<p>In diesem Beispiel wird ein Video auf einer Webseite dargestellt. Durch drücken von <kbd>Return</kbd> oder <kbd>Enter</kbd> kann der Nutzer den Vollbildmodus des Videos umschalten.</p> + +<p><a href="/samples/domref/fullscreen.html">Live-Beispiel ansehen</a></p> + +<h3 id="Watching_for_the_Enter_key">Watching for the <kbd>Enter</kbd> key</h3> + +<p>When the page is loaded, this code is run to set up an event listener to watch for the <kbd>Enter</kbd> key.</p> + +<pre class="brush: js">document.addEventListener("keydown", function(e) { + if (e.keyCode == 13) { + toggleFullScreen(); + } +}, false); +</pre> + +<h3 id="Toggling_fullscreen_mode">Toggling fullscreen mode</h3> + +<p>This code is called when the user hits the <kbd>Enter</kbd> key, as seen above.</p> + +<pre class="brush: js">function toggleFullScreen() { + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen(); + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } + } +} +</pre> + +<p>This starts by looking at the value of the <code>fullscreenElement</code> attribute on the {{ domxref("document") }} (checking it prefixed with both <code>moz</code>,<code> ms</code>, or <code>webkit</code>). If it's <code>null</code>, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling {{ domxref("element.requestFullscreen()") }}.</p> + +<p>If fullscreen mode is already active (<code>fullscreenElement</code> is non-<code>null</code>), we call {{ domxref("document.exitFullscreen()") }}.</p> + +<h2 id="Vendor_Präfixe">Vendor Präfixe</h2> + +<p>For the moment not all browsers are implementing the unprefixed version of the API (for vendor agnostic access to the Fullscreen API you can use <a href="https://github.com/rafrex/fscreen">Fscreen</a>). Here is the table summarizing the prefixes and name differences between them:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Standard</th> + <th scope="col">Blink (Chrome & Opera)</th> + <th scope="col">Gecko (Firefox)</th> + <th scope="col">Internet Explorer 11</th> + <th scope="col">Edge</th> + <th scope="col">Safari (WebKit)</th> + </tr> + <tr> + <td>{{domxref("Document.fullscreen")}}</td> + <td><code>webkitIsFullScreen</code></td> + <td><code>mozFullScreen</code></td> + <td><em>-</em></td> + <td><code>webkitIsFullScreen</code></td> + <td><code>webkitIsFullScreen</code></td> + </tr> + <tr> + <td>{{domxref("Document.fullscreenEnabled")}}</td> + <td><code>webkitFullscreenEnabled</code></td> + <td><code>mozFullScreenEnabled</code></td> + <td><code>msFullscreenEnabled</code></td> + <td><code>webkitFullscreenEnabled</code></td> + <td><code>webkitFullscreenEnabled</code></td> + </tr> + <tr> + <td>{{domxref("Document.fullscreenElement")}}</td> + <td><code>webkitFullscreenElement</code></td> + <td><code>mozFullScreenElement</code></td> + <td><code>msFullscreenElement</code></td> + <td><code>webkitFullscreenElement</code></td> + <td><code>webkitFullscreenElement</code></td> + </tr> + <tr> + <td>{{domxref("Document.onfullscreenchange")}}</td> + <td><code>onwebkitfullscreenchange</code></td> + <td><code>onmozfullscreenchange</code></td> + <td><code>MSFullscreenChange</code></td> + <td><code>onwebkitfullscreenchange</code></td> + <td><code>onwebkitfullscreenchange</code></td> + </tr> + <tr> + <td>{{domxref("Document.onfullscreenerror")}}</td> + <td><code>onwebkitfullscreenerror</code></td> + <td><code>onmozfullscreenerror</code></td> + <td><code>MSFullscreenError</code></td> + <td><code>onwebkitfullscreenerror</code></td> + <td><code>onwebkitfullscreenerror</code></td> + </tr> + <tr> + <td>{{domxref("Document.exitFullscreen()")}}</td> + <td><code>webkitExitFullscreen()</code></td> + <td><code>mozCancelFullScreen()</code></td> + <td><code>msExitFullscreen()</code></td> + <td><code>webkitExitFullscreen()</code></td> + <td><code>webkitExitFullscreen()</code></td> + </tr> + <tr> + <td>{{domxref("Element.requestFullscreen()")}}</td> + <td><code>webkitRequestFullscreen()</code></td> + <td><code>mozRequestFullScreen()</code></td> + <td><code>msRequestFullscreen()</code></td> + <td><code>webkitRequestFullscreen()</code></td> + <td><code>webkitRequestFullscreen()</code></td> + </tr> + </thead> +</table> + +<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("Fullscreen")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + <td>Initial version.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +<p>All browsers implement this APIs. Nevertheless some implement it with prefixed names with slightly different spelling; e.g., instead of <code>requestFullscreen()</code>, there is <code>MozRequestFullScreen()</code>.</p> + +<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>15 {{ property_prefix("-webkit") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("9.0") }} {{ property_prefix("-moz") }}<br> + {{CompatGeckoDesktop("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td> + <td>11 {{ property_prefix("-ms") }}</td> + <td>12.10</td> + <td>5.0 {{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td><code>fullscreenEnabled</code></td> + <td>20 {{ property_prefix("-webkit") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("10.0") }} {{ property_prefix("-moz") }}<br> + {{CompatGeckoDesktop("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td> + <td>11 {{ property_prefix("-ms") }}</td> + <td>12.10</td> + <td>5.1 {{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome</th> + <th>Edge</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>28 {{ property_prefix("-webkit") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("9.0") }}{{ property_prefix("-moz") }}<br> + {{CompatGeckoMobile("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>fullscreenEnabled</code></td> + <td>{{ CompatUnknown() }}</td> + <td>28 {{ property_prefix("-webkit") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("10.0") }} {{ property_prefix("moz") }}<br> + {{CompatGeckoMobile("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{ domxref("Element.requestFullscreen()") }}</li> + <li>{{ domxref("Document.exitFullscreen()") }}</li> + <li>{{ domxref("Document.fullscreen") }}</li> + <li>{{ domxref("Document.fullscreenElement") }}</li> + <li>{{ cssxref(":fullscreen") }}, {{cssxref("::backdrop")}}</li> + <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li> +</ul> diff --git a/files/de/web/api/web_animations_api/index.html b/files/de/web/api/web_animations_api/index.html new file mode 100644 index 0000000000..ad88873dfd --- /dev/null +++ b/files/de/web/api/web_animations_api/index.html @@ -0,0 +1,99 @@ +--- +title: Web Animations API +slug: Web/API/Web_Animations_API +translation_of: Web/API/Web_Animations_API +--- +<p>{{DefaultAPISidebar("Web Animations")}}{{ SeeCompatTable() }}</p> + +<div class="summary"> +<p>Die Web Animations API ermöglicht die Synchronisierung und zeitliche Abstimmung von Änderungen an der Präsentation einer Webseite, d. H. der Animation von DOM-Elementen. Dabei werden zwei Modelle kombiniert: das Timing-Modell und das Animationsmodell.</p> +</div> + +<h2 id="Konzepte_und_Verwendung">Konzepte und Verwendung</h2> + +<p>Die Web-Animations-API bietet Browsern und Entwicklern eine gemeinsame Sprache, um Animationen auf DOM-Elementen zu beschreiben. Weitere Informationen zu den Konzepten der API und ihrer Verwendung finden Sie unter <a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Verwenden der Web Animations-API</a>.</p> + +<h2 id="Webanimationsschnittstellen">Webanimationsschnittstellen</h2> + +<dl> +</dl> + +<dl> + <dt>{{domxref("Animation")}}</dt> + <dd>Bietet Steuerelemente zur Wiedergabe und eine Zeitleiste für einen Animationsknoten. Kann ein mit dem {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} Konstruktor erstelltes Object aufnehmen.</dd> + <dt>{{domxref("KeyframeEffect")}}</dt> + <dd>Beschreibt eine Menge animierbarer Eigenschaften und Werte, die als Keyframes bezeichnet werden, sowie deren Timing-Optionen.<strong> </strong>Diese können dann mit dem {{domxref("Animation.Animation", "Animation()")}} Konstruktor abgespielt werden. </dd> + <dt>{{domxref("AnimationTimeline")}}</dt> + <dd>Repräsentiert die Zeitleiste der Animation. Diese Schnittstelle ist zum Definieren von Timeline-Features (geerbt von {{domxref ("DocumentTimeline")}} und zukünftigen Timeline-Objekten) vorhanden, auf die Entwickler nicht selbst zugreifen.</dd> + <dt>{{domxref("AnimationEvent")}}</dt> + <dd>Eigentlich Teil von CSS-Animationen.</dd> + <dt>{{domxref("DocumentTimeline")}}</dt> + <dd>Stellt Animationszeitleisten dar, einschließlich der Standarddokumentzeitleiste (auf die über die Eigenschaft {{domxref ("Document.timeline")}} zugegriffen wird).</dd> + <dt>{{domxref("EffectTiming")}}</dt> + <dd>{{domxref ("Element.animate ()")}}, {{domxref ("KeyframeEffectReadOnly.KeyframeEffectReadOnly ()")}} und {{domxref ("KeyframeEffect.KeyframeEffect ()")}} akzeptieren alle ein optionales Objekt von Timing-Eigenschaften.</dd> +</dl> + +<h2 id="Erweiterungen_zu_anderen_Schnittstellen">Erweiterungen zu anderen Schnittstellen</h2> + +<p> </p> + +<p>Die Web-Animations-API fügt {{domxref ("document")}} und {{domxref ("element")}} einige neue Funktionen hinzu.</p> + +<h3 id="Etweiterungen_der_Document_Schnittstelle">Etweiterungen der <code>Document</code> Schnittstelle</h3> + +<dl> + <dt>{{domxref("document.timeline")}}</dt> + <dd>Das <code>DocumentTimeline</code> Objekt stellt die Standardzeitleiste des Dokuments dar.</dd> + <dt>{{domxref("document.getAnimations()")}}</dt> + <dd>Gibt ein Array von {{domxref ("Animation")}} - Objekten zurück, die derzeit für Elemente im <code>document</code> wirksam sind.</dd> + <dt> + <h3 id="Erweiterungen_der_Element_Schnittstelle">Erweiterungen der <code>Element</code> Schnittstelle</h3> + </dt> + <dt>{{domxref("Element.animate()")}}</dt> + <dd>Eine Shortcut-Methode zum Erstellen und Wiedergeben einer Animation für ein Element. Sie gibt die erstellte {{domxref ("Animation")}} Objektinstanz zurück.</dd> +</dl> + +<dl> +</dl> + +<h2 id="Read-Only-Schnittstellen_für_Web-Animationen">Read-Only-Schnittstellen für Web-Animationen</h2> + +<p>Die folgenden Schnittstellen sind in der Spezifikation enthalten, z. B. um Features zu definieren, die an mehreren anderen Stellen verwendet werden, oder um als Basis für mehrere Schnittstellen zu dienen, die alle als Werte derselben Eigenschaften verwendet werden können. Du würdest diese nicht direkt in der Entwicklungsarbeit verwenden, aber für Bibliotheksautoren könnte es interessant sein, die Funktionsweise der Technologie zu verstehen, sodass ihre Implementierungen effektiver sein können, oder für Browseringenieure, die eine einfachere Referenz suchen, als die Spezifikation bietet.</p> + +<dl> + <dt>{{domxref("AnimationEffectTimingReadOnly")}}</dt> + <dd>Ein dictionary Objekt mit Timing-Eigenschaften, die von der veränderlichen {{domxref ("AnimationEffectTiming")}} - Schnittstelle geerbt werden, die der {{domxref ("KeyframeEffect")}} zugeordnet ist.</dd> + <dt>{{domxref("AnimationEffectReadOnly")}}</dt> + <dd>Defines current and future "Animation Effects" like {{domxref("KeyframeEffect")}}, which can be passed to {{domxref("Animation")}} objects for playing, and {{domxref("KeyframeEffectReadOnly")}} which is used by {{domxref("KeyframeEffect")}} (inherited by <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> and <a href="/en-US/docs/Web/CSS/CSS_Transitions">Transitions</a>). All values of {{domxref("Animation.effect")}} are of types based on <code>AnimationEffectReadOnly</code>.</dd> + <dt>{{domxref("KeyframeEffectReadOnly")}}</dt> + <dd>Describes sets of animatable properties and values that can be played using the {{domxref("Animation.Animation", "Animation()")}} constructor, and which are inherited by {{domxref("KeyframeEffect")}}. </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('Web Animations')}}</td> + <td>{{Spec2('Web Animations')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Using the Web Animations API</a></li> + <li><a href="https://mozdevs.github.io/Animation-examples/">Web Animations demos</a></li> + <li><a href="https://github.com/web-animations/web-animations-js">Polyfill</a></li> + <li>Firefox's current implementation: <a href="https://birtles.github.io/areweanimatedyet/">AreWeAnimatedYet</a></li> + <li> + <p><a href="http://codepen.io/danwilson/pen/xGBKVq">Browser support test</a></p> + </li> +</ul> diff --git a/files/de/web/api/web_storage_api/index.html b/files/de/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..ae3779f420 --- /dev/null +++ b/files/de/web/api/web_storage_api/index.html @@ -0,0 +1,142 @@ +--- +title: Web Storage API +slug: Web/API/Web_Storage_API +translation_of: Web/API/Web_Storage_API +--- +<p>{{DefaultAPISidebar("Web Storage API")}}</p> + +<p>Die <strong>Web Storage API</strong> bietet Mechanismen, durch welche Browser in einer weitaus intuitiveren Form Schlüssel-Werte-Paare abspeichern können, als dies bei Cookies der Fall ist.</p> + +<h2 id="Web_Storage_Konzepte_und_Verwendung">Web Storage Konzepte und Verwendung</h2> + +<p>Die zwei Mechanismen innerhalb des Web Storage sind wie folgt:</p> + +<ul> + <li><code>sessionStorage</code> stellt für jeden vorhandenen Ausgangspunkt für die Dauer des Seitenbesuchs einen separaten Speicherbereich bereit (solange der Browser geöffnet bleibt inklusive Seitenaktualisierung und -Wiederherstellung).</li> + <li><code>localStorage</code> hat die gleiche Funktion, bleibt jedoch trotz Schließens und Neustart des Browsers persistent.</li> +</ul> + +<p>Diese Mechanismen stehen durch die Eigenschaften {{domxref("Window.sessionStorage")}} und {{domxref("Window.localStorage")}} zur Verfügung (um dies näher zu beschreiben: Zur Unterstützung der Browser implementiert das <code>Window</code> Objekt die Objekte <code>WindowLocalStorage</code> und <code>WindowSessionStorage</code>, welche von <code>localStorage</code> und <code>sessionStorage</code> bereitgestellt werden) — durch deren Aufruf wird eine Instanz des {{domxref("Storage")}} Objekts erstellt, durch welches Daten gespeichert, abgerufen und gelöscht werden können. Ein anderes Speicherelement wird für das <code>sessionStorage</code> und <code>localStorage</code> jedes Ausgangspunktes verwendet — beide arbeiten getrennt und werden auch getrennt gesteuert.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Ab Firefox 45 aufwärts wird die Datenspeicherung pro Ausgangspunkt auf 10MB begrenzt, um Speicherprobleme durch übermäßige Verwendung des Web storage zu vermeiden.</p> +</div> + +<div class="note"> +<p><strong>Hinweis</strong>: Zugang zum Web Storage von IFrames Ditter wird verweigert, wenn der Anwender <a href="https://support.mozilla.org/de/kb/disable-third-party-cookies">Cookies Dritter deaktiviert</a> hat (Firefox implementiert dieses Verhalten ab der <a href="/de/docs/Mozilla/Firefox/Releases/43">version 43</a> aufwärts.)</p> +</div> + +<div class="note"> +<p><strong>Hinweis:</strong> Web Storage ist nicht dasselbe wie <a href="/de/docs/Storage" title="Storage">mozStorage</a> (Mozillas XPCOM Schnittstelle zu SQLite) oder die <a href="/de/docs/Session_store_API" title="Session_store_API">Session store API</a> (ein <a href="/de/docs/XPCOM" title="XPCOM">XPCOM</a> Speicherprogramm, welches von Erweiterungen verwendet wird).</p> +</div> + +<h2 id="Web_Storage_Schnittstellen">Web Storage Schnittstellen</h2> + +<dl> + <dt>{{domxref("Storage")}}</dt> + <dd>Erlaubt das Speichern, Abrufen und Löschen von Daten einer spezifischen Domain und des Speichertyps (session oder local).</dd> + <dt>{{domxref("Window")}}</dt> + <dd>Die Web Storage API erweitert das {{domxref("Window")}} Objekt mit zwei neuen Attributen — {{domxref("Window.sessionStorage")}} und {{domxref("Window.localStorage")}} — welche den Zugang zu den jeweiligen session- und local-Objekten der aktuellen Domain sowie eine {{domxref("Window.onstorage")}} Ereignissteuerung (event handler), welche aktiviert wird, wenn ein Speicherbereich geändert wird (z.B. bei der Speicherung eines neuen Datensatzes).</dd> + <dt>{{domxref("StorageEvent")}}</dt> + <dd>Das <code title="event-storage">storage</code>-Ereignis wird über das <code>Window</code>-Objekt eines (html-) Dokuments aktiviert, wenn sich ein Speicherbereich ändert.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Um einige der typischen Anwendungsfälle von Web Storage darzulegen, wurde ein einfaches Beispiel erstellt, fantasievoll als <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a> benannt. Die Startseite bietet die Möglichkeit, Farbe, Schriftart und ein dekoratives Bild zu verändern. Wenn verschiedene Optionen ausgewählt werden, wird die Seite umgehend aktualisiert. Zudem werden die ausgewählten Optionen im <code>localStorage</code> gespeichert, sodass diese beim Verlassen und erneutem Aufruf der Seite bestehen bleiben. </p> + +<p>Zudem besteht eine <a href="https://mdn.github.io/dom-examples/web-storage/event.html">Ereignis-Ausgabeseite</a> — wenn diese Seite in einem weiteren Tab geladen wird, hiernach Änderungen auf der Startseite vorgenommen werden, sind die aktualisierten Speicherinformationen zu sehen, welche durch die Aktivierung des Ereignisses {{event("StorageEvent")}} zustandekommen.</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('Web Storage')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilitä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 (WebKit)</th> + </tr> + <tr> + <td>localStorage</td> + <td>4</td> + <td>3.5</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>sessionStorage</td> + <td>5</td> + <td>2</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{ CompatUnknown }}</td> + <td>8</td> + <td>11</td> + <td>iOS 3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>Alle Browser haben variiernde Kapazitäten sowohl für das localStorage und auch das sessionStorage. Hier ist ein <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailierter Ablauf aller Speicherkapazitäten verschiedener Browser</a> zu finden.</p> + +<div class="note"> +<p><strong>Hinweis: </strong>Seit iOS 5.1, speichert Safari Mobile localStorage-Daten in den cache-Ordner, welcher gelegentlichen Speicherbereinigungen durch das OS ausgesetzt ist, welche typischerweise bei knappem Speicher auftreten.</p> +</div> + +<h2 id="Privates_Surfen_Inkognito-Modus">Privates Surfen / Inkognito-Modus</h2> + +<p>Die meisten modernen Browser unterstützen die als "Inkognito", "Privates Surfen" o.ä. bezeichnete Datenschutz-Option, welche keine Daten wie Verlauf und Cookies speichert. Aus ersichtlichen Gründen ist dies grundsätzlich inkompatibel mit Web Storage. Nichtsdestotrotz experimentieren Browseranbieter mit verschiedenen Szenarien, um mit dieser Inkompatibilität umzugehen.</p> + +<p>Für die meisten Browser hat man sich für eine Strategie entschieden, wobei Speicher-APIs vorhanden und scheinbar voll funktionsfähig sind, mit dem einen großen Unterschied, dass alle gespeicherten Daten gelöscht werden, nachdem der Browser geschlossen wird. Für diese Browser bestehen desweiteren unterschiedliche Interpretationen dazu, was mit den vorhandenen abgespeicherten Daten (aus einer regulären Sitzung) geschehen soll. Sollten sie zum Abruf zur Verfügung stehen, um im Inkognito-Modus gelesen werden zu können? Dann gibt es einige Browser, insbesondere Safari, welche sich dazu entschieden haben, den Speicher zur Verfügung zu stellen, dieser jedoch leer ist und ihm ein Speicheranteil von 0 Byte zugeordnet ist. Dadurch machen sie es praktisch unmöglich, Daten auf den Speicher zu schreiben.</p> + +<p>Entwicklern sollten diese unterschiedlichen Implementierungen bewusst sein und sie sollten dies bei der Entwicklung von Webseiten, welche von den Web Storage APIs abhängen, in Betracht ziehen. Für weitere Informationen werfe man einen Blick auf <a href="https://blog.whatwg.org/tag/localstorage">diesen WHATWG Blogpost</a> , das sich insbesondere mit diesem Thema befasst.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p><a href="/de/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a><br> + <a href="https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b">HTML5 Storage API By Venkatraman</a></p> diff --git a/files/de/web/api/web_workers_api/index.html b/files/de/web/api/web_workers_api/index.html new file mode 100644 index 0000000000..46dccd115d --- /dev/null +++ b/files/de/web/api/web_workers_api/index.html @@ -0,0 +1,226 @@ +--- +title: Web Worker API +slug: Web/API/Web_Workers_API +translation_of: Web/API/Web_Workers_API +--- +<p>{{DefaultAPISidebar("Web Workers API")}}</p> + +<p class="summary"><strong>Web Workers </strong>ermöglichen Entwicklern Skripte in einem Hintergrundthread getrennt vom Haupthread auszuführen. Dies hat den Vorteil, dass rechenintensive Operationen in einem gesonderten Thread ausgeführt werden können und somit der Hauptthread, der für gewöhnlich das UI bereitstellt, arbeiten kann ohne verlangsamt oder blockiert zu werden.</p> + +<h2 id="Web_Workers_Konzepte_und_Anwendung">Web Workers Konzepte und Anwendung</h2> + +<p>Ein Worker ist ein Objekt das mit einem Konstruktor erzeugt wird (beispielsweise {{domxref("Worker.Worker", "Worker()")}}) und eine JavaScript Datei mit Namen ausführt. In dieser Datei ist der Code enthalten der im Worker-Thread ausgeführt wird. Worker arbeiten in einem eigenen globalen Kontext, der vom aktuellen Hauptkontext {{domxref("window")}} verschieden ist. Dieser Kontext ist durch das Objekt {{domxref("DedicatedWorkerGlobalScope")}} repräsentiert, falls es sich um einen dedizierten Worker handelt (also einen Worker der nur von einem Skript genutzt wird, was der Standard ist.). Shared Workers benutzen das Objekt {{domxref("SharedWorkerGlobalScope")}}.</p> + +<p>Man kann bis auf einige Ausnahmen beliebige Anweisungen ausführen. Beispielsweise kann man das DOM nicht direkt ändern und auch einige Standardmethoden und -attribute von {{domxref("window")}} können nicht genutzt werden. Viele andere Elemente von <code>window</code> können allerdings schon genutzt werden, unter anderem <a href="/en-US/docs/WebSockets">WebSockets</a> und Datenspeicher, wie <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> und die Firefox-OS-only <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a>. Unter <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a> finden Sie mehr Details.</p> + +<p>Daten werden zwischen den Workern und dem Hauptthread mithilfe eines Nachrichtensystems verschickt — beide Seiten verschicken ihre Nachrichten mit der <code>postMessage()</code> Methode und antworten mit dem <code>onmessage</code> Event Handler (die empfangene Nachricht ist im <code>data</code> Attribut {{event("Message")}} des Events enthalten). Die Daten werden kopiert und nicht geteilt.</p> + +<p>Worker können neue Worker erzeugen, solange diese vom selben Ursprung gehosted werden wie die Ursprungsseite. Außerdem können Worker <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> für Netzwerk I/O benutzen mit der Ausnahme, dass die <code>responseXML</code> und <code>channel</code> Attribute von <code>XMLHttpRequest</code> stets <code>null</code> zurückgeben.</p> + +<p>Neben dedizierten Workern gibt es noch andere Typen:</p> + +<ul> + <li>Shared (geteilte) Worker können von mehreren Skripten, die auch in unterschiedlichen Fenstern, IFrames, etc. laufen genutzt werden, solange sie alle in der selben Domain arbeiten. Sie sind etwas komplizierter als dedizierte Worker — Skripte müssen über einen aktiven Port kommunizieren. Unter {{domxref("SharedWorker")}} finden Sie mehr Details.</li> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a> arbeiten als Proxy Server zwischen Webanwendungen, dem Browser und dem Netzwerk. Sie sollen (zusammen mit anderen Technologien) das Erstellen von effektiven offline-Anwendungen ermöglichen, Netzwerkabfragen abfangen und je nach Verfügbarkeit einer Netzwerkverbindung ensprechend reagieren und den Server über Änderungen informieren. Zudem erlauben sie Push-Benachrichtigungen zu senden und im Hintergrund APIs zu synchronisieren.</li> + <li>Chrome Worker ist ein Firefox-only Workertyp für die Add-On Entwicklung mit Zugriff auf <a href="https://developer.mozilla.org/en/js-ctypes">js-ctypes</a> in Ihrem Worker. Unter {{domxref("ChromeWorker")}} finden Sie weitere Informationen.</li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Worker</a> bieten die Möglichkeit Audioverarbeitung mit Skripten in einem Worker auszuführen.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: As per the <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Web workers Spec</a>, worker error events should not bubble (see {{bug(1188141)}}. This has been implemented in Firefox 42.</p> +</div> + +<h2 id="Web_Worker_interfaces">Web Worker interfaces</h2> + +<dl> + <dt>{{domxref("AbstractWorker")}}</dt> + <dd>Abstrakte Attribute und Methoden für alle Worker (z.B. {{domxref("Worker")}} oder {{domxref("SharedWorker")}}).</dd> + <dt>{{domxref("Worker")}}</dt> + <dd>Repräsentiert einen laufenden Workerthread. Erlaubt das Senden von Nachrichten an den Code im Worker.</dd> + <dt>{{domxref("WorkerLocation")}}</dt> + <dd>Definiert die absolute Quelle des Skripts das im <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker" title="The Worker interface of the Web Workers API represents a background task that can be easily created and can send messages back to its creator. Creating a worker is as simple as calling the Worker() constructor and specifying a script to be run in the worker thread."><code>Worker</code></a> ausgeführet wird.</dd> +</dl> + +<dl> + <dt>{{domxref("SharedWorker")}}</dt> + <dd>Repräsentiert einen speziellen Worker, auf den von verschiedenen Fenstern, IFrames oder sogar Workern zugegrifffen werden kann.</dd> + <dt>{{domxref("WorkerGlobalScope")}}</dt> + <dd>Repräsentiert den generischen Scope jedes Workers (dies entspricht dem {{domxref("Window")}} objekt für normale Webinhalte). Andere Worker haben Scopes die von diesem vererbt werden und spezifische Eigenschaften hinzufügen.</dd> + <dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt> + <dd>Repräsentiert den von {{domxref("WorkerGlobalScope")}} vererbten Scope eines dedizierten Workers. Fügt besondere Eigenschaften hinzu.</dd> + <dt>{{domxref("SharedWorkerGlobalScope")}}</dt> + <dd>Repräsentiert den von {{domxref("WorkerGlobalScope")}} vererbten Scope eines Shared Workers. Fügt besondere Eigenschaften hinzu.</dd> + <dt>{{domxref("WorkerNavigator")}}</dt> + <dd>Repräsentiert die Identität und den Zustand des User Agents (dem client).</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Sie finden ein paar einfache Beispiele, die die Benutzung veranschaulichen unter diesen Links:</p> + +<ul> + <li><a href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</li> + <li><a href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>).</li> +</ul> + +<p>Unter <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using web workers</a> finden Sie mehr Informationen wie diese Demos funktionieren.</p> + +<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('HTML WHATWG', '#workers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.9.1)}}</td> + <td>10.0</td> + <td>10.6</td> + <td>4</td> + </tr> + <tr> + <td>Shared workers</td> + <td>4</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(29)}}</td> + <td>{{CompatNo}}</td> + <td>10.6</td> + <td>4</td> + </tr> + <tr> + <td>Passing data using structured cloning</td> + <td>13</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(8)}}</td> + <td>10.0</td> + <td>11.5</td> + <td>6</td> + </tr> + <tr> + <td>Passing data using transferable objects</td> + <td>17 {{property_prefix("webkit")}}<br> + 21</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(18)}}</td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>6</td> + </tr> + <tr> + <td>Global {{domxref("window.URL", "URL")}}</td> + <td>10<sup>[1]</sup><br> + 23</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(21)}}</td> + <td>11</td> + <td>15</td> + <td>6<sup>[1]</sup></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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4</td> + <td>4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1.9.1)}}</td> + <td>1.0.1</td> + <td>10.0</td> + <td>11.5</td> + <td>5.1</td> + </tr> + <tr> + <td>Shared workers</td> + <td>{{CompatNo}}</td> + <td>4</td> + <td>{{CompatNo}}</td> + <td>29</td> + <td>1.4</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Passing data using structured cloning</td> + <td>{{CompatNo}}</td> + <td>4</td> + <td>{{CompatVersionUnknown}}</td> + <td>8</td> + <td>1.0.1</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Passing data using transferable objects</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>18</td> + <td>1.0.1</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] As <code>webkitURL</code>.</p> + +<h2 id="Weiterführend">Weiterführend</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Using Web Workers</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Worker Interface</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker">SharedWorker interface</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a></li> + <li><a href="/en-US/docs/Web/API/Web_Workers_API/Advanced_concepts_and_examples">Advanced concepts and examples</a></li> + <li><a href="/en-US/docs/Web/API/ChromeWorker">ChromeWorker</a>: Um worker mit privilegierten/chrome Code zu nutzen</li> +</ul> diff --git a/files/de/web/api/webgl_api/index.html b/files/de/web/api/webgl_api/index.html new file mode 100644 index 0000000000..cd699e7ee1 --- /dev/null +++ b/files/de/web/api/webgl_api/index.html @@ -0,0 +1,258 @@ +--- +title: WebGL +slug: Web/API/WebGL_API +tags: + - WebGL + - WebGL2 +translation_of: Web/API/WebGL_API +--- +<div>{{WebGLSidebar}}</div> + +<div class="summary"> +<p>WebGL (Web Graphics Library) ist eine Javascript-API zum Rendern interaktiver 3D und 2D Grafiken mittels eines kompatiblen Web-Browsers ohne Einsatz zusätzlicher Plugins. Mit <a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> steht eine API zur Verfügung, die an <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES 2.0</a> angelehnt ist und deren Inhalte mittels eines {{HTMLElement("canvas")}} Elements dargestellt werden.</p> +</div> + +<p>WebGL steht ab <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ und <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+ zur Verfügung. Allerdings muss auch die Hardware des Zielgerätes dieses Feature unterstützen.</p> + +<p>WebGL2 steht ab <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 51+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 56+ und <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 42+ standardmäßig zur Verfügung. WebGL2 wird derzeit nicht von Internet Explorer oder Edge unterstützt.</p> + +<p>Das {{HTMLElement("canvas")}} Element kann auch von <a href="/de/docs/Web/API/Canvas_API">Canvas 2D</a> genutzt werden, um 2D Grafiken rendern zu können.</p> + +<h2 id="Reference">Reference</h2> + +<div class="index"> +<ul> + <li>{{domxref("WebGLRenderingContext")}}</li> + <li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li> + <li>{{domxref("WebGLActiveInfo")}}</li> + <li>{{domxref("WebGLBuffer")}}</li> + <li>{{domxref("WebGLContextEvent")}}</li> + <li>{{domxref("WebGLFramebuffer")}}</li> + <li>{{domxref("WebGLProgram")}}</li> + <li>{{domxref("WebGLQuery")}} {{experimental_inline}}</li> + <li>{{domxref("WebGLRenderbuffer")}}</li> + <li>{{domxref("WebGLSampler")}} {{experimental_inline}}</li> + <li>{{domxref("WebGLShader")}}</li> + <li>{{domxref("WebGLShaderPrecisionFormat")}}</li> + <li>{{domxref("WebGLSync")}} {{experimental_inline}}</li> + <li>{{domxref("WebGLTexture")}}</li> + <li>{{domxref("WebGLTransformFeedback")}} {{experimental_inline}}</li> + <li>{{domxref("WebGLUniformLocation")}}</li> + <li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li> +</ul> +</div> + +<h3 id="Extensions">Extensions</h3> + +<div class="index"> +<ul> + <li>{{domxref("ANGLE_instanced_arrays")}}</li> + <li>{{domxref("EXT_blend_minmax")}}</li> + <li>{{domxref("EXT_color_buffer_float")}}</li> + <li>{{domxref("EXT_color_buffer_half_float")}}</li> + <li>{{domxref("EXT_disjoint_timer_query")}}</li> + <li>{{domxref("EXT_frag_depth")}}</li> + <li>{{domxref("EXT_sRGB")}}</li> + <li>{{domxref("EXT_shader_texture_lod")}}</li> + <li>{{domxref("EXT_texture_filter_anisotropic")}}</li> + <li>{{domxref("OES_element_index_uint")}}</li> + <li>{{domxref("OES_standard_derivatives")}}</li> + <li>{{domxref("OES_texture_float")}}</li> + <li>{{domxref("OES_texture_float_linear")}}</li> + <li>{{domxref("OES_texture_half_float")}}</li> + <li>{{domxref("OES_texture_half_float_linear")}}</li> + <li>{{domxref("OES_vertex_array_object")}}</li> + <li>{{domxref("WEBGL_color_buffer_float")}}</li> + <li>{{domxref("WEBGL_compressed_texture_atc")}}</li> + <li>{{domxref("WEBGL_compressed_texture_etc")}}</li> + <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li> + <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li> + <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li> + <li>{{domxref("WEBGL_debug_renderer_info")}}</li> + <li>{{domxref("WEBGL_debug_shaders")}}</li> + <li>{{domxref("WEBGL_depth_texture")}}</li> + <li>{{domxref("WEBGL_draw_buffers")}}</li> + <li>{{domxref("WEBGL_lose_context")}}</li> +</ul> +</div> + +<h3 id="Events">Events</h3> + +<ul> + <li><a href="/de/docs/Web/Events/webglcontextlost">webglcontextlost</a></li> + <li><a href="/de/docs/Web/Events/webglcontextrestored">webglcontextrestored</a></li> + <li><a href="/de/docs/Web/Events/webglcontextcreationerror">webglcontextcreationerror</a></li> +</ul> + +<h3 id="Konstanten_und_Typen">Konstanten und Typen</h3> + +<ul> + <li><a href="/de/docs/Web/API/WebGL_API/Constants">WebGL Konstanten</a></li> + <li><a href="/de/docs/Web/API/WebGL_API/Types">WebGL Typen</a></li> +</ul> + +<h2 id="Themen">Themen</h2> + +<p>Die folgenden acht Artikel bauen aufeinander auf.</p> + +<dl> + <dt><a href="/de/WebGL/Einführung_in_WebGL" title="de/WebGL/Einführung in WebGL">Einführung in WebGL</a></dt> + <dd>Wie man einen WebGL-Kontext herstellt.</dd> + <dt><a href="/de/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext" title="de/WebGL/Hinzufügen von 2D Inhalten in einen WebGL-Kontext">Hinzufügen von 2D Inhalten in einen WebGL-Kontext</a></dt> + <dd>Wie eine einfache, flache Form mittels WebGL erstellt wird.</dd> + <dt><a href="/de/WebGL/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen" title="en/WebGL/Farben mittels Shader in einen WebGL-Kontext hinzufügen">Farben mittels Shader in einen WebGL-Kontext hinzufügen</a></dt> + <dd>Zeigt wie Farben mit Shadern auf die Form gebracht werden können.</dd> + <dt><a href="/de/WebGL/Objekte_mit_WebGL_animieren" title="de/WebGL/Objekte mit WebGL animieren">Objekte mit WebGL animieren</a></dt> + <dd>Erklärt wie Objekte rotiert und verschiebt werden, um eine einfache Animation zu erstellen.</dd> + <dt><a href="/de/WebGL/3D-Objekte_mit_WebGL_erstellen" title="de/WebGL/3D-Objekte_mit_WebGL_erstellen">3D-Objekte mit WebGL erstellen</a></dt> + <dd>Erläutert wie dreidimensionale Objekte erstellt und animiert werden (ein Würfel dient als Beispiel).</dd> + <dt><a href="/de/WebGL/Texturen_in_WebGL_verwenden" title="de/WebGL/Texturen in WebGL verwenden">Texturen in WebGL verwenden</a></dt> + <dd>Demonstriert wie Texturen auf die Oberfläche eines Objektes gezeichnet werden können.</dd> + <dt><a href="/de/WebGL/Beleuchtung_in_WebGL" title="de/WebGL/Beleuchtung in WebGL">Beleuchtung in WebGL</a></dt> + <dd>Wie Beleuchtungseffekte in unserem WebGL-Kontext simuliert werden.</dd> + <dt><a href="/de/WebGL/Animierte_Texturen_in_WebGL" title="de/WebGL/Animierte Texturen in WebGL">Animierte Texturen in WebGL</a></dt> + <dd>Animierte Texturen werden mittels einem Ogg-Video auf der Oberfläche eines rotierenden Würfels realisiert.</dd> +</dl> + +<h2 id="Ressourcen">Ressourcen</h2> + +<dl> + <dt><a class="link-https" href="https://www.khronos.org/registry/webgl/specs/1.0/" title="https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html">WebGL Spezifikation</a></dt> + <dd>Der Entwurf der WebGL Spezifikation.</dd> + <dt><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL Seite</a></dt> + <dd>Die Hauptseite für WebGL der Khronos Group.</dd> + <dt><a class="external" href="http://learningwebgl.com/blog/" title="http://learningwebgl.com/blog/">Learning WebGL</a></dt> + <dd>Eine Reihe von Tutorials über WebGL (Englisch).</dd> + <dt><a class="external" href="http://learningwebgl.com/cookbook/index.php/" title="http://learningwebgl.com/cookbook/index.php/">Das WebGL Kochbuch</a></dt> + <dd>Rezepte für das Schreiben von WebGL-Code (Englisch).</dd> + <dt><a class="external" href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a></dt> + <dd>Eine Open-Source Bibliothek, die das Verarbeiten von Vektoren und Matrizen erleichtert.</dd> + <dt><a class="external" href="http://planet-webgl.org/" title="http://planet-webgl.org/">Planet WebGL</a></dt> + <dd>Eine Feed-Sammlung von Leuten, die in der WebGL Community aktiv sind.</dd> +</dl> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Hinweis</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebGL')}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Grundlegende Definition. Basierend auf OpenGL ES 2.0</td> + </tr> + <tr> + <td>{{SpecName('WebGL2')}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>Erweiterung von WebGL1. Basierend auf OpenGL ES 3.0.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0')}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0')}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9</td> + <td>11</td> + <td>12<sup>[1]</sup></td> + <td>5.1<sup>[1]</sup></td> + </tr> + <tr> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Chrome for Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>4</td> + <td>25<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>12<sup>[1]</sup></td> + <td>8.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Die Implementierung dieses Features ist experimentell.</p> + +<h3 id="Kompatibilitätshinweise">Kompatibilitätshinweise</h3> + +<p>Neben dem Browser muss auch die GPU selbst dieses Feature unterstützen. So ist zum Beispiel S3 Texture Compression (S3TC) derzeit nur auf Desktop-Rechnern und Tegra-basierenden Tablets verfügbar. Die meisten Browser stellen den {{domxref("HTMLCanvasElement.getContext", "WebGL-Context")}} durch den <code>webgl</code> Contextnamen zur Verfügung - ältere Browser benötigen hingegen manchmal stattdessen den Contextnamen <code>experimental-webgl</code>.</p> + +<p>Das kommende <a href="/de/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> ist vollständig abwärtskompatibel und wird über den Contextnamen <code>experimental-webgl2</code> aufgerufen. Ab Firefox 42.0 ist der Aufruf auch über den Contextnamen <code>webgl2</code> möglich - WebGL2 ist bis einschließlich Firefox 50 ein experimentelles Feature und kann zu Testzwecken über <a href="#WebGL2_enabling">Flag-Settings</a> des <a href="https://support.mozilla.org/de/kb/konfigurationseditor-fur-firefox" title="Der Konfigurationseditor von Firefox (about:config) listet Programmeinstellungen aus den Dateien prefs.js und user.js des Firefox-Profilordners sowie die Standardeinstellungen auf. Viele dieser erweiterten Optionen sind in den normalen Einstellungen nicht verfügbar.">Konfigurationseditors</a> aktiviert werden. WebGL2 ist ab Firefox 51+, Chrome 56+ und Opera 42+ standardmäßig aktiviert - Internet Explorer und Edge bieten derzeit noch keinen Support für WebGL2.</p> + +<h3 id="Anmerkungen_zu_Gecko">Anmerkungen zu Gecko</h3> + +<h4 id="WebGL_Debugging_und_Testing">WebGL Debugging und Testing</h4> + +<p>Ab Gecko 10.0 {{geckoRelease("10.0")}} werden zwei Möglichkeiten geboten, die WebGL-Fähigkeit des Browsers zu Testzwecken zu beeinflussen:</p> + +<dl> + <dt><code>webgl.min_capability_mode</code></dt> + <dd>Ein boolescher Wert, der bei <code>true</code> einen minimalen Kompatibiätsmodus zur Verfügung stellt. Ist dieser Modus aktiviert, wird WebGL ausschließlich mit dem geringsten Features betrieben, die von der WebGL-Spezifikation definiert wurden. Damit lässt sich sicherstellen, dass dein WebGL-Code auf jedem Gerät unabhängig besonderer Fähigkeiten lauffähig ist. Der Standarardwert ist <code>false</code>.</dd> + <dt><code>webgl.disable_extensions</code></dt> + <dd>Ein boolescher Wert, der bei <code>true</code> alle WebGL Extensions deaktiviert. Der Standarardwert ist <code>false</code>.</dd> +</dl> + +<h4 id="WebGL2_Aktivierung">WebGL2 Aktivierung</h4> + +<dl> + <dt><code>webgl.enable-prototype-webgl2</code> (ab Firefox 38)</dt> + <dt><code>webgl.enable-webgl2</code> (ab Firefox 50)</dt> + <dd>Ein boolescher Wert, der bei <code>true</code> den bisher experimentellen WebGL2-Context im Browser aktiviert. Der Standarardwert ist <code>false</code> - ab Firefox 51 ist der Standardwert <code>true</code>.</dd> +</dl> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/API/Canvas_API">Canvas</a></li> + <li><a href="https://developer.mozilla.org/de/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Kompatibilitäts-Hinweise zu WebGL Extensions</a></li> +</ul> diff --git a/files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html b/files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html new file mode 100644 index 0000000000..d3a21591fd --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html @@ -0,0 +1,126 @@ +--- +title: 3D-Objekte mit WebGL erstellen +slug: Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +--- +<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren", "Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden")}}</p> + +<p>Bringen wir unser Quadrat in die dritte Dimension, indem wir fünf oder mehr Flächen hinzufügen und daraus einen Würfel machen. Um das effizient zu machen, wechseln wir vom Zeichnen direkt über die Vertices zur <code>gl.drawArray()</code> Methode, um den Vertex-Array als eine Tabelle zu verwenden und die einzelnen Vertices in dieser Tabelle als Referenz für Positionen jeder Fläche zu definieren, indem wir <code>gl.drawElements()</code> aufrufen.</p> + +<p>Bedenken Sie: Jede Fläche benötigt vier Vertices, die diese definieren, aber jeder Vertex wird von drei Flächen verwendet. Wir können eine Menge Daten sparen, indem wir eine Liste aller 24 Vertices erstellen und uns dann auf jeden Vertex durch dessen Index in der Liste beziehen, anstatt den gesamten Koordinatensatz zu verwenden.</p> + +<h2 id="Die_Vertex-Positionen_des_Würfels_definieren">Die Vertex-Positionen des Würfels definieren</h2> + +<p>Zunächst wollen wir den Positionsspeicher der Vertices erstellen, indem wir den Code in <code>initBuffers()</code> ändern. Das geschieht genau so wie für das Quadrat, allerdings haben wir hier ein paar Datensätze mehr, da wir 24 Vertices (4 pro Seite) haben müssen:</p> + +<pre class="brush: js"> var vertices = [ + // vordere Fläche + -1.0, -1.0, 1.0, + 1.0, -1.0, 1.0, + 1.0, 1.0, 1.0, + -1.0, 1.0, 1.0, + + // hintere Fläche + -1.0, -1.0, -1.0, + -1.0, 1.0, -1.0, + 1.0, 1.0, -1.0, + 1.0, -1.0, -1.0, + + // obere Fläche + -1.0, 1.0, -1.0, + -1.0, 1.0, 1.0, + 1.0, 1.0, 1.0, + 1.0, 1.0, -1.0, + + // untere Fläche + -1.0, -1.0, -1.0, + 1.0, -1.0, -1.0, + 1.0, -1.0, 1.0, + -1.0, -1.0, 1.0, + + // rechte Fläche + 1.0, -1.0, -1.0, + 1.0, 1.0, -1.0, + 1.0, 1.0, 1.0, + 1.0, -1.0, 1.0, + + // linke Fläche + -1.0, -1.0, -1.0, + -1.0, -1.0, 1.0, + -1.0, 1.0, 1.0, + -1.0, 1.0, -1.0 + ]; +</pre> + +<h2 id="Die_Farben_der_Vertices_definieren">Die Farben der Vertices definieren</h2> + +<p>Außerdem müssen wir einen Array für die Farben der 24 Vertices erstellen. Dieser Code definiert zunächst die Farben für jede Fläche und verwendet dann eine Schleife, um jeden der Vertices mit einer Farbe zu bestücken.</p> + +<pre class="brush: js"> var colors = [ + [1.0, 1.0, 1.0, 1.0], // vordere Fläche: weiß + [1.0, 0.0, 0.0, 1.0], // hintere Fläche: rot + [0.0, 1.0, 0.0, 1.0], // obere Fläche: grün + [0.0, 0.0, 1.0, 1.0], // untere Fläche: blau + [1.0, 1.0, 0.0, 1.0], // rechte Fläche: gelb + [1.0, 0.0, 1.0, 1.0] // linke Fläche: violett + ]; + + var generatedColors = []; + + for (j=0; j<6; j++) { + var c = colors[j]; + + for (var i=0; i<4; i++) { + generatedColors = generatedColors.concat(c); + } + } + + cubeVerticesColorBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer); + gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(generatedColors), gl.STATIC_DRAW); +</pre> + +<h2 id="Das_Element-Array_definieren">Das Element-Array definieren</h2> + +<p>Sobald die Vertex-Arrays generiert worden sind, müssen wir das Element-Array erstellen.</p> + +<pre class="brush: js"> cubeVerticesIndexBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer); + + // Dieser Array definiert jede Fläche als zwei Dreiecke über die Indizes + // im Vertex-Array, um die Position jedes Dreiecks festzulegen. + + var cubeVertexIndices = [ + 0, 1, 2, 0, 2, 3, // vorne + 4, 5, 6, 4, 6, 7, // hinten + 8, 9, 10, 8, 10, 11, // oben + 12, 13, 14, 12, 14, 15, // unten + 16, 17, 18, 16, 18, 19, // rechts + 20, 21, 22, 20, 22, 23 // links + ] + + // Sende nun das Element-Array zum GL + + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, + new WebGLUnsignedShortArray(cubeVertexIndices), gl.STATIC_DRAW); +</pre> + +<p>Das <code>cubeVertexIndices</code> Array definiert jede Fläche als ein paar von Dreiecken, alle Vertices des Dreiecks werden als ein Index im Vertex-Array des Würfels festgelegt. Daher ist der Würfel aus einer Sammlung von 12 Dreiecken beschrieben.</p> + +<h2 id="Den_Würfel_zeichnen">Den Würfel zeichnen</h2> + +<p>Als nächstes müssen wir etwas Code zur <code>drawScene()</code> Funktion hinzufügen, um über den Indexspeicher des Würfels zu zeichnen. Wir fügen neue <code>bindBuffer()</code> und <code>drawElements()</code> Aufrufe hinzu:</p> + +<pre class="brush: js"> gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer); + setMatrixUniforms(); + gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0); +</pre> + +<p>Da jede Seite unseres Würfels aus zwei Dreiecken besteht, gibt es 6 Vertices pro Seite, oder 36 Vertices im Würfel, obwohl einige davon doppelt sind. Da unser Index-Array jedoch aus einfachen Integern besteht, stellt dies keinen unkoordinierbaren Betrag an Daten dar, welcher für jeden Frame der Animation durchgegangen werden muss.</p> + +<p>Jetzt haben wir einen animierten Würfel, welcher herum springt, rotiert und über sechs unterschiedliche Seiten verfügt. Wenn Ihr Browser WebGL unterstützt, <a href="/samples/webgl/sample5/index.html" title="https://developer.mozilla.org/samples/webgl/sample5/index.html">schauen Sie sich hier die Demo in Aktion an</a>.</p> + +<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren", "Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden")}}</p> diff --git a/files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html new file mode 100644 index 0000000000..bfeb362b8e --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html @@ -0,0 +1,89 @@ +--- +title: Animierte Texturen in WebGL +slug: Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL +--- +<p>{{WebGLSidebar("Tutorial") }} {{Previous("Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}</p> + +<p>In dieser Demo bauen wir auf das vorherige Beispiel auf, indem wir die statischen Texturen mit den Frames eines OGG-Video ersetzen. Das ist nicht sehr schwer zu schreiben, sieht aber umso besser aus. Fangen wir an.</p> + +<h2 id="Zugang_zum_Video">Zugang zum Video</h2> + +<p>Zunächst müssen wir etwas HTML hinzufügen, um das <a href="/de/HTML/Element/video"><code>video</code></a> Element zu erstellen, welches wir verwenden, um die Video-Frames zu erhalten:</p> + +<pre class="brush: js"><video id="video" src="Firefox.ogv" autobuffer='true'"> + Ihr Browser scheint das HTML5 <code>&lt;video&gt;</code> Element nicht zu unterstützen. +</video> +</pre> + +<p>Das erstellt einfach ein Element, um die Video-Datei "Firefox.ogv" abzuspielen. Wir benutzen CSS, um zu verhindern, dass das Video angezeigt wird:</p> + +<pre class="brush: css">video { + display: none; +} +</pre> + +<p>Dann schenken wir dem JavaScript Code wieder unsere Aufmerksamkeit und fügen eine neue Zeile zur <code>start()</code> Funktion hinzu, um einen Bezug zum Video-Element herzustellen:</p> + +<pre class="brush: js">videoElement = document.getElementById("video"); +</pre> + +<p>Und wir ersetzen den Code, der die Intervall-gesteuerten Aufrufe von <code>drawScene()</code> setzt, mit diesem Code:</p> + +<pre class="brush: js">videoElement.addEventListener("canplaythrough", startVideo, true); +videoElement.addEventListener("ended", videoDone, true); +</pre> + +<p>Die Idee ist hier, dass wir die Animation nicht starten wollen, bevor das Video nicht ausreichend zwischengespeichert wurde, sodass es dann ohne Unterbrechung abgespielt werden kann. Wir fügen also einen Event-Listener hinzu, um auf das <code>video</code> Element zu warten bis es uns mitteilt, dass genug zwischengespeichert wurde und das komplette Video ohne Pause abgespielt werden kann. Wir fügen außerdem einen zweiten Event-Listener hinzu, sodass wir die Animation stoppen können, wenn das Video beendet ist und wir so nicht unnötig den Prozessor belasten.</p> + +<p>Die <code>startVideo()</code> Funktion sieht so aus:</p> + +<pre class="brush: js">function startVideo() { + videoElement.play(); + videoElement.addEventListener("timeupdate", updateTexture, true); + setInterval(drawScene, 15); +} +</pre> + +<p>Hier wird einfach das Video gestartet und ein Event-Handler bereitgestellt, der aufgerufen wird, wenn ein neuer Frame des Videos verfügbar ist. Dann werden die Intervall-gesteuerten Aufrufe der <code>drawScene()</code> Funktion eingerichtet, um den Würfel zu rendern.</p> + +<p>Die <code>videoDone()</code> Funktion ruft einfach {{ domxref("window.clearInterval") }} auf, um die Intervallaufrufe zu beenden, die die Animation aktualisieren.</p> + +<h2 id="Die_Video-Frames_als_Textur_verwenden">Die Video-Frames als Textur verwenden</h2> + +<p>Die nächste Änderung erhält die <code>initTexture()</code> Funktion, welche viel einfacher wird, weil kein Bild mehr geladen werden muss. Stattdessen muss nun das Textur-Mapping aktiviert werden und ein leeres Textur-Objekt zum späteren Gebrauch erstellt werden:</p> + +<pre class="brush: js">function initTextures() { + gl.enable(gl.TEXTURE_2D); + cubeTexture = gl.createTexture(); +} +</pre> + +<p>So sieht die <code>updateTexture()</code> Funktion aus. Hier wird wirklich Arbeit verrichtet:</p> + +<pre class="brush: js">function updateTexture() { + gl.bindTexture(gl.TEXTURE_2D, cubeTexture); + gl.texImage2D(gl.TEXTURE_2D, 0, videoElement, true); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); + gl.generateMipmap(gl.TEXTURE_2D); + gl.bindTexture(gl.TEXTURE_2D, null); +} +</pre> + +<p>Sie kennen diesen Code bereits. Es ist fast identisch zur <code>handleTextureLoaded()</code> Routine im vorherigen Beispiel, mit der Ausnahme, dass wir <code>texImage2D()</code> nicht mit einem <code>Image</code> Objekt sondern mit dem <code>video</code> Element aufrufen.</p> + +<p><code>updateTexture()</code> wird jedes Mal aufgerufen, wenn sich das <code>timeupdate</code> Event vom <code>video</code> Element meldet. Dieses Event wird gesendet, wenn sich die Zeit des aktuellen Frames ändert, sodass wir wissen, dass wir unsere Textur nur dann aktualisieren müssen, wenn neue Daten verfügbar sind.</p> + +<p>Das war alles! Wenn Sie eine Browser mit Unterstützung von WebGL verwenden, können Sie sich <a href="/samples/webgl/sample8/index.html" title="https://developer.mozilla.org/samples/webgl/sample8/index.html">das Beispiel in Aktion ansehen</a>.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/Audio_und_Video_in_Firefox">Audio und Video in Firefox</a></li> +</ul> + +<p>{{Previous("Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}</p> diff --git a/files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html new file mode 100644 index 0000000000..bd65b5bb40 --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html @@ -0,0 +1,172 @@ +--- +title: Beleuchtung in WebGL +slug: Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL +--- +<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden", "Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL")}}</p> + +<p>Als Erstes sollten wir verstehen, dass WebGL nicht wie OpenGL über eine eigene Unterstützung für die Beleuchtung verfügt. Das müssen wir selbst machen. Glücklicherweise ist es nicht sehr schwer und dieser Artikel versucht Ihnen die Grundlagen dazu näher zu bringen.</p> + +<h2 id="Beleuchtung_und_Schattierung_simulieren">Beleuchtung und Schattierung simulieren</h2> + +<p>Obwohl wir nicht weiter ins Detail über die Theorie hinter simulierter Beleuchtung in 3D Grafiken gehen wollen, was außerdem weit über diesen Artikel hinaus gehen würde, ist es gut zu wissen wie es ungefähr funktioniert. Anstatt hier nun in aller Tiefe zu diskutieren, sollten Sie einen Blick auf den <a class="external" href="http://de.wikipedia.org/wiki/Phong_Shading">»Phong Shading« Artikel</a> auf Wikipedia werfen, welcher einen guten Überblick über das meist genutzte Beleuchtungsmodell liefert.</p> + +<p>Es gibt drei grundlegende Typen zur Beleuchtung:</p> + +<p><strong>Umgebungslicht</strong> ist das Licht, das die Szene umgibt. Es weist in keine Richtung und bestrahlt jede Oberfläche in gleicher Weise, egal in welche Richtung es zeigt.</p> + +<p><strong>Gerichtetes Licht</strong> ist das Licht, das von einer festgelegten Richtung ausgestrahlt wird. Dieses Licht ist so weit weg, sodass sich jeder Photon parallel zu jedem anderen Photon bewegt. Sonnenlicht ist zum Beispiel gerichtetes (direktionales) Licht.</p> + +<p><strong>Punktbeleuchtung</strong> ist das Licht, das von einem Punkt ausgestrahlt wird und von dort radial in alle Richtungen verläuft. So funktionieren zum Beispiel die Glühbirnen im Alltag.</p> + +<p>Für unsere Zwecke vereinfachen wir das Beleuchtungsmodell, indem wir nur gerichtetes Licht und Umgebungslicht betrachten. Wir haben hier keine Highlights, die wir mit Punktbeleuchtung oder Glanzlicht in dieser Szene hervorheben wollen. Stattdessen werden wir Umgebungslicht mit einem einzelnen, gerichteten Licht verwenden, welches auf den rotierenden Würfel aus der <a href="/de/WebGL/Texturen_in_WebGL_verwenden">vorherigen Demo</a> zeigt.</p> + +<p>Wenn Sie die Konzepte der Punktbeleuchtung und des Glanzlichtes hinter sich gelassen haben, gibt es dennoch zwei kleine Informationen, die Sie benötigen werden, wenn wir unser gerichtetes Licht implementieren:</p> + +<ol> + <li>Wir müssen die <strong>Oberflächennormale</strong> mit jedem Vertex verbinden. Das ist ein Vektor, der senkrecht zur Oberfläche des Vertex ist.</li> + <li>Wir müssen die Richtung in welche das Licht strahlt wissen. Diese wird durch den <strong>Richtungsvektor</strong> angegeben.</li> +</ol> + +<p>Dann aktualisieren wir den Vertex-Shader, um die Farbe jedes Vertices, unter Berücksichtigung des Umgebungslichts und dem Effekt des gerichteten Lichts (sowie dessen Winkel mit dem es auf die Oberfläche trifft), einzustellen. Wir werden sehen, wie genau wir das machen, wenn wir einen Blick auf den Code für den Shader werfen.</p> + +<h2 id="Die_Normalen_für_die_Vertices_erstellen">Die Normalen für die Vertices erstellen</h2> + +<p>Als Erstes müssen wir einen Array für die Normalen für alle Vertices erstellen, die unseren Würfel umfassen. Da ein Würfel ein sehr einfaches Objekt ist, ist dies auch sehr einfach zu erstellen. Für komplexere Objekte wird das Berechnen der Normalen schon umfassender.</p> + +<pre class="brush: js"> cubeVerticesNormalBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer); + + var vertexNormals = [ + // vorne + 0.0, 0.0, 1.0, + 0.0, 0.0, 1.0, + 0.0, 0.0, 1.0, + 0.0, 0.0, 1.0, + + // hinten + 0.0, 0.0, -1.0, + 0.0, 0.0, -1.0, + 0.0, 0.0, -1.0, + 0.0, 0.0, -1.0, + + // oben + 0.0, 1.0, 0.0, + 0.0, 1.0, 0.0, + 0.0, 1.0, 0.0, + 0.0, 1.0, 0.0, + + // unten + 0.0, -1.0, 0.0, + 0.0, -1.0, 0.0, + 0.0, -1.0, 0.0, + 0.0, -1.0, 0.0, + + // rechts + 1.0, 0.0, 0.0, + 1.0, 0.0, 0.0, + 1.0, 0.0, 0.0, + 1.0, 0.0, 0.0, + + // links + -1.0, 0.0, 0.0, + -1.0, 0.0, 0.0, + -1.0, 0.0, 0.0, + -1.0, 0.0, 0.0 + ]; + + gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertexNormals), gl.STATIC_DRAW); +</pre> + +<p>Das sollte Ihnen schon bekannt vorkommen: Wir erstellen einen neuen Buffer, verknüpfen den Array damit und senden dann unseren Vertex-Normalen-Array in den Buffer, indem wir <code>bufferData()</code> aufrufen.</p> + +<p>Dann fügen wir Code zu <code>drawScene()</code> hinzu, um das Normalen-Array mit einem Shader-Attribut zu verknüpfen, sodass der Shader-Code darauf zugreifen kann:</p> + +<pre class="brush: js"> gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer); + gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0); +</pre> + +<p>Schließlich müssen wir den Code aktualisieren, welcher die Einheitsmatrizen erstellt, um eine <strong>Normalenmatrix</strong> zu generieren und zum Shader auszuliefern. Diese wird verwendet, um die Normalen umzuwandeln, wenn die aktuelle Orientierung des Würfels in Beziehung zur Lichtquelle behandelt wird:</p> + +<pre class="brush: js"> var normalMatrix = mvMatrix.inverse(); + normalMatrix = normalMatrix.transpose(); + var nUniform = gl.getUniformLocation(shaderProgram, "uNormalMatrix"); + gl.uniformMatrix4fv(nUniform, false, new WebGLFloatArray(normalMatrix.flatten())); +</pre> + +<h2 id="Die_Shader_aktualisieren">Die Shader aktualisieren</h2> + +<p>Jetzt sind alle Daten, die von den Shadern gebraucht werden, verfügbar. Wir müssen nun den Code in den Shadern selbst aktualisieren.</p> + +<h3 id="Der_Vertex-Shader">Der Vertex-Shader</h3> + +<p>Zunächst aktualisieren wir den Vertex-Shader, sodass dieser einen Schattenwert für jeden Vertex auf Basis des Umgebungslichts sowie des direktionalen Lichts berechnet. Werfen wir einen Blick auf den Code:</p> + +<pre class="brush: html"> <script id="shader-vs" type="x-shader/x-vertex"> + attribute vec3 aVertexNormal; + attribute vec3 aVertexPosition; + attribute vec2 aTextureCoord; + + uniform mat4 uNormalMatrix; + uniform mat4 uMVMatrix; + uniform mat4 uPMatrix; + + varying vec2 vTextureCoord; + varying vec3 vLighting; + + void main(void) { + gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); + vTextureCoord = aTextureCoord; + + // Beleuchtungseffekt anwenden + + vec3 ambientLight = vec3(0.6, 0.6, 0.6); + vec3 directionalLightColor = vec3(0.5, 0.5, 0.75); + vec3 directionalVector = vec3(0.85, 0.8, 0.75); + + vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0); + + float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0); + vLighting = ambientLight + (directionalLightColor * directional); + } + </script> +</pre> + +<p>Sobald die Position des Vertex berechnet wurde und wir die Koordinaten des Texels (welcher passend zum Vertex ist) erhalten haben, können wir den Schatten für den Vertex berechnen.</p> + +<p>Als Erstes wandeln wir die Normale auf Basis der aktuellen Position und Orientierung des Würfels um, indem wir die Normale des Vertexes mit der Normalenmatrix multiplizieren. Dann können wir den Betrag an direktionalem Licht, welcher auf den Vertex angewendet werden soll, berechnen, indem wir das Skalarprodukt der umgewandelten Normalen und des direktionalen Vektors (Richtung aus der das Licht kommt) bilden. Wenn dieser Wert kleiner als Null ist, setzen wir den Wert auf Null fest, da man nicht weniger als Null Licht haben kann.</p> + +<p>Wenn der Betrag des direktionalen Lichts berechnet wurde, können wir den Beleuchtungswert generieren, indem wir das Umgebungslicht nehmen und das Produkt der Farbe des direktionalen Lichts und den Betrag an direktionalem Licht bereitstellen. Als Ergebnis haben wir nun einen RGB-Wert, welcher vom Fragment-Shader verwendet wird, um die Farbe jedes Pixels den wir rendern einzustellen.</p> + +<h3 id="Der_Fragment-Shader">Der Fragment-Shader</h3> + +<p>Der Fragment-Shader muss nun aktualisiert werden, um den berechneten Beleuchtungswert vom Vertex-Shader zu berücksichtigen:</p> + +<pre class="brush: js"> <script id="shader-fs" type="x-shader/x-fragment"> + varying vec2 vTextureCoord; + varying vec3 vLighting; + + uniform sampler2D uSampler; + + void main(void) { + vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); + + gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a); + } + </script> +</pre> + +<p>Hier erhalten wir nun die Farbe des Texels, genau so wie wir es im vorherigen Beispiel getan haben. Bevor wir die Farbe der Fragmente aber festlegen, multiplizieren wir die Texel-Farbe mit dem Beleuchtungswert, um die Texel-Farbe so einzustellen, dass diese den Effekt der Lichtquelle berücksichtigt.</p> + +<p>Und das war's! Wenn Sie einen Browser verwenden, der WebGL unterstützt, können Sie <a href="/samples/webgl/sample7/index.html" title="https://developer.mozilla.org/samples/webgl/sample7/index.html">einen Blick auf die Live-Demo werfen</a>.</p> + +<h2 id="Übungen_für_den_Leser">Übungen für den Leser</h2> + +<p>Dies ist natürlich ein sehr einfaches Beispiel, welches eine Beleuchtung pro Vertex implementiert. Für fortgeschrittene Grafiken, möchten Sie sicher eine Beleuchtung pro Pixel implementieren, aber dies wird Sie in die Richtung leiten.</p> + +<p>Sie können nun also versuchen mit der Richtung der Lichtquelle zu experimentieren, die Farbe der Leuchtquelle zu ändern und so weiter.</p> + +<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden", "Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL")}}</p> diff --git a/files/de/web/api/webgl_api/tutorial/einführung_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/einführung_in_webgl/index.html new file mode 100644 index 0000000000..5906f95761 --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/einführung_in_webgl/index.html @@ -0,0 +1,73 @@ +--- +title: Einführung in WebGL +slug: Web/API/WebGL_API/Tutorial/Einführung_in_WebGL +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +--- +<p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext")}}</p> + +<p>Mit <a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> steht eine API zur Verfügung, die auf <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES 2.0</a> basiert, um 3D Rendering im HTML <a href="/de/HTML/Element/canvas" title="de/HTML/canvas"><code>canvas</code></a> Element zu ermöglichen. WebGL Programme bestehen aus Steuercode in JavaScript und Shadercode (GLSL), der auf dem Grafikprozessor (GPU) des Computers ausgeführt wird. WebGL Elemente können mit anderen HTML Elementen kombiniert werden.</p> + +<p>Dieser Artikel ist eine Einführung in die Grundlagen von WebGL. Es wird vorausgesetzt, dass einige mathematischen Kenntnisse im 3D-Bereich (Matrizen) vorhanden sind. Dieser Artikel wird daher keine 3D-Grafik-Konzepte vermitteln. Es gibt einen anfängergeeigneten Leitfaden mit Programmieraufgaben in unserem Lernbereich: <a href="https://developer.mozilla.org/en-US/docs/Learn/WebGL">Learn WebGL for 2D and 3D graphics</a>.</p> + +<p>DIe hier verwendeten Codebeispiele finden sich auch im <a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial">webgl-examples GitHub repository</a>.</p> + +<h2 id="3D_Rendering_vorbereiten">3D Rendering vorbereiten</h2> + +<p>Um WebGL benutzen zu können, wird als erstes ein <code>canvas</code> Element benötigt. Der folgende HTML-Code definiert eine <code>canvas</code> Zeichenfläche.</p> + +<pre class="brush: html"><body> + <canvas id="glCanvas" width="640" height="480"></canvas> +</body> +</pre> + +<h3 id="Vorbereitung_des_WebGL-Kontexts">Vorbereitung des WebGL-Kontexts</h3> + +<p>Die <code>main()</code> Funktion im JavaScript Code wird aufgerufen, nachdem das Dokument geladen wurde. Die Aufgabe der Funktion ist, den WebGL-Kontext festzulegen und mit dem Rendering zu beginnen.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="function token">main</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">main</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">const</span> canvas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#glCanvas"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="comment token">// Initialisierung des GL Kontexts</span> + <span class="keyword token">const</span> gl <span class="operator token">=</span> canvas<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">"webgl"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="comment token">// Nur fortfahren, wenn WebGL verfügbar ist und funktioniert</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>gl<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"Unable to initialize WebGL. Your browser or machine may not support it."</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">return</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="comment token">// Setze clear color auf schwarz, vollständig sichtbar</span> + gl<span class="punctuation token">.</span><span class="function token">clearColor</span><span class="punctuation token">(</span><span class="number token">0.0</span><span class="punctuation token">,</span> <span class="number token">0.0</span><span class="punctuation token">,</span> <span class="number token">0.0</span><span class="punctuation token">,</span> <span class="number token">1.0</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="comment token">// Lösche den color buffer mit definierter clear color</span> + gl<span class="punctuation token">.</span><span class="function token">clear</span><span class="punctuation token">(</span>gl<span class="punctuation token">.</span>COLOR_BUFFER_BIT<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>Als erstes verschaffen wir uns eine Referenz zum <code>canvas</code> Element und speichern sie in der <code>canvas</code> Variable.</p> + +<p>Sobald wir den Bezug zum canvas haben, versuchen wir einen zugehörigen <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext">WebGLRenderingContext</a> zu erhalten, indem wir <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext">getContext</a> aufrufen und dabei den String <code>"webgl"</code> mitgeben. Falls der Browser WebGL nicht unterstützt, wird <code>getContext null</code> zurückgeben, woraufhin wir den Nutzer benachrichtigen und das Script verlassen.</p> + +<p>Wenn der Kontext erfolgreich initialisiert wurde, ist <code>gl</code> eine Variable für den Kontext. In diesem Fall setzen wir die clear color auf schwarz, und löschen den zugehörigen Kontext (der canvas wird mit der Hintergrundfarbe neu gezeichnet)</p> + +<p>An dieser Stelle ist genug Code vorhanden, um den WebGL-Kontext erfolgreich zu initialisieren. Ein großer, leerer, schwarzer Kasten sollte zu sehen sein, der darauf wartet mit weiteren Inhalten gefüttert zu werden.</p> + +<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }}</p> + +<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1">Vollständigen Code ansehen</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample1/">Demo in neuer Seite öffnen</a></p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p> </p> + +<ul> + <li><a href="https://dev.opera.com/articles/introduction-to-webgl-part-1/">An introduction to WebGL</a>: Verfasst von Luz Caballero, veröffentlicht auf dev.opera.com. Der Artikel behandelt, was WebGL ist, erklärt wie es funktioniert (einschließlich Render Warteschlange) und stellt einige WebGL Bibliotheken vor. </li> + <li><a href="http://webglfundamentals.org/">WebGL Fundamentals</a>: WebGL Grundlagen </li> + <li><a href="http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html">An intro to modern OpenGL:</a> Eine Reihe netter Artikel über OpenGL, verfasst von Joe Groff, die eine verständliche Einführung in OpenGL bieten, von der Geschichte bis zum wichtigen Aspekt der Grafik Pipeline. Außerdem enthält es Beispiele, die demonstrieren, wie OpenGL funktioniert. Wer lernen will, was OpenGL eigentlich ist, findet hier einen guten Ausgangspunkt.</li> +</ul> + +<p> </p> + +<p>{{Next("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext")}}</p> diff --git a/files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzufügen/index.html b/files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzufügen/index.html new file mode 100644 index 0000000000..94068822d5 --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzufügen/index.html @@ -0,0 +1,97 @@ +--- +title: Farben mittels Shader in einen WebGL-Kontext hinzufügen +slug: >- + Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL +--- +<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext", "Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren")}}</p> + +<p>Wir haben ein simples Quadrat <a href="/de/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext" title="de/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext">im vorherigen Teil</a> erstellt, im nächsten Schritt wollen wir ein bisschen Farbe ins Spiel bringen. Dafür sind Änderungen an den Shadern erforderlich.</p> + +<h2 id="Farben_zu_den_Eckpunkten_hinzufügen">Farben zu den Eckpunkten hinzufügen</h2> + +<p>In der Computergrafik werden Objekte mit einer Reihe von Punkten erstellt. Jeder Punkt hat eine Position und eine Farbe. Standardmäßig werden alle anderen Pixelfarben (und alle weiteren Attribute, darunter die Position) über eine lineare Interpolation berechnet, die automatisch glatte Verläufe erstellt. Vorher hat unser Vertex-Shader keine festgelegten Farben auf die Punkte (Vertices) angewendet und der Fragment-Shader legte die feste Farbe weiß für jeden Pixel fest, sodass das gesamte Quadrat komplett weiß gezeichnet wurde.</p> + +<p>Nun wollen wir in jeder Ecke des Quadrats einen Verlauf in einer unterschiedlichen Farbe rendern: rot, blau, grün und weiß. Als erstes sollten wir daher diese Farben in den vier Eckpunkten einrichten. Um das zu machen, müssen wir zunächst einen Array der Vertex-Farben erstellen und diesen dann in einen WebGL Buffer speichern. Das erreichen wir durch die folgenden Zeilen in unserer <code>initBuffers()</code> Funktion:</p> + +<pre class="brush: js">var colors = [ + 1.0, 1.0, 1.0, 1.0, // weiß + 1.0, 0.0, 0.0, 1.0, // rot + 0.0, 1.0, 0.0, 1.0, // grün + 0.0, 0.0, 1.0, 1.0 // blau +]; + +squareVerticesColorBuffer = gl.createBuffer(); +gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer); +gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); +} +</pre> + +<p>Dieser Code definiert zuerst einen JavaScript Array, welcher die vier Farb-Vektoren mit jeweils vier Werten für die jeweilige Farbe enthält. Dann wird ein neuer WebGL Buffer angewiesen diese Farben zu speichern und der Array wird in WebGL Floats konvertiert und im Buffer gespeichert.</p> + +<p>Um die Farben schließlich zu verwenden, muss der der Vertex-Shader aktualisiert werden, um die entsprechende Farbe vom Farb-Buffer zu erhalten:</p> + +<pre class="brush: html"><script id="shader-vs" type="x-shader/x-vertex"> + attribute vec3 aVertexPosition; + attribute vec4 aVertexColor; + + uniform mat4 uMVMatrix; + uniform mat4 uPMatrix; + + varying vec4 vColor; + + void main(void) { + gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); + vColor = aVertexColor; + } +</script> +</pre> + +<p>Der wichtigste Unterschied ist hier, dass wir für jeden Punkt (Vertex) die Farbe entsprechend des Farb-Arrays setzen.</p> + +<h2 id="Die_Fragmente_mit_Farben_versehen">Die Fragmente mit Farben versehen</h2> + +<p>Als Erinnerung, so sah unser Fragment-Shader vorher aus:</p> + +<pre class="brush: html"><script id="shader-fs" type="x-shader/x-fragment"> + void main(void) { + gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); + } +</script> +</pre> + +<p>Um nun die interpolierte Farbe für jeden Pixel aufzugreifen, müssen wir dies einfach so ändern, dass wir den Wert der <code>vColor</code> Variable erhalten:</p> + +<pre><script id="shader-fs" type="x-shader/x-fragment"> + varying vec4 vColor; + + void main(void) { + gl_FragColor = vColor; + } +</script> +</pre> + +<p>Das ist eine sehr einfache Änderung. Anstatt des festen Wertes vorher, erhält jedes Fragment jetzt einfach die interpolierte Farbe, basierend auf der Position relativ zu den Kontenpunkten (Vertices).</p> + +<h2 id="Mit_den_Farben_zeichnen">Mit den Farben zeichnen</h2> + +<p>Als nächstes ist es nötig, Code zur <code>initShaders()</code> Routine hinzuzufügen, um das Farbattribut für das Shader-Programm zu initialisieren:</p> + +<pre class="brush: js"> vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor"); + gl.enableVertexAttribArray(vertexColorAttribute); +</pre> + +<p>Dann wird <code>drawScene()</code> abgeändert, um schließlich die Farben zu verwenden, wenn das Quadrat gezeichnet wird:</p> + +<pre class="brush: js"> gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer); + gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0); +</pre> + +<p>Jetzt sollten Sie <a href="/samples/webgl/sample3/index.html" title="https://developer.mozilla.org/samples/webgl/sample3/index.html">das Beispiel in einem WebGL kompatiblen Browser</a> sehen und Ihre Ausgabe sollte so wie im Bild unten gezeichnet werden (das Quadrat ist innerhalb eines schwarzen Felds zu sehen):</p> + +<p><img alt="screenshot.png" class="default internal" src="/@api/deki/files/4081/=screenshot.png"></p> + +<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext", "Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren")}}</p> diff --git a/files/de/web/api/webgl_api/tutorial/hinzufügen_von_2d_inhalten_in_einen_webgl-kontext/index.html b/files/de/web/api/webgl_api/tutorial/hinzufügen_von_2d_inhalten_in_einen_webgl-kontext/index.html new file mode 100644 index 0000000000..56c267f394 --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/hinzufügen_von_2d_inhalten_in_einen_webgl-kontext/index.html @@ -0,0 +1,238 @@ +--- +title: Hinzufügen von 2D Inhalten in einen WebGL-Kontext +slug: Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext +tags: + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context +--- +<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Einführung_in_WebGL", "Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen")}}</p> + +<p>Sobald der <a href="/de/WebGL/Einführung_in_WebGL" title="de/WebGL/Einführung in WebGL">WebGL-Kontext</a> erfolgreich erstellt wurde, können wir anfangen darin zu rendern. Am einfachsten beginnen wir mit einem einfachen, zweidimensionalen, untextuierten Objekt. Fangen wir also damit an, ein Stück Code zu schreiben, um ein Quadrat zu zeichnen.</p> + +<h3 id="Hinweis_zur_deutschen_Übersetzung_dieses_Abschnitts">Hinweis zur deutschen Übersetzung dieses Abschnitts</h3> + +<p>Die deutsche Übersetzung bezieht sich auf ältere Version des Beispielcodes als der englische Originaltext. Der im deutschen Text beschriebene Code hat einige Probleme:</p> + +<ul> + <li>Er ist unvollständig (die makePerspective() Funktion fehlt).</li> + <li>Er verwendet globale Variablen die in der einen Funktion gesetzt, in der anderen wieder gelesen werden. Dies gilt als schlechte Programmierpraxis.</li> + <li>Die Shader werden aus dem HTML DOM geladen, anstatt als Strings in JavaScript erzeugt. Diese Design-Entscheidung wird nicht begründet.</li> +</ul> + +<p>Um das Beispiel selber nachzuprogrammieren ist es daher empfehlenswert, <a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">auf die englische Version des Tutorials</a> zu wechseln. Vielleicht haben Sie ja auch Lust, <a href="/de/docs/Web/API/WebGL_API/Tutorial/Hinzuf%C3%BCgen_von_2D_Inhalten_in_einen_WebGL-Kontext$edit">diese Version ins Deutsche zu übersetzen</a>?</p> + +<h2 id="Beleuchtung_der_Szene">Beleuchtung der Szene</h2> + +<p>Das Wichtigste, das wir verstehen müssen bevor wir anfangen können, ist, dass wir, uns bereits in einer dreidimensionalen Umgebung befinden, obwohl wir nur ein zweidimensionales Objekt in diesem Beispiel rendern wollen. Das heißt, wir müssen jetzt bereits Shader einsetzen, die unsere einfache Szene beleuchten und solche erstellen, die unser Objekt zeichnen. Diese Shader werden festlegen wie unser Quadrat später beleuchtet sein wird.</p> + +<h3 id="Initialisierung_der_Shader">Initialisierung der Shader</h3> + +<p>Shader sind durch die <a class="external" href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" title="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf">OpenGL ES Shading Language (pdf)</a> spezifiziert. Damit es einfacher ist unsere Inhalte zu warten und zu aktualisieren, können wir unseren Code so schreiben, dass die Shader im HTML Dokument gefunden werden, anstatt alles mittels JavaScript zu bauen. Werfen wir einen Blick auf unsere <code>initShaders()</code> Routine, welche diese Aufgabe übernimmt:</p> + +<pre class="brush: js">function initShaders() { + var fragmentShader = getShader(gl, "shader-fs"); + var vertexShader = getShader(gl, "shader-vs"); + + // Erzeuge Shader + + shaderProgram = gl.createProgram(); + gl.attachShader(shaderProgram, vertexShader); + gl.attachShader(shaderProgram, fragmentShader); + gl.linkProgram(shaderProgram); + + // Wenn die das Aufrufen der Shader fehlschlägt, + // gib eine Fehlermeldung aus: + + if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { + alert("Initialisierung des Shaderprogramms nicht möglich."); + } + + gl.useProgram(shaderProgram); + + vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); + gl.enableVertexAttribArray(vertexPositionAttribute); +} + +</pre> + +<p>Es werden zwei Shader in dieser Routine geladen; der Erste, der <code>fragmentShader</code>, wird vom <a href="/de/HTML/Element/Script" title="de/HTML/Element/Script"><code>script</code></a> Element mit der Id "shader-fs" geladen. Der Zweite, der <code>vertexShader</code>, wird vom <a href="/de/HTML/Element/Script" title="de/HTML/Element/Script"><code>script</code></a> Element mit der Id "shader-vs" geladen. Wir werden im nächsten Abschnitt noch näher auf die <code>getShader()</code> Funktion eingehen. Diese Routine holt sich dann die Shader aus dem DOM.</p> + +<p>In diesem Teil erstellen wir noch das Shaderprogramm, in dem wir die Funktion <code>createProgram()</code> aufrufen, die beiden Shader anhängen und das Shaderprogramm verlinken. Danach wird der Zustand des <code>LINK_STATUS</code> Parameters überprüft, um sicher zu gehen, dass das Programm erfolgreich verlinkt wurde. Wenn das der Fall ist, aktivieren wir das neue Shaderprogramm.</p> + +<h3 id="Shader_aus_dem_DOM_laden">Shader aus dem DOM laden</h3> + +<p>Die <code>getShader()</code> Routine ruft ein Shaderprogramm mit dem festgelegtem Namen aus dem DOM auf, gibt das kompilierte Shaderprogramm zurück oder ist leer, wenn nichts geladen oder kompiliert worden konnte.</p> + +<pre class="brush: js">function getShader(gl, id) { + var shaderScript = document.getElementById(id); + + if (!shaderScript) { + return null; + } + + var theSource = ""; + var currentChild = shaderScript.firstChild; + + while(currentChild) { + if (currentChild.nodeType == 3) { + theSource += currentChild.textContent; + } + + currentChild = currentChild.nextSibling; + }</pre> + +<p>Wenn das Element mit der festgelegten Id gefunden wurde, wird der Text in die Variable <code>theSource</code> gespeichert.</p> + +<pre class="brush: js"> var shader; + + if (shaderScript.type == "x-shader/x-fragment") { + shader = gl.createShader(gl.FRAGMENT_SHADER); + } else if (shaderScript.type == "x-shader/x-vertex") { + shader = gl.createShader(gl.VERTEX_SHADER); + } else { + return null; // Unbekannter Shadertyp + }</pre> + +<p>Jetzt wo der Code für die Shader gelesen wurde, können wir uns die MIME Typen der Shader angucken, um festzulegen, ob es ein Vertex-Shader (MIME Typ: "x-shader/x-vertex") oder ein Fragment-Shader (MIME Typ: "x-shader/x-fragment") ist. Danach werden dann die entsprechenden Shadertypen erstellt.</p> + +<pre class="brush: js"> gl.shaderSource(shader, theSource); + + // Kompiliere das Shaderprogramm + + gl.compileShader(shader); + + // Überprüfe, ob die Kompilierung erfolgreich war + + if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { + alert("Es ist ein Fehler beim Kompilieren der Shader aufgetaucht: " + gl.getShaderInfoLog(shader)); + return null; + } + + return shader; +} +</pre> + +<p>Schließlich wird der Shader kompiliert. Falls ein Fehler während der Kompilierung auftritt, zeigen wir die Fehlermeldung an und geben null zurück. Andernfalls wird der kompilierte Shader zurückgegeben.</p> + +<h3 id="Die_Shader">Die Shader</h3> + +<p>Nun müssen wir die eigentlichen Shaderprogramme in unser HTML schreiben. Wie genau diese Shader arbeiten, übersteigt das Ziel dieses Tutorials, wir gehen daher nur auf das Wesentliche ein.</p> + +<h4 id="Fragment-Shader">Fragment-Shader</h4> + +<p>Jeder Pixel in einem Vieleck wird <strong>Fragment</strong> in der GL-Fachsprache genannt. Die Aufgabe des Fragment-Shaders ist es, die Farbe für jeden Pixel bereitzustellen. In unserem Fall ordnen wir einfach jedem Pixel eine weiße Farbe zu.</p> + +<p><code>gl_FragColor</code> ist eine eingebaute GL Variable, die für die Farbe des Fragments verwendet wird.</p> + +<pre class="brush: html"><script id="shader-fs" type="x-shader/x-fragment"> + + void main(void) { + gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); + } +</script> +</pre> + +<h4 id="Vertex-Shader">Vertex-Shader</h4> + +<p>Der Vertex-Shader definiert die Position und Form von jedem Punkt.</p> + +<pre class="brush: html"><script id="shader-vs" type="x-shader/x-vertex"> + attribute vec3 aVertexPosition; + + uniform mat4 uMVMatrix; + uniform mat4 uPMatrix; + + + void main(void) { + gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); + } +</script> +</pre> + +<h2 id="Das_Objekt_erstellen">Das Objekt erstellen</h2> + +<p>Bevor wir unser Quadrat rendern können, müssen wir einen Puffer erstellen, der unsere Punkte enthält. Das werden wir mittels einer Funktion machen, die wir <code>initBuffers()</code> nennen. Wenn wir zu mehr fortgeschrittenen WebGL-Konzepten kommen, wird diese Routine vergrößert, um mehr - und komplexere - 3D-Objekte zu erstellen.</p> + +<pre class="brush: js">var horizAspect = 480.0/640.0; + +function initBuffers() { + squareVerticesBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer); + + var vertices = [ + 1.0, 1.0, 0.0, + -1.0, 1.0, 0.0, + 1.0, -1.0, 0.0, + -1.0, -1.0, 0.0 + ]; + + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); +} +</pre> + +<p>Diese Routine ist, durch die einfache Art der Szene in diesem Beispiel, sehr einfach gehalten. Es geht los mit dem Aufruf der <code>createBuffer()</code> Methode, die einen Puffer erstellt in dem wir die Punkte speichern können. Der Puffer wird, durch Aufrufen der <code>bindBuffer()</code> Methode, mit dem Kontext verbunden.</p> + +<p>Wenn das erledigt ist, erstellen wir einen JavaScript Array, der die Koordinaten für jeden Punkt des Quadrats enthält. Dieser wird dann in einen WebGL FloatArray umgewandelt und durch die <code>bufferData()</code> Methode werden die Punkte für das Objekt festgelegt.</p> + +<h2 id="Die_Szene_zeichnen">Die Szene zeichnen</h2> + +<p>Jetzt sind die Shader aufgebaut und das Objekt ist erstellt. Wir können die Szene rendern lassen. Da wir in dieser Szene nichts animieren, ist unsere <code>drawScene()</code> Funktion sehr einfach. Es werden einige nützliche Routinen verwendet, die wir uns kurz anschauen.</p> + +<pre class="brush: js">function drawScene() { + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + + perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0); + + loadIdentity(); + mvTranslate([-0.0, 0.0, -6.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer); + gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0); + setMatrixUniforms(); + gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); +} +</pre> + +<p>Als Erstes wird der Kontext auf unsere Hintergrundfarbe gesetzt und die Kameraperspektive festgelegt. Wir definieren ein Blickfeld von 45°, mit einem Höhen-/Breitenverhältnis von 640 zu 480 (die Größe unseres Canvas). Außerdem legen wir fest, dass wir nur Objekte zwischen 0.1 und 100 Einheiten gerendert haben wollen.</p> + +<p>Dann wird die Position des Quadrats, über das Laden der ursprünglichen Position und der Verschiebung um 6 Einheiten von der Kamera weg, ermittelt. Danach, verbinden wir den Puffer des Quadrats mit dem Kontext, konfigurieren es, und zeichnen das Objekt, in dem wir die <code>drawArrays()</code> Methode aufrufen.</p> + +<p>Das Ergebnis <a href="/samples/webgl/sample2/index.html" title="https://developer.mozilla.org/samples/webgl/sample2/index.html">kann hier ausprobiert werden</a>, wenn Sie einen Browser verwenden, der WebGL unterstützt.</p> + +<h2 id="Matrix_Operationen">Matrix Operationen</h2> + +<p>Matrix Operationen sind schon kompliziert genug. Keiner möchte wirklich den ganzen Code selbst schreiben, der benötigt wird um die Berechnungen selber durchzuführen. Glücklicherweise gibt es <a class="external" href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a>, eine sehr handliche Bibliothek, die bestens mit Vektor und Matrix Operationen in JavaScript umgehen kann.</p> + +<p>Die <code>glUtils.js</code> Datei, die in dieser Demo benutzt wird, wird bei einer ganzen Reihe von WebGL-Demos, die Web zu finden sind, verwendet. Keiner scheint sich völlig sicher zu sein, woher diese Bibliothek ursprünglich herkommt, aber es vereinfacht den Gebrauch von Sylvester noch weiter, in dem Methoden hinzugefügt werden, die auch spezielle Matrizentypen ermöglichen und HTML ausgegeben werden kann, um die Matrizen anzeigen zu lassen.</p> + +<p>Zusätzlich, definiert diese Demo ein paar hilfreiche Routinen, um an diese Bibliothek für spezielle Aufgaben anzukoppeln. Was genau gemacht wird, ist kein Teil dieses Artikels, aber es gibt einige gute Referenzen zu Matrizen, die online verfügbar sind. Siehe unter <a href="/de/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext#Siehe_auch" title="de/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext#Siehe_auch">Siehe auch</a>, um ein paar aufzulisten.</p> + +<pre class="brush: js">function loadIdentity() { + mvMatrix = Matrix.I(4); +} + +function multMatrix(m) { + mvMatrix = mvMatrix.x(m); +} + +function mvTranslate(v) { + multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4()); +} + +function setMatrixUniforms() { + var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix"); + gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten())); + + var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix"); + gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten())); +} +</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a class="external" href="http://mathworld.wolfram.com/Matrix.html" title="http://mathworld.wolfram.com/Matrix.html">Matrizen</a> auf Wolfram MathWorld (Englisch).</li> + <li><a class="external" href="http://de.wikipedia.org/wiki/Matrix_%28Mathematik%29" title="http://de.wikipedia.org/wiki/Matrix_%28Mathematik%29">Matrix</a> auf Wikipedia.</li> +</ul> + +<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Einführung_in_WebGL", "Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen")}}</p> diff --git a/files/de/web/api/webgl_api/tutorial/index.html b/files/de/web/api/webgl_api/tutorial/index.html new file mode 100644 index 0000000000..34db3f57e6 --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/index.html @@ -0,0 +1,40 @@ +--- +title: WebGL Tutorial +slug: Web/API/WebGL_API/Tutorial +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial +--- +<div>{{WebGLSidebar}}</div> + +<div class="summary"> +<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> enables web content to use an API based on <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 to perform 3D rendering in an HTML {{HTMLElement("canvas")}} in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code(shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.</p> +</div> + +<p><span class="seoSummary">This tutorial describes how to use the <code><canvas></code> element to draw WebGL graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with WebGL and will provide code snippets that may get you started in building your own content.</span></p> + +<h2 id="Before_you_start">Before you start</h2> + +<p>Using the <code><canvas></code> element is not very difficult, but you do need a basic understanding of <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> and <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. The <code><canvas></code> element and WebGL are not supported in some older browsers, but are supported in recent versions of all major browsers. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.</p> + +<h2 id="In_diesem_Tutorial">In diesem Tutorial</h2> + +<dl> + <dt><a href="/de/Web/API/WebGL_API/Tutorial/Einführung_in_WebGL">Einführung in WebGL</a></dt> + <dd>Wie man einen WebGL-Kontext herstellt.</dd> + <dt><a href="/de/Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext">Hinzufügen von 2D Inhalten in einen WebGL-Kontext</a></dt> + <dd>Wie eine einfache, flache Form mittels WebGL erstellt wird.</dd> + <dt><a href="/de/Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen">Farben mittels Shader in einen WebGL-Kontext hinzufügen</a></dt> + <dd>Zeigt wie Farben mit Shadern auf die Form gebracht werden können.</dd> + <dt><a href="/de/Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren">Objekte mit WebGL animieren</a></dt> + <dd>Erklärt wie Objekte rotiert und verschiebt werden, um eine einfache Animation zu erstellen.</dd> + <dt><a href="/de/Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen">3D-Objekte mit WebGL erstellen</a></dt> + <dd>Erläutert wie dreidimensionale Objekte erstellt und animiert werden (ein Würfel dient als Beispiel).</dd> + <dt><a href="/de/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden">Texturen in WebGL verwenden</a></dt> + <dd>Demonstriert wie Texturen auf die Oberfläche eines Objektes gezeichnet werden können.</dd> + <dt><a href="/de/Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL">Beleuchtung in WebGL</a></dt> + <dd>Wie Beleuchtungseffekte in unserem WebGL-Kontext simuliert werden.</dd> + <dt><a href="/de/Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL">Animierte Texturen in WebGL</a></dt> + <dd>Animierte Texturen werden mittels einem Ogg-Video auf der Oberfläche eines rotierenden Würfels realisiert.</dd> +</dl> diff --git a/files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html b/files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html new file mode 100644 index 0000000000..a9eafed6db --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html @@ -0,0 +1,118 @@ +--- +title: Objekte mit WebGL animieren +slug: Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +--- +<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen", "Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen") }}</p> + +<p>Unser Code vom vorherigen Beispiel ist bereits so konfiguriert, dass die WebGL-Szene alle 15 Millisekunden neu gezeichnet wird. Bis jetzt wird zu jeder Zeit das gleiche Bild immer neu gezeichnet. Das wollen wir nun ändern, sodass sich unser Quadrat auf der Bildfläche bewegt.</p> + +<p>In diesem Beispiel rotieren und verschieben wir unser Quadrat in alle drei Dimensionen, sodass es schon in einem 3D Raum existieren kann (obwohl wir bisher nur ein 2D-Objekt erstellt haben).</p> + +<h2 id="Das_Quadrat_rotieren_lassen">Das Quadrat rotieren lassen</h2> + +<p>Fangen wir damit an, das Quadrat im Raum zu rotieren. Als erstes brauchen wir dazu eine Variable in welche wir die Rotation des Quadrats verfolgen können:</p> + +<pre class="brush: js">var squareRotation = 0.0; +</pre> + +<p>Jetzt müssen wir die <code>drawScene()</code> Funktion ändern, um die aktuelle Rotation auf das Quadrat anzuwenden, wenn dies gezeichnet werden soll. Nach der Umrechnung der Startposition für das Quadrat, wenden wir eine Rotation wie diese an:</p> + +<pre class="brush: js">mvPushMatrix(); +mvRotate(squareRotation, [1, 0, 1]); +</pre> + +<p>Das speichert die aktuelle Model-View Matrix und rotiert die Matrix mit dem aktuellen Wert von <code>squareRotation</code> um die X und Z Achsen.</p> + +<p>Nach dem Zeichen müssen wir die Originalmatrix wiederherstellen:</p> + +<pre class="brush: js">mvPopMatrix(); +</pre> + +<p>Wir speichern und stellen die Originalmatrix dann wieder her, um zu verhindern, dass die Rotation auf andere Objekte angewendet wird, die wir vielleicht später noch zeichnen wollen.</p> + +<p>Um letztendlich etwas zu animieren, brauchen wir noch ein paar Zeilen Code, welcher den Wert von <code>squareRotation</code> über die Zeit verändert. Dafür erstellen wir eine neue Variable, die die Zeit aufzeichnet, welche wir zuletzt animiert haben (wir nennen diese <code>lastSquareUpdateTime</code>), dann fügen wir den folgenden Code an das Ende der <code>drawScene()</code> Funktion:</p> + +<pre class="brush: js">var currentTime = (new Date).getTime(); +if (lastSquareUpdateTime) { + var delta = currentTime - lastSquareUpdateTime; + squareRotation += (30 * delta) / 1000.0; +} +lastSquareUpdateTime = currentTime; +</pre> + +<p>Dieser Code benutzt den Betrag der Zeit, die vergangen ist, seitdem wir zum letzten Mal den Wert von <code>squareRotation</code> geändert haben, um festzustellen wie weit das Quadrat rotiert werden soll.</p> + +<h2 id="Das_Quadrat_bewegen">Das Quadrat bewegen</h2> + +<p>Wir können das Quadrat auch verschieben indem wir eine unterschiedliche Position berechnen lassen, bevor wir es zeichnen. Dieses Beispiel zeigt wie eine grundlegende Animation gemacht werden kann. Allerdings möchten Sie in einer echten Anwendung wohl eher etwas weniger Irrsinniges machen.</p> + +<p>Verfolgen wir die Abstände zu jeder Achse für unsere Verschiebung in drei neuen Variablen:</p> + +<pre class="brush: js">var squareXOffset = 0.0; +var squareYOffset = 0.0; +var squareZOffset = 0.0; +</pre> + +<p>Und den Betrag, welcher unsere Postion auf jeder Achse verändern soll, in diesen Variablen:</p> + +<pre class="brush: js">var xIncValue = 0.2; +var yIncValue = -0.4; +var zIncValue = 0.3; +</pre> + +<p>Nun können wir einfach diesen Code zum vorherigen Code, der die Rotation aktualisiert, hinzufügen:</p> + +<pre class="brush: js">squareXOffset += xIncValue * ((30 * delta) / 1000.0); +squareYOffset += yIncValue * ((30 * delta) / 1000.0); +squareZOffset += zIncValue * ((30 * delta) / 1000.0); + +if (Math.abs(squareYOffset) > 2.5) { + xIncValue = -xIncValue; + yIncValue = -yIncValue; + zIncValue = -zIncValue; +} +</pre> + +<p>Das bringt unser Quadrat dazu seine Größe zu verändern, sich willkürlich auf der Fläche zu verschieben, sich vom Betrachter weg und zum Betrachter hin zu bewegen und das alles während das Quadrat auch noch rotiert. Das sieht dann schon eher wie ein Bildschirmschoner aus.</p> + +<p>Wenn Ihr Browser WebGL unterstützt, <a href="/samples/webgl/sample4/index.html" title="https://developer.mozilla.org/samples/webgl/sample4/index.html">ist hier das Beispiel in Aktion</a>.</p> + +<h2 id="Weitere_Matrixoperationen">Weitere Matrixoperationen</h2> + +<p>Dieses Beispiel verwendet einige zusätzliche Matrixoperationen, darunter zwei Routinen, die die Matrizen verschieben, wiederherstellen und in einem Stack aufbewahren und eine Routine, die die Matrix um eine gewissen Anzahl von Grad rotiert:</p> + +<pre class="brush: js">var mvMatrixStack = []; + +function mvPushMatrix(m) { + if (m) { + mvMatrixStack.push(m.dup()); + mvMatrix = m.dup(); + } else { + mvMatrixStack.push(mvMatrix.dup()); + } +} + +function mvPopMatrix() { + if (!mvMatrixStack.length) { + throw("Can't pop from an empty matrix stack."); + } + + mvMatrix = mvMatrixStack.pop(); + return mvMatrix; +} + +function mvRotate(angle, v) { + var inRadians = angle * Math.PI / 180.0; + + var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4(); + multMatrix(m); +} +</pre> + +<p>Diese Routinen wurden von einem Beispiel ausgeliehen, welches von Vlad Vukićević geschrieben wurde.</p> + +<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen", "Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen") }}</p> diff --git a/files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html b/files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html new file mode 100644 index 0000000000..eb59417694 --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html @@ -0,0 +1,159 @@ +--- +title: Texturen in WebGL verwenden +slug: Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL +--- +<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen", "Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}</p> + +<p>Jetzt wo unser Beispielprogramm über einen rotierenden 3D-Würfel verfügt, wollen wir darauf eine Textur legen, statt der bisher verwendeten, einfachen Farben.</p> + +<h2 id="Texturen_laden">Texturen laden</h2> + +<p>Als Erstes müssen wir ein paar Zeilen Code hinzufügen, um die Texturen zu laden. In unserem Fall werden wir eine einzige Textur verwenden, die auf alle sechs Seiten des rotierenden Würfels gelegt wird, aber die gleiche Technik kann verwendet werden, um jede beliebig viele Texturen auf ein Objekt zu legen.</p> + +<p>Der Code, der die Textur lädt, sieht so aus:</p> + +<pre class="brush: js">function initTextures() { + gl.enable(gl.TEXTURE_2D); + cubeTexture = gl.createTexture(); + cubeImage = new Image(); + cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); } + cubeImage.src = "cubetexture.png"; +} + +function handleTextureLoaded(image, texture) { + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.texImage2D(gl.TEXTURE_2D, 0, image, true); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); + gl.generateMipmap(gl.TEXTURE_2D); + gl.bindTexture(gl.TEXTURE_2D, null); +} +</pre> + +<p>Die Routine <code>initTextures()</code> aktiviert zunächst die Unterstützung von Texturen, dann wird das GL Textur-Objekt <code>cubeTexture</code> durch Aufruf der GL <code>createTexture()</code> Funktion erstellt. Um die Textur von der Bilddatei zu laden, wird dann ein <code>Image</code>-Objekt erstellt und in die Grafikdatei geladen, die wir als unsere Textur verwenden wollen. Die <code>handleTextureLoaded()</code> Callback-Routine wird ausgeführt, wenn das Bild geladen wurde.</p> + +<p>Um schließlich die Textur zu erstellen, legen wir fest, dass die neue Textur die aktuelle Textur ist, mit welcher wir arbeiten wollen und verbinden diese mit <code>gl.TEXTURE_2D</code>. Danach wird das geladene Bild mit <code>texImage2D()</code> die Bilddaten in die Textur schreiben.</p> + +<p>Die nächsten zwei Zeilen legen Filter für die Textur fest, die steuern, wie das Bild gefiltert wird, wenn es skaliert wird. In diesem Fall verwenden wir lineare Filter, wenn das Bild hoch skaliert wird und <a class="external" href="http://de.wikipedia.org/wiki/Mip_Mapping">Mip-Mapping</a> wenn wir herunter skalieren. Dann wird die Mip-Map generiert, indem <code>generateMipMap()</code> aufgerufen wird. Schließlich teilen wir WebGL mit, dass wir mit der Arbeit an der Textur fertig sind, in dem wir <code>null</code> mit <code>gl.TEXTURE_2D</code> verknüpfen.</p> + +<h2 id="Textur_auf_die_Flächen_legen">Textur auf die Flächen legen</h2> + +<p>Nun ist die Textur geladen und bereit eingesetzt zu werden. Bevor wir die Textur aber verwenden können, müssen wir die Texturkoordinaten auf die Vertices der Flächen des Würfels legen. Das ersetzt den vorherigen Code in <code>initBuffers()</code>, der die Farben für jede Fläche festgelegt hat.</p> + +<pre class="brush: js"> cubeVerticesTextureCoordBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer); + + var textureCoordinates = [ + // vorne + 0.0, 0.0, + 1.0, 0.0, + 1.0, 1.0, + 0.0, 1.0, + // hinten + 0.0, 0.0, + 1.0, 0.0, + 1.0, 1.0, + 0.0, 1.0, + // oben + 0.0, 0.0, + 1.0, 0.0, + 1.0, 1.0, + 0.0, 1.0, + // unten + 0.0, 0.0, + 1.0, 0.0, + 1.0, 1.0, + 0.0, 1.0, + // rechts + 0.0, 0.0, + 1.0, 0.0, + 1.0, 1.0, + 0.0, 1.0, + // links + 0.0, 0.0, + 1.0, 0.0, + 1.0, 1.0, + 0.0, 1.0 + ]; + + gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(textureCoordinates), + gl.STATIC_DRAW); +</pre> + +<p>Zuerst erstellt dieser Code einen GL-Buffer in welchen wir die Texturkoordinaten für jede Fläche speichern werden, dann verknüpfen wir diesen Buffer als das Array in welchen wir schreiben werden.</p> + +<p>Das <code>textureCoordinates</code> Array definiert die Texturkoordinaten entsprechend jedem Vertex von jeder Fläche. Beachten Sie, dass die Texturkoordinaten sich im Bereich von 0.0 bis 1.0 befinden. Beim Texturmapping werden die Dimensionen von Texturen immer auf einen Bereich von 0.0 bis 1.0 normiert, egal welche Größe die Textur wirklich hat.</p> + +<p>Sobald wir das Texturmapping-Array erstellt haben, speichern wir das Array in den Buffer, sodass GL die Daten zur Verfügung hat.</p> + +<h2 id="Die_Shader_aktualisieren">Die Shader aktualisieren</h2> + +<p>Das Shader-Programm - und der Code, der die Shader initialisiert - muss aktualisiert werden, damit die Textur anstatt der Farben verwendet wird.</p> + +<p>Werfen wir zunächst einen Blick auf die einfache Änderung, die in <code>initShaders()</code> benötigt wird:</p> + +<pre class="brush: js"> textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord"); + gl.enableVertexAttribArray(textureCoordAttribute); +</pre> + +<p>Das ersetzt den Code, der die Vertex Farbattribute enthielt, mit dem, der nun die Texturkoordinaten für jeden Vertex enthält.</p> + +<h3 id="Der_Vertex-Shader">Der Vertex-Shader</h3> + +<p>Als Nächstes müssen wir den Vertex-Shader ersetzen, sodass statt der Farbdaten die Texturkoordinaten abgerufen werden.</p> + +<pre class="brush: html"> <script id="shader-vs" type="x-shader/x-vertex"> + attribute vec3 aVertexPosition; + attribute vec2 aTextureCoord; + + uniform mat4 uMVMatrix; + uniform mat4 uPMatrix; + + varying vec2 vTextureCoord; + + void main(void) { + gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); + vTextureCoord = aTextureCoord; + } + </script> +</pre> + +<p>Die wichtigste Änderung ist hier, dass anstatt die Vertex-Farbe abzurufen, die Texturkoordinaten gesetzt werden. Das gibt den Ort der Textur entsprechend zum Vertex an.</p> + +<h3 id="Der_Fragment-Shader">Der Fragment-Shader</h3> + +<p>Der Fragment-Shader muss in ähnlicher Weise geändert werden:</p> + +<pre class="brush: html"> <script id="shader-fs" type="x-shader/x-fragment"> + varying vec2 vTextureCoord; + + uniform sampler2D uSampler; + + void main(void) { + gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); + } + </script> +</pre> + +<p>Anstatt einen Farbwert auf die Fragment-Farbe zu legen, wird die Fragment-Farbe berechnet in dem der <strong>texel</strong> (der Pixel innerhalb der Textur) abgerufen wird, der am Besten auf die Fragement-Position laut dem Sampler passt.</p> + +<h2 id="Zeichnen_des_textuierten_Würfels">Zeichnen des textuierten Würfels</h2> + +<p>Die Änderungen an der <code>drawScene()</code> Funktion sind einfach (mit der Ausnahme, dass ich nun zur besseren Anschaulichkeit die Verschiebungen entfernt habe und der Würfel nur noch rotiert wird).</p> + +<p>Der Code, der die Farben auf die Textur legt ist weg und wurde ersetzt:</p> + +<pre class="brush: js"> gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, cubeTexture); + gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0); +</pre> + +<p>GL ermöglicht 32 Textur-Register; der Erste davon ist <code>gl.TEXTURE0</code>. Wir verknüpfen unsere geladene Textur zu diesem Register, dann wird der Shader-Sampler <code>uSampler</code> gesetzt (im Shader-Program festgelegt), um die Textur zu benutzen.</p> + +<p>Jetzt sollte der rotierende Würfel gut anzuschauen zu sein. Wenn Ihr Browser WebGL unterstützt, können Sie <a href="/samples/webgl/sample6/index.html" title="https://developer.mozilla.org/samples/webgl/sample6/index.html">das Live-Beispiel ausprobieren</a>.</p> + +<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen", "Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}</p> diff --git a/files/de/web/api/webglactiveinfo/index.html b/files/de/web/api/webglactiveinfo/index.html new file mode 100644 index 0000000000..ed46e4e058 --- /dev/null +++ b/files/de/web/api/webglactiveinfo/index.html @@ -0,0 +1,129 @@ +--- +title: WebGLActiveInfo +slug: Web/API/WebGLActiveInfo +translation_of: Web/API/WebGLActiveInfo +--- +<div>{{APIRef("WebGL")}}</div> + +<p>Das <strong>WebGLActiveInfo</strong>-Interface ist Teil der <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> und repräsentiert die Informationen der Rückgabewerte von den {{domxref("WebGLRenderingContext.getActiveAttrib()")}} und {{domxref("WebGLRenderingContext.getActiveUniform()")}} Methoden.</p> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<dl> + <dt>{{domxref("WebGLActiveInfo.name")}}</dt> + <dd>Der schreibgeschützte Name von der abgefragten Variable</dd> + <dt>{{domxref("WebGLActiveInfo.size")}}</dt> + <dd>Die schreibgeschützte Größe der abgefragten Variable</dd> + <dt>{{domxref("WebGLActiveInfo.type")}}</dt> + <dd>Der schreibgeschützte Typ der abgefragten Variable</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Ein <code>WebGLActiveInfo</code>-Objekt wird von den folgenden Funktionen zurück gegeben:</p> + +<ul> + <li>{{domxref("WebGLRenderingContext.getActiveAttrib()")}}</li> + <li>{{domxref("WebGLRenderingContext.getActiveUniform()")}}</li> + <li>{{domxref("WebGL2RenderingContext.getTransformFeedbackVarying()")}}</li> +</ul> + +<pre class="brush: js">WebGLActiveInfo? getActiveAttrib(WebGLProgram? program, GLuint index); +WebGLActiveInfo? getActiveUniform(WebGLProgram? program, GLuint index); +WebGLActiveInfo? getTransformFeedbackVarying(WebGLProgram? program, GLuint index) +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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('WebGL', "#5.11", "WebGLActiveInfo")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Erstmalige Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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("9")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("11")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.1")}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(44)}} [1]</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>{{CompatUnknown}}</td> + <td>25</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>12</td> + <td>8.1</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(44)}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Dieses Feature ist durch eine Voreinstellung deaktiviert. Zur Aktivierung setzt man in about:config den Wert gfx.offscreencanvas.enabled auf true.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.getActiveAttrib()")}}</li> + <li>{{domxref("WebGLRenderingContext.getActiveUniform()")}}</li> +</ul> diff --git a/files/de/web/api/webglprogram/index.html b/files/de/web/api/webglprogram/index.html new file mode 100644 index 0000000000..3d115b5947 --- /dev/null +++ b/files/de/web/api/webglprogram/index.html @@ -0,0 +1,166 @@ +--- +title: WebGLProgram +slug: Web/API/WebGLProgram +tags: + - WebGL + - WebGLProgram +translation_of: Web/API/WebGLProgram +--- +<div>{{APIRef("WebGL")}}</div> + +<p>Das <strong>WebGLProgram</strong> ist ein Teil der <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> und ist eine Kombination aus zwei kompilierten {{domxref("WebGLShader")}}n, bestehend aus einem Vertex-Shader und einem Fragment-Shader (beide in GLSL geschrieben). Diese werden dann zu einem benutzbaren Programm zusammen gelinkt.</p> + +<pre class="brush: js">var program = gl.createProgram(); + +// Bereits existierende Shader hinzufügen +gl.attachShader(program, vertexShader); +gl.attachShader(program, fragmentShader); + +gl.linkProgram(program); + +if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) { + var info = gl.getProgramInfoLog(program); + throw "WebGL-Programm konnte nicht kompiliert werden. \n\n" + info; +} +</pre> + +<p>Für weitere Informationen über das Erstellen von <code>vertexShader</code> und <code>fragmentShader, lese dir </code>{{domxref("WebGLShader")}} durch.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Das_Program_benutzen">Das Program benutzen</h3> + +<p>Hier wird zu erst der GPU mit geteilt, dass sie das Programm benutzen soll. Danach werden die benötigten Daten und Konfigurationen vorgenommen und zuletzt wird etwas auf den Bildschirm gezeichnet.</p> + +<pre class="brush: js">// Das Programm benutzen +gl.useProgram(program); + +// Bereits existierende Attribute binden +gl.bindBuffer(gl.ARRAY_BUFFER, buffer); +gl.enableVertexAttribArray(attributeLocation); +gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0); + +// Ein einzelnes Dreieck zeichnen +gl.drawArrays(gl.TRIANGLES, 0, 3); +</pre> + +<h3 id="Das_Programm_löschen">Das Programm löschen</h3> + +<p>Falls es bei dem Linken des Programms zu fehlern kommt oder falls du ein bereits erstelltes Programm einfach nur löschen möchtest, dann kannst du einfach {{domxref("WebGLRenderingContext.deleteProgram()")}} ausführen. Dies löscht den Speicher des gelinkten Programms.</p> + +<pre class="brush: js">gl.deleteProgram(program); +</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('WebGL', "#5.6", "WebGLProgram")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Erstmalige Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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("9")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("11")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.1")}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(44)}} [1]</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>{{CompatUnknown}}</td> + <td>25</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>12</td> + <td>8.1</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(44)}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p> + +<h2 id="Weiterführendes">Weiterführendes</h2> + +<ul> + <li>{{domxref("WebGLShader")}}</li> + <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.createShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> +</ul> diff --git a/files/de/web/api/webglrenderingcontext/canvas/index.html b/files/de/web/api/webglrenderingcontext/canvas/index.html new file mode 100644 index 0000000000..4f54fd191e --- /dev/null +++ b/files/de/web/api/webglrenderingcontext/canvas/index.html @@ -0,0 +1,74 @@ +--- +title: WebGLRenderingContext.canvas +slug: Web/API/WebGLRenderingContext/canvas +tags: + - Schreibgeschützt + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/canvas +--- +<div>{{APIRef("WebGL")}}</div> + +<p>Die Eigenschaft <code><strong>WebGLRenderingContext.canvas</strong></code> ist eine schreibgeschütze Referenz auf das {{domxref("HTMLCanvasElement")}} oder das {{domxref("OffscreenCanvas")}} Objekt, welches mit dem Context verknüpft ist. Es kann auch den Wert {{jsxref("null")}} annehmen, wenn es keinem {{HTMLElement("canvas")}} Element oder {{domxref("OffscreenCanvas")}} Objekt zugeordnet ist.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var><em>gl</em></var>.canvas;</pre> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Entweder ein {{domxref("HTMLCanvasElement")}}, ein {{domxref("OffscreenCanvas")}} Objekt oder {{jsxref("null")}}.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Canvas_Element">Canvas Element</h3> + +<p>Gegeben ist ein {{HTMLElement("canvas")}} Element:</p> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<p>Du kannst die Eigenschaft <code>canvas</code> aus dem <code>WebGLRenderingContext</code> auslesen um eine Referenz darauf zu erhalten.</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +gl.canvas; // HTMLCanvasElement +</pre> + +<h3 id="Offscreen_Canvas">Offscreen Canvas</h3> + +<p>Beispiel des experimentellen {{domxref("OffscreenCanvas")}} Objektes.</p> + +<pre class="brush: js">var offscreen = new OffscreenCanvas(256, 256); +var gl = offscreen.getContext('webgl'); +gl.canvas; // OffscreenCanvas</pre> + +<h2 id="Spezifikationen">Spezifikationen</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('WebGL', "#DOM-WebGLRenderingContext-canvas", "WebGLRenderingContext.canvas")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Ursprüngliche Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.canvas")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("CanvasRenderingContext2D.canvas")}}</li> + <li>{{domxref("OffscreenCanvas")}}</li> +</ul> diff --git a/files/de/web/api/webglrenderingcontext/getactiveattrib/index.html b/files/de/web/api/webglrenderingcontext/getactiveattrib/index.html new file mode 100644 index 0000000000..0774b87631 --- /dev/null +++ b/files/de/web/api/webglrenderingcontext/getactiveattrib/index.html @@ -0,0 +1,115 @@ +--- +title: WebGLRenderingContext.getActiveAttrib() +slug: Web/API/WebGLRenderingContext/getActiveAttrib +translation_of: Web/API/WebGLRenderingContext/getActiveAttrib +--- +<div>{{APIRef("WebGL")}}</div> + +<p>Die <strong><code>WebGLRenderingContext.getActiveAttrib() </code></strong>Methode der <a href="/de/docs/Web/API/WebGL_API">WebGL API</a> gibt ein {{domxref("WebGLActiveInfo")}} Objekt zurück, welches die Größe, den Typ und den Namen eines Vertex-Attributes an der gegebenen Position in einem {{domxref("WebGLProgram")}} enthält.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">WebGLActiveInfo <var>gl</var>.getActiveAttrib(<var>program</var>,<var>index</var>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt>program</dt> + <dd>Ein {{domxref("WebGLProgram")}}, welches das Vertex-Attribut enthält</dd> + <dt>index</dt> + <dd>Ein {{domxref("GLuint")}}, welcher den Index des Vertex-Attributes angibt</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein {{domxref("WebGLActiveInfo")}} Objekt.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">gl.getActiveAttrib(program, i); +</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('WebGL', "#5.14.10", "getActiveAttrib")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Erstmalige Definition</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGetActiveAttrib.xml", "glGetActiveAttrib")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page der OpenGL API</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilitä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("9")}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>11</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.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>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>25</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + <td>12</td> + <td>8.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Weiterführendes">Weiterführendes</h2> + +<ul> + <li>{{domxref("WebGLActiveInfo")}}</li> +</ul> diff --git a/files/de/web/api/webglrenderingcontext/getattriblocation/index.html b/files/de/web/api/webglrenderingcontext/getattriblocation/index.html new file mode 100644 index 0000000000..7088f72b90 --- /dev/null +++ b/files/de/web/api/webglrenderingcontext/getattriblocation/index.html @@ -0,0 +1,65 @@ +--- +title: WebGLRenderingContext.getAttribLocation() +slug: Web/API/WebGLRenderingContext/getAttribLocation +translation_of: Web/API/WebGLRenderingContext/getAttribLocation +--- +<div>{{APIRef("WebGL")}}</div> + +<p>Die Methode <strong><code>WebGLRenderingContext.getAttribLocation()</code></strong> aus der <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> gibt die Position einer Attribut Variable innerhalb eines gegebenen {{domxref("WebGLProgram")}} zurück.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">GLint <var>gl</var>.getAttribLocation(<var>program</var>, <var>name</var>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt>program</dt> + <dd>Ein {{domxref("WebGLProgram")}} das die Attribut Variable enthält.</dd> + <dt>name</dt> + <dd>Ein {{domxref("DOMString")}} der den Namen des Attributes angibt, dessen Position gesucht wird.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Wenn gefunden, wird die Position der Variable als {{domxref("GLint")}}, andernfalls -1 zurückgegeben.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">gl.getAttribLocation(program, 'vColor'); +</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('WebGL', "#5.14.10", "getAttribLocation")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Ursprüngliche Definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGetAttribLocation.xml", "glGetAttribLocation")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Hauptseite der OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.getAttribLocation")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</li> +</ul> diff --git a/files/de/web/api/webglrenderingcontext/index.html b/files/de/web/api/webglrenderingcontext/index.html new file mode 100644 index 0000000000..77182a3177 --- /dev/null +++ b/files/de/web/api/webglrenderingcontext/index.html @@ -0,0 +1,441 @@ +--- +title: WebGLRenderingContext +slug: Web/API/WebGLRenderingContext +tags: + - NeedsTranslation + - TopicStub + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext +--- +<div>{{APIRef("WebGL")}}</div> + +<p>The <strong>WebGLRenderingContext</strong> interface provides the OpenGL ES 2.0 rendering context for the drawing surface of an HTML {{HTMLElement("canvas")}} element.</p> + +<p>To get an object of this interface, call {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} on a <code><canvas></code> element, supplying "webgl" as the argument:</p> + +<pre class="brush: js">var canvas = document.getElementById('myCanvas'); +var gl = canvas.getContext('webgl'); +</pre> + +<p>Once you have the WebGL rendering context for a canvas, you can render within it.</p> + +<p>The <a href="/en-US/docs/Web/API/WebGL_API/Tutorial" title="WebGL tutorial">WebGL tutorial</a> has more information, examples, and resources on how to get started with WebGL.</p> + +<h2 id="Constants">Constants</h2> + +<p>See the <a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL constants</a> page.</p> + +<h2 id="The_WebGL_context">The WebGL context</h2> + +<p>The following properties and methods provide general information and functionality to deal with the WebGL context:</p> + +<dl> + <dt>{{domxref("WebGLRenderingContext.canvas")}}</dt> + <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd> + <dt>{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}</dt> + <dd> + <p>Pushes frames back to the original {{domxref("HTMLCanvasElement")}}, if the context is not directly fixed to a specific canvas.</p> + </dd> + <dt>{{domxref("WebGLRenderingContext.drawingBufferWidth")}}</dt> + <dd>The read-only width of the current drawing buffer. Should match the width of the canvas element associated with this context.</dd> + <dt>{{domxref("WebGLRenderingContext.drawingBufferHeight")}}</dt> + <dd>The read-only height of the current drawing buffer. Should match the height of the canvas element associated with this context.</dd> + <dt>{{domxref("WebGLRenderingContext.getContextAttributes()")}}</dt> + <dd>Returns a <code>WebGLContextAttributes</code> object that contains the actual context parameters. Might return {{jsxref("null")}}, if the context is lost.</dd> + <dt>{{domxref("WebGLRenderingContext.isContextLost()")}}</dt> + <dd>Returns <code>true</code> if the context is lost, otherwise returns <code>false</code>.</dd> +</dl> + +<h2 id="Viewing_and_clipping">Viewing and clipping</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.scissor()")}}</dt> + <dd>Defines the scissor box.</dd> + <dt>{{domxref("WebGLRenderingContext.viewport()")}}</dt> + <dd>Sets the viewport.</dd> +</dl> + +<h2 id="State_information">State information</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.activeTexture()")}}</dt> + <dd>Selects the active texture unit.</dd> + <dt>{{domxref("WebGLRenderingContext.blendColor()")}}</dt> + <dd>Sets the source and destination blending factors.</dd> + <dt>{{domxref("WebGLRenderingContext.blendEquation()")}}</dt> + <dd>Sets both the RGB blend equation and alpha blend equation to a single equation.</dd> + <dt>{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}</dt> + <dd>Sets the RGB blend equation and alpha blend equation separately.</dd> + <dt>{{domxref("WebGLRenderingContext.blendFunc()")}}</dt> + <dd>Defines which function is used for blending pixel arithmetic.</dd> + <dt>{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}</dt> + <dd>Defines which function is used for blending pixel arithmetic for RGB and alpha components separately.</dd> + <dt>{{domxref("WebGLRenderingContext.clearColor()")}}</dt> + <dd>Specifies the color values used when clearing color buffers.</dd> + <dt>{{domxref("WebGLRenderingContext.clearDepth()")}}</dt> + <dd>Specifies the depth value used when clearing the depth buffer.</dd> + <dt>{{domxref("WebGLRenderingContext.clearStencil()")}}</dt> + <dd>Specifies the stencil value used when clearing the stencil buffer.</dd> + <dt>{{domxref("WebGLRenderingContext.colorMask()")}}</dt> + <dd>Sets which color components to enable or to disable when drawing or rendering to a {{domxref("WebGLFramebuffer")}}.</dd> + <dt>{{domxref("WebGLRenderingContext.cullFace()")}}</dt> + <dd>Specifies whether or not front- and/or back-facing polygons can be culled.</dd> + <dt>{{domxref("WebGLRenderingContext.depthFunc()")}}</dt> + <dd>Specifies a function that compares incoming pixel depth to the current depth buffer value.</dd> + <dt>{{domxref("WebGLRenderingContext.depthMask()")}}</dt> + <dd>Sets whether writing into the depth buffer is enabled or disabled.</dd> + <dt>{{domxref("WebGLRenderingContext.depthRange()")}}</dt> + <dd>Specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.</dd> + <dt>{{domxref("WebGLRenderingContext.disable()")}}</dt> + <dd>Disables specific WebGL capabilities for this context.</dd> + <dt>{{domxref("WebGLRenderingContext.enable()")}}</dt> + <dd>Enables specific WebGL capabilities for this context.</dd> + <dt>{{domxref("WebGLRenderingContext.frontFace()")}}</dt> + <dd>Specifies whether polygons are front- or back-facing by setting a winding orientation.</dd> + <dt>{{domxref("WebGLRenderingContext.getParameter()")}}</dt> + <dd>Returns a value for the passed parameter name.</dd> + <dt>{{domxref("WebGLRenderingContext.getError()")}}</dt> + <dd>Returns error information.</dd> + <dt>{{domxref("WebGLRenderingContext.hint()")}}</dt> + <dd>Specifies hints for certain behaviors. The interpretation of these hints depend on the implementation.</dd> + <dt>{{domxref("WebGLRenderingContext.isEnabled()")}}</dt> + <dd>Tests whether a specific WebGL capability is enabled or not for this context.</dd> + <dt>{{domxref("WebGLRenderingContext.lineWidth()")}}</dt> + <dd>Sets the line width of rasterized lines.</dd> + <dt>{{domxref("WebGLRenderingContext.pixelStorei()")}}</dt> + <dd>Specifies the pixel storage modes</dd> + <dt>{{domxref("WebGLRenderingContext.polygonOffset()")}}</dt> + <dd>Specifies the scale factors and units to calculate depth values.</dd> + <dt>{{domxref("WebGLRenderingContext.sampleCoverage()")}}</dt> + <dd>Specifies multi-sample coverage parameters for anti-aliasing effects.</dd> + <dt>{{domxref("WebGLRenderingContext.stencilFunc()")}}</dt> + <dd>Sets the both front and back function and reference value for stencil testing.</dd> + <dt>{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}</dt> + <dd>Sets the front and/or back function and reference value for stencil testing.</dd> + <dt>{{domxref("WebGLRenderingContext.stencilMask()")}}</dt> + <dd>Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.</dd> + <dt>{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}</dt> + <dd>Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.</dd> + <dt>{{domxref("WebGLRenderingContext.stencilOp()")}}</dt> + <dd>Sets both the front and back-facing stencil test actions.</dd> + <dt>{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}</dt> + <dd>Sets the front and/or back-facing stencil test actions.</dd> +</dl> + +<h2 id="Buffers">Buffers</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindBuffer()")}}</dt> + <dd>Binds a <code>WebGLBuffer</code> object to a given target.</dd> + <dt>{{domxref("WebGLRenderingContext.bufferData()")}}</dt> + <dd>Updates buffer data.</dd> + <dt>{{domxref("WebGLRenderingContext.bufferSubData()")}}</dt> + <dd>Updates buffer data starting at a passed offset.</dd> + <dt>{{domxref("WebGLRenderingContext.createBuffer()")}}</dt> + <dd>Creates a <code>WebGLBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</dt> + <dd>Deletes a <code>WebGLBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.getBufferParameter()")}}</dt> + <dd>Returns information about the buffer.</dd> + <dt>{{domxref("WebGLRenderingContext.isBuffer()")}}</dt> + <dd>Returns a Boolean indicating if the passed buffer is valid.</dd> +</dl> + +<h2 id="Framebuffers">Framebuffers</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</dt> + <dd>Binds a <code>WebGLFrameBuffer</code> object to a given target.</dd> + <dt>{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}</dt> + <dd>Returns the status of the framebuffer.</dd> + <dt>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</dt> + <dd>Creates a <code>WebGLFrameBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</dt> + <dd>Deletes a <code>WebGLFrameBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}</dt> + <dd>Attaches a <code>WebGLRenderingBuffer</code> object to a <code>WebGLFrameBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}</dt> + <dd>Attaches a textures image to a <code>WebGLFrameBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}</dt> + <dd>Returns information about the framebuffer.</dd> + <dt>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</dt> + <dd>Returns a Boolean indicating if the passed <code>WebGLFrameBuffer</code> object is valid.</dd> + <dt>{{domxref("WebGLRenderingContext.readPixels()")}}</dt> + <dd>Reads a block of pixels from the <code>WebGLFrameBuffer</code>.</dd> +</dl> + +<h2 id="Renderbuffers">Renderbuffers</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}</dt> + <dd>Binds a <code>WebGLRenderBuffer</code> object to a given target.</dd> + <dt>{{domxref("WebGLRenderingContext.createRenderbuffer()")}}</dt> + <dd>Creates a <code>WebGLRenderBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}</dt> + <dd>Deletes a <code>WebGLRenderBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}</dt> + <dd>Returns information about the renderbuffer.</dd> + <dt>{{domxref("WebGLRenderingContext.isRenderbuffer()")}}</dt> + <dd>Returns a Boolean indicating if the passed <code>WebGLRenderingBuffer</code> is valid.</dd> + <dt>{{domxref("WebGLRenderingContext.renderbufferStorage()")}}</dt> + <dd>Creates a renderbuffer data store.</dd> +</dl> + +<h2 id="Textures">Textures</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindTexture()")}}</dt> + <dd>Binds a <code>WebGLTexture</code> object to a given target.</dd> + <dt>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</dt> + <dd>Specifies a 2D texture image in a compressed format.</dd> + <dt>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</dt> + <dd>Specifies a 2D texture sub-image in a compressed format.</dd> + <dt>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</dt> + <dd>Copies a 2D texture image.</dd> + <dt>{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}</dt> + <dd>Copies a 2D texture sub-image.</dd> + <dt>{{domxref("WebGLRenderingContext.createTexture()")}}</dt> + <dd>Creates a <code>WebGLTexture</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.deleteTexture()")}}</dt> + <dd>Deletes a <code>WebGLTexture</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.generateMipmap()")}}</dt> + <dd>Generates a set of mipmaps for a <code>WebGLTexture</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.getTexParameter()")}}</dt> + <dd>Returns information about the texture.</dd> + <dt>{{domxref("WebGLRenderingContext.isTexture()")}}</dt> + <dd>Returns a Boolean indicating if the passed <code>WebGLTexture</code> is valid.</dd> + <dt>{{domxref("WebGLRenderingContext.texImage2D()")}}</dt> + <dd>Specifies a 2D texture image.</dd> + <dt>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</dt> + <dd>Updates a sub-rectangle of the current <code>WebGLTexture</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</dt> + <dd>Sets texture parameters.</dd> + <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</dt> + <dd>Sets texture parameters.</dd> +</dl> + +<h2 id="Programs_and_shaders">Programs and shaders</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.attachShader()")}}</dt> + <dd>Attaches a <code>WebGLShader</code> to a <code>WebGLProgram</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</dt> + <dd>Binds a generic vertex index to a named attribute variable.</dd> + <dt>{{domxref("WebGLRenderingContext.compileShader()")}}</dt> + <dd>Compiles a <code>WebGLShader</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.createProgram()")}}</dt> + <dd>Creates a <code>WebGLProgram</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.createShader()")}}</dt> + <dd>Creates a <code>WebGLShader</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.deleteProgram()")}}</dt> + <dd>Deletes a <code>WebGLProgram</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.deleteShader()")}}</dt> + <dd>Deletes a <code>WebGLShader</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.detachShader()")}}</dt> + <dd>Detaches a <code>WebGLShader</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</dt> + <dd>Returns a list of <code>WebGLShader</code> objects attached to a <code>WebGLProgram</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</dt> + <dd>Returns information about the program.</dd> + <dt>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</dt> + <dd>Returns the information log for a <code>WebGLProgram</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</dt> + <dd>Returns information about the shader.</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</dt> + <dd>Returns a <code>WebGLShaderPrecisionFormat</code> object describing the precision for the numeric format of the shader.</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</dt> + <dd>Returns the information log for a <code>WebGLShader</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderSource()")}}</dt> + <dd>Returns the source code of a <code>WebGLShader</code> as a string.</dd> + <dt>{{domxref("WebGLRenderingContext.isProgram()")}}</dt> + <dd>Returns a Boolean indicating if the passed <code>WebGLProgram</code> is valid.</dd> + <dt>{{domxref("WebGLRenderingContext.isShader()")}}</dt> + <dd>Returns a Boolean indicating if the passed <code>WebGLShader</code> is valid.</dd> + <dt>{{domxref("WebGLRenderingContext.linkProgram()")}}</dt> + <dd>Links the passed <code>WebGLProgram</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.shaderSource()")}}</dt> + <dd>Sets the source code in a <code>WebGLShader</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.useProgram()")}}</dt> + <dd>Uses the specified <code>WebGLProgram</code> as part the current rendering state.</dd> + <dt>{{domxref("WebGLRenderingContext.validateProgram()")}}</dt> + <dd>Validates a <code>WebGLProgram</code>.</dd> +</dl> + +<h2 id="Uniforms_and_attributes">Uniforms and attributes</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}</dt> + <dd>Disables a vertex attribute array at a given position.</dd> + <dt>{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}</dt> + <dd>Enables a vertex attribute array at a given position.</dd> + <dt>{{domxref("WebGLRenderingContext.getActiveAttrib()")}}</dt> + <dd>Returns information about an active attribute variable.</dd> + <dt>{{domxref("WebGLRenderingContext.getActiveUniform()")}}</dt> + <dd>Returns information about an active uniform variable.</dd> + <dt>{{domxref("WebGLRenderingContext.getAttribLocation()")}}</dt> + <dd>Returns the location of an attribute variable.</dd> + <dt>{{domxref("WebGLRenderingContext.getUniform()")}}</dt> + <dd>Returns the value of a uniform variable at a given location.</dd> + <dt>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</dt> + <dd>Returns the location of a uniform variable.</dd> + <dt>{{domxref("WebGLRenderingContext.getVertexAttrib()")}}</dt> + <dd>Returns information about a vertex attribute at a given position.</dd> + <dt>{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}</dt> + <dd>Returns the address of a given vertex attribute.</dd> + <dt>{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}</dt> + <dd>Specifies a value for a uniform variable.</dd> + <dt>{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}</dt> + <dd>Specifies a matrix value for a uniform variable.</dd> + <dt>{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}</dt> + <dd>Specifies a value for a generic vertex attribute.</dd> + <dt>{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}</dt> + <dd>Specifies the data formats and locations of vertex attributes in a vertex attributes array.</dd> +</dl> + +<h2 id="Drawing_buffers">Drawing buffers</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.clear()")}}</dt> + <dd>Clears specified buffers to preset values.</dd> + <dt>{{domxref("WebGLRenderingContext.drawArrays()")}}</dt> + <dd>Renders primitives from array data.</dd> + <dt>{{domxref("WebGLRenderingContext.drawElements()")}}</dt> + <dd>Renders primitives from element array data.</dd> + <dt>{{domxref("WebGLRenderingContext.finish()")}}</dt> + <dd>Blocks execution until all previously called commands are finished.</dd> + <dt>{{domxref("WebGLRenderingContext.flush()")}}</dt> + <dd>Empties different buffer commands, causing all commands to be executed as quickly as possible.</dd> +</dl> + +<h2 id="Working_with_extensions">Working with extensions</h2> + +<p>These methods manage WebGL extensions:</p> + +<dl> + <dt>{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}</dt> + <dd>Returns an {{jsxref("Array")}} of {{domxref("DOMString")}} elements with all the supported WebGL extensions.</dd> + <dt>{{domxref("WebGLRenderingContext.getExtension()")}}</dt> + <dd>Returns an extension object.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="WebGL_context_feature_detection">WebGL context feature detection</h3> + +<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "summary")}}</p> + +<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}</p> + +<p>{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}</p> + +<h3 id="Effect_of_canvas_size_on_rendering_with_WebGL">Effect of canvas size on rendering with WebGL</h3> + +<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}</p> + +<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}</p> + +<p>{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}</p> + +<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('WebGL', "#5.14", "WebGLRenderingContext")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("9")}}</td> + <td>20</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("11")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.1")}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(44)}} [1]</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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>25</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + <td>12</td> + <td>8.0</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(44)}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> +</ul> diff --git a/files/de/web/api/websocket/binarytype/index.html b/files/de/web/api/websocket/binarytype/index.html new file mode 100644 index 0000000000..da69c1ec8c --- /dev/null +++ b/files/de/web/api/websocket/binarytype/index.html @@ -0,0 +1,56 @@ +--- +title: WebSocket.binaryType +slug: Web/API/WebSocket/binaryType +tags: + - API + - Eigenschaft + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/binaryType +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>Die Eigenschaft <strong><code>WebSocket.binaryType</code></strong> gibt den Typ von Binärdaten zurück, der übertragen wird.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>var binaryType</em> = aWebSocket.binaryType;</pre> + +<h2 id="Wert">Wert</h2> + +<p>Ein {{DOMXref("DOMString")}}:</p> + +<dl> + <dt><code>"blob"</code></dt> + <dd>Wenn {{domxref("Blob")}} Objekte benutzt werden.</dd> + <dt><code>"arraybuffer"</code></dt> + <dd>Wenn {{jsxref("ArrayBuffer")}} Objekte benutzt werden. + + </dd> +</dl> + +<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('HTML WHATWG', '#dom-websocket-binarytype', 'WebSocket: binaryType')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("api.WebSocket.binaryType")}}</p> diff --git a/files/de/web/api/websocket/close/index.html b/files/de/web/api/websocket/close/index.html new file mode 100644 index 0000000000..9aec5890d0 --- /dev/null +++ b/files/de/web/api/websocket/close/index.html @@ -0,0 +1,64 @@ +--- +title: WebSocket.close() +slug: Web/API/WebSocket/close +tags: + - API + - Funktion + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/close +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>Die Funktion <strong><code>WebSocket.close()</code></strong> beendet eine {{domxref("WebSocket")}} Verbindung oder den Versuch eines Verbindungsaufbaus. Wenn diese schon geschlossen ist, passiert nichts weiter.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">WebSocket.close();</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>code</code> {{optional_inline}}</dt> + <dd>Ein numerisch Wert, der den Status angibt, warum die Verbindung geschlossen wird. Wird kein Wert spezifiziert, . Zur Referenz kann <a href="/en-US/docs/Web/API/CloseEvent#Status_codes">diese Liste mit Codes</a> des {{domxref("CloseEvent")}}s für gültige Werte genommen werden.</dd> + <dt><code>reason</code> {{optional_inline}}</dt> + <dd>Ein lesbarer Text, welcher erklärt, warum die Verbindung geschlossen wird. Dieser muss UTF-8 kodiert und darf nicht länger als 123 Bytes sein.</dd> +</dl> + +<h3 id="Fehler">Fehler</h3> + +<dl> + <dt><code>INVALID_ACCESS_ERR</code></dt> + <dd>Ein ungültiger <code>code</code> wurde angegeben.</dd> + <dt><code>SYNTAX_ERR</code></dt> + <dd>Der <code>reason</code> Text ist zu lang oder enthält ungültige Zeichen.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> In Gecko unterstützte diese Funktion bis zu Version 8.0 {{geckoRelease("8.0")}} keine Parameter.</p> +</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Spezifikation</th> + <th>Status</th> + <th>Kommentar</th> + </tr> + <tr> + <td><a class="external external-icon" href="https://html.spec.whatwg.org/multipage/web-sockets.html#dom-websocket-close" hreflang="en" lang="en">HTML Living Standard<br> + <small lang="en-US">The definition of 'WebSocket.close()' in that specification.</small></a></td> + <td><span class="spec-Living">Living Standard</span></td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("api.WebSocket.close")}}</p> diff --git a/files/de/web/api/websocket/extensions/index.html b/files/de/web/api/websocket/extensions/index.html new file mode 100644 index 0000000000..bbc5d722c4 --- /dev/null +++ b/files/de/web/api/websocket/extensions/index.html @@ -0,0 +1,49 @@ +--- +title: WebSocket.extensions +slug: Web/API/WebSocket/extensions +tags: + - API + - Eigenschaft + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/extensions +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>Die Eigenschaft <strong><code>WebSocket.extensions</code></strong> gibt die Erweiterungen des Servers zurück. Sie ist nur lesbar.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>var extensions</em> = aWebSocket.extensions;</pre> + +<h2 id="Wert">Wert</h2> + +<p>Ein {{domxref("DOMString")}}.</p> + +<p>Momentan ist dies entweder ein leerer String oder eine Liste an Erweiterungen, welche zwischen dem Server und dem Client ausgehandelt wurden.</p> + +<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('HTML WHATWG', '#dom-websocket-extensions', 'WebSocket: extensions')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("api.WebSocket.extensions")}}</p> diff --git a/files/de/web/api/websocket/index.html b/files/de/web/api/websocket/index.html new file mode 100644 index 0000000000..641c788179 --- /dev/null +++ b/files/de/web/api/websocket/index.html @@ -0,0 +1,314 @@ +--- +title: WebSocket +slug: Web/API/WebSocket +tags: + - API + - WebSocket + - WebSockets +translation_of: Web/API/WebSocket +--- +<p>{{APIRef("Web Sockets API")}}{{ SeeCompatTable() }}</p> + +<p>Das <code>WebSocket</code>-Objekt bietet die API für das Erstellen und Verwalten einer <a href="/en/WebSockets" title="en/WebSockets">WebSocket</a>-Verbindung zu einem Server, ebenso dient es auch dem Senden und dem Empfangen von Daten auf der Verbindung.</p> + +<p>Der WebSocket-Konstruktor akzeptiert einen benötigten und einen optionalen Parameter:</p> + +<pre>WebSocket WebSocket( + in DOMString url, + in optional DOMString protocols +); + +WebSocket WebSocket( + in DOMString url, + in optional DOMString[] protocols +); +</pre> + +<dl> + <dt><code>url</code></dt> + <dd>Die URL mit der sich das WebSocket verbinden soll; dies sollte die URL sein, auf welcher der WebSocket Server antworten wird.</dd> + <dt><code>protocols</code> {{ optional_inline() }}</dt> + <dd>Entweder ein einzelnes Protokol als String oder ein Array aus Protokol-Strings. Diese Strings werden genutzt um Sub-Protokolle zu indizieren, sodass ein einzelner Server mehrere WebSocket Sub-Protokolle implementieren kann (Beispielsweiße kann ein Server abhängig vom <code>protocol</code> verschiedene Interaktionen mit dem Client handeln). Falls du kein Protokoll angibst, wird ein leerer String verwendet.</dd> +</dl> + +<p>Der Konstruktur kann folgende Exceptions werfen:</p> + +<dl> + <dt><code>SECURITY_ERR</code></dt> + <dd>Der Port auf dem man die Verbindung aufbauen will, ist blockiert worden.</dd> +</dl> + +<dl> +</dl> + +<h2 id="Method_overview" name="Method_overview">Methoden Übersicht</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>void <a href="#close()">close</a>(in optional unsigned long code, in optional DOMString reason);</code></td> + </tr> + <tr> + <td><code>void <a href="#send()">send</a>(in DOMString data);</code></td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Attribute</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Attribut</td> + <td class="header">Typ</td> + <td class="header">Beschreibung</td> + </tr> + <tr> + <td><code>binaryType</code></td> + <td>{{ DOMXref("DOMString") }}</td> + <td>Ein String indiziert den Typ der Binärdaten, die von der Verbindung übertragen werden. Dies sollte entweder "blob" sein, falls DOM-Objekte {{ domxref("Blob") }} genutzt werden oder "arraybuffer" falls <a href="https://developer.mozilla.org/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>-Objekte genutzt werden.</td> + </tr> + <tr> + <td><code>bufferedAmount</code></td> + <td><code><a href="/en/unsigned_long" title="en/unsigned long">unsigned long</a></code></td> + <td>Die Anzahl der Bytes der Daten, welche bereits durch Aufrufe von {{ manch("send") }} gebuffert wurden, allerdings noch nicht über das Netzwerk versand wurden. Dieses Feld setzt sich nicht auf Null zurück, wenn die Verbindung beendet wurde; falls du weiterhin {{ manch("send") }} aufrufst, wird dieses Feld weiterhin ansteigen. <strong>Read only.</strong></td> + </tr> + <tr> + <td><code>extensions</code></td> + <td>{{ DOMXref("DOMString") }}</td> + <td>Die Erweiterungen, die von dem Server gewählt wurden. Aktuell ist dies nur ein leerer String oder eine Liste von Erweiterungen, die von der Verbindung verhandelt wurden.</td> + </tr> + <tr> + <td><code>onclose</code></td> + <td>{{ domxref("EventListener") }}</td> + <td>Ein Event-Listener welcher aufgerufen wird, wenn der <code>readyState</code> der WebSocket-Verbindung auf <code>CLOSED</code> wechselt. Den Listener erreicht ein <a href="https://developer.mozilla.org/en/WebSockets/WebSockets_reference/CloseEvent" title="en/WebSockets/WebSockets reference/CloseEvent"><code>CloseEvent</code></a> welches "close" heißt.</td> + </tr> + <tr> + <td><code>onerror</code></td> + <td>{{ domxref("EventListener") }}</td> + <td>Ein Event-Listener welcher bei Fehlern aufgerufen wird. Dies ist ein einfaches Event welches "error" genannt wird.</td> + </tr> + <tr> + <td><code>onmessage</code></td> + <td>{{ domxref("EventListener") }}</td> + <td>Ein Event-Listener welcher aufgerufen wird, wenn eine Nachricht vom Server empfangen wird. Den Listener erreicht ein <a href="https://developer.mozilla.org/en/WebSockets/WebSockets_reference/MessageEvent" title="en/WebSockets/WebSockets reference/MessageEvent"><code>MessageEvent</code></a> welches "message" heißt.</td> + </tr> + <tr> + <td><code>onopen</code></td> + <td>{{ domxref("EventListener") }}</td> + <td>Ein Event-Listener welcher aufgerufen wird, wenn der <code>readyState</code> der WebSocket-Verbindung auf <code>OPEN</code> wechselt; dies indiziert, dass die Verbindung bereit ist, dass man Daten versenden und empfangen kann. Dieses Event ist eine einfaches Event, es heißt "open".</td> + </tr> + <tr> + <td><code>protocol</code></td> + <td>{{ DOMXref("DOMString") }}</td> + <td>Ein String welcher dne Namen des Sub-Protokolls nennt, welches vom Server ausgewählt wurde; dieses Protokoll wird eines sein, welches in den Strings des <code>protocols</code>-Parameter beim Erstellen des WebSocket-Objekt angegeben wurde.</td> + </tr> + <tr> + <td><code>readyState</code></td> + <td><code><a href="/en/unsigned_short" title="en/unsigned short">unsigned short</a></code></td> + <td>Der aktuelle Status der Verbindung; dies ist einer der {{ anch("Ready state Konstanten") }}. <strong>Read only.</strong></td> + </tr> + <tr> + <td><code>url</code></td> + <td>{{ DOMXref("DOMString") }}</td> + <td>Die URL welche beim Konstruktor angegeben wurde. Dies ist immer die absolute URL. <strong>Read only.</strong></td> + </tr> + </tbody> +</table> + +<h2 id="Constants" name="Constants">Konstanten</h2> + +<h3 id="Ready_state_Konstanten">Ready state Konstanten</h3> + +<p>Diese Konstanten werden vom <code>readyState</code> Attribut genutzt, um den Status der WebSocket-Verbindung zu beschreiben.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Konstante</td> + <td class="header">Inhalt</td> + <td class="header">Beschreibung</td> + </tr> + <tr> + <td><code>CONNECTING</code></td> + <td><code>0</code></td> + <td>Die Verbindung ist noch nicht hergestellt.</td> + </tr> + <tr> + <td><code>OPEN</code></td> + <td><code>1</code></td> + <td>Die Verbindung ist hergestellt und bereit darüber zu kommunizieren.</td> + </tr> + <tr> + <td><code>CLOSING</code></td> + <td><code>2</code></td> + <td>Die Verbindung ist im Prozess des Schließens.</td> + </tr> + <tr> + <td><code>CLOSED</code></td> + <td><code>3</code></td> + <td>Die Verbindung ist geschlossen oder konnte nicht hergestellt werden.</td> + </tr> + </tbody> +</table> + +<h2 id="Methods" name="Methods">Methoden</h2> + +<h3 id="close()" name="close()">close()</h3> + +<p>Schließt die WebSocket-Verbindung oder den Verbindungsversuch, falls dieser gerade existiert. Falls die Verbindung bereits <code>CLOSED</code> ist, macht diese Methode überhaupt nichts.</p> + +<pre class="eval">void close( + in optional unsigned short code, + in optional DOMString reason +); +</pre> + +<h6 id="Parameters" name="Parameters">Parameter</h6> + +<dl> + <dt><code>code</code> {{ optional_inline() }}</dt> + <dd>Eine Nummer welche den Status-Code setzt, warum die Verbindung geschlossen wird. Falls dieser Parameter nicht gesetzt wird, wird er auf 1005 (welcher bei einer normalen Verbindung "Keinen Status erhalten" bedeutet) gesetzt.</dd> + <dt><code>reason</code> {{ optional_inline() }}</dt> + <dd>Ein vom Menschen lesbarer String, welcher erklärt, warum die Verbindung geschlossen wurde. Dieser Text darf nicht länger als 123 Bytes UTF-8-Text sein. Dabei heißt dies nicht unbedingt, dass es auch 123 Zeichen sind.</dd> +</dl> + +<h6 id="Exceptions_thrown">Exceptions thrown</h6> + +<dl> + <dt><code>INVALID_ACCESS_ERR</code></dt> + <dd>Ein ungültiger <code>code</code> wurde gesetzt.</dd> + <dt><code>SYNTAX_ERR</code></dt> + <dd>Der <code>reason</code>-String ist zu lang oder enthält ungültige Zeichen.</dd> +</dl> + +<h6 id="Notizen">Notizen</h6> + +<p>In Gecko vor Version Gecko 8.0 unterstützte diese Methode überhaupt keine Parameter. {{ geckoRelease("8.0") }}.</p> + +<h3 id="send()" name="send()">send()</h3> + +<p>Überträgt Daten zu dem Server über die WebSocket-Verbindung.</p> + +<pre class="eval">void send( + in DOMString data +); + +void send( + in ArrayBuffer data +); + +void send( + in Blob data +); +</pre> + +<h6 id="Parameters" name="Parameters">Parameter</h6> + +<dl> + <dt><code>data</code></dt> + <dd>Ein String der zum Server geschickt wird.</dd> +</dl> + +<h6 id="Exceptions_thrown_2">Exceptions thrown</h6> + +<dl> + <dt><code>INVALID_STATE_ERR</code></dt> + <dd>Die Verbindung hat aktuell nicht den Status <code>OPEN</code>.</dd> + <dt><code>SYNTAX_ERR</code></dt> + <dd><code>data</code> enthält ungültige Zeichen.</dd> +</dl> + +<h6 id="Erläuterung">Erläuterung</h6> + +<div class="note"> +<p><strong>Notiz:</strong> Geckos Implementierung von der <code>send()</code> Methode unterscheidet sich ein wenig von der Spezifikation in {{Gecko("6.0")}}; Gecko gibt einen <code>boolean</code> zurück, welcher darüber auskunft gibt, ob die Verbindung immer noch hergestellt ist oder nicht (und, durch Erweiterung, dass die Daten erfolgreich gesammelt oder übertragen wurden); dies wurde in {{Gecko("8.0")}} korrigiert.</p> + +<p>In {{Gecko("11.0")}} ist die Unterstützung für <code><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer">ArrayBuffer</a></code> implementiert aber nicht die für {{ domxref("Blob") }} Datentypen.</p> +</div> + +<h2 id="See_also" name="See_also">Weiterführendes</h2> + +<ul> + <li><a href="/en/WebSockets/Writing_WebSocket_client_applications" title="en/WebSockets/Writing WebSocket client applications">Writing WebSocket client applications</a></li> + <li><a class="external" href="http://dev.w3.org/html5/websockets/" title="http://dev.w3.org/html5/websockets/">HTML5: WebSockets</a></li> +</ul> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilitä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>{{ CompatGeckoDesktop("2.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Sub-protocol support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("6.0") }}</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>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>{{ CompatGeckoMobile("7.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Sub-protocol support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("7.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko_Notizen">Gecko Notizen</h3> + +<p>In Gecko 6.0 ist der Konstruktur mit einem Prefix ausgestattet; du must <code>MozWebSocket()</code> benutzen:</p> + +<pre>var mySocket = new MozWebSocket("<span class="plain">http://www.example.com/socketserver</span>"); +</pre> + +<p>Das <code>extensions</code>-Attribut wurde bis Gecko 8.0 nicht unterstützt.</p> + +<div class="note"><strong>Notiz:</strong> Vor {{Gecko("11.0")}} ausgehende Nachrichten welche mit der {{ manch("send") }} Methode versendet wurden, waren auf 16 MB begrenzt. Jetzt können sie bis zu 2 GB wachsen.</div> + +<p>{{ languages ( {"zh-tw": "zh_tw/WebSockets/WebSockets_reference/WebSocket"} ) }}</p> diff --git a/files/de/web/api/websocket/onclose/index.html b/files/de/web/api/websocket/onclose/index.html new file mode 100644 index 0000000000..9e112fb499 --- /dev/null +++ b/files/de/web/api/websocket/onclose/index.html @@ -0,0 +1,45 @@ +--- +title: WebSocket.onclose +slug: Web/API/WebSocket/onclose +tags: + - API + - Eigenschaft + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/onclose +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>Die Eigenschaft <code><strong>WebSocket.onclose</strong></code> ist ein {{domxref("EventHandler")}}, der aufgerufen wird, wenn die Eigenschaft {{domxref("WebSocket.readyState","WebSocket.readyState")}} zu {{domxref("WebSocket.readyState","CLOSED")}} geändert bzw. die Verbindung geschlossen wird.</p> + +<p>Als Parameter übergeben wird ein {{domxref("CloseEvent")}}.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>aWebSocket</em>.onclose = function(event) { + console.log("WebSocket is closed now."); +};</pre> + +<h2 id="Wert">Wert</h2> + +<p>Ein {{domxref("EventListener")}}.</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('HTML WHATWG', '#handler-websocket-onclose', 'WebSocket: onclose')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/de/web/api/websocket/protocol/index.html b/files/de/web/api/websocket/protocol/index.html new file mode 100644 index 0000000000..ca76edd3a2 --- /dev/null +++ b/files/de/web/api/websocket/protocol/index.html @@ -0,0 +1,51 @@ +--- +title: WebSocket.protocol +slug: Web/API/WebSocket/protocol +tags: + - API + - Eigenschaft + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/protocol +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>Die Eigenschaft <strong><code>WebSocket.protocol</code></strong> gibt den Namen des Unterprotokolls zurück, welches der Server ausgewählt hat. Sie ist nur lesbar.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var protocol = <em>aWebSocket</em>.protocol;</pre> + +<h2 id="Wert">Wert</h2> + +<p>A <a href="/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a>.</p> + +<p>Entweder ist der String leer, oder enthält den Namen eines der Protokolle, welche im {{domxref("WebSocket")}} Konstruktor mit dem Parameter <code>protocols</code> übergeben wurden.</p> + +<p><a href="/de/docs/Web/API/WebSocket/WebSocket#Parameters">Siehe hier.</a></p> + +<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('HTML WHATWG', '#dom-websocket-protocol', 'WebSocket: protocol')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("api.WebSocket.protocol")}}</p> diff --git a/files/de/web/api/websocket/readystate/index.html b/files/de/web/api/websocket/readystate/index.html new file mode 100644 index 0000000000..9abc994d65 --- /dev/null +++ b/files/de/web/api/websocket/readystate/index.html @@ -0,0 +1,77 @@ +--- +title: WebSocket.readyState +slug: Web/API/WebSocket/readyState +tags: + - API + - Eigenschaft + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/readyState +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>Die Eigenschaft <strong><code>WebSocket.readyState</code></strong> gibt den momentanen Status einer {{domxref("WebSocket")}} Verbindung zurück. Sie ist nur lesbar.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var readyState = <em>aWebSocket</em>.readyState;</pre> + +<h2 id="Werte">Werte</h2> + +<p>Einer der folgenden Werte kann vorhanden sein:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Wert</td> + <td class="header">Status</td> + <td class="header">Beschreibung</td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>CONNECTING</code></td> + <td>Der Socket wurde erstellt, jedoch besteht noch keine Verbindung.</td> + </tr> + <tr> + <td><code>1</code></td> + <td><code>OPEN</code></td> + <td>Eine Verbindung wurde hergestellt und kann zur Kommunikation genutzt werden.</td> + </tr> + <tr> + <td><code>2</code></td> + <td><code>CLOSING</code></td> + <td>Die Verbindung wird beendet.</td> + </tr> + <tr> + <td><code>3</code></td> + <td><code>CLOSED</code></td> + <td>Die Verbindung wurde geschlossen oder konnte nicht geöffnet werden.</td> + </tr> + </tbody> +</table> + +<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('HTML WHATWG', '#dom-websocket-readystate', 'WebSocket: readyState')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("api.WebSocket.readyState")}}</p> diff --git a/files/de/web/api/websocket/url/index.html b/files/de/web/api/websocket/url/index.html new file mode 100644 index 0000000000..56e0852dea --- /dev/null +++ b/files/de/web/api/websocket/url/index.html @@ -0,0 +1,47 @@ +--- +title: WebSocket.url +slug: Web/API/WebSocket/url +tags: + - API + - Eigenschaft + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/url +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>Die Eigenschaft <strong><code>WebSocket.url</code></strong> gibt die absolute URL eines {{domxref("WebSocket")}} zurück, wie sie im Konstruktor angegeben wurde. Sie ist nur lesbar.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>var url</em> = aWebSocket.url;</pre> + +<h2 id="Wert">Wert</h2> + +<p>Ein <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a>.</p> + +<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('HTML WHATWG', '#dom-websocket-url', 'WebSocket: url')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("api.WebSocket.url")}}</p> diff --git a/files/de/web/api/webxr_device_api/index.html b/files/de/web/api/webxr_device_api/index.html new file mode 100644 index 0000000000..69e10d7d3b --- /dev/null +++ b/files/de/web/api/webxr_device_api/index.html @@ -0,0 +1,298 @@ +--- +title: WebXR-Geräte-API +slug: Web/API/WebXR_Device_API +translation_of: Web/API/WebXR_Device_API +--- +<p>{{APIRef("WebXR Device API")}}{{Draft}}</p> + +<p><span class="seoSummary"><strong>WebXR</strong> ist eine Gruppe von Standards, die zusammen verwendet werden, um das Rendern von 3D-Szenen auf Hardware zu unterstützen, die für die Darstellung virtueller Welten<strong>(Virtuelle Realität</strong>oder <strong>VR )</strong>entwickelt wurde, oder um der realen Welt grafische Bilder hinzuzufügen (<strong>Augmented Reality</strong>oder <strong>AR</strong>).</span> Die <strong>WebXR-Geräte-API</strong> implementiert den Kern des WebXR-Feature-Sets, verwaltet die Auswahl von Ausgabegeräten, rendert die 3D-Szene mit der entsprechenden Bildrate auf das ausgewählte Gerät und verwaltet Bewegungsvektoren, die mit Eingabecontrollern erstellt wurden.</p> + +<p>WebXR-kompatible Geräte umfassen vollständig immersive 3D-Headsets mit Bewegungs- und Orientierungsverfolgung, Brillen, die Grafiken über der realen Szene überlagern, die durch die Rahmen gehen, und Handheld-Handys, die die Realität erweitern, indem sie die Welt mit einer Kamera erfassen und diese Szene mit computergenerierten Bildern ergänzen.</p> + +<p>Um dies zu erreichen, bietet die WebXR-Geräte-API die folgenden Schlüsselfunktionen:</p> + +<ul> + <li>Finden Sie kompatible VR- oder AR-Ausgangsgeräte</li> + <li>Rendern einer 3D-Szene auf dem Gerät mit einer entsprechenden Bildrate</li> + <li>(Optional) spiegeln Sie den Ausgang auf ein 2D-Display</li> + <li>Erstellen von Vektoren, die die Bewegungen von Eingabesteuerelementen darstellen</li> +</ul> + +<p>Auf der grundlegendsten Ebene wird eine Szene in 3D dargestellt, indem die Perspektive berechnet wird, die auf die Szene angewendet werden soll, um sie aus der Sicht jedes benutzerischen Augen zu rendern, wobei der typische Abstand zwischen den Augen berücksichtigt wird, und dann die Szene zweimal, einmal für jedes Auge, gerendert wird. Die resultierenden Bilder (oder Bilder, wenn die Szene zweimal auf einem einzigen Frame gerendert wird, die Hälfte pro Auge) werden dann dem Benutzer angezeigt.</p> + +<p>Da <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> zum Rendern der 3D-Welt in die WebXR-Sitzung verwendet wird, sollten Sie zunächst mit der allgemeinen Verwendung von WebGL und mit den Grundlagen der 3D-Grafik im Allgemeinen vertraut sein. Sie verwenden höchstwahrscheinlich nicht direkt die WebGL-API, sondern eines der Frameworks oder Bibliotheken, die auf WebGL erstellt werden, um die Verwendung zu erleichtern. Zu den beliebtesten von ihnen ist <a href="https://threejs.org/">three.js</a>.</p> + +<p>Ein besonderer Vorteil der Verwendung einer Bibliothek anstelle der direkten Verwendung der WebGL-API besteht darin, dass Bibliotheken dazu neigen, virtuelle Kamerafunktionen zu implementieren. OpenGL (und damit WebGL durch Erweiterung) bietet nicht direkt eine Kameraansicht, mit einer Bibliothek, die eine in Ihrem Namen simuliert kann Ihre Arbeit viel, viel einfacher machen, vor allem beim Erstellen von Code, die freie Bewegung durch Ihre virtuelle Welt ermöglicht.</p> + +<h2 id="Wichtige_Gesundheits-_und_Sicherheitshinweise">Wichtige Gesundheits- und Sicherheitshinweise</h2> + +<p>Da der gesamte Akt der Schaffung einer virtuellen 3D-Welt im Wesentlichen ein Trick ist, der unser Verständnis davon nutzt, wie Augen Licht sammeln und wie das Gehirn die gesammelten Daten interpretiert, ist es wichtig zu bedenken, dass Software-Designer und Entwickler als solche die Verantwortung haben, noch vorsichtiger als üblich zu sein, um sicherzustellen, dass die Ergebnisse korrekt sind.</p> + +<p>Defekte, Fehlstellungen oder Verzerrungen können die Augen und das Gehirn verwirren, was zu allem von schmerzenden Augen oder Kopfschmerzen bis hin zu schwindelerregendem Schwindel, Schwindel oder potenziell schwerer Übelkeit führt. Es ist auch wichtig, wachsam zu sein für alles, was Sie anzeigen können, die das Potenzial haben können, Anfälle auszulösen, angesichts der allumfassenden Natur der VR-Brille; Der Benutzer ist möglicherweise nicht in der Lage, schnell von den Bildern wegzuschauen, die Sie präsentieren, wenn es Zuflucht verursacht.</p> + +<p>Wenn Sie Inhalte haben, die für Benutzer von Gefahr sein können, sollten Sie eine Warnmeldung bereitstellen. Besser sicher sein als entschuldigung!</p> + +<h2 id="WebXR_Device_API-Konzepte_und_-Nutzung">WebXR Device API-Konzepte und -Nutzung</h2> + +<h3 id="WebXR_AR_and_VR">WebXR: AR and VR</h3> + +<figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 20em; margin-bottom: 1em; margin-right: 2em; float: left;"> +<figcaption>Example WebXR hardware setup</figcaption> +<img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labeled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png"></figure> + +<p>While the older <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> was designed solely to support Virtual Reality (VR), WebXR provides support for both VR and Augmented Reality (AR) on the web. Support for AR functionality is added by the WebXR Augmented Reality Module.</p> + +<p>A typical XR device can have either 3 or 6 degrees of freedom and might or might not have an external positional sensor.</p> + +<p>The equipment may also include an accelerometer, barometer, or other sensors which are used to sense when the user moves through space, rotates their head, or the like.</p> + +<h3 id="WebXR_application_lifecycle">WebXR application lifecycle</h3> + +<p>Most applications using WebXR will follow a similar overall design pattern:</p> + +<ol> + <li>Check to see if the user's device and browser are both capable of presenting the XR experience you want to provide. + <ol> + <li>Make sure the WebXR API is available; if {{domxref("navigator.xr")}} is undefined, you can assume the user's browser and/or device doesn't support WebXR. If it's not supported, disable any user interface used to activate XR features and abort any attempts to enter XR mode.</li> + <li>Call {{DOMxRef("XR.isSessionSupported","navigator.xr.isSessionSupported()")}}, specifying the WebXR experience mode you want to provide: , , or , in order to determine whether or not the type of session you wish to provide is available.<code>inline</code><code>immersive-vr</code><code>immersive-ar</code></li> + <li>If the session type you want to use is available, provide the appropriate interface to the user to allow them to activate it.</li> + </ol> + </li> + <li>When the user requests the activation of WebXR functionality by engaging with the user interface enabled above, request an {{DOMxRef("XRSession")}} using the desired mode. This is done by calling {{DOMxRef("XR.requestSession","navigator.xr.requestSession()")}}, again specifying the string indicating the mode you want to enable: , , or .<code>inline</code><code>immersive-vr</code><code>immersive-ar</code></li> + <li>If the promise returned by resolves, use the new {{domxref("XRSession")}} to run the frame loop for the entire duration of the WebXR experience.<code>requestSession()</code> + <ol> + <li>Call the {{domxref("XRSession")}} method {{DOMxRef("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} to schedule the first frame render for the XR device.</li> + <li>Each callback should use the information provided about the objects located in the 3D world to render the frame using WebGL.<code>requestAnimationFrame()</code></li> + <li>Keep calling {{DOMxRef("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} from within the callback to schedule each successive frame to be rendered.</li> + </ol> + </li> + <li>When the time comes, end the XR session; otherwise, continue the loop until the user chooses to exit XR mode. + <ol> + <li>To end the XR session yourself, call {{DOMxRef("XRSession.end", "XRSession.end()")}}.</li> + <li>Include a handler for the {{domxref("XRSession")}} event {{domxref("XRSession.end_event", "end")}} event to be informed when the session is ending, regardless of whether your code, the user, or the browser initiated the termination of the session.</li> + </ol> + </li> +</ol> + +<h3 id="Permissions_and_security">Permissions and security</h3> + +<p>The WebXR Device API is subject to a number of permission and security controls. While not onerous, they are worth being aware of. These mostly revolve around the fully-immersive session mode, but there are things to be aware of when setting up an AR session, as well.<code>immersive-vr</code></p> + +<h4 id="Immersive_presentation_of_VR">Immersive presentation of VR</h4> + +<p>First, any requests to activate the mode are rejected if the domain issuing the request does not have permission to enable an immersive session. This permission comes from the <a href="/en-US/docs/Web/HTTP/Feature_Policy">feature policy</a>.<code>immersive-vr</code><code>xr-spatial-tracking</code></p> + +<p>Once that check is passed, the request to enter mode is allowed if all of the following are true:<code>immersive-vr</code></p> + +<ul> + <li>The call was issued by code executing within the handler for a user event, or the from the startup code for a user-launched <a href="/en-US/docs/Web/Progressive_web_apps">web application</a>.<code>requestSession()</code></li> + <li>The document is considered trustworthy, in that it is responsible and is both currently active and has focus.</li> + <li>The user's intent to enter immersive VR mode is well understood; see {{anch("User intent")}} below for details.</li> +</ul> + +<p>If all of that is true, the promise returned by is resolved, and the new {{domxref("XRSession")}} object is passed into the fulfillment handler. Otherwise, an appropriate exception is thrown, such as if the document doesn't have permission to enter immersive mode.<code>requestSession()</code><code>SecurityError</code></p> + +<h4 id="Inline_presentation">Inline presentation</h4> + +<p>When you request an {{domxref("XRSession")}} with the mode set to , and any features are required or requested, the browser will only allow the session to be created if the call to {{domxref("XR.requestSession", "requestSession()")}} was made by code which is executing expressly due to <strong>user intent</strong>.<code>inline</code></p> + +<p>Specifically:</p> + +<ul> + <li>If the call isn't coming from within the handler executed in response to a user event, and is not being issued while launching a web application, the request is denied and is delivered to the promise's fulfillment handler.<code>requestSession()</code><code>false</code></li> + <li>If the document making the request isn't the one which is responsible for the script, the request is denied.</li> + <li>If the document making the request isn't trustworthy, the request is denied and is returned through the promise's fulfillment routine. A trustworthy document is one which is both responsible and active, and which currently has focus.<code>false</code></li> + <li>If the user's intent to open an inline XR presentation is not well understood, the request is denied. Understanding of the {{anch("User intent", "user's intent")}} may be either implicit or explicit.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Additional requirements may be put into effect due to the specific features requested by the options object when calling .<code>requestSession()</code></p> +</div> + +<h4 id="User_intent">User intent</h4> + +<p><strong>User intent</strong> is the concept of whether or not an action being performed by code is being performed because of something the user intends to do or not. There are two kinds of user intent: <strong>implicit</strong> and <strong>explicit</strong>.</p> + +<p><strong>Explicit user intent</strong> (explicit user consent) is granted when the user has specifically and expressly been asked for permission to perform an action.</p> + +<p><strong>Implicit user intent</strong> (implicit user consent) is assumed if either of the following scenarios is the case:</p> + +<ul> + <li>The user has interacted with the document in some way which has in turn caused your request to occur. For example, if you have an "Enter XR mode" button, and the user clicks it, calling from the button's {{domxref("Element.click_event", "click")}} event handler will permitted.<code>requestSession()</code></li> + <li>If your code is executing during the launch of a web application, the runtime may consider the act of launching your web application to qualify as user intent.</li> +</ul> + +<h3 id="WebXR_availability">WebXR availability</h3> + +<p>As a new and still in development API, WebXR support is limited to specific devices and browsers; and even on those, it may not be enabled by default. There may be options available to allow you to experiment with WebXR even if you don't have a compatible system, however.</p> + +<h4 id="WebXR_polyfill">WebXR polyfill</h4> + +<p>The team designing the WebXR specification has published a <a href="https://github.com/immersive-web/webxr-polyfill">WebXR polyfill</a> which you can use to simulate WebXR on browsers which don't have support for the WebXR APIs. If the browser supports the older <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a>, that is used. Otherwise, the polyfill falls back to an implementation which uses Google's Cardboard VR API.</p> + +<p>The polyfill is maintained alongside the specification, and is kept up to date with the specification. Additionally, it is updated to maintain compatibility with browsers as their support for WebXR and other technologies related to it and to the implementation of the polyfill change over time.</p> + +<p>Be sure to read the readme carefully; the polyfill comes in several versions depending on what degree of compatibility with newer JavaScript features your target browsers include.</p> + +<h4 id="WebXR_API_Emulator_extension">WebXR API Emulator extension</h4> + +<p>The <a href="https://mixedreality.mozilla.org/">Mozilla WebXR team</a> has created a <a href="https://blog.mozvr.com/webxr-emulator-extension/">WebXR API Emulator</a> browser extension, compatible with both Firefox and Chrome, which emulates the WebXR API, simulating a variety of compatible devices such as the HTC Vive, the Oculus Go and Oculus Quest, Samsung Gear, and Google Cardboard. With the extension in place, you can open up a developer tools panel that lets you control the position and orientation of the headset and any hand controllers, as well as button presses on the controllers.</p> + +<h5 id="Emulator_usage">Emulator usage</h5> + +<p>While somewhat awkward compared to using an actual headset, this makes it possible to experiment with and developer WebXR code on a desktop computer, where WebXR isn't normally available. It also lets you perform some basic testing before taking your code to a real device. Be aware, however, that the emulator does not yet completely emulate all of the WebXR API, so you may run into problems you're not expecting. Again, carefully read the readme file and make sure you're aware of the limitations before you begin.</p> + +<div class="blockIndicator note"> +<p><strong>Important:</strong> You should <em>always</em> test your code on actual AR and/or VR hardware before releasing or shipping a product! Emulated, simulated, or polyfilled environments are <em>not</em> an adequate substitute for actual testing on physical devices.</p> +</div> + +<h5 id="Getting_the_extension">Getting the extension</h5> + +<p>Download the WebXR API Emulator for your supported browser below:</p> + +<ul> + <li><a href="https://chrome.google.com/webstore/detail/webxr-api-emulator/mjddjgeghkdijejnciaefnkjmkafnnje">Google Chrome</a></li> + <li><a href="https://addons.mozilla.org/en-US/firefox/addon/webxr-api-emulator/">Mozilla Firefox</a></li> +</ul> + +<p>The <a href="https://github.com/MozillaReality/WebXR-emulator-extension">source code for the extension</a> is also available on GitHub.</p> + +<h5 id="Emulator_issues_and_notes">Emulator issues and notes</h5> + +<p>While this isn't the place for a full article about the extension, there are some specific things worth mentioning.</p> + +<p>Version 0.4.0 of the extension was announced on March 26, 2020. It introduced support for augmented reality (AR) through the <a href="https://www.w3.org/TR/webxr-ar-module-1/">WebXR AR Module</a>, which has is approaching a stable state. Documentation for AR is forthcoming shortly here on MDN.</p> + +<p>Other improvements include updating the emulator to rename the interface to {{domxref("XRSystem")}}, introduce support for squeeze (grip) input sources, and add support for the {{domxref("XRInputSource")}} property {{domxref("XRInputSource.profiles", "profiles")}}.<code>XR</code></p> + +<h2 id="Accessing_the_WebXR_API">Accessing the WebXR API</h2> + +<p>To gain access to the WebXR API within the context of a given window, use the {{domxref("navigator.xr")}} property.</p> + +<dl> + <dt>{{domxref("navigator.xr")}} {{ReadOnlyInline}}</dt> + <dd>This property, added to the {{domxref("Navigator")}} interface, returns the {{domxref("XR")}} object through which the WebXR API is exposed. If this property is missing or , WebXR is not available.<code>null</code></dd> +</dl> + +<h2 id="WebXR_interfaces">WebXR interfaces</h2> + +<dl> + <dt>{{DOMxRef("XR")}}</dt> + <dd>The {{domxref("Navigator.xr", "navigator.xr")}} property returns the window's instance of {{domxref("XR")}}, which is the mechanism by which your code accesses the WebXR API. Using the interface, you can create {{domxref("XRSession")}}s to represent actual AR and/or VR sessions.<code>XR</code></dd> + <dt>{{DOMxRef("XRFrame")}}</dt> + <dd>While presenting an XR session, the state of all tracked objects which make up the session are represented by an . To get an , call the session's {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} method, providing a callback which will be called with the once available. Events which communicate tracking states will also use to contain that information.<code>XRFrame</code><code>XRFrame</code><code>XRFrame</code><code>XRFrame</code></dd> + <dt>{{DOMxRef("XRRenderState")}}</dt> + <dd>Provides a set of configurable properties which change how the imagery output by an is composited.<code>XRSession</code></dd> + <dt>{{DOMxRef("XRSession")}}</dt> + <dd>Provides the interface for interacting with XR hardware. Once an is obtained from {{domxref("XR.requestSession()")}}, the session can be used to check the position and orientation of the viewer, query the device for environment information, and present the virtual or augmented world to the user.<code>XRSession</code></dd> + <dt>{{DOMxRef("XRSpace")}}</dt> + <dd><code>XRSpace</code> is an opaque base class on which all virtual coordinate system interfaces are based. Positions in WebXR are always expressed in relation to a particular at the time at which a particular {{domxref("XFrame")}} takes place. The space's coordinate system has its origin at the a given physical position.<code>XRSpace</code></dd> + <dt>{{DOMxRef("XRReferenceSpace")}}</dt> + <dd>A subclass of {{domxref("XRSpace")}} which is used to identify a spatial relationship in relation to the user's physical environment. The coordinate system is expected to remain unchanged through the lifespan of the {{domxref("XRSession")}}.The world has no boundaries and extends infinitely in every direction.<code>XRReferenceSpace</code></dd> + <dt>{{DOMxRef("XRBoundedReferenceSpace")}}</dt> + <dd><code>XRBoundedReferenceSpace</code> extends the {{domxref("XRReferenceSpace")}} coordinate system to further include support for a finite world with set boundaries. Unlike , the origin must be located on the floor (that is, <em>y</em> = 0 at the floor). The x and z components of the origin are typically presumed to be located at or near the center of the room or surface.<code>XRReferenceSpace</code></dd> + <dt>{{DOMxRef("XRView")}}</dt> + <dd>Represents a single view into the XR scene for a particular frame. Each corresponds to the video display surface used to present the scene to the user. For example, a given XR device might have two views: one for the left eye and one for the right. Each view has an offset used to shift the position of the view relative to the camera, in order to allow for creating stereographic effects.<code>XRView</code></dd> + <dt>{{DOMxRef("XRViewport")}}</dt> + <dd>Describes a viewport. A viewport is a rectangular portion of a graphic surface.</dd> + <dt>{{DOMxRef("XRRigidTransform")}}</dt> + <dd>A transform defined using a position and orientation in the virtual space's coordinate system as described by the {{domxref("XRSpace")}}.</dd> + <dt>{{DOMxRef("XRPose")}}</dt> + <dd>Describes a position and orientation in space relative to an {{domxref("XRSpace")}}.</dd> + <dt>{{DOMxRef("XRViewerPose")}}</dt> + <dd>Based on {{domxref("XRPose")}}, specifies the state of a viewer of the WebXR scene as indicated by the XR device. Included is an array of {{domxref("XRView")}} objects, each representing one perspective on the scene. For example, it takes two views to create the stereoscopic view as perceived by human vision—one for the left eye and a second for the right eye. One view is offset to the left slightly from the viewer's position, and the other view is offset to the right by the same distance. The view list can also be used to represent the perspectives of each of the spectators of a scene, in a multi-user environment.<code>XRViewerPose</code></dd> + <dt>{{DOMxRef("XRInputSource")}}</dt> + <dd>Represents any input device the user can use to perform targeted actions within the same virtual space as the viewer. Input sources may include devices such as hand controllers, optical tracking systems, and other devices which are explicitly associated with the XR device. Other input devices such as keyboards, mice, and gamepads are not presented as instances.<code>XRInputSource</code></dd> + <dt>{{DOMxRef("XRWebGLLayer")}}</dt> + <dd>A layer which serves as a <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> frame buffer into which a scene's view is rendered. Using WebGL to render the scene gains substantial performance benefits due to graphics acceleration.</dd> +</dl> + +<h3 id="Event_interfaces">Event interfaces</h3> + +<p>The following interfaces are used to represent the events used by the WebXR API.</p> + +<dl> + <dt>{{domxref("XRInputSourceEvent")}}</dt> + <dd>Sent when the state of an {{domxref("XRInputSource")}} changes. This can happen, for example, when the position and/or orientation of the device changes, or when buttons are pressed or released.</dd> + <dt>{{domxref("XRInputSourcesChangeEvent")}}</dt> + <dd>Sent to indicate that the set of available input sources has changed for the {{domxref("XRSession")}}.</dd> + <dt>{{domxref("XRReferenceSpaceEvent")}}</dt> + <dd>Sent when the state of an {{domxref("XRReferenceSpace")}} changes.</dd> + <dt>{{domxref("XRSessionEvent")}}</dt> + <dd>Sent to indicate that the state of an {{domxref("XRSession")}} has changed. For example, if the position and/or orient</dd> +</dl> + +<h2 id="Extensions_to_the_WebGL_API">Extensions to the WebGL API</h2> + +<p>The WebGL API is extended by the WebXR specification to augment the WebGL context to allow it to be used to render views for display by a WebXR device.</p> + +<dl> + <dt>{{domxref("WebGLRenderingContextBase.makeXRCompatibile()")}}</dt> + <dd>Configures the WebGL context to be compatible with WebXR. If the context was not initially created with the {{domxref("WebGLContextAttributes.xrCompatible", "xrCompatible")}} property set to , you must call prior to attempting to use the WebGL context for WebXR rendering. Returns a {{jsxref("promise")}} which resolves once the context has been prepared, or is rejected if the context cannot be configured for use by WebXR.<code>true</code><code>makeXRCompatible()</code></dd> +</dl> + +<h2 id="Guides_and_tutorials">Guides and tutorials</h2> + +<p>The following guides and tutorials are a great resource to learn how to comprehend WebXR and the underlying 3D and VR/AR graphics concepts.</p> + +<dl> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Fundamentals">Fundamentals of WebXR</a></dt> + <dd>Before diving into the details of how to create content using WebXR, it may be helpful to read this overview of the technology, which includes introductions to terminology that may be unfamiliar to you, or which may be used in a new way.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a></dt> + <dd>A guide covering how matrices can be used on the web, including both for CSS transforms and for WebGL purposes, as well as to handle the positioning and orientation of objects in WebXR contexts.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Startup_and_shutdown">Setting up and shutting down a WebXR session</a></dt> + <dd>Before actually presenting a scene using an XR device such as a headset or goggles, you need to create a WebXR session bound to a rendering layer that draws the scene for presentation in each of the XR device's displays so that the 3D effect can be presented to the user. This guide covers how to create and stop WebXR sessions.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Permissions_and_security">Permissions and security for WebXR</a></dt> + <dd>The WebXR Device API has several areas of security to contend with, from establishing feature-policy to ensuring the user intends to use the mixed reality presentation before activating it.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Geometry">Geometry and reference spaces in WebXR</a></dt> + <dd>In this guide, the required concepts of 3D geometry are briefly reviewed, and the fundamentals of how that geometry is represented in WebXR are detailed. Learn how reference spaces are used to position objects—and the viewer—and the differences among the available types of reference space, as well as their use cases.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Spatial_tracking">Spatial tracking in WebXR</a></dt> + <dd>This guide describes how objects—including the user's body and its parts—are located in space, and how their movement and orientation relative to one another is monitored and managed over time. This article explains the relationship between spaces, poses, viewers, and views.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Rendering">Rendering and the WebXR frame loop</a></dt> + <dd>Starting with how you schedule frames to be rendered, this guide then continues to cover how to determine the placement of objects in the view and how to then render them into the WebGL buffer used for each of the two eyes' views of the scene.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Cameras">Viewpoints and viewers: Simulating cameras in WebXR </a></dt> + <dd>WebGL (and therefore WebXR) doesn't really have a concept of a camera, which is the traditional concept used to represent a viewpoint in 3D graphics. In this article, we see how to simulate a camera and how to create the illusion of moving a viewer through a world in which the viewer doesn't really move.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Movement_and_motion">Movement, orientation, and motion: A WebXR example</a></dt> + <dd>In this example and tutorial, we use information learned throughout the WebXR documentation to create a scene containing a rotating cube which the user can move around using both VR headset and keyboard and mouse.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Bounded_reference_spaces">Using bounded reference spaces</a></dt> + <dd>In this article, we examine how to use a reference space to define the boundaries of where the viewer can safely move about without leaving the area tracked by their XR hardware or colliding with a physical obstacle. On devices which support it, can be a useful tool in your repertoire.<code>bounded-floor</code><code>bounded-floor</code></dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Performance">WebXR performance guide</a></dt> + <dd>Recommendations and tips to help you optimize the performance of your WebXR application.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Inputs">Inputs and input sources</a></dt> + <dd>A guide to input sources and how to efficiently manage the input devices being used to control the WebXR session, and how to receive and process user inputs from those devices.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Input_profiles">Using WebXR input profiles</a></dt> + <dd>A guide to interpreting the {{Glossary("JSON")}} data provided by the <a href="https://github.com/immersive-web/webxr-input-profiles/tree/master/packages/registry">WebXR Input Profiles Registry</a>, which can be used to determine what options and controls are available on the user's available input devices.</dd> + <dt><a href="/en-US/docs/Web/WebXR_Device_API/Gamepads">Supporting advanced controllers and gamepads in WebXR applications</a></dt> + <dd>WebXR uses the {{domxref("Gamepad")}} object to describe the controls available on complex input devices (such as hand controllers with multiple buttons and/or axes) and gamepad-like devices. In this guide, learn how to make use of these devices' controls.</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("WebXR")}}</td> + <td>{{Spec2("WebXR")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("api.Navigator.xr")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the web</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li> + <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a>: Accelerated 2D and 3D graphics on the web</li> + <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a>: 2D drawing for the web</li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li> +</ul> diff --git a/files/de/web/api/window/alert/index.html b/files/de/web/api/window/alert/index.html new file mode 100644 index 0000000000..841600419d --- /dev/null +++ b/files/de/web/api/window/alert/index.html @@ -0,0 +1,72 @@ +--- +title: Window.alert +slug: Web/API/Window/alert +tags: + - API + - DOM + - Method + - Reference + - Window +translation_of: Web/API/Window/alert +--- +<p>{{ APIRef }}</p> + +<p>Die <strong><code>Window.alert()</code></strong> Methode zeigt einen Alert-Dialog mit optional spezifiziertem Inhalt und einem OK-Button an.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">window.alert(<em>nachricht</em>);</pre> + +<ul> + <li><code>nachricht</code> ist ein optionaler Text-String, der im Dialog angezeigt werden soll, oder alternativ ein Objekt, das in einen Text-String umgewandelt und angezeigt wird.</li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: js">window.alert("Hello world!"); +</pre> + +<p>erzeugt:</p> + +<p><img alt="Image:AlertHelloWorld.png" src="/files/130/AlertHelloWorld.png"></p> + +<h2 id="Notes" name="Notes">Mehr JS:</h2> + +<pre class="line-numbers language-html"><code class="language-html">alert()</code></pre> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p>Der Alert-Dialog sollte für Nachrichten benutzt werden, die keine Reaktion des Nutzers benötigen, außer seiner/ihrer Bestätigung.</p> + +<p>Dialog-Boxen sind modale Fenster - der Rest der Oberfläche wird erst geladen, sobald die Box geschlossen wird. Deswegen sollten Funktionen, die Dialog-Boxen (oder modale Fenster) erzeugen, nicht zu oft benutzt werden.</p> + +<p><a href="https://developer.mozilla.org/en-US/Chrome" title="Chrome">Mozilla Chrome</a>-Nutzer (z. B. Firefox-Erweiterungen) sollten stattdessen Methoden des {{interface("nsIPromptService")}} verwenden.</p> + +<p>Ab Chrome {{CompatChrome(46.0)}} wird diese Methode innerhalb eines {{htmlelement("iframe")}} geblockt, solange sein Sandbox-Attribut nicht den Wert <code>allow-modal</code> enthält.</p> + +<p>{{gecko_minversion_inline("23.0")}} Das Argument ist nun optional, wie von der Spezifikation gefordert.</p> + +<h2 id="Specification" name="Specification">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('HTML5 Web application', '#dom-alert', 'alert()')}}</td> + <td>{{Spec2('HTML5 Web application')}}</td> + <td>Anfängliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{domxref("window.confirm","confirm")}}</li> + <li>{{domxref("window.prompt","prompt")}}</li> + <li>Für <a href="/en-US/docs/Chrome" title="/en-US/docs/Chrome">Mozilla Chrome</a>: {{ifmethod("nsIPromptService","alert")}} und {{ifmethod("nsIPromptService","alertCheck")}}</li> +</ul> diff --git a/files/de/web/api/window/applicationcache/index.html b/files/de/web/api/window/applicationcache/index.html new file mode 100644 index 0000000000..c8d47fc6ee --- /dev/null +++ b/files/de/web/api/window/applicationcache/index.html @@ -0,0 +1,33 @@ +--- +title: Window.applicationCache +slug: Web/API/Window/applicationCache +translation_of: Web/API/Window/applicationCache +--- +<p>{{APIRef}}</p> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p>Liefert eine Referenz auf das ApplicationCache Objekt für das aktuelle Fenster.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>cache</var> = window.applicationCache +</pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<ul> + <li><code>cache</code> ist eine Objektreferenz auf eine {{domxref("OfflineResourceList")}}.</li> +</ul> + +<h2 id="Specification" name="Specification">Spezification</h2> + +<ul> + <li>{{spec("http://www.w3.org/TR/2008/WD-html5-20080122/#appcache","HTML 5","WD")}}</li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/HTML/Using_the_application_cache">Using Application Cache</a></li> +</ul> diff --git a/files/de/web/api/window/cancelanimationframe/index.html b/files/de/web/api/window/cancelanimationframe/index.html new file mode 100644 index 0000000000..7d38ab5be4 --- /dev/null +++ b/files/de/web/api/window/cancelanimationframe/index.html @@ -0,0 +1,72 @@ +--- +title: Window.cancelAnimationFrame() +slug: Web/API/Window/cancelAnimationFrame +tags: + - API + - Animation + - DOM + - Experimentell + - Méthode +translation_of: Web/API/Window/cancelAnimationFrame +--- +<div>{{APIRef}}{{SeeCompatTable}}</div> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p>Stopt eine vorher durch {{domxref("window.requestAnimationFrame()")}} geplante Animation.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">window.cancelAnimationFrame(<em>requestID</em>); +</pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<dl> + <dt><code>requestID</code></dt> + <dd>Der ID Wert der beim Aufruf von {{domxref("window.requestAnimationFrame()")}} vorher zurückgegeben wurde.</dd> +</dl> + +<h2 id="Examples" name="Examples">Beispiel</h2> + +<pre class="brush: js">var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || + window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; + +var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame; + +var start = window.mozAnimationStartTime; // Nur unterstützt in FF. Andere Browsers können zB Date.now() benutzen. + +var myReq; + +function step(timestamp) { + var progress = timestamp - start; + d.style.left = Math.min(progress/10, 200) + "px"; + if (progress < 2000) { + myReq = requestAnimationFrame(step); + } +} +myReq = requestAnimationFrame(step); + +window.cancelAnimationFrame(myReq); +</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.Window.cancelAnimationFrame")}}</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li>{{spec("http://www.w3.org/TR/animation-timing/#cancelAnimationFrame", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}</li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("window.mozAnimationStartTime")}}</li> + <li>{{domxref("window.requestAnimationFrame()")}}</li> +</ul> diff --git a/files/de/web/api/window/close/index.html b/files/de/web/api/window/close/index.html new file mode 100644 index 0000000000..84c1630838 --- /dev/null +++ b/files/de/web/api/window/close/index.html @@ -0,0 +1,78 @@ +--- +title: Window.close() +slug: Web/API/Window/close +tags: + - API + - DOM + - Gecko + - Method + - Reference + - Window +translation_of: Web/API/Window/close +--- +<div>{{APIRef}}</div> + +<p>Die <code><strong>Window.close()</strong></code> Methode schließt das aktuelle Fenster oder das Fenster von dem sie aufgerufen wurde.</p> + +<p>Diese Methode kann nur von Fenstern aufgerufen werden, die ein Skript mit der {{domxref("Window.open()")}} Methode verwenden. Wenn das Fenster nicht durch ein Skript geöffnet wurde, erscheint ein so oder ähnlich lautender Fehler in der Konsole <code><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">Skripte können keine Fenster schließen, die nicht von ihnen geöffnet wurden.</span></span></span></span></code></p> + +<p>Zu beachten ist auch, dass <code>close()</code> keinen Effekt auf {{domxref("Window")}} Objekte hat, die per <code><a href="/en-US/docs/Web/API/HTMLIFrameElement/contentWindow">HTMLIFrameElement.contentWindow</a></code> zurückgegeben werden.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">window.close();</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Schließt_ein_Fenster_geöffnet_durch_window.open">Schließt ein Fenster, geöffnet durch <code>window.open()</code></h3> + +<p>Dieses Beispiel zeigt eine Funktion die ein Fenster öffnet eine zweite Funktion die es schließt. Das demonstriert wie <code>Window.close()</code> verwendet wird um ein Fenster zu schließen, das per {{domxref("window.open()")}} geöffnet wurde.</p> + +<pre class="brush: js">//Global var to store a reference to the opened window +var openedWindow; + +function openWindow() { + openedWindow = window.open('moreinfo.htm'); +} + +function closeOpenedWindow() { + openedWindow.close(); +} +</pre> + +<h3 id="Das_aktuelle_Fenster_schließen">Das aktuelle Fenster schließen</h3> + +<p>Wenn Sie in der Vergangenheit die <code>close()</code> Methode des window Objekts direkt aufgerufen haben, anstatt <code>close()</code> für eine <code>window</code> Instanz aufzurufen, hat der Browser das vorderste Fenster geschlossen, unabhängig davon, ob Ihr Skript dieses Fenster erstellt hat oder nicht. Dies ist nicht länger der Fall; Aus Sicherheitsgründen dürfen Skripte keine Fenster mehr schließen, die sie nicht geöffnet haben. (Firefox 46.0.1: Skripte können keine Fenster schließen, die sie nicht geöffnet hatten)</p> + +<pre class="brush: js">function closeCurrentWindow() { + window.close(); +} +</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('HTML WHATWG', '#dom-window-close', 'window.close()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "browsers.html#dom-window-close", "Window.close()")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Window.close")}}</p> diff --git a/files/de/web/api/window/confirm/index.html b/files/de/web/api/window/confirm/index.html new file mode 100644 index 0000000000..23df4db917 --- /dev/null +++ b/files/de/web/api/window/confirm/index.html @@ -0,0 +1,73 @@ +--- +title: Window.confirm() +slug: Web/API/Window/confirm +tags: + - API + - DOM + - Method + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsMobileBrowserCompatibility + - Reference + - Window + - confirm +translation_of: Web/API/Window/confirm +--- +<div>{{ApiRef("Window")}}</div> + +<p>Die <code><strong>Window.confirm()</strong></code> Funktion zeigt ein modales Dialogfenster mit einem optionalen Text und zwei Buttons an, OK und Abbrechen.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>eingabe</em> = window.confirm(<em>nachricht</em>);</pre> + +<ul> + <li><code>nachricht</code> ist der optionale Text, der im Dialogfenster angezeigt wird.</li> + <li><code>eingabe</code> ist ein <em>boolean</em>-Wert, der angibt, welche Schaltfläche gedrückt wurde (<code>true</code> heißt OK).</li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: js">if (window.confirm("Willst du die Seite wirklich verlassen?")) { + window.open("exit.html", "Auf Wiedersehen!"); +} +</pre> + +<p>Erzeugt (<em>englisch</em>):</p> + +<p><img alt="firefox confirm" src="https://mdn.mozillademos.org/files/7163/firefoxcomfirmdialog_zpsf00ec381.png" style="height: 119px; width: 354px;"><br> + </p> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.alert</span> Dialogfenster sind <em>modal </em>- sie verhindern, dass der Anwender auf den Rest der Seite zugreifen kann, bis das Dialogfenster geschlossen wurde. Aus diesen Grund sollte man Funktionen, die Dialogfenster anzeigen, nicht zu oft verwenden. Und unabhängig davon gibt es gute Gründe dafür, <a href="http://alistapart.com/article/neveruseawarning">Dialogfenster zum Bestätigen einer Aktion zu vermeiden</a>.</p> + +<p><a href="/en-US/Chrome" title="Chrome">Mozilla Chrome</a>-Nutzer (z.B. Firefox-Erweiterungen) sollten stattdessen {{interface("nsIPromptService")}} verwenden.</p> + +<p>Seit Chrome {{CompatChrome(46.0)}} wird diese Funktion innerhalb eines {{htmlelement("iframe")}}s blockiert, es sei denn, dessen sandbox-Attribut hat den Wert <code>allow-modal</code>.</p> + +<p>{{gecko_minversion_inline("23.0")}} Der Parameter ist optional und wird laut Spezifikation nicht benötigit.</p> + +<h2 id="Specification" name="Specification">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('HTML WHATWG', 'timers-and-user-prompts.html#dom-confirm', 'confirm()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{domxref("window.alert","alert")}}</li> + <li>{{domxref("window.prompt","prompt")}}</li> +</ul> diff --git a/files/de/web/api/window/console/index.html b/files/de/web/api/window/console/index.html new file mode 100644 index 0000000000..2fa7d75001 --- /dev/null +++ b/files/de/web/api/window/console/index.html @@ -0,0 +1,56 @@ +--- +title: Window.console +slug: Web/API/Window/console +tags: + - API + - Eigenschaft + - Referenz + - Schreibgeschützt + - Window + - console +translation_of: Web/API/Window/console +--- +<p>{{ APIRef }}</p> + +<p>Die <strong><code>Window.console</code></strong> Eigenschaft gibt eine Referenz des {{domxref("Console")}} Objects zurück, welches Methoden für das Loggen von Informationen in der Browser Konsole bietet. Diese Methoden sollten nur für das Debugging genutzt werden und nicht für das Darstellen von Informationen an Endnutzer.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>var consoleObj</em> = <em>window</em>.console; +</pre> + +<h2 id="Example" name="Example">Beispiele</h2> + +<h3 id="Zur_Konsole_loggen">Zur Konsole loggen</h3> + +<p>Das erste Beispiel loggt text zur Konsole.</p> + +<pre class="brush: js">console.log("Während dem Laden ist ein Fehler aufgetreten."); +</pre> + +<p>Das nächste Beispiel loggt ein Objekt in der Konsole. Die Felder des Objekts können dabei ausgeklappt werden:</p> + +<pre class="brush: js">console.dir(einObjekt);</pre> + +<p>Schau dir {{SectionOnPage("/de-DE/docs/Web/API/Console", "Nutzung")}} für weitere Beispiele an.</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('Console API')}}</td> + <td>{{Spec2('Console API')}}</td> + <td>Anfängliche Definition.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>Aktuell gibt es viele Unterschiede in der Implementation zwischen den verschiedenen Browsern. Dennoch wird aktuell daran gearbeitet, die Implementationen zusammen zu bringen und konsistenter zu machen.</p> +</div> diff --git a/files/de/web/api/window/dump/index.html b/files/de/web/api/window/dump/index.html new file mode 100644 index 0000000000..4126c3a4db --- /dev/null +++ b/files/de/web/api/window/dump/index.html @@ -0,0 +1,42 @@ +--- +title: Window.dump() +slug: Web/API/Window/dump +tags: + - DOM +translation_of: Web/API/Window/dump +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">Übersicht</h2> + +<p>Schreibt eine Nachricht auf die (systemeigene) Konsole.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">window.dump(<em>message</em>); + +dump(<em>message</em>); +</pre> + +<ul> + <li><code>message</code> ist die zu protokollierende Nachricht.</li> +</ul> + +<h2 id="Notes" name="Notes">Bemerkungen</h2> + +<p><code>dump</code> wird normalerweise verwendet um JavaScript zu debuggen. Privilegierter Code kann auch <code><a href="/en-US/docs/Components.utils.reportError" title="Components.utils.reportError">Components.utils.reportError</a></code> und <code><a href="/en-US/docs/XPCOM_Interface_Reference/nsIConsoleService" title="nsIConsoleService">nsIConsoleService</a></code> verwenden, um Nachrichten in die <a href="/en-US/docs/Error_Console" title="Error_Console">Fehler-Konsole</a> zu schreiben.</p> + +<p>In <a href="/en-US/docs/Gecko" title="Gecko">Gecko</a> ist <code>dump</code> standardmäßig deaktiviert – beim Aufruf passiert also nichts und es wird auch kein Fehler erzeugt. Um die <code>dump</code> Ausgabe zu sehen, muss die Einstellung <code>browser.dom.window.dump.enabled</code> auf <code>true</code> gesetzt werden. Diese Einstellung kann in <a href="http://kb.mozillazine.org/About:config">about:config</a> oder in der <a href="http://kb.mozillazine.org/User.js_file">user.js Datei</a> vorgenommen werden. Anmerkung: Diese Einstellung ist in <code>about:config</code> normalerweise nicht enthalten, sie muss erst erzeugt werden (Rechtsklick in den Fensterbereich -> Neu -> Boolean).</p> + +<p>In Windows benötigt man eine Konsole, um überhaupt etwas zu sehen. Wenn noch keine vorhanden ist, kann durch einen Neustart der Anwendung mit dem Parameter <code>-console</code> eine Konsole erzeugt werden. Auf anderen Betriebssystemen ist es ausreichend die Anwendung aus einem Terminal aufzurufen.</p> + +<p>Um die Konsolenausgabe in eine Datei umzuleiten, muss Firefox <em>ohne</em> den Parameter <code>-console</code> gestartet und folgende Syntax zum Umleiten von stderr und stdout in eine Datei verwendet werden, zB.:</p> + +<pre>firefox > console.txt 2>&1 +</pre> + +<p><code>dump</code> steht auch in JavaScript geschriebenen XPCOM Komponenten zur verfügbar, obwohl <code><a href="/en-US/docs/DOM/window" title="DOM/window">window</a></code> nicht das globale Objekt in Komponenten ist. Allerdings wird diese Verwendung von <code>dump</code> nicht durch die oben genannte Einstellung beeinflusst -- die Ausgabe findet immer statt. Deshalb ist es anzuraten, diese Einstellung selbst zu prüfen oder eine eigene Debug-Einstellung zu erzeugen. Damit sichergestellt ist, dass nicht unnötig viele Debug-Daten in die Konsole des Benutzers geschrieben werden, wenn dieser überhaupt nicht an diesen interessiert ist. Achtung, die Ausgabe von <code>dump</code> von XPCOM Komponenten wird zu <code>stderr</code> geleitet, während ein Aufruf von <code>dump </code>an andere Stelle auf <code>stdout</code> ausgibt.</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<p>{{DOM0}}</p> diff --git a/files/de/web/api/window/history/index.html b/files/de/web/api/window/history/index.html new file mode 100644 index 0000000000..05a369435f --- /dev/null +++ b/files/de/web/api/window/history/index.html @@ -0,0 +1,56 @@ +--- +title: Window.history +slug: Web/API/Window/history +tags: + - API + - HTML DOM + - History API + - Window +translation_of: Web/API/Window/history +--- +<p>{{ APIRef }}</p> + +<p>Die nur lesend zugreifbare Eigenschaft <code><strong>Window</strong>.<strong>history</strong></code> gibt eine Referenz auf das {{domxref("History")}} Objekt zurück, welches eine Schnittstelle zur Manipulation der Browser Sitzungs-Historie bereitstellt (Seiten, die im aktuellen Tab oder dem aktuellen Frame besucht wurden).</p> + +<p>Unter <a href="/en/DOM/Manipulating_the_browser_history" title="en/DOM/Manipulating the browser history">Manipulating the browser history</a> finden sie weitere Details und Beispiele. Der Artikel geht besonders auf die Sicherheits-Features der Methoden <code>pushState()</code> und <code>replaceState()</code> ein, die Sie vor Benutzung der Funktionen kennen sollten.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>var historyObj</em> = <em>window</em>.history; +</pre> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: js">history.back(); // entspricht dem Klicken des "Zurück"-Kopfes +history.go(-1); // entspricht history.back(); +</pre> + +<h2 id="Anmerkungen">Anmerkungen</h2> + +<p>Für Seiten auf der obersten Ebene kann in der Sitzungs-Historie eine Liste von Seiten über das <code>History</code> Objekt angesehen werden, zugreifbar über die Drop-Downs im Browser neben den Vor- und Zurück-Schaltflächen.</p> + +<p>Aus Sicherheitsgründen erlaubt das <code>History</code> Objekt keinen Zugriff für nicht-privilegierten Code auf die URLs anderer Seiten in der Sitzungs-Historie, erlaubt aber die Navigation durch die Historie.</p> + +<p>Die Sitzungs-Historie kann nicht gelöscht oder das Vor-und Zurück-Navigieren verhindert werden. Die nächstbeste Lösung ist die <code><a href="/en/DOM/window.location#replace" title="en/DOM/window.location#replace">location.replace()</a></code> Methode, die den aktuellen Eintrag in der Sitzungs-Historie durch die übergebene URL ersetzt.</p> + +<h2 id="Spezifikationen">Spezifikationen</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('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/de/web/api/window/index.html b/files/de/web/api/window/index.html new file mode 100644 index 0000000000..26f27d9af0 --- /dev/null +++ b/files/de/web/api/window/index.html @@ -0,0 +1,384 @@ +--- +title: Window +slug: Web/API/Window +tags: + - DOM + - Gecko +translation_of: Web/API/Window +--- +<p>{{APIRef}}</p> + +<p><span class="seoSummary">Das <code>window</code> Objekt repräsentiert ein Fenster (Window), das ein DOM Dokument enthält. Das <code>document</code> Attribut zeigt auf das <a href="/en-US/docs/DOM/document">DOM document</a>, das im Fenster geladen ist.</span> Für ein gegebenes Dokument kann man über das {{Domxref("document.defaultView")}} Attribut das Fenster abrufen.</p> + +<p>Dieser Abschnitt bietet eine kurze Referenz für alle Methoden, Attribute und Events, die über das <code>window</code> Objekt zur Verfügung stehen. Das <code>window</code> Objekt implementiert die <code>Window</code> Schnitstelle, die wiederrum von der <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code> Schnittstelle erbt. Einige zusätzliche globale Funktionen, <em>Namespace</em> Objekte, Schnittstellen und Konstruktoren, die nicht typischerweise mit dem <code>Window</code> in Verbindung gebracht werden, aber durch dieses verfügbar sind, werden in der <a href="/en-US/docs/JavaScript/Reference">JavaScript Reference</a> und <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a> aufgelistet.</p> + +<p>In einem "getabten" Browser wie Firefox enthält jeder Tab sein eigenes Window-Objekt (und im Falle von Extensions ist das Browser-Fenster selbst ein eigenständiges Fenster – siehe auch "<a href="/en-US/docs/Working_with_windows_in_chrome_code#Content_windows">Working with windows in chrome code</a>". Das heisst also, dass das Window-Objekt nicht zwischen Tabs desselben Fensters geteilt wird. Einige Methoden, zum Beispiel {{Domxref("window.resizeTo")}} und {{Domxref("window.resizeBy")}} beziehen sich auf das "ganze" Fenster, und nicht auf den Tab, dem das Window-Objekt gehört. Grundsätzlich lässt sich sagen, das alles, was man nicht sinnvollerweise einem Tab zuordnen kann, sich stattdessen auf das Window bezieht.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p> + +<p>Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.</p> + +<dl> + <dt>{{domxref("Window.applicationCache")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.</dd> + <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt> + <dd>This property indicates whether the current window is closed or not.</dd> + <dt><code><a href="/en-US/docs/Components_object">Window.Components</a></code> {{Non-standard_inline}}</dt> + <dd>The entry point to many <a href="/en-US/docs/XPCOM">XPCOM</a> features. Some properties, e.g. <a href="/en-US/docs/Components.classes">classes</a>, are only available to sufficiently privileged code. <strong>Web code should not use this property.</strong></dd> + <dt>{{domxref("console","Window.console")}} {{Non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the console object providing access to the browser's debugging console.</dd> + <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns a reference to the content element in the current window. The obsolete variant with underscore is no longer available from Web content.</dd> + <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns the XUL controller objects for the current chrome window.</dd> + <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt> + <dd>Returns the browser crypto object.</dd> + <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt> + <dd>Gets/sets the status bar text for the given window.</dd> + <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd> + <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt> + <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd> + <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt> + <dd>Synonym of {{domxref("window.personalbar")}}</dd> + <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the document that the window contains.</dd> + <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt> + <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd> + <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt> + <dd>Returns an array of the subframes in the current window.</dd> + <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>This property indicates whether the window is displayed in full screen or not.</dd> + <dt><code>{{domxref("window.globalStorage")}} </code>{{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt> + <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br> + Was: Multiple storage objects that are used for storing data across multiple pages.</dd> + <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the history object.</dd> + <dt>{{domxref("Window.innerHeight")}}</dt> + <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd> + <dt>{{domxref("window.innerWidth")}}</dt> + <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd> + <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt> + <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd> + <dt>{{domxref("Window.location")}} {{ReadOnlyInline}}</dt> + <dd>Gets/sets the location, or current URL, of the window object.</dd> + <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd> + <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}</dt> + <dd>The time in milliseconds since epoch at which the current animation cycle began.</dd> + <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd> + <dt>{{domxref("Window.name")}}</dt> + <dd>Gets/sets the name of the window.</dd> + <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the navigator object.</dd> + <dt>{{domxref("Window.opener")}}</dt> + <dd>Returns a reference to the window that opened this current window.</dd> + <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt> + <dd>Gets the height of the outside of the browser window.</dd> + <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt> + <dd>Gets the width of the outside of the browser window.</dd> + <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollX")}}.</dd> + <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollY")}}</dd> + <dt>{{domxref("Window.sessionStorage")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("SpeechSynthesisGetter.speechSynthesis")}} {{readOnlyInline}}</dt> + <dd> </dd> + <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the parent of the current window or subframe.</dd> + <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt> + <dd>Provides a hosting area for <a href="/en-US/docs/Navigation_timing">performance related</a> attributes.</dd> + <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt> + <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt> + <dd>Formerly provided access to install and remove PKCS11 modules.</dd> + <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt> + <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd> + <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the screen object associated with the window.</dd> + <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt> + <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd> + <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt> + <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd> + <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt> + <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd> + <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd> + <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd> + <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd> + <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt> + <dd>Returns an object reference to the window object itself.</dd> + <dt>{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}</dt> + <dd>Returns a storage object for storing data within a single page session.</dd> + <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns a reference to the window object of the sidebar.</dd> + <dt>{{domxref("Window.status")}}</dt> + <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd> + <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt> + <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt> + <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd> + <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the current window.</dd> + <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt> + <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p> + +<dl> + <dt>{{domxref("EventTarget.addEventListener()")}}</dt> + <dd>Register an event handler to a specific event type on the window.</dd> + <dt>{{domxref("Window.alert()")}}</dt> + <dd>Displays an alert dialog.</dd> + <dt>{{domxref("WindowBase64.atob()")}}</dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> + <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves back one in the window history.</dd> + <dt>{{domxref("Window.blur()")}}</dt> + <dd>Sets focus away from the window.</dd> + <dt>{{domxref("WindowBase64.btoa()")}}</dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> + <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt> + <dd>Registers the window to capture all events of the specified type.</dd> + <dt>{{domxref("Window.clearImmediate()")}}</dt> + <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd> + <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> + <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> + <dt>{{domxref("Window.close()")}}</dt> + <dd>Closes the current window.</dd> + <dt>{{domxref("Window.confirm()")}}</dt> + <dd>Displays a dialog with a message that the user needs to respond to.</dd> + <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.dispatchEvent()")}}</dt> + <dd>Used to trigger an event.</dd> + <dt>{{domxref("Window.dump()")}}</dt> + <dd>Writes a message to the console.</dd> + <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.find()")}}</dt> + <dd>Searches for a given string in a window.</dd> + <dt>{{domxref("Window.focus()")}}</dt> + <dd>Sets focus on the current window.</dd> + <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves the window one document forward in the history.</dd> + <dt>{{domxref("Window.getAttention()")}}</dt> + <dd>Flashes the application icon.</dd> + <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.getComputedStyle()")}}</dt> + <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd> + <dt>{{domxref("Window.getDefaulComputedStyle()")}}</dt> + <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd> + <dt>{{domxref("Window.getSelection()")}}</dt> + <dd>Returns the selection object representing the selected item(s).</dd> + <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the browser to the home page.</dd> + <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd> + <dt>{{domxref("Window.maximize()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt> + <dd>Minimizes the window.</dd> + <dt>{{domxref("Window.moveBy()")}}</dt> + <dd>Moves the current window by a specified amount.</dd> + <dt>{{domxref("Window.moveTo()")}}</dt> + <dd>Moves the window to the specified coordinates.</dd> + <dt>{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a <code>MozBeforePaint</code> event to fire before that repaint occurs.</dd> + <dt>{{domxref("Window.open()")}}</dt> + <dd>Opens a new window.</dd> + <dt>{{domxref("Window.openDialog()")}}</dt> + <dd>Opens a new dialog window.</dd> + <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt> + <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.</dd> + <dt>{{domxref("Window.print()")}}</dt> + <dd>Opens the Print Dialog to print the current document.</dd> + <dt>{{domxref("Window.prompt()")}}</dt> + <dd>Returns the text entered by the user in a prompt dialog.</dd> + <dt>{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}</dt> + <dd>Releases the window from trapping events of a specific type.</dd> + <dt>{{domxref("element.removeEventListener","Window.removeEventListener()")}}</dt> + <dd>Removes an event listener from the window.</dd> + <dt>{{domxref("Window.resizeBy()")}}</dt> + <dd>Resizes the current window by a certain amount.</dd> + <dt>{{domxref("Window.resizeTo()")}}</dt> + <dd>Dynamically resizes window.</dd> + <dt>{{domxref("Window.restore()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.scroll()")}}</dt> + <dd>Scrolls the window to a particular place in the document.</dd> + <dt>{{domxref("Window.scrollBy()")}}</dt> + <dd>Scrolls the document in the window by the given amount.</dd> + <dt>{{domxref("Window.scrollByLines()")}}</dt> + <dd>Scrolls the document by the given number of lines.</dd> + <dt>{{domxref("Window.scrollByPages()")}}</dt> + <dd>Scrolls the current document by the specified number of pages.</dd> + <dt>{{domxref("Window.scrollTo()")}}</dt> + <dd>Scrolls to a particular set of coordinates in the document.</dd> + <dt>{{domxref("Window.setCursor()")}}</dt> + <dd>Changes the cursor for the current window</dd> + <dt>{{domxref("Window.setImmediate()")}}</dt> + <dd>Executes a function after the browser has finished other heavy tasks</dd> + <dt>{{domxref("WindowTimers.setInterval()")}}</dt> + <dd>Schedules the execution of a function each X milliseconds.</dd> + <dt>{{domxref("Window.setResizable")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> + <dd>Sets a delay for executing a function.</dd> + <dt>{{domxref("Window.showModalDialog()")}} {{Fx_minversion_inline(3)}}</dt> + <dd>Displays a modal dialog.</dd> + <dt>{{domxref("Window.sizeToContent()")}}</dt> + <dd>Sizes the window according to its content.</dd> + <dt>{{domxref("Window.stop()")}}</dt> + <dd>This method stops window loading.</dd> + <dt>{{domxref("Window.updateCommands()")}}</dt> + <dd>Updates the state of commands of the current chrome window (UI).</dd> +</dl> + +<h2 id="Event_handlers">Event handlers</h2> + +<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p> + +<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p> +</div> + +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>An event handler property for abort events on the window.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> + <dd>An event handler property for before-unload events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>An event handler property for blur events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>An event handler property for change events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>An event handler property for click events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>An event handler property for handling the window close event.</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>An event handler property for right-click events on the window.</dd> + <dt>{{domxref("Window.ondevicelight")}}</dt> + <dd>An event handler property for any ambient light levels changes</dd> + <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>An event handler property for any device orientation changes</dd> + <dt>{{domxref("Window.ondeviceproximity")}}</dt> + <dd>An event handler property for device proximity event</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>An event handler property for {{event("error")}} events raised on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>An event handler property for {{event("focus")}} events on the window.</dd> + <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>An event handler property for hash change events on the window; called when the part of the URL after the hash mark ("#") changes.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>An event handler property for {{event("keydown")}} events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>An event handler property for {{event("keypress")}} events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>An event handler property for {{event("keyup")}} events on the window.</dd> + <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt> + <dd>An event handler property for {{event("languagechange")}} events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> + <dd>An event handler property for window loading.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> + <dd>An event handler property for mousedown events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>An event handler property for mousemove events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>An event handler property for mouseout events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>An event handler property for mouseover events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>An event handler property for mouseup events on the window.</dd> + <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd> + <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> + <dd>An event handler property for pageshow events on the window.</dd> + <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> + <dd>An event handler property for pagehide events on the window.</dd> + <dt>{{domxref("Window.onpaint")}}</dt> + <dd>An event handler property for paint events on the window.</dd> + <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>An event handler property for popstate events, which are fired when navigating to a session history entry representing a state object.</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>An event handler property for reset events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> + <dd>An event handler property for window resizing.</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>An event handler property for window scrolling.</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>An event handler property for window selection.</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>An event handler property for submits on window forms.</dd> + <dt>{{domxref("Window.onunload")}}</dt> + <dd>An event handler property for unload events on the window.</dd> + <dt>{{domxref("Window.onuserproximity")}}</dt> + <dd>An event handler property for user proximity events</dd> +</dl> + +<h2 id="Constructors">Constructors</h2> + +<p>See also the <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p> + +<dl> + <dt>{{domxref("Window.DOMParser")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.GeckoActiveXObject")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Image")}}</dt> + <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd> + <dt>{{domxref("Option")}}</dt> + <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd> + <dt>{{domxref("Window.QueryInterface")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XMLSerializer")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Worker")}}</dt> + <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd> + <dt>{{domxref("Window.XPCNativeWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> +</dl> + +<h2 id="Interfaces">Interfaces</h2> + +<p>See <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li> +</ul> diff --git a/files/de/web/api/window/length/index.html b/files/de/web/api/window/length/index.html new file mode 100644 index 0000000000..202c83237d --- /dev/null +++ b/files/de/web/api/window/length/index.html @@ -0,0 +1,51 @@ +--- +title: Window.length +slug: Web/API/Window/length +translation_of: Web/API/Window/length +--- +<div>{{ ApiRef() }}</div> + +<p>Liefert die Anzahl an Frames ({{HTMLElement("frame")}} oder {{HTMLElement("iframe")}} elements) im aktuellen Fenster.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>framesCount</em> = window.length; +</pre> + +<ul> + <li><code>framesCount</code> ist die Anzahl an Frames.</li> +</ul> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:js">if (window.length) { + // this is a document with subframes +}</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','browsers.html#dom-length','Window.length')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-length', 'Window.length')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Window.length")}}</p> diff --git a/files/de/web/api/window/localstorage/index.html b/files/de/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..5395a7985f --- /dev/null +++ b/files/de/web/api/window/localstorage/index.html @@ -0,0 +1,81 @@ +--- +title: Window.localStorage +slug: Web/API/Window/localStorage +tags: + - API + - Storage + - Web Storage + - Web Storage API + - Window + - localStorage +translation_of: Web/API/Window/localStorage +--- +<p>{{APIRef()}}</p> + +<p>Die <code>localStorage</code>-Eigenschaft erlaubt den Zugriff auf ein lokales {{domxref("Storage")}}-Objekt. <code>localStorage</code> ist mit einer Ausnahme identisch zu <code><a href="/en-US/docs/Web/API/Window.sessionStorage">sessionStorage</a></code>: Im Unterschied zu letzterem besitzen in <code>localStorage</code> gespeicherte Daten kein Verfallsdatum, während sie im <code>sessionStorage</code> mit Ablauf der <code>session</code>, in der Regel beim Schließen des Browsers, gelöscht werden.</p> + +<p><code>localStorage</code> und <code>sessionStorage</code> sind nicht nur von der Domain, sondern auch vom Protokoll abhängig, über das die Seite aufgerufen wurde. In http://example.com/ gespeicherte Daten stehen daher unter https://example.com <em>nicht</em> zur Verfügung.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">myStorage = localStorage;</pre> + +<h3 id="Wert">Wert</h3> + +<p>Ein {{domxref("Storage")}}-Objekt.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Der folgende Ausschnitt greift auf das lokale {{domxref("Storage")}}-Objekt der aktuellen Domain zu und fügt ihm mit {{domxref("Storage.setItem()")}} einen Eintrag hinzu.</p> + +<pre class="brush: js">localStorage.setItem('myCat', 'Tom');</pre> + +<p>Die Syntax für das Auslesen eines Eintrages aus dem localStore lautet:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> cat <span class="operator token">=</span> localStorage<span class="punctuation token">.</span><span class="function token">getItem</span><span class="punctuation token">(</span><span class="string token">'myCat'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Die Syntax um einen Eintrag zu entfernen lautet:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">localStorage<span class="punctuation token">.</span><span class="function token">removeItem</span><span class="punctuation token">(</span><span class="string token">'myCat'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Die Syntax um alle Einträge zu löschen lautet:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">localStorage<span class="punctuation token">.</span><span class="function token">clear</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<div class="note"> +<p><strong>Hinweis</strong>: Ausführliche Beispiele sind im Artikel <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> nachzulesen.</p> +</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('Web Storage', '#dom-localstorage', 'localStorage')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.Window.localStorage")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li> + <li>{{domxref("LocalStorage")}}</li> + <li>{{domxref("SessionStorage")}}</li> + <li>{{domxref("Window.sessionStorage")}}</li> +</ul> diff --git a/files/de/web/api/window/name/index.html b/files/de/web/api/window/name/index.html new file mode 100644 index 0000000000..f6d3ec5b97 --- /dev/null +++ b/files/de/web/api/window/name/index.html @@ -0,0 +1,57 @@ +--- +title: Window.name +slug: Web/API/Window/name +tags: + - API +translation_of: Web/API/Window/name +--- +<div>{{APIRef}}</div> + +<p class="summary"><span class="seoSummary">Holt oder setzt den Namen des Fensters.</span></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>string</var> = window.name; +window.name = <var>string</var>; +</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:js">window.name = "lab_view"; +</pre> + +<h2 id="Hinweise">Hinweise</h2> + +<p>Der Name von Fenstern wird hauptsächlich als Ziel von Hyperlinks und Formularen verwendet. Fenster benötigen grundsätzlich keinen Namen.</p> + +<p><code>window.name</code> wurde auch in Frameworks verwendet um Domain-übergreifend zu kommunizieren (z.B. mit <a href="http://www.thomasfrank.se/sessionvars.html">SessionVars</a> oder Dojo's <a href="https://www.sitepen.com/blog/2008/07/22/windowname-transport/">dojox.io.windowName</a>) als sicherere Alternative JSONP. Moderne Webanwendungen sollten sich jedoch nicht auf <code>window.name</code> verlassen, sondern die <a href="/en-US/docs/Web/API/Window/postMessage">postMessage API</a> verwenden.</p> + +<p><code>window.name</code> konvertiert alle Werte zu ihre String-Repräsentation durch die Verwendung ihrer <code>toString</code> Methode.</p> + +<h2 id="Spezifikationen">Spezifikationen</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('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Window.name")}}</p> diff --git a/files/de/web/api/window/navigator/index.html b/files/de/web/api/window/navigator/index.html new file mode 100644 index 0000000000..5e9289f088 --- /dev/null +++ b/files/de/web/api/window/navigator/index.html @@ -0,0 +1,98 @@ +--- +title: Window.navigator +slug: Web/API/Window/navigator +tags: + - API + - HTML DOM + - Property + - Read-only + - Reference + - Window +translation_of: Web/API/Window/navigator +--- +<div>{{APIRef}}</div> + +<p>Die Schreibgeschützte<code> Window.navigator</code> Eigenschaft liefert eine Referenz des {{domxref("Navigator")}} Objekts, das Informationen über die Anwendung die das Skript ausführt liefern kann.</p> + +<h2 id="Example" name="Example">Syntax</h2> + +<pre class="syntaxbox"><em>navigatorObject<code> = window.navigator</code></em></pre> + +<h2 id="Specification" name="Specification">Beispiele</h2> + +<h3 id="Beispiel_1_Browsererkennung_und_Ausgabe_eines_Texts.">Beispiel #1: Browsererkennung und Ausgabe eines Texts.</h3> + +<pre><code>var sBrowser, sUsrAg = navigator.userAgent; + +// The order matters here, and this may report false positives for unlisted browsers. + +if (sUsrAg.indexOf("Firefox") > -1) { + sBrowser = "Mozilla Firefox"; + // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0" +} else if (sUsrAg.indexOf("Opera") > -1 || sUsrAg.indexOf("OPR") > -1) { + sBrowser = "Opera"; + //"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106" +} else if (sUsrAg.indexOf("Trident") > -1) { + sBrowser = "Microsoft Internet Explorer"; + // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko" +} else if (sUsrAg.indexOf("Edge") > -1) { + sBrowser = "Microsoft Edge"; + // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299" +} else if (sUsrAg.indexOf("Chrome") > -1) { + sBrowser = "Google Chrome or Chromium"; + // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36" +} else if (sUsrAg.indexOf("Safari") > -1) { + sBrowser = "Apple Safari"; + // "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306" +} else { + sBrowser = "unknown"; +} + +alert("Sie verwenden: " + sBrowser);</code></pre> + +<h3 id="Beispiel_2_Browsererkennung_und_Rückgabe_eines_Index.">Beispiel #2: Browsererkennung und Rückgabe eines Index.</h3> + +<pre><code>function getBrowserId () { + var aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera"], + sUsrAg = navigator.userAgent, + nIdx = aKeys.length - 1; + + for (nIdx; nIdx > -1 && sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--); + + return nIdx; +} + +console.log(getBrowserId());</code></pre> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + + + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-navigator', 'Window: navigator')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td><br> + </td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also"><br> + Browserkompatibilität</h2> + + + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.Window.navigator")}}</p> diff --git a/files/de/web/api/window/ondevicemotion/index.html b/files/de/web/api/window/ondevicemotion/index.html new file mode 100644 index 0000000000..0e39638929 --- /dev/null +++ b/files/de/web/api/window/ondevicemotion/index.html @@ -0,0 +1,56 @@ +--- +title: Window.ondevicemotion +slug: Web/API/Window/ondevicemotion +tags: + - API + - Ausrichtung + - Beschleunigungssensor + - Bewegung + - Eigenschaft + - Firefox OS + - Geräteausrichtung +translation_of: Web/API/Window/ondevicemotion +--- +<p>{{ ApiRef() }}</p> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p>Ein Eventhandler für das {{ event("devicemotion")}} Event, welches an das Fenster gesendet wird.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre>window.ondevicemotion = funcRef; +</pre> + +<p>Die Funktion <code>funcRef</code> ist eine Referenz für eine Funktion. Diese Funktion erhält ein {{ domxref("DeviceMotionEvent") }} Objekt, welches die aufgetretene Bewegung beschreibt.</p> + +<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('Device Orientation')}}</td> + <td>{{Spec2('Device Orientation')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{ page("/en-US/docs/Web/API/DeviceMotionEvent","Browser_compatibility") }}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{ event("devicemotion") }}</li> + <li>{{ domxref("DeviceMotionEvent") }}</li> + <li><a href="/en-US/docs/Web/API/Detecting_device_orientation" title="Detecting device orientation">Detecting device orientation</a></li> +</ul> diff --git a/files/de/web/api/window/opendialog/index.html b/files/de/web/api/window/opendialog/index.html new file mode 100644 index 0000000000..2dbd0587c5 --- /dev/null +++ b/files/de/web/api/window/opendialog/index.html @@ -0,0 +1,90 @@ +--- +title: Window.openDialog() +slug: Web/API/Window/openDialog +translation_of: Web/API/Window/openDialog +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Summary" name="Summary">Zusammenfassung</h3> + +<p><code>window.openDialog</code> ist eine Erweiterung von <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a>. Es ist fast das gleiche, ausser das optional nach <code>windowFeatures</code> zusätzliche Parameter angegeben werden können, und <code>windowFeatures</code> selber wird ein bisschen anders behandelt.</p> + +<p>Die optionalen Parameter, wenn vorhanden, werden zu einem JavaScript Array gebündelt und zum neu geöffneten Fenster hinzugefügt als eine Eigenschaft namens <a href="/en/DOM/window.arguments" title="en/DOM/window.arguments">window.arguments</a>. Sie können jederzeit im JavaScript des Fensters verwendet werden, auch während der ausführung eines <code>load</code> handler. Diese Parameter können dafür benutzt werden, um in beide Richtungen Daten mit dem Dialogfenster auszutauschen.</p> + +<p>Beachten sie, das nach dem Aufruf von <code>openDialog()</code> sofort weitergefahren wird. Wenn Sie wollen, dass der Aufruf blockiert bis der Benutzer den Dialog schliesst, geben sie <code>modal</code> als <code>windowFeatures</code> Parameter an. Beachten sie, dass der Benutzer das opener window nicht bedienen kann, bis er den Dialog schliesst.</p> + +<h3 id="Syntax" name="Syntax">Syntax</h3> + +<pre class="eval notranslate"><em>newWindow</em> = openDialog(<em>url</em>, <em>name</em>, <em>features</em>, <em>arg1</em>, <em>arg2</em>, ...) +</pre> + +<dl> + <dt>newWindow </dt> + <dd>Das geöffnete Fenster</dd> + <dt>url </dt> + <dd>Die URL, die im neu geöffneten Fenster geladen wird.</dd> + <dt>name </dt> + <dd>Der Name des Fensters (optional). Siehe <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a> für detailierte Informationen.</dd> + <dt>features </dt> + <dd>Siehe <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a>.</dd> + <dt>arg1, arg2, ... </dt> + <dd>Die Argumente, die dem neuen Fenster gegeben werden (optional).</dd> +</dl> + +<h3 id="Example" name="Example">Beispiel</h3> + +<pre class="eval notranslate">var win = openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "", "pizza", 6.98); +</pre> + +<h3 id="Notes" name="Notes">Zu beachten</h3> + +<h4 id="New_Features" name="New_Features">Neue Features</h4> + +<p><code>all</code> - Aktiviert (oder deaktiviert <code>("all=no")</code>) anfangs alles chrome (ausser die behaviour flags <code>chrome</code>, <code>dialog</code> und <code>modal</code>). Diese können überschrieben werden (z.B. <code>"menubar=no,all"</code> schaltet alles chrome ein ausser die Menüleiste.) Dieses Feature wird explizirt ignoriert von <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a>. <code>Für window.openDialog</code> ist es nützlich wegen unterschiedlichem Standardverhalten.</p> + +<h4 id="Default_behaviour" name="Default_behaviour">Standardverhalten</h4> + +<p>Die window Features <code>chrome</code> und <code>dialog</code> sind immer eingeschaltet, ausser sie werden explizit ausgeschaltet ("<code>chrome=no</code>"). <code>openDialog</code> behandelt einen nicht vorhandenen features Parameter gleich wie <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a>, (ein leerer String schaltet alle Features aus) ausser <code>chrome</code> und <code>dialog</code>, welche standartmässig eingeschaltet sind. Wenn der <code>features</code> Parameter ein leerer String ist, oder nur behaviour features (<code>chrome</code>, <code>dependent</code>, <code>dialog</code> und <code>modal</code>) enthält, werden die chrome features nach der "OS' choice" ausgewählt. Das heisst, der window creation code erhält keine spezifischen Anweisungen, kann dafür das chrome auswählen, das am besten zu einem Dialog auf diesem operating system passt.</p> + +<h4 id="Passing_extra_parameters_to_the_dialog" name="Passing_extra_parameters_to_the_dialog">Zusätzliche Parameter zum Dialog hinzufügen</h4> + +<p>Um dem Fenster zusätzliche Parameter hinzuzufügen, können Sie diese einfach nach dem <code>windowFeatures</code> parameter einfügen:</p> + +<pre class="eval notranslate">openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "", "pizza", 6.98); +</pre> + +<p>Die zusätzlichen Parameter werden dann in eine Eigenschaft gepackt namens <code>arguments</code> mit dem Typ <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a>, und diese Eigenschaft wird dem neu erzeugten Fenster hinzugefügt.</p> + +<p>Benützen Sie dieses Schema, um im Code des Dialogs auf diese zusätzlichen Parameter zuzugreifen:</p> + +<pre class="eval notranslate">var food = window.arguments[0]; +var price = window.arguments[1]; +</pre> + +<p>Beachten Sie, dass Sie überall im Code des Dialogs auf diese Eigenschaft zugreiffen können. (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog" title="en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Anderes Beispiel</a>).</p> + +<h4 id="Returning_values_from_the_dialog" name="Returning_values_from_the_dialog">Werte vom Dialog zurückerhalten</h4> + +<p>Weil <code>window.close()</code> alle Eigenschaften des Dialogfensters löscht (d.h. die Variablen vom JavaScript des Dialogs), ist es nicht möglich, mit globalen Variablen (oder anderen Konstrukten) nach dem Schliessen Werte zurückzugeben.</p> + +<p>Um Werte zum Aufrufer zurückzugeben, müssen Sie ein Objekt mit den zusätzlichen Parametern übergeben. Sie können im Code des Dialogs auf dieses Objekt zugreiffen und Eigenschaften setzen, welche die Werte enthalten, die Sie zurückgeben wollen oder die Sie auch nach <code>window.close() </code>behalten wollen.</p> + +<pre class="eval notranslate">var retVals = { address: null, delivery: null }; +openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "modal", "pizza", 6.98, retVals); +</pre> + +<p>Wenn Sie im Dialog die Eigenschaften von <code>retVals</code> im Code des Dialogs setzen wie unten beschrieben, können Sie über <code>retVals</code> auf sie zugreiffen nach dem der Aufruf von <code>openDialog()</code> zurückkommt.</p> + +<p>Im JavaScript des Dialogs können Sie wie folgt auf die Eigenschaften zugreiffen:</p> + +<pre class="eval notranslate">var retVals = window.arguments[2]; +retVals.address = enteredAddress; +retVals.delivery = "immediate"; +</pre> + +<p>Siehe auch hier. (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog" title="en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">anderes Beispiel</a>).<br> + Siehe auch window.importDialog (mobile).</p> + +<h3 id="Specification" name="Specification">Spezifikation</h3> + +<p>{{ DOM0() }}</p> diff --git a/files/de/web/api/window/opener/index.html b/files/de/web/api/window/opener/index.html new file mode 100644 index 0000000000..32301159ce --- /dev/null +++ b/files/de/web/api/window/opener/index.html @@ -0,0 +1,28 @@ +--- +title: Window.opener +slug: Web/API/Window/opener +translation_of: Web/API/Window/opener +--- +<div>{{APIRef}}</div> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p>Gibt einen Hinweis auf das Fenster, welches das aktuelle Fenster öffnete.</p> + +<h2 id="Syntax" name="Syntax">Schreibweise</h2> + +<pre class="syntaxbox"><var>objRef</var> = window.opener; +</pre> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:js">if (window.opener != indexWin) { + referToTop(window.opener); +} +</pre> + +<h2 id="Notes" name="Notes">Bemerkungen</h2> + +<p>Öffnet man ein Fenster aus einem anderen Fenster heraus (mittels {{domxref("Window.open")}} oder target='_blank'), wird im neuen Fenster ein Bezug auf das ursprüngliche Fenster mit <strong>window.opener</strong> aufrecht erhalten. Wurde das aktuelle Fenster nicht aus einem anderen Fenster geöffnet, wird <span style="line-height: 1.5;">NULL ausgegeben. </span></p> + +<p><span style="line-height: 1.5;">Der Browser in </span> <span style="line-height: 1.5;">Windows Smartphones unterstützt </span><span style="line-height: 1.5;">window.opener nicht (getestet mit Microsoft Edge 25.10586.36.0). Auch im Internet Explorer gibt es keine Unterstützung, wenn die Aktivität von einer anderen Sicherheitszone ausgeht. </span></p> diff --git a/files/de/web/api/window/performance/index.html b/files/de/web/api/window/performance/index.html new file mode 100644 index 0000000000..7805b7b019 --- /dev/null +++ b/files/de/web/api/window/performance/index.html @@ -0,0 +1,96 @@ +--- +title: Window.performance +slug: Web/API/Window/performance +tags: + - Performanz + - Timing +translation_of: Web/API/Window/performance +--- +<div>{{APIRef("High Resolution Time")}}</div> + +<p>Die Eigenschaft <strong><code>performance </code></strong>der {{domxref("Window")}} Schnittstelle gibt ein {{domxref("Performance")}} Objekt zurück, welches benutzt werden kann, um Performanz-Informationen über das aktuelle Dokument zu sammeln. Sie dient als Bereitstellungspunkt für die Performance Timeline API, die High Resolution Time API, die <a href="/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing API</a>, die <a href="/en-US/docs/Web/API/User_Timing_API">User Timing API</a>, und die <a href="/en-US/docs/Web/API/Resource_Timing_API">Resource Timing API</a>.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>performanceData</em> = window.performance;</pre> + +<h3 id="Wert">Wert</h3> + +<p>Ein {{domxref("Performance")}}-Objekt bietet Zugriff auf Performanz- und Timing-Informationen, die von den APIs, welche es offen legt, bereit gestellt werden.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('Highres Time', '#the-performance-interface', 'window.performance')}}</td> + <td>{{Spec2('Highres Time')}}</td> + <td>Definiert die <code>now()</code> Methode.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompabilität">Browserkompabilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Grundsätzliche Unterstützung</td> + <td>6.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("7.0")}}</td> + <td>9.0</td> + <td>15.0</td> + <td>8</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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Grundsätzliche Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("7.0")}}</td> + <td>9.0</td> + <td>15.0</td> + <td>9</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/de/web/api/window/print/index.html b/files/de/web/api/window/print/index.html new file mode 100644 index 0000000000..3043194293 --- /dev/null +++ b/files/de/web/api/window/print/index.html @@ -0,0 +1,50 @@ +--- +title: Window.print() +slug: Web/API/Window/print +translation_of: Web/API/Window/print +--- +<p>{{ ApiRef() }}</p> + +<p>Öffnet den Dialog zum Drucken des aktuellen Dokuments.</p> + +<p>In den meisten Browsern wird die Methode nicht ausgeführt, sofern bereits ein Druck-Dialog geöffnet ist.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval">window.print() +</pre> + +<h2 id="Specification" name="Specification">Anmerkungen</h2> + +<p>Seit Chrome Version {{CompatChrome(46.0)}} wird diese Methode innerhalb eines {{htmlelement("iframe")}} Elements blockiert, solange kein sandbox Attribut mit dem Wert <code>allow-modal</code> gesetzt ist.</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentare</th> + </tr> + <tr> + <td>{{SpecName('HTML5 Web application', '#dom-print', 'print()')}}</td> + <td>{{Spec2('HTML5 Web application')}}</td> + <td>Erste Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("api.Window.print")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en/Printing" title="en/Printing">Printing</a></li> + <li>{{ domxref("window.onbeforeprint") }}</li> + <li>{{ domxref("window.onafterprint") }}</li> +</ul> + +<p>{{ languages( { "ja": "ja/DOM/window.print", "it": "it/DOM/window.print" , "zh-cn": "zh-cn/DOM/window.print" } ) }}</p> diff --git a/files/de/web/api/window/prompt/index.html b/files/de/web/api/window/prompt/index.html new file mode 100644 index 0000000000..5fe0290c4e --- /dev/null +++ b/files/de/web/api/window/prompt/index.html @@ -0,0 +1,79 @@ +--- +title: Window.prompt() +slug: Web/API/Window/prompt +translation_of: Web/API/Window/prompt +--- +<div>{{ApiRef("Window")}}</div> + +<p><code>Window.prompt()</code> zeigt ein Dialogfenster mit einem Text-Eingabefeld an, mit einer optionalen Nachricht an den Benutzer.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>eingabe</em> = window.prompt(<em>nachricht</em>, <em>default</em>); +</pre> + +<ul> + <li><code>eingabe</code> ist ein String, der den vom Benutzer eingegeben Text enthält, oder null.</li> + <li><code>nachricht</code> ist der String, der dem Benutzer angezeigt wird. <span id="result_box" lang="de"><span>Dieser Parameter ist optional</span> <span>und</span> <span>kann weggelassen werden, wenn</span> <span>es im</span> <span>Fenster nichts anzuzeigen</span> <span>gibt</span><span>.</span></span></li> + <li><code>default</code> ist ein String mit dem voreingestellten Wert im Eingabefeld. <span id="result_box" lang="de"><span>Es</span> <span>ist ein optionaler Parameter</span><span>.</span></span> <span id="result_box" lang="de"><span>Beachte, dass</span> <span>in</span> <span>Internet</span> <span>Explorer 7</span> <span>und 8 der String</span> <span>"</span></span>undefined<span lang="de"><span>"</span> <span>im Eingabefeld steht, wenn der Parameter weggelassen wird.</span></span></li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: js">var sign = prompt("What's your sign?"); + +if (sign.toLowerCase() == "scorpio") { + alert("Wow! I'm a Scorpio too!"); +} + +// <span id="result_box" lang="de"><span>es gibt viele</span> <span>Möglichkeiten</span></span>, um die prompt-Funktion zu nutzen +var sign = window.prompt(); // <span class="short_text" id="result_box" lang="de"><span>Öffnet das</span> <span>leere</span> <span>Eingabefenster </span></span> +var sign = prompt(); // <span class="short_text" id="result_box" lang="de"><span> Öffnet das</span> <span>leere</span> <span>Eingabefenster</span></span> +var sign = window.prompt('Are you feeling lucky'); // <span class="short_text" id="result_box" lang="de"><span>Öffnet das</span> <span>Eingabefenster</span></span> mit dem Text "Are you feeling lucky" +var sign = window.prompt('Are you feeling lucky', 'sure'); // <span class="short_text" id="result_box" lang="de"><span>Öffnet das</span> <span>Eingabefenster</span></span> mit dem Text "Are you feeling lucky" und dem Standardwert "sure"</pre> + +<p>Wenn der Benutzer den OK-Button drückt, wird der Text im Eingabefeld zurückgegeben. Falls das Feld leer ist, wenn der Benutzer den OK-Button drückt, wird ein leerer String zurückgegeben. Wird der Abbrechen-Button gedrückt, gibt die Funktion <code>null</code> zurück.</p> + +<p><span id="result_box" lang="de"><span>Die obige</span> <span>Eingabeaufforderung wird</span> <span>wie folgt angezeigt</span></span> (in Chrome auf OS X):</p> + +<p><a href="https://mdn.mozillademos.org/files/11303/prompt.png"><img alt="prompt() dialog in Chrome on OS X" src="https://mdn.mozillademos.org/files/11303/prompt.png" style="height: 298px; width: 535px;"></a></p> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p>Ein prompt-Dialogfenster einen einzeiligen Text, einen Abbrechen-Button und einen OK-Button und gibt den (möglicherweise leeren) Text zurück, der ins Textfeld eingegeben wurde.</p> + +<p><span class="comment">The following text is shared between this article, DOM:window.confirm and DOM:window.alert</span> Dialogfenster sind <em>modal </em>- sie verhindern, dass der Anwender auf den Rest der Seite zugreifen kann, bis das Dialogfenster geschlossen wurde. Aus diesen Grund sollte man Funktionen, die Dialogfenster anzeigen, nicht zu oft verwenden.</p> + +<p>Beachte, dass ein String zurückgegeben wird. Das heißt, die Eingabe muss manchmal gecasted werden. Beispiel: Falls eine Zahl eingegeben werden soll, sollte der String zu einer Zahl gecasted werden. <code>var aNumber = Number(window.prompt("Gib eine Zahl ein", ""));</code></p> + +<p><a href="/en-US/Chrome" title="Chrome">Mozilla Chrome</a>-Nutzer (z.B. Firefox-Erweiterungen) sollten stattdessen {{interface("nsIPromptService")}} verwenden.</p> + +<p>Seit Chrome {{CompatChrome(46.0)}} wird diese Funktion innerhalb eines {{htmlelement("iframe")}}s blockiert, es sei denn, dessen sandbox-Attribut hat den Wert <code>allow-modal</code>.</p> + +<p>In Safari wird auch dann ein leerer String zurückgegeben, wenn <em>Abbrechen</em> gedrückt wurde. Es macht also keinen Unterschied, ob OK oder Abbrechen gedrückt wird, wenn das Eingabefeld leer ist.</p> + +<p>Diese Funktion hat keinen Effekt in der Modern UI/Metro-Version von Internet Explorer für Windows 8. Es zeigt kein Dialogfenster an und gibt immer <code>undefined</code> zurück. Es ist unklar, ob dieses Verhalten Absicht oder ein Bug ist. Desktopversionen von Internet Explorer implementieren die Funktion aber.</p> + +<h2 id="Specification" name="Specification">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikationen</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML5 Web application', '#dom-prompt', 'prompt()')}}</td> + <td>{{Spec2('HTML5 Web application')}}</td> + <td><span class="short_text" id="result_box" lang="de"><span>Anfängliche</span> <span>Definition</span><span>.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{domxref("window.alert", "alert")}}</li> + <li>{{domxref("window.confirm", "confirm")}}</li> +</ul> diff --git a/files/de/web/api/window/screenx/index.html b/files/de/web/api/window/screenx/index.html new file mode 100644 index 0000000000..61221ffd18 --- /dev/null +++ b/files/de/web/api/window/screenx/index.html @@ -0,0 +1,98 @@ +--- +title: Window.screenX +slug: Web/API/Window/screenX +translation_of: Web/API/Window/screenX +--- +<div>{{APIRef}}</div> + +<div>Die schreibgeschützte Eigenschaft <code><strong>Window.screenX </strong></code>liefert den Abstand in CSS-Pixeln zwischen dem linken Bildschirmrand und dem linken Rand des Browsers.</div> + +<div> </div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>lLoc</em> = window.screenX +</pre> + +<ul> + <li><em><code>lLoc</code></em> enthält den Abstand in CSS-Pixeln vom linken Bildschirmrand.</li> +</ul> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table" style="height: 49px; width: 1000px;"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSSOM View', '#dom-window-screenx', 'Window.screenX') }}</td> + <td>{{ Spec2('CSSOM View') }}</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() }} [1]</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() }} [1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Vor Firefox 28 nutzte Gecko "device pixel" anstatt CSS-Pixel; anders gesagt nahm es für den Wert von <code>screenPixelsPerCSSPixel </code>für jedes Gerät "1" an.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("Window.screenY")}}</li> +</ul> diff --git a/files/de/web/api/window/scroll/index.html b/files/de/web/api/window/scroll/index.html new file mode 100644 index 0000000000..95f7da74fc --- /dev/null +++ b/files/de/web/api/window/scroll/index.html @@ -0,0 +1,56 @@ +--- +title: Window.scroll() +slug: Web/API/Window/scroll +translation_of: Web/API/Window/scroll +--- +<div>{{APIRef}}</div> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p><span id="result_box" lang="de"><span class="hps">Scrollt das Fenster</span> <span class="hps">zu einer bestimmten</span> <span class="hps">Stelle im Dokument</span><span>.</span></span></p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">window.scroll(<em>x-koord</em>,<em>y-koord</em>) +</pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<ul> + <li><code>x-koord</code> <span id="result_box" lang="de"><span class="hps">ist</span> <span class="hps">das Pixel</span> <span class="hps">auf der horizontalen Achse</span> <span class="hps">des Dokuments</span><span>, das Sie </span><span class="hps">in der oberen</span> <span class="hps">linken Ecke angezeigt haben wollen.</span></span></li> + <li><code>y-koord</code> <span id="result_box" lang="de"><span class="hps">ist</span> <span class="hps">das Pixel</span> <span class="hps">auf der vertikalen Achse</span> <span class="hps">des Dokuments</span><span>, das Sie </span><span class="hps">in der oberen</span> <span class="hps">linken Ecke angezeigt haben wollen.</span></span></li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:html;htmlScript:true;"><!-- <span id="result_box" lang="de"><span class="hps">lege</span> <span class="hps">den 100.</span> <span class="hps">vertikalen</span> <span class="hps">Pixel an der</span> <span class="hps">oberen Fensterrand</span></span> --> + +<button onClick="scroll(0, 100);"<span class="short_text" id="result_box" lang="de"><span class="alt-edited">>Klicken, um 100 Pixel nach unten zu scrollen</span></span></button> +</pre> + +<h2 id="Notes" name="Notes">Notizen</h2> + +<p><a href="/en-US/docs/DOM/window.scrollTo">window.scrollTo</a> ist praktisch dasselbe wie diese Methode. Zum wiederholten Blättern um einen bestimmten Abstand, wird <a href="/en-US/docs/Window.scrollBy">window.scrollBy</a> benutzt. Siehe auch <a href="/en-US/docs/Window.scrollByLines">window.scrollByLines</a>, <a href="/en-US/docs/Window.scrollByPages">window.scrollByPages</a>.</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<article class="approved text-content"> +<div class="boxed translate-rendered"> +<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('CSSOM View', '#dom-window-scrollto', 'window.scrollTo()') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td>Erste Definition.</td> + </tr> + </tbody> +</table> +</div> +</article> diff --git a/files/de/web/api/window/scrollto/index.html b/files/de/web/api/window/scrollto/index.html new file mode 100644 index 0000000000..c33f70df89 --- /dev/null +++ b/files/de/web/api/window/scrollto/index.html @@ -0,0 +1,75 @@ +--- +title: Window.scrollTo() +slug: Web/API/Window/scrollTo +tags: + - API + - Méthode + - Referenz +translation_of: Web/API/Window/scrollTo +--- +<div>{{ APIRef }}</div> + +<p><strong><code>Window.scrollTo()</code></strong> scrollt zu einer spezifischen Koordinate im Dokument.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">window.scrollTo(<em>x-Koordinate</em>, <em>y-Koordinate</em>) +window.scrollTo(<em>options</em>) +</pre> + +<h3 id="Parameter">Parameter</h3> + +<ul> + <li><code>x-Koordinate</code> ist der Pixel auf der horizontalen Achse des Dokuments, wo der obere linke Punkt sein soll.</li> + <li><code>y-koordinate</code> ist der Pixel auf der vertikalen Achse des Dokuments, wo der obere linke Punkt sein soll.</li> +</ul> + +<p>- or -</p> + +<ul> + <li><code>options</code> ist ein {{domxref("ScrollToOptions")}} Dictionary.</li> +</ul> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:js">window.scrollTo(0, 1000); +</pre> + +<p>Mit Benutzung von <code>options</code>:</p> + +<pre class="brush: js">window.scrollTo({ + top: 100, + left: 100, + behavior: 'smooth' +});</pre> + +<h2 id="Anmerkungen">Anmerkungen</h2> + +<p>{{domxref("Window.scroll()")}} ist im Endeffekt die gleiche Methode. Schau dir {{domxref("Window.scrollBy()")}}, {{domxref("Window.scrollByLines()")}}, und {{domxref("Window.scrollByPages()")}} für relatives scrollen an.</p> + +<p>Um Elemente zu scrollen, schau dir {{domxref("Element.scrollTop")}} und {{domxref("Element.scrollLeft")}} an.</p> + +<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('CSSOM View', '#dom-window-scroll', 'window.scroll()') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td>Anfängliche Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("api.Window.scrollTo")}}</p> diff --git a/files/de/web/api/window/sessionstorage/index.html b/files/de/web/api/window/sessionstorage/index.html new file mode 100644 index 0000000000..b5adca4a81 --- /dev/null +++ b/files/de/web/api/window/sessionstorage/index.html @@ -0,0 +1,90 @@ +--- +title: Window.sessionStorage +slug: Web/API/Window/sessionStorage +tags: + - API + - Property + - Storage +translation_of: Web/API/Window/sessionStorage +--- +<p>{{APIRef()}}</p> + +<p>Die <code>sessionStorage</code>-Eigenschaft erlaubt den Zugriff auf ein nur während der aktuellen Sitzung verfügbares <a class="new" href="https://developer.mozilla.org/de/docs/Web/API/Storage" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>Storage</code></a>-Objekt. <code>sessionStorage</code> ist mit einer Ausnahme identisch zu {{domxref("Window.localStorage")}}: In <code>localStorage</code> gespeicherte Daten besitzen kein Verfallsdatum, während sie im <code>sessionStorage</code> mit Ablauf der Sitzung gelöscht werden. Eine Sitzung endet erst mit dem Schließen des Browsers, sie übersteht das Neuladen und Wiederherstellen einer Webseite. <strong>Das Öffnen einer Webseite in einem neuen Tab oder Browserfenster erzeugt jedoch eine neue Sitzung;</strong> ein Unterschied zur Funktionsweise von Session-Cookies<strong>.</strong></p> + +<p><code>localStorage</code> und <code>sessionStorage</code> sind nicht nur von der Domain, sondern auch vom Protokoll abhängig, über das die Seite aufgerufen wurde. In http://example.com/ gespeicherte Daten stehen daher unter https://example.com <em>nicht</em> zur Verfügung.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">// Daten im sessionStorage speichern +sessionStorage.setItem('key', 'value'); + +// Gespeicherte Daten aus dem sessionStorage abfragen +var data = sessionStorage.getItem('key'); + +<code class="language-js"><span class="comment token">// Gespeicherte Daten aus dem sessionStorage</span> entfernen +sessionStorage<span class="punctuation token">.</span><span class="function token">removeItem</span><span class="punctuation token">(</span><span class="string token">'key'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// Alle gespeicherten Daten aus dem sessionStorage entfernen</span> +sessionStorage<span class="punctuation token">.</span><span class="function token">clear</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code> </pre> + +<h3 id="Wert">Wert</h3> + +<p>Ein {{domxref("Storage")}}-Objekt.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Im folgenden Beispiel wird auf das <code>sessionStorage</code>-Objekt der aktuellen Domain zugegriffen und mit {{domxref("Storage.setItem()")}} Daten hinzugefügt:</p> + +<pre class="brush: js">sessionStorage.setItem('myCat', 'Tom');</pre> + +<p>Das folgende Beispiel speichert automatisch den Inhalt eines Textfeldes. Bei einem versehentlichen Neuladen der Seite wird der Inhalt wiederhergestellt, sodass keine Eingaben verloren gehen.</p> + +<pre class="brush: js">// Das Textfeld holen, das überwacht werden soll +var field = document.getElementById("field"); + +// Prüfen, ob ein gespeicherter Wert vorliegt +// (das ist nur dann der Fall, wenn die Seite versehentlich aktualisiert wurde) +if (sessionStorage.getItem("autosave")) { + // Den Inhalt des Testfeldes aus dem sessionStorage wiederherstellen + field.value = sessionStorage.getItem("autosave"); +} + +// Änderungen des Inhalts des Textfeldes überwachen +field.addEventListener("change", function() { + // Speichern des Inhalts des Textfeldes im sessionStorage + sessionStorage.setItem("autosave", field.value); +});</pre> + +<div class="note"> +<p><strong>Anmerkung</strong>: Ein vollständiges Beispiel kann unter <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> nachgelesen werden.</p> +</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('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Window.sessionStorage")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li> + <li>{{domxref("Window.localStorage")}}</li> +</ul> diff --git a/files/de/web/api/window/stop/index.html b/files/de/web/api/window/stop/index.html new file mode 100644 index 0000000000..8968e89177 --- /dev/null +++ b/files/de/web/api/window/stop/index.html @@ -0,0 +1,38 @@ +--- +title: Window.stop() +slug: Web/API/Window/stop +tags: + - API + - DOM + - DOM_0 + - Method + - stopwindowloading +translation_of: Web/API/Window/stop +--- +<div>{{APIRef}}</div> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p>Diese Methode stoppt das Laden des Fensters.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">window.stop() +</pre> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:js">window.stop(); +</pre> + +<h2 id="Notes" name="Notes">Notizen</h2> + +<p>Die stop() Methode ist genau equivalent zum Klicken des Stop-Buttons im Browser. Aufgrund der Reihenfolge in der Scripte geladen werden, kann die stop() Methode nicht das Dokument, in dem es enthalten ist, vom Laden stoppen, aber es stoppt das Laden von großen Bildern, neuen Fenstern, und anderen Objekten, die verzögert geladen werden.</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<p>DOM Level 0. Kein Teil der Spezifikation.</p> + +<h2 id="Compatibility">Compatibility</h2> + +<p>Die stop() Methode wird nicht vom Internet Explorer unterstützt.</p> diff --git a/files/de/web/api/windowbase64/btoa/index.html b/files/de/web/api/windowbase64/btoa/index.html new file mode 100644 index 0000000000..9d980c340a --- /dev/null +++ b/files/de/web/api/windowbase64/btoa/index.html @@ -0,0 +1,145 @@ +--- +title: WindowBase64.btoa() +slug: Web/API/WindowBase64/btoa +tags: + - API + - Méthode + - Referenz +translation_of: Web/API/WindowOrWorkerGlobalScope/btoa +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>Erzeugt eine Base-64-kodierten ASCII-Zeichenkette aus einer "Zeichenkette" von Binärdaten.</p> + +<p>Hinweis: diese Funktion ist nicht für Raw-<a href="http://www.unicode.org/standard/WhatIsUnicode.html">Unicode</a>-Zeichenketten geeignet (siehe Abschnitt "Unicode-Zeichenketten" unten).</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var encodedData = window.btoa(<em>stringToEncode</em>);</pre> + +<h2 id="Example">Example</h2> + +<pre class="brush:js">var encodedData = window.btoa("Hello, world"); // Zeichenkette kodieren +var decodedData = window.atob(encodedData); // Zeichenkette dekodieren +</pre> + +<h2 id="Hinweise">Hinweise</h2> + +<p>Diese Methode kann verwendet werden, um Daten zu kodieren, übertragen, und mittels<code> {{domxref("WindowBase64.atob","window.atob()")}}</code> wieder zu dekodieren, welche andernfalls Übertragungsprobleme bereiten würden. Beispielsweise ist es möglich, die Steuerzeichen mit den ASCII-Werten 0 bis 31 zu kodieren.</p> + +<p><code>btoa()</code> steht auch in JavaScript implementierten XPCOM-Komponenten zur Verfügung, auch wenn <a href="/en-US/docs/DOM/window" title="DOM/window"><code>window</code></a> in solchen Komponenten nicht das globale Objekt ist.</p> + +<h2 id="Unicode-Zeichenketten">Unicode-Zeichenketten</h2> + +<p>In den meisten Browsern verursacht ein Aufruf von <code>window.btoa()</code> mit einer Unicode-Zeichenkette eine "Character Out Of Range"-Exception ("Zeichen außerhalb des zulässigen Wertebereichs").</p> + +<p>Das kann mithilfe eines solchen Code-Schemas vermieden werden (beigesteuert von <a class="external" href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html" title="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a>):</p> + +<pre class="brush:js">function utf8_to_b64(str) { + return window.btoa(unescape(encodeURIComponent(str))); +} + +function b64_to_utf8(str) { + return decodeURIComponent(escape(window.atob(str))); +} + +// Usage: +utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ== +b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode" + +utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ== +b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!" + +</pre> + +<p>Eine günstigere, zuverlässigere und effizientere Lösung ist, <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> zunächst in eine UTF-8-kodierte Zeichenkette zu konvertieren, die sich für <a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a> eignet. Eine Anleitung bietet <strong><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8">dieser Abschnitt</a></strong>.</p> + +<h2 id="Specifications">Specifications</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('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1)}}[1]</td> + <td>10</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>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>{{CompatGeckoMobile(1)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>btoa()</code> is also available to XPCOM components implemented in JavaScript, even though <code><a href="/en-US/docs/DOM/window">window</a></code> is not the global object in components.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> + <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li> + <li>{{domxref("WindowBase64.atob","window.atob()")}}</li> + <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> +</ul> diff --git a/files/de/web/api/windowbase64/index.html b/files/de/web/api/windowbase64/index.html new file mode 100644 index 0000000000..40051820b4 --- /dev/null +++ b/files/de/web/api/windowbase64/index.html @@ -0,0 +1,120 @@ +--- +title: WindowBase64 +slug: Web/API/WindowBase64 +tags: + - API + - HTML-DOM + - Helper + - NeedsTranslation + - TopicStub + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p> + +<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This helper neither defines nor inherits any properties.</em></p> + +<h2 id="Methods">Methods</h2> + +<p><em>This helper does not inherit any methods.</em></p> + +<dl> + <dt>{{domxref("WindowBase64.atob()")}}</dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> + <dt>{{domxref("WindowBase64.btoa()")}}</dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> +</dl> + +<h2 id="Specifications">Specifications</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('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</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>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop(1)}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>10.0</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>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoMobile(1)}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> + <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> +</ul> diff --git a/files/de/web/api/windoweventhandlers/index.html b/files/de/web/api/windoweventhandlers/index.html new file mode 100644 index 0000000000..cdd4a8258b --- /dev/null +++ b/files/de/web/api/windoweventhandlers/index.html @@ -0,0 +1,189 @@ +--- +title: WindowEventHandlers +slug: Web/API/WindowEventHandlers +tags: + - API + - HTML-DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/WindowEventHandlers +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>WindowEventHandlers</code></strong> describes the event handlers common to several interfaces like {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} and {{domxref("HTMLFrameSetElement")}}. Each of these interfaces can implement more event handlers.</p> + +<p><code>WindowEventHandlers</code> is a not an interface and no object of this type can be created.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>The events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("WindowEventHandlers")}}, and implemented by {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.</em></p> + +<dl> + <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("afterprint")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeprint")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeunload")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("hashchange")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("languagechange")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("offline")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("online")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pagehide")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pageshow")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("popstate")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onresize")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("resize")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("storage")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unload")}} event is raised.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface defines no method.</em></p> + +<h2 id="Specifications">Specifications</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('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onlanguage</code> since the {{SpecName("HTML 5")}} snapshot.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowEventHandlers</code> (properties where on the target before it).</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>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onhashchange</code></td> + <td>{{CompatGeckoDesktop(1.9.2)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onlanguage</code>{{experimental_inline}}</td> + <td>{{CompatGeckoDesktop(32)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onstorage</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</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>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onhashchange</code></td> + <td>{{CompatGeckoMobile(1.9.2)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onlanguage</code>{{experimental_inline}}</td> + <td>{{CompatGeckoMobile(32)}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onstorage</code></td> + <td>{{CompatNo}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}</li> +</ul> diff --git a/files/de/web/api/windoweventhandlers/onafterprint/index.html b/files/de/web/api/windoweventhandlers/onafterprint/index.html new file mode 100644 index 0000000000..088f6c91aa --- /dev/null +++ b/files/de/web/api/windoweventhandlers/onafterprint/index.html @@ -0,0 +1,93 @@ +--- +title: WindowEventHandlers.onafterprint +slug: Web/API/WindowEventHandlers/onafterprint +translation_of: Web/API/WindowEventHandlers/onafterprint +--- +<div>{{ApiRef}}</div> + +<div>Die Eigenschaft WindowEventHandlers.onafterprint definiert und gibt den {{event("onafterprint")}} {{domxref("EventHandler")}} für das aktuelle Window aus.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>window</em>.onafterprint = <em>event handling code</em> +</pre> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Manche Browser (inklusive Firefox 6 und neuer, Internet Explorer) senden <code>beforeprint </code>und <code>afterprint</code> Events um zu bestimmen, ob ein Druckvorgang stattgefunden hat. Diese Funktion kann genutzt werden um das User-Interface während des Druckvorgangs anzupassen (z.B das Ausblenden von User-Interface Elementen während des Druckvorgangs).</p> + +<p>Das <code>afterprint E</code>vent wird ausgelöst nachdem der Nutzer gedruckt hat oder den den Druck abgebrochen hat.</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<h2 id="Browserkompatbilität">Browserkompatbilitä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>6.0</td> + <td>{{CompatVersionUnknown}}</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>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("window.print")}}</li> + <li>{{domxref("window.onbeforeprint")}}</li> + <li><a href="/en-US/docs/">Drucken</a></li> + <li>In Webkitbrowsern kann eine equivalentes Ergebnis mit <code>matchMedia('print')</code> erreicht werden.</li> + <li> + <pre><code>var mediaQueryList = window.matchMedia('print'); +mediaQueryList.addListener(function(mql) { +<span class="Apple-tab-span" style="white-space: pre;"> </span>if (!mql.matches) { +<span class="Apple-tab-span" style="white-space: pre;"> </span>console.log('onafterprint'); +<span class="Apple-tab-span" style="white-space: pre;"> </span>}; +});</code> +</pre> + </li> +</ul> + +<div class="grammarly-disable-indicator"> </div> diff --git a/files/de/web/api/windoweventhandlers/onhashchange/index.html b/files/de/web/api/windoweventhandlers/onhashchange/index.html new file mode 100644 index 0000000000..3bb0fb12a9 --- /dev/null +++ b/files/de/web/api/windoweventhandlers/onhashchange/index.html @@ -0,0 +1,162 @@ +--- +title: WindowEventHandlers.onhashchange +slug: Web/API/WindowEventHandlers/onhashchange +tags: + - Eigenschaft + - Event + - HTML-DOM + - Referenz + - WindowEventHandlers +translation_of: Web/API/WindowEventHandlers/onhashchange +--- +<div> +<div>{{APIRef("HTML DOM")}}</div> +</div> + +<p>Das <strong>hashchange</strong> Event wird ausgelöst wenn sich der window.hash verändert (siehe {{domxref("Window.location", "location.hash")}}).</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">window.onhashchange = funcRef; +</pre> + +<p><strong>oder</strong></p> + +<pre class="syntaxbox"><body onhashchange="funcRef();"> +</pre> + +<p><strong>oder</strong></p> + +<pre class="syntaxbox">window.addEventListener("hashchange", funcRef, false); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>funcRef</code></dt> + <dd>Ein Verweis auf eine Funktion.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:js">if ("onhashchange" in window) { + alert("Der Browser unterstützt das hashchange-Event!"); +} + +function locationHashChanged() { + if (location.hash === "#irgendeinCoolesFeature") { + featureFunction(); + } +} + +window.onhashchange = locationHashChanged; +</pre> + +<h2 id="Das_hashchange_Event">Das hashchange Event</h2> + +<p>Das ausgelöste <code>hashchange</code> Event hat folgende Eigenschaften:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Eigenschaft</td> + <td class="header">Typ</td> + <td class="header">Beschreibung</td> + </tr> + <tr> + <td><code>newURL</code> {{gecko_minversion_inline("6.0")}}</td> + <td><code>DOMString</code></td> + <td>Die neue URL zu der das Fenster nun navigiert.</td> + </tr> + <tr> + <td><code>oldURL</code> {{gecko_minversion_inline("6.0")}}</td> + <td><code>DOMString</code></td> + <td>Die vorherige URL, von der aus das Fenster navigierte.</td> + </tr> + </tbody> +</table> + +<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('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatiblitä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>5.0</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td> + <p>8.0</p> + + <p><code style="font-size: 14px;">oldURL</code>/<code style="font-size: 14px;">newURL</code> Eigenschaften werden nicht unterstützt.</p> + </td> + <td>10.6</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>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>2.2</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<ul> + <li><a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating the browser history">Browserverlauf manipulieren</a>, <a href="/en-US/docs/DOM/window.history" title="DOM/window.history">history.pushState() und history.replaceState()</a>-Methoden, <a href="/en-US/docs/DOM/window.onpopstate" title="DOM/window.onpopstate">popstate</a>-Event.</li> +</ul> diff --git a/files/de/web/api/windoweventhandlers/onpopstate/index.html b/files/de/web/api/windoweventhandlers/onpopstate/index.html new file mode 100644 index 0000000000..5154919751 --- /dev/null +++ b/files/de/web/api/windoweventhandlers/onpopstate/index.html @@ -0,0 +1,57 @@ +--- +title: WindowEventHandlers.onpopstate +slug: Web/API/WindowEventHandlers/onpopstate +translation_of: Web/API/WindowEventHandlers/onpopstate +--- +<div>{{APIRef}} {{gecko_minversion_header("2")}}</div> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p>Hier geht es um die Ereignisbehandlungsroutine, üblicherweise <em>event handler </em>genannt, für das <code>popstate</code> Ereignis (<em>event</em>) des <code>window</code> Objekts.</p> + +<p>Ein <code>popstate</code> Ereignis wird an <code>window</code> übermittelt, wann immer der aktive <code>history</code> Eintrag zwischen zwei Einträgen für dasselbe Dokument wechselt. Falls der zu aktivierende history Eintrag erzeugt wurde durch den Aufruf von <code>history.pushState()</code> oder beeinflusst wurde durch Aufruf von <code>history.replaceState(), </code>dann enthält die <code>state</code> Eigenschaft des <code>popstate</code> Ereignisses eine Kopie des <code>state</code> Objekts des <code>history</code> Eintrags.<code> </code></p> + +<p>Es gilt zu beachten, dass der bloße Aufruf von <code>history.pushState()</code> oder <code>history.replaceState()</code> kein <code>popstate</code> Ereignis auslöst. Das <code>popstate</code> Ereignis wird allein durch Anklicken des Zurück-Buttons (oder den Aufruf von <code>history.back()</code> per Javascript) ausgelöst. Auch wird das Ereignis nur ausgelöst, wenn sich der Anwender zwischen zwei <code>history </code>Einträgen für dasselbe Dokument bewegt.</p> + +<p>Browser behandeln den <code>popstate</code> Zustand nach initialem Laden einer Seite (<code>onload</code>) auf verschiedene Weise. Chrome (vor Version 34) und Safari senden immer ein <code>popstate</code> Ereignis, Firefox hingegen nicht.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">window.onpopstate = <var>funcRef</var>; +</pre> + +<ul> + <li><var>funcRef</var> ist eine <em>event</em> <em>handler</em> Funktion, bzw. Ereignisbehandlungsroutine.</li> +</ul> + +<h2 id="The_popstate_event" name="The_popstate_event">Das popstate Ereignis</h2> + +<p>Zum Beispiel würde eine Seite mit der URL <code><var>http://example.com/example.html</var></code> beim Durchlaufen dieses Codes die folgenden Meldungen in der Konsole ausgeben:</p> + +<pre class="brush:js">window.onpopstate = function(event) { + alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); +}; + +history.pushState({page: 1}, "title 1", "?page=1"); +history.pushState({page: 2}, "title 2", "?page=2"); +history.replaceState({page: 3}, "title 3", "?page=3"); +history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}" +history.back(); // alerts "location: http://example.com/example.html, state: null +history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3} +</pre> + +<p>Obwohl mit dem ursprünglichen <code>history</code> Eintrag (für die URL <code><var>http://example.com/example.html</var></code>) kein <code>state</code> Objekt verknüpft ist, wird dennoch ein <code>popstate</code> Ereignis ausgelöst, sobald dieser Eintrag durch den zweiten Aufruf von <code>history.back()</code> aktiv wird.</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate">HTML5 popstate event</a></li> +</ul> + +<h2 id="See_also" name="See_also">Weiterführende Informationen</h2> + +<ul> + <li>{{domxref("window.history")}}</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history">Manipulating the browser history</a></li> + <li><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example">Ajax navigation example</a></li> +</ul> diff --git a/files/de/web/api/windowtimers/index.html b/files/de/web/api/windowtimers/index.html new file mode 100644 index 0000000000..396aca3d4d --- /dev/null +++ b/files/de/web/api/windowtimers/index.html @@ -0,0 +1,124 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +tags: + - API + - HTML-DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Workers +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p> + +<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface do not define any property, nor inherit any.</em></p> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface do not inherit any method.</em></p> + +<dl> + <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> + <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> + <dt>{{domxref("WindowTimers.setInterval()")}}</dt> + <dd>Schedules the execution of a function each X milliseconds.</dd> + <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> + <dd>Sets a delay for executing a function.</dd> +</dl> + +<h2 id="Specifications">Specifications</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('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</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>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop(1)}}</td> + <td>1.0</td> + <td>4.0</td> + <td>4.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoMobile(1)}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> +</ul> diff --git a/files/de/web/api/windowtimers/settimeout/index.html b/files/de/web/api/windowtimers/settimeout/index.html new file mode 100644 index 0000000000..9f13870d78 --- /dev/null +++ b/files/de/web/api/windowtimers/settimeout/index.html @@ -0,0 +1,329 @@ +--- +title: WindowTimers.setTimeout() +slug: Web/API/WindowTimers/setTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>Die Funktion <strong><code>setTimeout()</code></strong> der {{domxref("WindowOrWorkerGlobalScope")}}-Schnittstelle ruft nach der gegebenen Zeitspanne eine Funktion oder direkt angebenen Code auf.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>var timeoutID</em> = window.setTimeout(funktion, zeitspanne, [<em>parameter1</em>, <em>parameter2</em>, ...]); +<em>var timeoutID</em> = window.setTimeout(<em>code</em>, zeitspanne); +</pre> + +<p> </p> + +<h3 id="Parameter">Parameter</h3> + +<p> </p> + +<dl> + <dt><code>funktion</code></dt> + <dd>Die {{jsxref("function", "Funktion")}}, die nach <code>zeitspanne</code> Millisekunden ausgeführt werden soll.</dd> + <dt><code>code</code></dt> + <dd><code>code</code> in der alternativen Syntax ist eine Zeichenkette, die Code enthält, der nach <code>zeitspanne</code> Millisekunden ausgeführt werden soll. <code>code</code> sollte aus den gleichen Gründen, die auch <a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don%27t_use_eval!" title="en-US/docs/Core JavaScript 1.5 Reference/Global Functions/Eval#Don't use eval!">eval()</a> zum Sicherheitsrisiko machen, <strong>nicht verwendet</strong> werden.</dd> + <dt><code>zeitspanne</code> {{optional_inline}}</dt> + <dd><code>zeitspanne</code> ist die Wartezeit in Millisekunden (ein Tausendstel einer Sekunde), nach der <code>funktion</code> bzw. <code>code</code> ausgeführt werden soll. Dieser Wert ist ein Mindestwert, die tatsächlich abgelaufene Zeit kann länger sein, siehe {{anch("Gründe für längere als gegebene Wartezeiten")}} weiter unten.</dd> + <dt><code>parameter1, ..., parameterN</code> {{optional_inline}}</dt> + <dd>Diese Parameter werden an die <code>funktion</code><em> </em>oder den <code>code</code> übergeben.</dd> +</dl> + +<div class="note"><strong>Anmerkung:</strong> Der Internet Explorer unterstützt bis einschließlich Version 9 die Übergabe von zusätzlichen Parametern nicht.</div> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p><code>setTimeout()</code> gibt eine ID zurück, die den eingerichteten Zeitgeber identifiziert; um die Wartezeit abzubrechen, kann sie an {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}} übergeben werden.</p> + +<p>Jede ID wird von <code>setTimeout()</code> und <code>setInterval()</code> nur einmalig je Objekt (window oder Worker) verwendet.</p> + +<h2 id="Examples" name="Examples">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Beispiel<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>delayedAlert();<span class="punctuation token">"</span></span><span class="punctuation token">>Zeige nach zwei Sekunden einen Alarm.</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>clearAlert();<span class="punctuation token">"</span></span><span class="punctuation token">>Alarm</span></span> vorzeitig abbrechen.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span></code></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> timeoutID<span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">delayedAlert</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + timeoutID <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">setTimeout</span><span class="punctuation token">(</span>slowAlert<span class="punctuation token">,</span> <span class="number token">2000</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">function</span> <span class="function token">slowAlert</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'Das hat gedauert!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">function</span> <span class="function token">clearAlert</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + window<span class="punctuation token">.</span><span class="function token">clearTimeout</span><span class="punctuation token">(</span>timeoutID<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample('Example')}}</p> + +<p>Siehe auch <a href="/en-US/docs/DOM/window.clearTimeout#Example" title="en-US/docs/DOM/window.clearTimeout#Example"><code>clearTimeout()</code></a></p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Der nachfolgende Polyfill-Code ermöglicht es, der aufzurufenden Funktion auch im Internet Explorer Parameter zu übergeben:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">/*\ +|*| +|*| Polyfill which enables the passage of arbitrary arguments to the +|*| callback functions of JavaScript timers (HTML5 standard syntax). +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/window.setInterval +|*| +|*| Syntax: +|*| var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]); +|*| var timeoutID = window.setTimeout(code, delay); +|*| var intervalID = window.setInterval(func, delay[, param1, param2, ...]); +|*| var intervalID = window.setInterval(code, delay); +|*| +\*/</span> + +<span class="punctuation 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="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>arg1<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>arg1 <span class="operator token">===</span> <span class="string token">'test'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// feature test is passed, no need for polyfill</span> + <span class="keyword token">return</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">var</span> __nativeST__ <span class="operator token">=</span> window<span class="punctuation token">.</span>setTimeout<span class="punctuation token">;</span> + window<span class="punctuation token">.</span>setTimeout <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>vCallback<span class="punctuation token">,</span> nDelay <span class="comment token">/*, argumentToPass1, argumentToPass2, etc. */</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> aArgs <span class="operator token">=</span> Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>slice<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>arguments<span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">return</span> <span class="function token">__nativeST__</span><span class="punctuation token">(</span>vCallback <span class="keyword token">instanceof</span> <span class="class-name token">Function</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> + vCallback<span class="punctuation token">.</span><span class="function token">apply</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">,</span> aArgs<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="punctuation token">:</span> vCallback<span class="punctuation token">,</span> nDelay<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="number token">0</span><span class="punctuation token">,</span> <span class="string token">'test'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="keyword token">var</span> interval <span class="operator token">=</span> <span class="function token">setInterval</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>arg1<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">clearInterval</span><span class="punctuation token">(</span>interval<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>arg1 <span class="operator token">===</span> <span class="string token">'test'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// feature test is passed, no need for polyfill</span> + <span class="keyword token">return</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">var</span> __nativeSI__ <span class="operator token">=</span> window<span class="punctuation token">.</span>setInterval<span class="punctuation token">;</span> + window<span class="punctuation token">.</span>setInterval <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>vCallback<span class="punctuation token">,</span> nDelay <span class="comment token">/*, argumentToPass1, argumentToPass2, etc. */</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> aArgs <span class="operator token">=</span> Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>slice<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>arguments<span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">return</span> <span class="function token">__nativeSI__</span><span class="punctuation token">(</span>vCallback <span class="keyword token">instanceof</span> <span class="class-name token">Function</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> + vCallback<span class="punctuation token">.</span><span class="function token">apply</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">,</span> aArgs<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="punctuation token">:</span> vCallback<span class="punctuation token">,</span> nDelay<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="number token">0</span><span class="punctuation token">,</span> <span class="string token">'test'</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="punctuation token">)</span></code></pre> + +<p>Eine andere Möglichkeit ist, die Funktion innerhalb einer anonymen Funktion aufzurufen:</p> + +<pre class="brush: js">setTimeout(function() { + funktion("eins", "zwei", "drei"); +}, 1000); +</pre> + +<p>Ebenfalls kann die Funktion <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind"><code>bind()</code></a> genutzt werden:</p> + +<p> </p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>arg1, arg2, arg3<span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">.</span><span class="function token">bind</span><span class="punctuation token">(</span>undefined<span class="punctuation token">,</span> "eins", "zwei", "drei"<span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">1000</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p> </p> + +<h2 id="Das_this-Problem">Das "<code>this</code>"-Problem</h2> + +<p>In der an <code>setTimeout()</code> übergebenen Funktion wird <code>this</code> bei Aufruf einen falschen Wert enthalten. Dieses Problem wird detailliert in der <a href="/en-US/docs/JavaScript/Reference/Operators/this#Method_binding" title="en-US/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator#Method_binding">JavaScript-Referenz</a> beschrieben.</p> + +<h3 id="Erklärung">Erklärung</h3> + +<p>Von <code>setTimeout()</code> ausgeführter Code wird in einem anderen Kontext ausgeführt, als in dem <code>setTimeout()</code> aufgerufen wurde. <code>this</code> wird deshalb in der aufgerufenen Funktion <code>window</code> oder <code>global</code> entsprechen, nicht dem <code>this</code> des Bereichs, in dem <code>setTimeout()</code> aufgerufen wurde. Beispiel:</p> + +<pre class="brush: js">myArray = ["null", "eins", "drei"]; +myArray.myMethod = function (sProperty) { + alert(arguments.length > 0 ? this[sProperty] : this); +}; + +myArray.myMethod(); // Ausgabe: "null,eins,zwei" +myArray.myMethod(1); // Ausgabe: "eins" +setTimeout(myArray.myMethod, 1000); // Ausgabe: "[object Window]" nach 1 Sekunde +setTimeout(myArray.myMethod, 1500, "1"); // Ausgabe: "undefined" nach 1,5 Sekunden +// Versuchen wir, 'this' zu übergeben +setTimeout.call(myArray, myArray.myMethod, 2000); // Fehler: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object" +setTimeout.call(myArray, myArray.myMethod, 2500, 2); // Der gleiche Fehler</pre> + +<p>Es gibt hier keine Möglichkeit, <code>this</code> an die aufzurufende Funktion durchzureichen.</p> + +<h3 id="Eine_Lösungsmöglichkeit">Eine Lösungsmöglichkeit</h3> + +<p>Eine Möglichkeit, das Problem zu umgehen, ist es, die beiden eingebauten Funktionen <code>setTimeout()</code> und <code>setInterval()</code> durch zwei eigene zu ersetzen, die sich <a href="en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> bedienen:</p> + +<pre class="brush: js">// Enable the passage of the 'this' object through the JavaScript timers + +var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval; + +window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { + var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeST__(vCallback instanceof Function ? function () { + vCallback.apply(oThis, aArgs); + } : vCallback, nDelay); +}; + +window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { + var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeSI__(vCallback instanceof Function ? function () { + vCallback.apply(oThis, aArgs); + } : vCallback, nDelay); +};</pre> + +<div class="note"><strong>Hinweis:</strong> Diese beiden Ersatzfunktionen ermöglichen es auch, im Internet Explorer Parameter an die aufzurufende Funktion zu übergeben, wie es HTML5 vorsieht. Sie können daher auch als {{anch("Polyfill")}} benutzt werden.</div> + +<h2 id="Anmerkungen">Anmerkungen</h2> + +<p>Eine Wartezeit kann mit <code><a href="/en-US/docs/DOM/window.clearTimeout" title="en-US/docs/DOM/window.clearTimeout">window.clearTimeout()</a></code> abgebrochen werden.</p> + +<p>Soll eine Funktion wiederholt alle n Millisekunden aufgerufen werden, ist <code><a href="/en-US/docs/DOM/window.setInterval" title="en-US/docs/DOM/window.setInterval">window.setInterval()</a></code> die bessere Wahl.</p> + +<h3 id="Passing_string_literals">Passing string literals</h3> + +<p>Passing a string instead of a function to <code>setTimeout()</code> suffers from the same hazards as using <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval">eval</a>. </code></p> + +<pre class="brush: js">// Correct +window.setTimeout(function() { + alert("Hello World!"); +}, 500); + +// Incorrect +window.setTimeout("alert(\"Hello World!\");", 500); + +</pre> + +<p>String literals are evaluated in the global context, so local symbols in the context where <code>setTimeout()</code> was called will not be available when the string is evaluated as code.</p> + +<h3 id="Gründe_für_längere_als_gegebene_Wartezeiten">Gründe für längere als gegebene Wartezeiten</h3> + +<p>Aus verschiedenen Gründen kann die tatsächliche Zeit bis zum Aufruf der Funktion länger sein als mit setTimeout() angegeben wurde. Dieser Abschnitt beschreibt die beiden häufigsten.</p> + +<h4 id="Wartezeiten_betragen_4ms_oder_mehr">Wartezeiten betragen 4ms oder mehr</h4> + +<p>Um das System nicht zu überlasten, begrenzen moderne Browser die Häufigkeit der von setTimeout() und setInterval() ausgelösten Ereignisse ab einer bestimmten Aufruftiefe oder -häufigkeit. Beispiel:</p> + +<pre class="brush: js line-numbers language-js" id="ct-0"><code class="language-js"><span class="keyword token">function</span> <span class="function token">cb</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="function token">f</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="function token">setTimeout</span><span class="punctuation token">(</span>cb<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> +<span class="function token">setTimeout</span><span class="punctuation token">(</span>cb<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="function token">setInterval</span><span class="punctuation token">(</span>f<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Chrome und Firefox drosseln nach dem fünften Aufruf, Safari nach dem sechsten, Edge bereits nach dem dritten.</p> + +<p>Eine Wartezeit von 0 ms kann mit {{domxref("window.postMessage()")}} erreicht werden, wie <a class="external external-icon" href="http://dbaron.org/log/20100309-faster-timeouts">hier beschrieben</a>.</p> + +<p> </p> + +<div class="note"> +<p><strong>Hinweis</strong>: Die Mindestwartezeit, <code>DOM_MIN_TIMEOUT_VALUE</code>, beträgt 4 ms (Firefox-Einstellung <code>dom.min_timeout_value</code>), die Verschachtelungstiefe <code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> beträgt 5.</p> +</div> + +<div class="note"> +<p><strong>Hinweis</strong>: Der Wert 4 ms wurde mit <a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">HTML5 festgelegt</a> und wird von allen Browsern umgesetzt, die nach 2010 erschienen sind. Vor {{geckoRelease("5.0")}} war der Mindestwert 10 ms.</p> +</div> + +<p> </p> + +<p> </p> + +<h4 id="Wartezeiten_in_inaktiven_Tabs_größer_als_1s">Wartezeiten in inaktiven Tabs größer als 1s</h4> + +<p>Um die Last noch weiter zu verringern, beträgt die Mindestwartezeit in sich im Hintergrund befindlichen Tabs grundsätzlich mindestens 1 s.</p> + +<p>Firefox setzt diese Beschränkung seit Version 5 um (siehe {{bug(633421)}}). Der Wert von 1000 ms kann in der Einstellungen <span class="comment-copy"><code>dom.min_background_timeout_value</code> geändert werden.</span><br> + Chrome setzt diese Beschränkung seit Version 11 um (<a class="external external-icon" href="http://crbug.com/66078">crbug.com/66078</a>).</p> + +<p>Bei Firefox für Android beträgt seit Version 14 die Mindestwartezeit in sich im Hintergrund befindlichen Tabs 15 Minuten (siehe {{bug(736602)}}). Jegliche Aktivität in diesen Tabs kann auch vollständig angehalten werden.</p> + +<div class="note"> +<p>Seit Version 50 gelten in Firefox keine Beschränkungen mehr, falls sich die Web Audio API {{domxref("AudioContext")}} im Wiedergabemodus befindet. Seit Firefox 51 gilt dies bereits für jegliche Dokumente mit einem {{domxref("AudioContext")}}, unabhängig von dessen Status.<br> + Apps, die Musik Note für Note abspielen, konnten wegen der Beschränkungen den Takt nicht halten, sobald sie in den Hintergrund gelegt wurden.</p> +</div> + +<h4 id="Lastbedingte_Verzögerungen">Lastbedingte Verzögerungen</h4> + +<p>Zusätzlich zum aktiven Drosseln kann es zu verlängerten Wartezeiten kommen, falls das Dokument, der Browser oder das Betriebssystem anderweitig beschäftigt sind. Ein wichtiger Punkt in diesem Zusammenhang ist, dass die aufzurufende Funktion nicht ausgeführt werden kann, solange der Thread, der <code>setTimeout()</code> aufgerufen hat, noch aktiv ist:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> bla<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="string token">'bla wurde aufgerufen'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> +<span class="function token">setTimeout</span><span class="punctuation token">(</span>bla<span class="punctuation token">,</span> <span class="number token">0</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="string token">'hinter setTimeout'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Ergebnis:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">hinter setTimeout +bla wurde aufgerufen</code></pre> + +<p>Obwohl <code>setTimeout</code> die sofortige Ausführung angewiesen wurde, wird der Aufruf von bla() in einer Warteschlange bis zur nächsten Gelegenheit zurückgestellt. Erst wenn der aktuell laufende Code ausgeführt wurde, werden die in der Warteschlange gesammelten Aufrufe abgearbeitet. In der Folge ist der Programmablauf nicht, wie eventuell erwartet.</p> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Eigenschaft</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basis</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>4.0</td> + <td>4.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Eigenschaft</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</td> + <td>1.0</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile("1") }}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<p>Gehört zu DOM-Level 0, wie spezifiziert in <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#timers" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#timers">HTML5</a>.</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{domxref("window.setInterval")}}</li> + <li>{{domxref("window.requestAnimationFrame")}}</li> +</ul> diff --git a/files/de/web/api/worker/index.html b/files/de/web/api/worker/index.html new file mode 100644 index 0000000000..258fc77862 --- /dev/null +++ b/files/de/web/api/worker/index.html @@ -0,0 +1,191 @@ +--- +title: Worker +slug: Web/API/Worker +translation_of: Web/API/Worker +--- +<p>{{APIRef("Web Workers API")}}</p> + +<p>Das <strong><code>Worker</code></strong> Interface der <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> beschreibt eine im Hintergrund ausgeführte Programmlogik, die leicht erstellt werden kann und Nachrichten mit dem Ersteller austauschen. Einen Worker erzeugen erfolgt einfach über den Aufruf des <code>Worker()</code> Konstruktors unter Angabe eines Scripts, welches in dem Worker Thread ausgeführt werden soll.</p> + +<p>Worker selbst können zudem weitere (sog. "verschachtelte") Worker erzeugen, solange diese in demselben <a href="/en-US/docs/Web/Security/Same-origin_policy">origin</a> wie die übergeordnete Seite liegen (Achtung: verschachtelte Worker sind <a href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5R3B4RN4GHU">aktuell nicht in Blink implementiert</a>). Zusätzlich können Worker das <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> nutzen, um auf Netzwerk I/O zuzugreifen, unter der Voraussetzung, dass die Attribute <code>responseXML</code> und <code>channel</code> des <code>XMLHttpRequest</code> immer den Wert <code>null </code>zurück liefern.</p> + +<p><a href="/En/DOM/Worker/Functions_available_to_workers" title="En/DOM/Worker/Functions available to workers">Nicht alle Interfaces und Funktionen sind verfügbar</a> für das mit dem <code>Worker</code> assoziierte Script.</p> + +<p>Zur Verwendung eines <code>Worker</code>s mit Zugriff auf <a href="/en/js-ctypes" title="en/js-ctypes">js-ctypes</a> in Browser-Erweiterungen (Extension) für den Firefox bitte das {{ domxref("ChromeWorker") }} Objekt nutzen.</p> + +<h2 id="Constructors">Constructors</h2> + +<dl> + <dt>{{domxref("Worker.Worker", "Worker()")}}</dt> + <dd>Erzeugt einen neuen Web Worker, der das über seine URL referenzierte Script ausführt. Worker können auch über <a href="/en-US/docs/Web/API/Blob">Blobs</a> erzeugt werden.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em>Erbt die Eigenschaften seines parents, {{domxref("EventTarget")}}, und implementiert die Eigenschaften von {{domxref("AbstractWorker")}}.</em></p> + +<h3 id="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("AbstractWorker.onerror")}}</dt> + <dd>Ein {{ domxref("EventListener") }}, welcher jedesmal dann aufgerufen wird, wenn ein {{domxref("ErrorEvent")}} des Typs <code>error</code> den Worker erreicht. Dies ist geerbt von {{domxref("AbstractWorker")}}.</dd> + <dt>{{domxref("Worker.onmessage")}}</dt> + <dd>Ein {{ domxref("EventListener") }}, welcher jedesmal dann aufgerufen wird, wenn ein {{domxref("MessageEvent")}} des Typs <code>message</code> den Worker erreicht — d.h. der Worker erhält eine Nachricht von seinem übergeordneten document via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. Diese Nachricht wird innerhalb des Events in der {{domxref("MessageEvent.data", "data")}} Eigenschaft gespeichert.</dd> + <dt>{{domxref("Worker.onmessageerror")}}</dt> + <dd>Der {{domxref("EventHandler")}}, dessen Code aufgerufen werden soll, wenn es zu einem {{event("messageerror")}} Event kommt.</dd> +</dl> + +<dl> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Erbt die Methoden seines parents, {{domxref("EventTarget")}}, und implementiert die Methoden von {{domxref("AbstractWorker")}}.</em></p> + +<dl> + <dt>{{domxref("Worker.postMessage()")}}</dt> + <dd>Sendet eine Nachricht an den Worker. Diese kann dabei aus einem <code>beliebigen</code> JavaScript Objekt bestehen.</dd> + <dt>{{domxref("Worker.terminate()")}}</dt> + <dd>Beendet den Worker unmittelbar. Hierüber besteht dabei nicht die Möglichkeit, dem Worker die Gelegenheit für ein geordnetes Beenden von laufenden Operationen zu geben. Vielmehr wird der Worker sofort beendet. ServiceWorker Instanzen unterstützen diese Methode nicht.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>Das nachfolgende Beispiel zeigt wie ein {{domxref("Worker")}} mittels des {{domxref("Worker.Worker", "Worker()")}} Konstruktors erzeugt und verwendet wird:</p> + +<pre class="brush: js">var myWorker = new Worker('worker.js'); +var first = document.querySelector('#number1'); +var second = document.querySelector('#number2'); + +first.onchange = function() { + myWorker.postMessage([first.value,second.value]); + console.log('Message posted to worker'); +}</pre> + +<p>Ein vollständiges Beispiel findet sich hier: <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p> + +<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('HTML WHATWG', "#worker", "Worker")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>Die Unterstützung der einzelnen Worker ist abhängig vom Typ und variiert. Wie ein Worker konkret unterstützt wird, kann der Seite zu dem Worker Typ entnommen werden.</p> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.5</td> + <td>10.0</td> + <td>10.6</td> + <td>4</td> + </tr> + <tr> + <td>Constructor <code>name</code> option</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(55)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmessageerror</code></td> + <td>60</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(57)}}</td> + <td>{{CompatNo}}</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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.5</td> + <td>10.0</td> + <td>11.5</td> + <td>5.1</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Constructor <code>name</code> option</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(55)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onmessageerror</code></td> + <td>60</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(57)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Cross-origin_worker_error_behaviour">Cross-origin worker error behaviour</h3> + +<p>In früheren Browserversionen kam es zu einem <code>SecurityError</code> bei dem Versuch ein Script für einen cross-origin worker zu laden. In neueren Browsern wird, aufgrund einer Änderung der Spezifikation, stattdessen ein {{event("error")}} Event erzeugt. Mehr über den Umgang mit solchen Fehlern ist hier zu finden: <a href="https://www.fxsitecompat.com/en-CA/docs/2016/loading-cross-origin-worker-now-fires-error-event-instead-of-throwing-worker-in-sandboxed-iframe-no-longer-allowed/">Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed</a>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="internal" href="/En/Using_web_workers" title="en/Using DOM workers">Using web workers</a></li> + <li><a href="/En/DOM/Worker/Functions_available_to_workers" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">Functions available to workers</a></li> + <li>Andere Workers Typen {{ domxref("SharedWorker") }} und <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a>.</li> + <li>Nicht Standard, die Gecko-spezifischen Workers {{ domxref("ChromeWorker") }}, für Browser-Erweiterungen.</li> +</ul> diff --git a/files/de/web/api/xmlhttprequest/index.html b/files/de/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..913acfb17a --- /dev/null +++ b/files/de/web/api/xmlhttprequest/index.html @@ -0,0 +1,710 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p><code>XMLHttpRequest</code> ist ein <a href="/JavaScript" title="JavaScript">JavaScript</a> Objekt, das von Microsoft entwickelt und von Mozilla, Apple, und Google übernommen wurde. Es wird derzeit <a href="http://www.w3.org/TR/XMLHttpRequest/" title="http://www.w3.org/TR/XMLHttpRequest/">im W3C standardisiert</a>. Es bietet einen einfachen Weg, Daten von einem URL zu erhalten. Trotz seines Namens kann man mit <code>XMLHttpRequest</code> jede Art von Daten laden, nicht nur XML, und es unterstützt auch andere Protokolle als <a href="/en-US/docs/HTTP" title="HTTP">HTTP</a> (inklusive <code>file</code> und <code>ftp</code>).</p> + +<p>Eine Instanz von <code>XMLHttpRequest</code> erzeugt man ganz einfach so:</p> + +<pre>var myRequest = new XMLHttpRequest(); +</pre> + +<p>Für Näheres zur Verwendung von <code>XMLHttpRequest</code>, siehe <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a>.</p> + +<h2 id="Übersicht_Methoden">Übersicht: Methoden</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><code><a href="#XMLHttpRequest()" title="DOM/XMLHttpRequest#XMLHttpRequest()">XMLHttpRequest</a>(JSObject objParameters);</code></td> + </tr> + <tr> + <td><code>void <a href="#abort()" title="DOM/XMLHttpRequest#abort()">abort</a>();</code></td> + </tr> + <tr> + <td><code>DOMString <a href="#getAllResponseHeaders()" title="DOM/XMLHttpRequest#getAllResponseHeaders()">getAllResponseHeaders</a>();</code></td> + </tr> + <tr> + <td><code>DOMString? <a href="#getResponseHeader()" title="DOM/XMLHttpRequest#getResponseHeader()">getResponseHeader</a>(DOMString header);</code></td> + </tr> + <tr> + <td><code>void <a href="#open()" title="DOM/XMLHttpRequest#open()">open</a>(DOMString method, DOMString url, optional boolean async, optional DOMString? user, optional DOMString? password);</code></td> + </tr> + <tr> + <td><code>void <a href="#overrideMimeType()" title="DOM/XMLHttpRequest#overrideMimeType()">overrideMimeType</a>(DOMString mime);</code></td> + </tr> + <tr> + <td><code>void <a href="#send()" title="DOM/XMLHttpRequest#send()">send</a>();</code><br> + <code>void <a href="#send()" title="DOM/XMLHttpRequest#send()">send</a>(ArrayBuffer data);</code><br> + <code>void <a href="#send()" title="DOM/XMLHttpRequest#send()">send</a>(Blob data);</code><br> + <code>void <a href="#send()" title="DOM/XMLHttpRequest#send()">send</a>(Document data);</code><br> + <code>void <a href="#send()" title="DOM/XMLHttpRequest#send()">send</a>(DOMString? data);</code><br> + <code>void <a href="#send()" title="DOM/XMLHttpRequest#send()">send</a>(FormData data);</code></td> + </tr> + <tr> + <td><code>void <a href="#setRequestHeader()" title="DOM/XMLHttpRequest#setRequestHeader()">setRequestHeader</a>(DOMString header, DOMString value);</code></td> + </tr> + <tr> + <th>Nicht-Standard Methoden</th> + </tr> + <tr> + <td><code>[noscript] void <a href="#init()" title="DOM/XMLHttpRequest#init()">init</a>(in nsIPrincipal principal, in nsIScriptContext scriptContext, in nsPIDOMWindow ownerWindow);</code></td> + </tr> + <tr> + <td><code>[noscript] void <a href="#openRequest()" title="DOM/XMLHttpRequest#openRequest()">openRequest</a>(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password); </code></td> + </tr> + <tr> + <td><code>void <a href="#sendAsBinary()" title="DOM/XMLHttpRequest#sendAsBinary()">sendAsBinary</a>(in DOMString body);</code></td> + </tr> + </tbody> +</table> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Attribut</th> + <th>Typ</th> + <th>Beschreibung</th> + </tr> + <tr id="onreadystatechange"> + <td> + <p><code>onreadystatechange</code></p> + </td> + <td><code>Function?</code></td> + <td> + <p>Ein JavaScript function Objekt, das bei jedem Wechsel des <code>readyState</code> Attributs aufgerufen wird. Das Callback wird aus dem Thread der Benutzerschnittstelle aufgerufen.</p> + + <div class="warning"><strong>Warnung:</strong> Dies <em>sollte</em> nicht mit synchronen Anfragen und <em>darf</em> nicht aus nativem Code heraus verwendet werden.</div> + </td> + </tr> + <tr id="readyState"> + <td><code>readyState</code></td> + <td><code>unsigned short</code></td> + <td> + <p>Der Status der Anfrage:</p> + + <table class="standard-table"> + <tbody> + <tr> + <td class="header">Wert</td> + <td class="header">Status</td> + <td class="header">Beschreibung</td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>UNSENT</code></td> + <td><code>open()</code>wurde noch nicht aufgerufen.</td> + </tr> + <tr> + <td><code>1</code></td> + <td><code>OPENED</code></td> + <td><code>send()</code>wurde noch nicht aufgerufen.</td> + </tr> + <tr> + <td><code>2</code></td> + <td><code>HEADERS_RECEIVED</code></td> + <td><code>send()</code> wurde aufgerufen, und Headers sowie Status sind verfügbar.</td> + </tr> + <tr> + <td><code>3</code></td> + <td><code>LOADING</code></td> + <td>Download ist im Gange; <code>responseText</code> enthält bereits unvollständige Daten.</td> + </tr> + <tr> + <td><code>4</code></td> + <td><code>DONE</code></td> + <td>Der Vorgang ist abgeschlossen.</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr id="response"> + <td><code>response</code></td> + <td>variiert</td> + <td> + <p>Der Entitätskörper der Antwort (response entity body) gemäss <code><a href="#responseType">responseType</a></code>, als ein <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>, <a href="/en-US/docs/DOM/Blob" title="DOM/Blob"><code>Blob</code></a>, {{domxref("Document")}}, JavaScript Objekt (für "json"), oder string. Dies ist <code>null</code> falls die Anfrage nicht abgeschlossen ist oder erfolglos war.</p> + </td> + </tr> + <tr id="responseText"> + <td><code>responseText</code> {{ReadOnlyInline}}</td> + <td><code>DOMString</code></td> + <td>Die Antwort auf die Anfrage als Text, oder <code>null</code> falls die Anfrage nicht abgeschlossen ist oder erfolglos war.</td> + </tr> + <tr id="responseType"> + <td><code>responseType</code></td> + <td><code>XMLHttpRequestResponseType</code></td> + <td> + <p>Kann gesetzt werden, um den Datentyp der Antwort zu ändern.</p> + + <table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Wert</td> + <td class="header">Datentyp der <code>response</code> Eigenschaft</td> + </tr> + <tr> + <td><code>""</code> (leerer String)</td> + <td>String (Das ist der Default)</td> + </tr> + <tr> + <td><code>"arraybuffer"</code></td> + <td><a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a></td> + </tr> + <tr> + <td><code>"blob"</code></td> + <td>{{domxref("Blob")}}</td> + </tr> + <tr> + <td><code>"document"</code></td> + <td>{{domxref("Document")}}</td> + </tr> + <tr> + <td><code>"json"</code></td> + <td>JavaScript Objekt, geparsed aus einem JSON String, der vom Server zurückgegeben wird.</td> + </tr> + <tr> + <td><code>"text"</code></td> + <td>String</td> + </tr> + <tr> + <td><code>"moz-blob"</code></td> + <td>Wird von Firefox verwendet, um den Bezug partieller {{domxref("Blob")}} Daten von <code>progress</code> Events zu erlauben. Dadurch kann ein <code>progress</code> Event Handler bereits mit der Verarbeitung von Daten beginnen, während ihr Empfang noch läuft.</td> + </tr> + <tr> + <td><code>"moz-chunked-text"</code></td> + <td> + <p>Ähnlich wie <code>"text"</code>, aber streamt die Daten. Das bedeutet, dass der Wert in <code>response</code> nur während des <code>"progress"</code> Event verfügbar ist und jeweils nur die Daten enthält, die seit dem letzten <code>"progress"</code> Event eingetroffen sind.</p> + + <p>Wenn auf <code>response</code> während eines <code>"progress"</code> Events zugegriffen wird, enthält es einen String mit den Daten. Andernfalls gibt es <code>null</code> zurück.</p> + + <p>Dieser Modus funktioniert derzeit nur in Firefox.</p> + </td> + </tr> + <tr> + <td><code>"moz-chunked-arraybuffer"</code></td> + <td> + <p>Ähnlich wie <code>"arraybuffer"</code>, aber streamt die Daten. Das bedeutet, dass der Wert in <code>response</code> nur während des <code>"progress"</code> Event verfügbar ist und jeweils nur die Daten enthält, die seit dem letzten <code>"progress"</code> Event eingetroffen sind.</p> + + <p>Wenn auf <code>response</code> während eines <code>"progress"</code> Events zugegriffen wird, enthält es einen <code>ArrayBuffer</code> mit den Daten. Andernfalls gibt es <code>null</code> zurück.</p> + + <p>Dieser Modus funktioniert derzeit nur in Firefox.</p> + </td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Anmerkung:</strong> Ab Gecko 11.0 sowie WebKit build 528 kann man in diesen Browsern das <code>responseType</code> Attribut nicht mehr für synchrone Anfragen benutzen. Der Versuch löst einen <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code> Fehler aus. Diese Änderung wurde dem W3C zur Standardisierung vorgeschlagen.</div> + </td> + </tr> + <tr id="responseXML"> + <td><code>responseXML</code> {{ReadOnlyInline}}</td> + <td><code>Document?</code></td> + <td> + <p>Die Antwort auf die Anfrage als DOM <code><a href="/en-US/docs/DOM/document" title="DOM/Document">Document</a></code> Objekt, oder <code>null</code> falls die Anfrage erfolglos war, noch nicht gesendet wurde, oder nicht als XML oder HTML geparst werden kann. Die Antwort wird geparst, als wäre sie ein <code>text/xml</code> Stream. Wenn der <code>responseType</code> auf <code>"document"</code> gesetzt wurde und die Anfrage asynchron gemacht wurde, wird die Antwort geparst, als wäre sie ein <code>text/html</code> Stream.</p> + + <div class="note"><strong>Anmerkung:</strong> Falls der Server nicht den <code>text/xml</code> Inhaltstyp-Header auf die Antwort anwendet, kann man<code> overrideMimeType()</code> verwenden, um <code>XMLHttpRequest</code> zu zwingen, sie dennoch als XML zu parsen.</div> + </td> + </tr> + <tr id="status"> + <td><code>status</code> {{ReadOnlyInline}}</td> + <td><code>unsigned short</code></td> + <td>Der Status der Antwort auf die Anfrage. Das ist der HTTP Ergebnis-Code (<code>status</code> ist z.B. 200 für eine erfolgreiche Anfrage).</td> + </tr> + <tr id="statusText"> + <td><code>statusText</code> {{ReadOnlyInline}}</td> + <td><code>DOMString</code></td> + <td>Der Antwort-String, der vom HTTP Server zurückgesendet wurde. Im Gegensatz zu <code>status</code> beinhaltet dies den ganzen Text der Antwortnachricht (z.B. "<code>200 OK</code>").</td> + </tr> + <tr id="timeout"> + <td><code>timeout</code></td> + <td><code>unsigned long</code></td> + <td> + <p>Die Anzahl Millisekunden, die eine Anfrage dauern darf, bevor sie automatisch abgebrochen wird. Ein Wert von 0 (das ist die Voreinstellung) bedeutet, dass es kein timeout gibt.</p> + + <div class="note"><strong>Anmerkung:</strong> Für synchrone Anfragen mit einem besitzenden Fenster darf man kein timeout verwenden.</div> + </td> + </tr> + <tr id="upload"> + <td><code>upload</code></td> + <td><code>XMLHttpRequestUpload</code></td> + <td>Das Hochladen kann mitverfolgt werden, indem man einen Event Listener zu <code>upload</code> hinzufügt.</td> + </tr> + <tr id="withCredentials"> + <td><code>withCredentials</code></td> + <td><code>boolean</code></td> + <td> + <p>Zeigt an, ob Site-übergreifende <code>Access-Control</code> Anfragen mit Credentials wie Cookies oder Autorisierungs-Headers durchgeführt werden sollen oder nicht. Die Voreinstellung ist <code>false</code>.</p> + + <div class="note"><strong>Anmerkung:</strong> Anfragen an die ursprüngliche Site sind davon niemals betroffen.</div> + + <div class="note"><strong>Anmerkung:</strong> Ab Gecko 11.0 kann man das <code>withCredentials</code> Attribut nicht mehr für synchrone Anfragen verwenden. Der Versuch löst einen <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code> Fehler aus.</div> + </td> + </tr> + </tbody> +</table> + +<h3 id="Nicht-Standard_Eigenschaften">Nicht-Standard Eigenschaften</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Attribut</th> + <th>Typ</th> + <th>Description</th> + </tr> + <tr id="channel"> + <td><code>channel</code> {{ReadOnlyInline}}</td> + <td>{{Interface("nsIChannel")}}</td> + <td>Der Kanal, der vom Objekt zur Durchführung der Anfrage verwendet wurde. Das ist <code>null</code> falls der Kanal noch nicht erzeugt worden ist. Im Falle von mehrteiligen Anfragen ist das der anfängliche Kanal, nicht derjenige der anderen Teile der mehrteiligen Anfrage.<br> + <strong>Zugriff nur mit erhöhten Rechten.</strong></td> + </tr> + <tr id="mozAnon"> + <td><code>mozAnon</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td> + <p>Falls <code>true</code> wird die Anfrage ohne Cookie und Authentisierungs-Headers gesendet.</p> + </td> + </tr> + <tr id="mozSystem"> + <td><code>mozSystem</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td> + <p>Falls <code>true</code> wird die Regel, die nur Anfragen zum gleichen Ursprung erlaubt, für diese Anfrage nicht durchgesetzt.</p> + </td> + </tr> + <tr id="mozBackgroundRequest"> + <td><code>mozBackgroundRequest</code></td> + <td><code>boolean</code></td> + <td> + <p>Zeigt an, ob das Objekt eine Service-Anfrage im Hintergrund darstellt. Falls <code>true</code> wird keine Lastgruppe mit der Anfrage verknüpft, und die Anzeige von Sicherheits-Dialogen wird verhindert. <strong>Zugriff nur mit erhöhten Rechten.</strong></p> + + <p>In Fällen, wo normalerweise ein Sicherheits-Dialog angezeigt würde (wie Autorisierungs- oder Zertifikatsfehler-Benachrichtigungen), schlägt die Anfrage stattdessen einfach fehl.</p> + + <div class="note"><strong>Anmerkung: </strong>Diese Eigenschaft muss vor dem Aufrufen von <code>open()</code> gesetzt werden..</div> + </td> + </tr> + <tr id="mozResponseArrayBuffer"> + <td><code>mozResponseArrayBuffer</code> {{obsolete_inline("6")}} {{ReadOnlyInline}}</td> + <td><a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a></td> + <td>Die Antwort auf die Anfrage, als typisiertes JavaScript Array. Dies ist <code>NULL</code> falls die Anfrage erfolglos war oder noch nicht gesendet wurde.</td> + </tr> + <tr id="multipart"> + <td><code>multipart</code> {{obsolete_inline("22")}}</td> + <td><code>boolean</code></td> + <td> + <p><strong>Dieses nur in Gecko verfügbare Feature wurde in Firefox/Gecko 22 entfernt.</strong> Bitte verwende stattdessen <a href="/en-US/docs/Server-sent_events" title="Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a> oder <code>responseText</code> aus <code>progress </code>Events.</p> + + <p>Zeigt an, ob als Antwort ein Stream von möglicherweise mehreren XML Dokumenten erwartet wird. Wird dies auf <code>true</code> gesetzt, muss der Inhaltstyp des ersten Teils der Antwort <code>multipart/x-mixed-replace</code> sein, sonst tritt ein Fehler auf. Alle Anfragen müssen asynchron sein.</p> + + <p>Dies ermöglicht die Unterstützung von Server Push; für jedes XML Dokument, das in die Antwort auf diese Anfrage geschrieben wird, wird ein neues XML DOM Dokument erzeugt, und zwischen den Dokumenten wird der <code>onload</code> Handler aufgerufen.</p> + + <div class="note"><strong>Anmerkung:</strong> Wenn dies gesetzt ist, werden <code>onload</code> und andere Event Handler nicht zurückgesetzt, nachdem das erste XML Dokument geladen ist, und der <code>onload</code> Handler wird nach Erhalt jedes Teils der Antwort aufgerufen.</div> + </td> + </tr> + </tbody> +</table> + +<h2 id="Konstruktor">Konstruktor</h2> + +<h3 id="XMLHttpRequest()" name="XMLHttpRequest()">XMLHttpRequest()</h3> + +<p>Der Konstruktor initiiert ein <code>XMLHttpRequest</code> Objekt. Er muss vor allen anderen Methoden aufgerufen werden.</p> + +<p>Gecko/Firefox 16 fügt einen nicht-standard Parameter zum Konstruktor hinzu, der den anonymen Modus einschalten kann (siehe <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=692677" title="692677 – Relax same-origin XHR restrictions for privileged applications">Bug 692677</a>). Das <code>mozAnon</code> flag auf <code>true</code> zu setzen, hat einen ähnlichen Effekt wie der <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a> Konstruktor, der in der XMLHttpRequest Spezifikation beschrieben ist, aber noch in keinem Browser implementiert wurde (Stand September 2012).</p> + +<pre>XMLHttpRequest ( + JSObject objParameters +);</pre> + +<h5 id="Parameter_(nicht-standard)">Parameter (nicht-standard)</h5> + +<dl> + <dt><code>objParameters</code></dt> + <dd>Es gibt zwei Flags, die gesetzt werden können: + <dl> + <dt><code>mozAnon</code></dt> + <dd>Boolean: Wenn dieses Flag auf <code>true</code> gesetzt ist, wird der Browser weder den Ursprung der Anfrage noch <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">Anmeldedaten</a> übermitteln, wenn er Daten anfordert. Das heisst vor allem auch, dass keine Cookies gesendet werden, sofern sie nicht ausdrücklich mit setRequestHeader hinzugefügt wurden.</dd> + <dt><code>mozSystem</code></dt> + <dd>Boolean: Dieses Flag auf <code>true</code> zu setzen, ermöglicht das Herstellen von Cross-Site Verbindungen, ohne dass der Server dem mittels CORS zustimmen muss. <em>Erfodert das Setzen von <code>mozAnon: true</code>. D.h. das kann nicht mit dem Senden von Cookies oder anderen Anmeldeinformationen kombiniert werden. Dies <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=692677#c68" title="Bug 692677 comment 68">funktioniert nur in privilegierten (reviewed) Apps</a>; es klappt nicht auf beliebigen Webseiten, die in Firefox geladen werden.</em></dd> + </dl> + </dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<h3 id="abort()" name="abort()">abort()</h3> + +<p>Bricht die Anfrage ab, falls sie bereits gesendet wurde.</p> + +<h3 id="getAllResponseHeaders()" name="getAllResponseHeaders()">getAllResponseHeaders()</h3> + +<pre>DOMString getAllResponseHeaders();</pre> + +<p>Liefert alle Antwort-Header als String, oder <code>null</code> falls keine Antwort empfangen wurde.<strong> </strong></p> + +<p><strong>Anmerkung:</strong> Für mehrteilige Anfragen gibt dies die Header des <em>aktuellen </em>Teils der Anfrage zurück, nicht die des ursprünglichen Kanals.</p> + +<h3 id="getResponseHeader()" name="getResponseHeader()">getResponseHeader()</h3> + +<pre>DOMString? getResponseHeader(DOMString <var>header</var>);</pre> + +<p>Liefert den String mit dem Text des angegebenen Headers, oder <code>null</code> falls die Antwort noch nicht empfangen wurde oder der Header in der Antwort nicht existiert.</p> + +<h3 id="open()" name="open()">open()</h3> + +<p>Initialisiert eine Anfrage. Diese Methode ist nur zur Verwendung in JavaScript Code; um eine Anfrage aus nativem Code zu initialisieren, ist stattdessen<code> </code><a href="/en-US/docs/nsIXMLHttpRequest#openRequest()" title="XMLHttpRequest#openRequest()"><code>openRequest()</code></a> zu benutzen.</p> + +<div class="note"><strong>Anmerkung:</strong> Der Aufruf dieser Methode für eine bereits aktive Anfrage (eine, für die <code>open()</code>oder <code>openRequest() </code>schon ausgeführt wurde) ist gleichwertig mit dem Aufruf von <code>abort()</code>.</div> + +<pre>void open( + DOMString <var>method</var>, + DOMString <var>url</var>, + optional boolean <var>async</var>, + optional DOMString <var>user</var>, + optional DOMString <var>password</var> +); +</pre> + +<h6 id="Parameter">Parameter</h6> + +<dl> + <dt><code>method</code></dt> + <dd>Die zu benutzende HTTP Methode, wie "GET", "POST", "PUT", "DELETE", etc. Wird für nicht-HTTP(S) URLs ignoriert.</dd> + <dt><code>url</code></dt> + <dd>Der URL, an den die Anfrage geschickt werden soll.</dd> + <dt><code>async</code></dt> + <dd>Ein optionaler boole'scher Parameter mit Defaultwert <code>true</code>, der angibt, ob die Operation asynchron ausgeführt werden soll. Wenn dieser Wert <code>false</code> ist, kehrt die <code>send()</code>Methode nicht zurück, bis die Antwort vollständig empfangen worden ist. Ist er <code>true</code>, kehrt sie sofort zurück, und die Benachrichtigung über die vollendete Transaktion erfolgt mittels Events. Dies <em>muss</em> <code>true</code> sein falls das <code>multipart</code> Attribut <code>true</code> ist, sonst wird ein Fehler ausgelöst.</dd> + <dt><code>user</code></dt> + <dd>Der optionale Benutzername zum Zweck der Authentisierung; ohne Angabe ist dies ein leerer String.</dd> + <dt><code>password</code></dt> + <dd>Das optionale Passwort zum Zweck der Authentisierung; ohne Angabe ist dies ein leerer String.</dd> +</dl> + +<h3 id="overrideMimeType()" name="overrideMimeType()">overrideMimeType()</h3> + +<p>Übergeht den vom Server zurückgegebenen MIME Typ. Dies kann beispielsweise benutzt werden, um zu erzwingen, dass ein Stream als text/xml behandelt und geparst wird, selbst wenn ihn der Server nicht als das meldet. Diese Methode muss vor <code>send()</code> aufgerufen werden.</p> + +<pre>void overrideMimeType(DOMString <var>mimetype</var>);</pre> + +<h3 id="send()" name="send()">send()</h3> + +<p>Sendet die Anfrage. Falls die Anfage asynchron ist (was der Default ist), kehrt diese Methode zurück, sobald die Anfrage gesendet ist. Ist die Anfrage synchron, kehrt diese Methode nicht zurück, bis die Antwort angekommen (oder ein Timeout aufgetreten) ist.</p> + +<div class="note"><strong>Anmerkung:</strong> Jegliche zu setzende Event Handler / Listener müssen vor dem Aufruf von <code>send()</code> gesetzt werden.</div> + +<pre>void send(); +void send(ArrayBuffer <var>data</var>); +void send(Blob <var>data</var>); +void send(Document <var>data</var>); +void send(DOMString? <var>data</var>); +void send(FormData <var>data</var>);</pre> + +<h6 id="Anmerkungen">Anmerkungen</h6> + +<p>Falls <em>data</em> ein <code>Document</code> ist, so wird dieses vor dem Senden serialisiert. Beim Senden eines <code>Document</code> senden Firefox Versionen vor Version 3 die Anfrage immer encodiert als UTF-8; <a href="/en-US/docs/Firefox_3" rel="internal" title="Firefox_3">Firefox 3</a> sendet das <code>Document</code> richtigerweise mit dem angegebenen <code>body.xmlEncoding</code>, oder UTF-8 falls keines angegeben wurde.</p> + +<p>Falls es ein <code>nsIInputStream</code> ist, muss er kompatibel sein mit der <code>setUploadStream()</code>Methode des <code>nsIUploadChannel</code>. In diesem Fall wird die Länge des Inhalts in einem Content-Length Header zur Anfrage hinzugefügt, dessen Wert mit der <code>available()</code>Methode des <code>nsIInputStream</code> ermittelt wird. Jegliche Header, die am Anfang des Streams enthalten sind, werden als Teil des Nachrichtenkörpers behandelt. Der MIME Typ des Streams sollte vor dem Aufruf von <code>send()</code> angegeben werden, indem der Content-Type Header mit der <a href="/en-US/docs/nsIXMLHttpRequest#setRequestHeader()" title="XMLHttpRequest#setRequestHeader()"><code>setRequestHeader()</code></a> Methode gesetzt wird.</p> + +<p>Der beste Weg, um binäre Inhalte zu senden (wie beim Hochladen einer Datei), ist die Verwendung von <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffern</a> oder <a href="/en-US/docs/DOM/Blob" title="DOM/Blob">Blobs</a> in Verbindung mit der <code>send()</code> Methode. Wenn jedoch <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="JavaScript/Reference/Global_Objects/JSON/stringify">stringifizierbare</a> Rohdaten gesendet werden sollen, ist die <a href="#sendAsBinary()" title="DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> Methode zu verwenden.</p> + +<h3 id="setRequestHeader()" name="setRequestHeader()">setRequestHeader()</h3> + +<p>Setzt den Wert eines HTTP Anfrage-Headers. Aufrufe von <code>setRequestHeader()</code> müssen nach <a href="#open"><code>open()</code></a>, aber vor <code>send()</code> erfolgen.</p> + +<pre>void setRequestHeader( + DOMString <var>header</var>, + DOMString <var>value</var> +); +</pre> + +<h6 id="Parameter_2">Parameter</h6> + +<dl> + <dt><code>header</code></dt> + <dd>Der Name des zu setzenden Headers.</dd> + <dt><code>value</code></dt> + <dd>Der Wert des zu setzenden Headers.</dd> +</dl> + +<h3 id="Nicht-Standard_Methoden">Nicht-Standard Methoden</h3> + +<h4 id="init()">init()</h4> + +<p>Initialisiert das Objekt für die Verwendung aus C++ Code.</p> + +<div class="warning"><strong>Warnung:</strong> Diese Methode darf <em>nicht</em> aus JavaScript heraus aufgerufen werden.</div> + +<pre>[noscript] void init( + in nsIPrincipal principal, + in nsIScriptContext scriptContext, + in nsPIDOMWindow ownerWindow +); +</pre> + +<h5 id="Parameter_3">Parameter</h5> + +<dl> + <dt><code>principal</code></dt> + <dd>Das Prinzipal, das für die Anfrage benutzt werden soll; darf nicht <code>null</code> sein.</dd> + <dt><code>scriptContext</code></dt> + <dd>Der Skript-Kontext, der für die Anfrage benutzt werden soll; darf nicht <code>null</code> sein.</dd> + <dt><code>ownerWindow</code></dt> + <dd>Das Fenster, das zu der Anfrage gehört; darf <code>null</code> sein.</dd> +</dl> + +<h4 id="openRequest()">openRequest()</h4> + +<p>Initialisiert eine Anfrage. Diese Methode ist zur Verwendung in nativem Code; um eine Anfrage in JavaScript Code zu initialisieren, ist stattdessen <a href="/en-US/docs/nsIXMLHttpRequest#open()" title="XMLHttpRequest#open()"><code>open()</code></a> zu verwenden. Siehe Dokumentation für <code>open()</code>.</p> + +<h3 id="sendAsBinary()">sendAsBinary()</h3> + +<p>Eine Variante der <code>send()</code> Methode, die binäre Daten schickt.</p> + +<pre>void sendAsBinary( + in DOMString body +); +</pre> + +<p>Diese Methode, zusammen mit der <a href="/en-US/docs/DOM/FileReader#readAsBinaryString()" title="DOM/FileReader#readAsBinaryString()"><code>readAsBinaryString</code></a> Methode der <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a> API, ermöglichen <a href="https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">das Lesen und den <strong>Upload</strong> jeglicher Dateitypen</a> und das <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="JavaScript/Reference/Global_Objects/JSON/stringify">Stringifizieren</a> der Rohdaten.</p> + +<h5 id="Parameter_4">Parameter</h5> + +<dl> + <dt><code>body</code></dt> + <dd>Der Körper der Anfrage als DOMstring. Diese Daten werden durch Beschneiden (Entfernen des höherwertigen Bytes jedes Zeichens) in Einzel-Byte-Zeichen umgewandelt.</dd> +</dl> + +<h5 id="sendAsBinary()_polyfill"><code>sendAsBinary()</code> polyfill</h5> + +<p>Da <code>sendAsBinary()</code> ein experimentelles Feature ist, kommt hier <strong>ein Polyfill</strong> für Browser, die <code>sendAsBinary()</code> <em>nicht </em>unterstützen, dafür aber <a href="/en-US/docs/JavaScript/Typed_arrays" title="JavaScript/Typed_arrays">typisierte Arrays</a>.</p> + +<pre class="brush: js">/*\ +|*| +|*| :: XMLHttpRequest.prototype.sendAsBinary() Polyfill :: +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary() +|*| +\*/ + +if (!XMLHttpRequest.prototype.sendAsBinary) { + XMLHttpRequest.prototype.sendAsBinary = function (sData) { + var nBytes = sData.length, ui8Data = new Uint8Array(nBytes); + for (var nIdx = 0; nIdx < nBytes; nIdx++) { + ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff; + } + /* sende als ArrayBufferView...: */ + this.send(ui8Data); + /* ...oder als ArrayBuffer (altmodisch)...: this.send(ui8Data.buffer); */ + }; +}</pre> + +<div class="note"><strong>Anmerkung:</strong> Dieses Polyfill kann mit zwei Datentypen als Argument für <code>send()</code> gebaut werden: einem <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> (<code>ui8Data.buffer</code> – kommentierter Code) oder einer <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView" title="JavaScript/Typed_arrays/ArrayBufferView"><code>ArrayBufferView</code></a> (<code>ui8Data</code>, das ist ein <a href="/en-US/docs/JavaScript/Typed_arrays/Uint8Array" title="JavaScript/Typed_arrays/Uint8Array">typisiertes Array von 8-bit Ganzzahlen ohne Vorzeichen</a> – unkommentierter Code). Wenn man jedoch in Google Chrome versucht, einen <code>ArrayBuffer</code> zu senden, erscheint die folgende Warnmeldung: <code>ArrayBuffer is deprecated in XMLHttpRequest.send(). Use ArrayBufferView instead.</code></div> + +<h2 id="Anmerkungen_2">Anmerkungen</h2> + +<ul> + <li class="note">Standardmässig begrenzt Firefox 3 die Anzahl gleichzeitiger <code>XMLHttpRequest</code> Verbindungen pro Server auf 6 (frühere Versionen begrenzen dies auf 2 pro Server). Manche interaktiven Websites können eine <code>XMLHttpRequest</code> Verbindung offen halten, so dass das Öffnen mehrerer Sitzungen auf solchen Sites dazu führen kann, dass der Browser auf eine Art und Weise hängen bleibt, dass das Fenster nicht mehr neu gezeichnet wird und Steuerelemente nicht mehr reagieren. Dieser Wert lässt sich ändern durch Editieren der Voreinstellung <code>network.http.max-persistent-connections-per-server</code> in <code><a class="linkification-ext" href="/about:config" title="Linkification: about:config">about:config</a></code>.</li> + <li class="note">Ab Gecko 7 werden Header, die durch {{manch("setRequestHeader")}} gesetzt wurden, mit der Anfrage mitgeschickt, wenn einer Umleitung gefolgt wird. Zuvor wurden diese Header nicht gesendet.</li> + <li class="note"><code>XMLHttpRequest</code> ist in Gecko implementiert mittels der {{interface("nsIXMLHttpRequest")}}, {{interface("nsIXMLHttpRequestEventTarget")}}, und {{interface("nsIJSXMLHttpRequest")}} Schnittstellen.</li> +</ul> + +<h4 class="note" id="Events">Events</h4> + +<p><code>onreadystatechange</code> als eine Eigenschaft der <code>XMLHttpRequest</code> Instanz wird von allen Browsern unterstützt.</p> + +<p>Seither wurden einige zusätzliche Event Handler in verschiedenen Browsern implementiert (<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, etc.). Diese werden in Firefox unterstützt. Für Genaueres, siehe {{interface("nsIXMLHttpRequestEventTarget")}} und <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p> + +<p>Neuere Browser, inklusive Firefox, unterstützen das 'Horchen' nach <code>XMLHttpRequest </code>Ereignissen mittels der Standard <code><a href="/en-US/docs/DOM/element.addEventListener" title="element.addEventListener">addEventListener</a></code> APIs zusätzlich zum Setzen von <code>on*</code> Eigenschaften auf eine Handler Funktion.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Grundsätzliche Unterstützung (XHR1)</td> + <td>1</td> + <td>1.0</td> + <td>5 (via ActiveXObject)<br> + 7 (XMLHttpRequest)</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.2</td> + </tr> + <tr> + <td><code>send(ArrayBuffer)</code></td> + <td>9</td> + <td>9</td> + <td>{{compatUnknown}}</td> + <td>11.60</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>send(Blob)</code></td> + <td>7</td> + <td>3.6</td> + <td>{{compatUnknown}}</td> + <td>12</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>send(FormData)</code></td> + <td>6</td> + <td>4</td> + <td>{{compatUnknown}}</td> + <td>12</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>sendAsBinary(DOMString)</code></td> + <td>{{compatNo}} – benutze <a href="#sendAsBinary%28%29_polyfill" title="sendAsBinary() polyfill">polyfill</a></td> + <td>1.9</td> + <td>{{compatUnknown}}</td> + <td>{{compatUnknown}}</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>response</code></td> + <td>10</td> + <td>6</td> + <td>10</td> + <td>11.60</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>responseType</code> = 'arraybuffer'</td> + <td>10</td> + <td>6</td> + <td>10</td> + <td>11.60</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>responseType</code> = 'blob'</td> + <td>19</td> + <td>6</td> + <td>10</td> + <td>12</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>responseType</code> = 'document'</td> + <td>18</td> + <td>11</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>responseType</code> = 'json'</td> + <td>{{CompatNo}}</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>12</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Progress Events</td> + <td>7</td> + <td>3.5</td> + <td>10</td> + <td>12</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>withCredentials</code></td> + <td>3</td> + <td>3.5</td> + <td>10</td> + <td>12</td> + <td>4</td> + </tr> + <tr> + <td><code>timeout</code></td> + <td>{{CompatNo}}</td> + <td>12.0</td> + <td>8</td> + <td>{{compatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>responseType</code> = 'moz-blob'</td> + <td>{{CompatNo}}</td> + <td>12.0</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 für Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundsätzliche Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>0.16</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko_Anmerkungen">Gecko Anmerkungen</h3> + +<p>Gecko 11.0 {{geckoRelease("11.0")}} entfernte die Unterstützung für die Verwendung der <code>responseType</code> und <code>withCredentials</code> Attribute bei der Durchführung synchroner Anfragen. Der Versuch löst einen <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code> Fehler aus. Diese Änderung wurde dem W3C zur Standardisierung vorgeschlagen.</p> + +<p>Gecko 12.0 {{geckoRelease("12.0")}} und spätere unterstützen die Verwendung von <code>XMLHttpRequest</code> zum Lesen von <a href="/en-US/docs/data_URIs" title="data_URIs"><code>data:</code> URLs</a>.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>MDN Artikel über XMLHttpRequest: + <ul> + <li><a href="/en-US/docs/AJAX/Getting_Started" title="AJAX/Getting_Started">AJAX - Getting Started</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/HTML_in_XMLHttpRequest" title="HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="XMLHttpRequest/FormData"><code>FormData</code></a></li> + </ul> + </li> + <li>XMLHttpRequest Referencen von W3C und Browserherstellern: + <ul> + <li><a href="http://www.w3.org/TR/XMLHttpRequest1/">W3C: XMLHttpRequest</a> (base features)</li> + <li><a href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html" title="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">W3C: XMLHttpRequest</a> (latest editor's draft with extensions to the base functionality, formerly XMLHttpRequest Level 2)</li> + <li><a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li> + <li><a href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple developers' reference</a></li> + </ul> + </li> + <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li> + <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks - New Tricks in XMLHttpRequest2</a></li> +</ul> diff --git a/files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html new file mode 100644 index 0000000000..f15901a388 --- /dev/null +++ b/files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -0,0 +1,789 @@ +--- +title: Using XMLHttpRequest +slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +<div><font><font>{{APIRef ("XMLHttpRequest")}}</font></font></div> + +<p><span class="seoSummary"><font><font>In diesem Handbuch wird erläutert, wie Sie mit {{domxref ("XMLHttpRequest")}} </font></font><a href="/en-US/docs/Web/HTTP"><font><font>HTTP-</font></font></a><font><font> Anforderungen </font><font>ausgeben </font><font>, um Daten zwischen der Website und einem Server auszutauschen</font></font></span><font><font> . </font><font>Beispiele für häufig vorkommende und unklarere Anwendungsfälle </font></font><code>XMLHttpRequest</code><font><font>sind enthalten.</font></font></p> + +<p><font><font>Um eine HTTP-Anfrage zu senden, erstellen Sie ein </font></font><code>XMLHttpRequest</code><font><font>Objekt, öffnen Sie eine URL und senden Sie die Anfrage. </font><font>Nach Abschluss der Transaktion enthält das Objekt nützliche Informationen wie den Antworttext und den </font></font><a href="/en-US/docs/Web/HTTP/Status"><font><font>HTTP-Status</font></font></a><font><font> des Ergebnisses.</font></font></p> + +<pre class="brush: js notranslate">function reqListener () { + console.log(this.responseText); +} + +var oReq = new XMLHttpRequest(); +oReq.addEventListener("load", reqListener); +oReq.open("GET", "http://www.example.org/example.txt"); +oReq.send();</pre> + +<h2 id="Arten_von_Anfragen"><font><font>Arten von Anfragen</font></font></h2> + +<div class="blockIndicator note"> +<p><font><font>Eine Anforderung über </font></font><code>XMLHttpRequest</code><font><font>kann die Daten auf zwei Arten asynchron oder synchron abrufen. </font><font>Die Art der Anforderung wird durch das optionale </font></font><code>async</code><font><font>Argument (das dritte Argument) bestimmt, das für die Methode {{domxref ("XMLHttpRequest.open ()")}} festgelegt wird. </font><font>Wenn dieses Argument angegeben ist </font></font><code>true</code><font><font>oder nicht, </font></font><code>XMLHttpRequest</code><font><font>wird das asynchron verarbeitet, andernfalls wird der Prozess synchron behandelt. </font><font>Eine ausführliche Diskussion und Demonstration dieser beiden Arten von Anforderungen finden Sie auf der Seite für </font></font><a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests"><font><font>synchrone und asynchrone Anforderungen</font></font></a><font><font> . </font><font>Verwenden Sie keine synchronen Anforderungen außerhalb von Web Workers.</font></font></p> +</div> + +<div class="note"><strong><font><font>Hinweis:</font></font></strong><font><font> Ab Gecko 30.0 {{geckoRelease ("30.0")}} sind synchrone Anforderungen im Hauptthread aufgrund der negativen Auswirkungen auf die Benutzererfahrung veraltet.</font></font></div> + +<div class="note"><strong><font><font>Hinweis:</font></font></strong><font><font> Die Konstruktorfunktion </font></font><code>XMLHttpRequest</code><font><font>ist nicht nur auf XML-Dokumente beschränkt. </font><font>Es beginnt mit </font></font><strong><font><font>"XML",</font></font></strong><font><font> da das Hauptformat, das ursprünglich für den asynchronen Datenaustausch verwendet wurde, bei der Erstellung XML war</font></font></div> + +<h2 id="Umgang_mit_Antworten"><font><font>Umgang mit Antworten</font></font></h2> + +<p><font><font>Es gibt verschiedene Arten von </font></font><a href="https://xhr.spec.whatwg.org/"><font><font>Antwortattributen,</font></font></a><font><font> die durch die Living Standard-Spezifikation für den Konstruktor {{domxref ("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest ()")}} definiert sind. </font><font>Diese teilen dem Kunden die </font></font><code>XMLHttpRequest</code><font><font>wichtigen Informationen über den Status der Antwort mit. </font><font>In den folgenden Abschnitten werden einige Fälle beschrieben, in denen der Umgang mit Nicht-Text-Antworttypen möglicherweise manipuliert und analysiert wird.</font></font></p> + +<h3 id="Analysieren_und_Bearbeiten_der_responseXML-Eigenschaft"><font><font>Analysieren und Bearbeiten der responseXML-Eigenschaft</font></font></h3> + +<p>If you use <code>XMLHttpRequest</code> to get the content of a remote XML document, the {{domxref("XMLHttpRequest.responseXML", "responseXML")}} property will be a DOM object containing a parsed XML document. This could prove difficult to manipulate and analyze. There are four primary ways of analyzing this XML document:</p> + +<ol> + <li>Using <a href="/en-US/docs/Web/XPath">XPath</a> to address (or point to) parts of it.</li> + <li>Manually <a href="/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a> to strings or objects.</li> + <li>Using {{domxref("XMLSerializer")}} to serialize <strong>DOM trees to strings or to files</strong>.</li> + <li>{{jsxref("RegExp")}} can be used if you always know the content of the XML document beforehand. You might want to remove line breaks, if you use <code>RegExp</code> to scan with regard to line breaks. However, this method is a "last resort" since if the XML code changes slightly, the method will likely fail.</li> +</ol> + +<div class="note"> +<p><strong>Note:</strong> <code>XMLHttpRequest</code> can now interpret HTML for you using the {{domxref("XMLHttpRequest.responseXML", "responseXML")}} property. Read the article about <a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a> to learn how to do this.</p> +</div> + +<h3 id="Processing_a_responseText_property_containing_an_HTML_document">Processing a responseText property containing an HTML document</h3> + +<p>If you use <code>XMLHttpRequest</code> to get the content of a remote HTML webpage, the {{domxref("XMLHttpRequest.responseText", "responseText")}} property is a string containing the raw HTML. This could prove difficult to manipulate and analyze. There are three primary ways to analyze and parse this raw HTML string:</p> + +<ol> + <li>Use the <code>XMLHttpRequest.responseXML</code> property as covered in the article <a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a>.</li> + <li>Inject the content into the body of a <a href="/en-US/docs/Web/API/DocumentFragment">document fragment</a> via <code>fragment.body.innerHTML</code> and traverse the DOM of the fragment.</li> + <li>{{jsxref("RegExp")}} can be used if you always know the content of the HTML <code>responseText</code> beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to linebreaks. However, this method is a "last resort" since if the HTML code changes slightly, the method will likely fail.</li> +</ol> + +<h2 id="Handling_binary_data">Handling binary data</h2> + +<p>Although {{domxref("XMLHttpRequest")}} is most commonly used to send and receive textual data, it can be used to send and receive binary content. There are several well tested methods for coercing the response of an <code>XMLHttpRequest</code> into sending binary data. These involve utilizing the {{domxref("XMLHttpRequest.overrideMimeType", "overrideMimeType()")}} method on the <code>XMLHttpRequest</code> object and is a workable solution.</p> + +<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); +oReq.open("GET", url); +// retrieve data unprocessed as a binary string +oReq.overrideMimeType("text/plain; charset=x-user-defined"); +/* ... */ +</pre> + +<p>However, more modern techniques are available, since the {{domxref("XMLHttpRequest.responseType", "responseType")}} attribute now supports a number of additional content types, which makes sending and receiving binary data much easier.</p> + +<p>For example, consider this snippet, which uses the <code>responseType</code> of "<code>arraybuffer</code>" to fetch the remote content into a {{jsxref("ArrayBuffer")}} object, which stores the raw binary data.</p> + +<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); + +oReq.onload = function(e) { + var arraybuffer = oReq.response; // not responseText + /* ... */ +} +oReq.open("GET", url); +oReq.responseType = "arraybuffer"; +oReq.send();</pre> + +<p>For more examples check out the <a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Sending and Receiving Binary Data</a> page</p> + +<h2 id="Monitoring_progress">Monitoring progress</h2> + +<p><code>XMLHttpRequest</code> provides the ability to listen to various events that can occur while the request is being processed. This includes periodic progress notifications, error notifications, and so forth.</p> + +<p>Support for DOM {{event("progress")}} event monitoring of <code>XMLHttpRequest</code> transfers follows the <a href="https://xhr.spec.whatwg.org/#interface-progressevent">specification for progress events</a>: these events implement the {{domxref("ProgressEvent")}} interface. The actual events you can monitor to determine the state of an ongoing transfer are:</p> + +<dl> + <dt>{{event("progress")}}</dt> + <dd>The amount of data that has been retrieved has changed.</dd> + <dt>{{event("load")}}</dt> + <dd>The transfer is complete; all data is now in the <code>response</code></dd> +</dl> + +<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); + +oReq.addEventListener("progress", updateProgress); +oReq.addEventListener("load", transferComplete); +oReq.addEventListener("error", transferFailed); +oReq.addEventListener("abort", transferCanceled); + +oReq.open(); + +// ... + +// progress on transfers from the server to the client (downloads) +function updateProgress (oEvent) { + if (oEvent.lengthComputable) { + var percentComplete = oEvent.loaded / oEvent.total * 100; + // ... + } else { + // Unable to compute progress information since the total size is unknown + } +} + +function transferComplete(evt) { + console.log("The transfer is complete."); +} + +function transferFailed(evt) { + console.log("An error occurred while transferring the file."); +} + +function transferCanceled(evt) { + console.log("The transfer has been canceled by the user."); +}</pre> + +<p>Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using <code>XMLHttpRequest</code>.</p> + +<div class="note"><strong>Note:</strong> You need to add the event listeners before calling <code>open()</code> on the request. Otherwise the <code>progress</code> events will not fire.</div> + +<p>The progress event handler, specified by the <code>updateProgress()</code> function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's <code>total</code> and <code>loaded</code> fields. However, if the <code>lengthComputable</code> field is false, the total length is not known and will be zero.</p> + +<p>Progress events exist for both download and upload transfers. The download events are fired on the <code>XMLHttpRequest</code> object itself, as shown in the above sample. The upload events are fired on the <code>XMLHttpRequest.upload</code> object, as shown below:</p> + +<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); + +oReq.upload.addEventListener("progress", updateProgress); +oReq.upload.addEventListener("load", transferComplete); +oReq.upload.addEventListener("error", transferFailed); +oReq.upload.addEventListener("abort", transferCanceled); + +oReq.open(); +</pre> + +<div class="note"><strong>Note:</strong> Progress events are not available for the <code>file:</code> protocol.</div> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, progress events can now be relied upon to come in for every chunk of data received, including the last chunk in cases in which the last packet is received and the connection closed before the progress event is fired. In this case, the progress event is automatically fired when the load event occurs for that packet. This lets you now reliably monitor progress by only watching the "progress" event.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> As of {{Gecko("12.0")}}, if your progress event is called with a <code>responseType</code> of "moz-blob", the value of response is a {{domxref("Blob")}} containing the data received so far.</p> +</div> + +<p>One can also detect all three load-ending conditions (<code>abort</code>, <code>load</code>, or <code>error</code>) using the <code>loadend</code> event:</p> + +<pre class="brush:js notranslate">req.addEventListener("loadend", loadEnd); + +function loadEnd(e) { + console.log("The transfer finished (although we don't know if it succeeded or not)."); +} +</pre> + +<p>Note there is no way to be certain, from the information received by the <code>loadend</code> event, as to which condition caused the operation to terminate; however, you can use this to handle tasks that need to be performed in all end-of-transfer scenarios.</p> + +<h2 id="Submitting_forms_and_uploading_files">Submitting forms and uploading files</h2> + +<p>Instances of <code>XMLHttpRequest</code> can be used to submit forms in two ways:</p> + +<ul> + <li>using only AJAX</li> + <li>using the {{domxref("XMLHttpRequest.FormData", "FormData")}} API</li> +</ul> + +<p>Using the <code>FormData</code> API is the simplest and fastest, but has the disadvantage that data collected can not be <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringified</a>.<br> + Using only AJAX is more complex, but typically more flexible and powerful.</p> + +<h3 id="Using_nothing_but_XMLHttpRequest">Using nothing but <code>XMLHttpRequest</code></h3> + +<p>Submitting forms without the <code>FormData</code> API does not require other APIs for most use cases. The only case where you need an additional API is <strong>if you want to upload one or more files</strong>, where you use the {{domxref("FileReader")}} API.</p> + +<h4 id="A_brief_introduction_to_the_submit_methods">A brief introduction to the submit methods</h4> + +<p>An html {{ HTMLElement("form") }} can be sent in four ways:</p> + +<ul> + <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>application/x-www-form-urlencoded</code> (default);</li> + <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>text/plain</code>;</li> + <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>multipart/form-data</code>;</li> + <li>using the <code>GET</code> method (in this case the <code>enctype</code> attribute will be ignored).</li> +</ul> + +<p>Now, consider the submission of a form containing only two fields, named <code>foo</code> and <code>baz</code>. If you are using the <code>POST</code> method the server will receive a string similar to one of the following three examples, depending on the encoding type you are using:</p> + +<ul> + <li> + <p>Method: <code>POST</code>; Encoding type: <code>application/x-www-form-urlencoded</code> (default):</p> + + <pre class="brush:plain notranslate">Content-Type: application/x-www-form-urlencoded + +foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A</pre> + </li> + <li> + <p>Method: <code>POST</code>; Encoding type: <code>text/plain</code>:</p> + + <pre class="brush:plain notranslate">Content-Type: text/plain + +foo=bar +baz=The first line. +The second line.</pre> + </li> + <li> + <p>Method: <code>POST</code>; Encoding type: <code><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data">multipart/form-data</a></code>:</p> + + <pre class="brush:plain notranslate">Content-Type: multipart/form-data; boundary=---------------------------314911788813839 + +-----------------------------314911788813839 +Content-Disposition: form-data; name="foo" + +bar +-----------------------------314911788813839 +Content-Disposition: form-data; name="baz" + +The first line. +The second line. + +-----------------------------314911788813839--</pre> + </li> +</ul> + +<p>However, if you are using the <code>GET</code> method, a string like the following will be simply added to the URL:</p> + +<pre class="brush:plain notranslate">?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.</pre> + +<h4 id="A_little_vanilla_framework">A little vanilla framework</h4> + +<p>All these effects are done automatically by the web browser whenever you submit a {{HTMLElement("form")}}. If you want to perform the same effects using JavaScript you have to instruct the interpreter about <em>everything</em>. Therefore, how to send forms in <em>pure</em> AJAX is too complex to be explained here in detail. For this reason, here we place <strong>a complete (yet didactic) framework</strong>, able to use all four ways to <em>submit</em>, and to <strong>upload files</strong>:</p> + +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: html notranslate"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>Sending forms with pure AJAX &ndash; MDN</title> +<script type="text/javascript"> + +"use strict"; + +/*\ +|*| +|*| :: XMLHttpRequest.prototype.sendAsBinary() Polyfill :: +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary() +\*/ + +if (!XMLHttpRequest.prototype.sendAsBinary) { + XMLHttpRequest.prototype.sendAsBinary = function(sData) { + var nBytes = sData.length, ui8Data = new Uint8Array(nBytes); + for (var nIdx = 0; nIdx < nBytes; nIdx++) { + ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff; + } + /* send as ArrayBufferView...: */ + this.send(ui8Data); + /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */ + }; +} + +/*\ +|*| +|*| :: AJAX Form Submit Framework :: +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest +|*| +|*| This framework is released under the GNU Public License, version 3 or later. +|*| https://www.gnu.org/licenses/gpl-3.0-standalone.html +|*| +|*| Syntax: +|*| +|*| AJAXSubmit(HTMLFormElement); +\*/ + +var AJAXSubmit = (function () { + + function ajaxSuccess () { + /* console.log("AJAXSubmit - Success!"); */ + console.log(this.responseText); + /* you can get the serialized data through the "submittedData" custom property: */ + /* console.log(JSON.stringify(this.submittedData)); */ + } + + function submitData (oData) { + /* the AJAX request... */ + var oAjaxReq = new XMLHttpRequest(); + oAjaxReq.submittedData = oData; + oAjaxReq.onload = ajaxSuccess; + if (oData.technique === 0) { + /* method is GET */ + oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, + oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true); + oAjaxReq.send(null); + } else { + /* method is POST */ + oAjaxReq.open("post", oData.receiver, true); + if (oData.technique === 3) { + /* enctype is multipart/form-data */ + var sBoundary = "---------------------------" + Date.now().toString(16); + oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary); + oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n"); + } else { + /* enctype is application/x-www-form-urlencoded or text/plain */ + oAjaxReq.setRequestHeader("Content-Type", oData.contentType); + oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&")); + } + } + } + + function processStatus (oData) { + if (oData.status > 0) { return; } + /* the form is now totally serialized! do something before sending it to the server... */ + /* doSomething(oData); */ + /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */ + submitData (oData); + } + + function pushSegment (oFREvt) { + this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n"; + this.owner.status--; + processStatus(this.owner); + } + + function plainEscape (sText) { + /* How should I treat a text/plain form encoding? + What characters are not allowed? this is what I suppose...: */ + /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */ + return sText.replace(/[\s\=\\]/g, "\\$&"); + } + + function SubmitRequest (oTarget) { + var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post"; + /* console.log("AJAXSubmit - Serializing form..."); */ + this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded"; + this.technique = bIsPost ? + this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0; + this.receiver = oTarget.action; + this.status = 0; + this.segments = []; + var fFilter = this.technique === 2 ? plainEscape : escape; + for (var nItem = 0; nItem < oTarget.elements.length; nItem++) { + oField = oTarget.elements[nItem]; + if (!oField.hasAttribute("name")) { continue; } + sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; + if (sFieldType === "FILE" && oField.files.length > 0) { + if (this.technique === 3) { + /* enctype is multipart/form-data */ + for (nFile = 0; nFile < oField.files.length; nFile++) { + oFile = oField.files[nFile]; + oSegmReq = new FileReader(); + /* (custom properties:) */ + oSegmReq.segmentIdx = this.segments.length; + oSegmReq.owner = this; + /* (end of custom properties) */ + oSegmReq.onload = pushSegment; + this.segments.push("Content-Disposition: form-data; name=\"" + + oField.name + "\"; filename=\"" + oFile.name + + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n"); + this.status++; + oSegmReq.readAsBinaryString(oFile); + } + } else { + /* enctype is application/x-www-form-urlencoded or text/plain or + method is GET: files will not be sent! */ + for (nFile = 0; nFile < oField.files.length; + this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name))); + } + } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { + /* NOTE: this will submit _all_ submit buttons. Detecting the correct one is non-trivial. */ + /* field type is not FILE or is FILE but is empty */ + this.segments.push( + this.technique === 3 ? /* enctype is multipart/form-data */ + "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n" + : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */ + fFilter(oField.name) + "=" + fFilter(oField.value) + ); + } + } + processStatus(this); + } + + return function (oFormElement) { + if (!oFormElement.action) { return; } + new SubmitRequest(oFormElement); + }; + +})(); + +</script> +</head> +<body> + +<h1>Sending forms with pure AJAX</h1> + +<h2>Using the GET method</h2> + +<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h2>Using the POST method</h2> +<h3>Enctype: application/x-www-form-urlencoded (default)</h3> + +<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: text/plain</h3> + +<form action="register.php" method="post" enctype="text/plain" + onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + Your name: <input type="text" name="user" /> + </p> + <p> + Your message:<br /> + <textarea name="message" cols="40" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: multipart/form-data</h3> + +<form action="register.php" method="post" enctype="multipart/form-data" + onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Sex: + <input id="sex_male" type="radio" name="sex" value="male" /> + <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> + <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> + What do you prefer: + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> + Post your photos: + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> + <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> + <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +</body> +</html></pre> +</div> + +<p>To test this, create a page named <strong>register.php</strong> (which is the <code>action</code> attribute of these sample forms), and put the following <em>minimalistic</em> content:</p> + +<pre class="brush: php notranslate"><?php +/* register.php */ + +header("Content-type: text/plain"); + +/* +NOTE: You should never use `print_r()` in production scripts, or +otherwise output client-submitted data without sanitizing it first. +Failing to sanitize can lead to cross-site scripting vulnerabilities. +*/ + +echo ":: data received via GET ::\n\n"; +print_r($_GET); + +echo "\n\n:: Data received via POST ::\n\n"; +print_r($_POST); + +echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n"; +if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; } + +echo "\n\n:: Files received ::\n\n"; +print_r($_FILES); + +</pre> + +<p>The syntax to activate this script is simply:</p> + +<pre class="syntaxbox notranslate">AJAXSubmit(myForm);</pre> + +<div class="note"><strong>Note:</strong> This framework uses the {{domxref("FileReader")}} API to transmit file uploads. This is a recent API and is not implemented in IE9 or below. For this reason, the AJAX-only upload is considered <strong>an experimental technique</strong>. If you do not need to upload binary files, this framework works fine in most browsers.</div> + +<div class="note"><strong>Note:</strong> The best way to send binary content is via {{jsxref("ArrayBuffer", "ArrayBuffers")}} or {{domxref("Blob", "Blobs")}} in conjuncton with the {{domxref("XMLHttpRequest.send()", "send()")}} method and possibly the {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} method of the <code>FileReader</code> API. But, since the aim of this script is to work with a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> raw data, we used the {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} method in conjunction with the {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} method of the <code>FileReader</code> API. As such, the above script makes sense only when you are dealing with small files. If you do not intend to upload binary content, consider instead using the <code>FormData</code> API.</div> + +<div class="note"><strong>Note:</strong> The non-standard <code>sendAsBinary</code> method is considered deprecated as of Gecko 31 {{geckoRelease(31)}} and will be removed soon. The standard <code>send(Blob data)</code> method can be used instead.</div> + +<h3 id="Using_FormData_objects">Using FormData objects</h3> + +<p>The {{domxref("XMLHttpRequest.FormData", "FormData")}} constructor lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. Its primary use is in sending form data, but can also be used independently from a form in order to transmit user keyed data. The transmitted data is in the same format the form's <code>submit()</code> method uses to send data, if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an <code>XMLHttpRequest</code>. For examples, and explanations of how one can utilize FormData with XMLHttpRequests, see the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Using FormData Objects</a> page. For didactic purposes here is <strong>a <em>translation</em> of <a href="#A_little_vanilla_framework">the previous example</a> transformed to use the <code>FormData</code> API</strong>. Note the brevity of the code:</p> + +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: html notranslate"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" charset="UTF-8" /> +<title>Sending forms with FormData &ndash; MDN</title> +<script> +"use strict"; + +function ajaxSuccess () { + console.log(this.responseText); +} + +function AJAXSubmit (oFormElement) { + if (!oFormElement.action) { return; } + var oReq = new XMLHttpRequest(); + oReq.onload = ajaxSuccess; + if (oFormElement.method.toLowerCase() === "post") { + oReq.open("post", oFormElement.action); + oReq.send(new FormData(oFormElement)); + } else { + var oField, sFieldType, nFile, sSearch = ""; + for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) { + oField = oFormElement.elements[nItem]; + if (!oField.hasAttribute("name")) { continue; } + sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? + oField.getAttribute("type").toUpperCase() : "TEXT"; + if (sFieldType === "FILE") { + for (nFile = 0; nFile < oField.files.length; + sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name)); + } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { + sSearch += "&" + escape(oField.name) + "=" + escape(oField.value); + } + } + oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); + oReq.send(null); + } +} +</script> +</head> +<body> + +<h1>Sending forms with FormData</h1> + +<h2>Using the GET method</h2> + +<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h2>Using the POST method</h2> +<h3>Enctype: application/x-www-form-urlencoded (default)</h3> + +<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: text/plain</h3> + +<p>The text/plain encoding is not supported by the FormData API.</p> + +<h3>Enctype: multipart/form-data</h3> + +<form action="register.php" method="post" enctype="multipart/form-data" + onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Sex: + <input id="sex_male" type="radio" name="sex" value="male" /> + <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> + <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> + What do you prefer: + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> + Post your photos: + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> + <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> + <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> +</body> +</html></pre> +</div> + +<div class="note"><strong>Note:</strong> As we said,<strong> {{domxref("FormData")}} objects are not <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> objects</strong>. If you want to stringify a submitted data, use <a href="#A_little_vanilla_framework">the previous <em>pure</em>-AJAX example</a>. Note also that, although in this example there are some <code>file</code> {{ HTMLElement("input") }} fields, <strong>when you submit a form through the <code>FormData</code> API you do not need to use the {{domxref("FileReader")}} API also</strong>: files are automatically loaded and uploaded.</div> + +<h2 id="Get_last_modified_date">Get last modified date</h2> + +<pre class="brush: js notranslate">function getHeaderTime () { + console.log(this.getResponseHeader("Last-Modified")); /* A valid GMTString date or null */ +} + +var oReq = new XMLHttpRequest(); +oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html"); +oReq.onload = getHeaderTime; +oReq.send();</pre> + +<h3 id="Do_something_when_last_modified_date_changes">Do something when last modified date changes</h3> + +<p>Let's create two functions:</p> + +<pre class="brush: js notranslate">function getHeaderTime () { + var nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)); + var nLastModif = Date.parse(this.getResponseHeader("Last-Modified")); + + if (isNaN(nLastVisit) || nLastModif > nLastVisit) { + window.localStorage.setItem('lm_' + this.filepath, Date.now()); + isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit); + } +} + +function ifHasChanged(sURL, fCallback) { + var oReq = new XMLHttpRequest(); + oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL); + oReq.callback = fCallback; + oReq.filepath = sURL; + oReq.onload = getHeaderTime; + oReq.send(); +}</pre> + +<p>And to test:</p> + +<pre class="brush: js notranslate">/* Let's test the file "yourpage.html"... */ + +ifHasChanged("yourpage.html", function (nModif, nVisit) { + console.log("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!"); +});</pre> + +<p>If you want to know <strong><em>if</em> <em>the current page</em> has changed</strong>, please read the article about {{domxref("document.lastModified")}}.</p> + +<h2 id="Cross-site_XMLHttpRequest">Cross-site XMLHttpRequest</h2> + +<p>Modern browsers support cross-site requests by implementing the <a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> (CORS) standard. As long as the server is configured to allow requests from your web application's origin, <code>XMLHttpRequest</code> will work. Otherwise, an <code>INVALID_ACCESS_ERR</code> exception is thrown.</p> + +<h2 id="Bypassing_the_cache">Bypassing the cache</h2> + +<p>A cross-browser compatible approach to bypassing the cache is appending a timestamp to the URL, being sure to include a "?" or "&" as appropriate. For example:</p> + +<pre class="brush:plain notranslate">http://foo.com/bar.html -> http://foo.com/bar.html?12345 +http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345 +</pre> + +<p>As the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.</p> + +<p>You can automatically adjust URLs using the following code:</p> + +<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); + +oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime()); +oReq.send(null);</pre> + +<h2 id="Security">Security</h2> + +<p>{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference <code>capability.policy.<policyname>.XMLHttpRequest.open</policyname></code> to <code>allAccess</code> to give specific sites cross-site access. This is no longer supported.")}}</p> + +<p>{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}</p> + +<p>The recommended way to enable cross-site scripting is to use the <code>Access-Control-Allow-Origin</code> HTTP header in the response to the XMLHttpRequest.</p> + +<h3 id="XMLHttpRequests_being_stopped">XMLHttpRequests being stopped</h3> + +<p>If you conclude with an XMLHttpRequest receiving <code>status=0</code> and <code>statusText=null</code>, this means the request was not allowed to be performed. It was <code><a href="https://xhr.spec.whatwg.org/#dom-xmlhttprequest-unsent">UNSENT</a></code>. A likely cause for this is when the <a href="https://www.w3.org/TR/2010/CR-XMLHttpRequest-20100803/#xmlhttprequest-origin"><code>XMLHttpRequest</code> origin</a> (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is subsequently <code>open()</code>. This case can happen, for example, when one has an XMLHttpRequest that gets fired on an onunload event for a window, the expected XMLHttpRequest is created when the window to be closed is still there, and finally sending the request (in otherwords, <code>open()</code>) when this window has lost its focus and another window gains focus. The most effective way to avoid this problem is to set a listener on the new window's {{event("activate")}} event which is set once the terminated window has its {{event("unload")}} event triggered.</p> + +<h2 id="Workers">Workers</h2> + +<p>Setting <code>overrideMimeType</code> does not work from a {{domxref("Worker")}}. See {{bug(678057)}} for more details. Other browsers may handle this differently.</p> + +<h2 id="Specifications">Specifications</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('XMLHttpRequest')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Live standard, latest version</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden"><font><font>Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. </font><font>Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font> und senden Sie uns eine Pull-Anfrage.</font></font></p> + +<p><font><font>{{Compat ("api.XMLHttpRequest")}}</font></font></p> + +<h2 id="Siehe_auch"><font><font>Siehe auch</font></font></h2> + +<ol> + <li><a href="/en-US/docs/AJAX/Getting_Started"><font><font>MDN AJAX Einführung</font></font></a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest"><font><font>HTML in XMLHttpRequest</font></font></a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS"><font><font>HTTP-Zugriffskontrolle</font></font></a></li> + <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL"><font><font>So überprüfen Sie den Sicherheitsstatus einer XMLHTTPRequest über SSL</font></font></a></li> + <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html"><font><font>XMLHttpRequest - REST und die Rich User Experience</font></font></a></li> + <li><a href="https://msdn.microsoft.com/library/ms535874"><font><font>Microsoft-Dokumentation</font></font></a></li> + <li><a href="http://jibbering.com/2002/4/httprequest.html"><font><font>"Verwenden des XMLHttpRequest-Objekts" (jibbering.com)</font></font></a></li> + <li><a href="https://xhr.spec.whatwg.org/"><font><font>Das </font></font><code>XMLHttpRequest</code><font><font>Objekt: WHATWG-Spezifikation</font></font></a></li> +</ol> |