diff options
Diffstat (limited to 'files/pl/web/api')
322 files changed, 24008 insertions, 0 deletions
diff --git a/files/pl/web/api/attr/index.html b/files/pl/web/api/attr/index.html new file mode 100644 index 0000000000..8088fae8a9 --- /dev/null +++ b/files/pl/web/api/attr/index.html @@ -0,0 +1,164 @@ +--- +title: Attr +slug: Web/API/Attr +tags: + - API + - DOM +translation_of: Web/API/Attr +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Interfejs </span></font><strong>Attr</strong></code> reprezentuje jeden z atrybutów elementu DOM jako obiekt.W większości metod DOM otrzymujesz wartość atrybutu bezpośrednio jako ciąg znaków (np., {{domxref("Element.getAttribute()")}}), oprócz niektórych funkcji (np., {{domxref("Element.getAttributeNode()")}}) lub sposobów iteracji zwracających typ <code>Attr</code>.</p> + +<p>{{InheritanceDiagram}}</p> + +<div class="warning"><strong>Warning: </strong>Poczynając od Gecko 7.0 {{geckoRelease("7.0")}}, pojawia się szereg przestarzałych właściwości i metod wyświetlających ostrzeżenia w konsoli. Powinieneś odpowiednio przejrzeć swój kod. Zobacz <a href="#Deprecated_properties_and_methods"> Przestarzałe właściwości i metody</a> aby zobacyć pełną listę.</div> + +<h2 id="Właściwości">Właściwości</h2> + +<dl> + <dt>{{domxref("Attr.name", "name")}} {{readOnlyInline}}</dt> + <dd>Nazwa atrybutu.</dd> + <dt>{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}</dt> + <dd>{{domxref("DOMString")}} reprezentujący przestrzeń nazw URI atrybutu lub <code>null</code> jeśli nie ma określonej przestrzeni nazw.</dd> + <dt>{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}</dt> + <dd>{{domxref("DOMString")}} reprezentujący lokalną część kwalifikowanej przestrzeni nazw atrybutu.</dd> + <dt>{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}</dt> + <dd>{{domxref("DOMString")}} reprezentujący prefiks przestrzeni nazw atrybutu lub <code>null</code> jeśli nie określono prefiksu.</dd> + <dt>{{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}</dt> + <dd> + <p>Element posiadający atrybut.</p> + + <div class="note"> + <p><strong>Note:</strong> DOM Level 4 usunął tę właściwość. Założono, że skoro otrzymujesz <code>Attr</code> z {{domxref("Element")}}, powinieneś znać powiązany element.<br> + Ponieważ nie jest to prawdą w przypadkach, takich jak obiekty <code>Attr</code> zwracane przez {{domxref("Document.evaluate")}}, DOM Living Standard wprowadził tę właściwość ponownie.</p> + + <p>Gecko wyświetla notę o deprecjonowaniu poczynając od Gecko 7.0 {{geckoRelease("7.0")}}. Nota została usunięta w in Gecko 49.0 {{geckoRelease("49.0")}}.</p> + </div> + </dd> + <dt>{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}</dt> + <dd>Ta właściwosć zawsze zwraca <code>true</code>. Pierwotnie, zwracała <code>true</code> jeśli właściwość była określona wprost w kodzie źródłowym lub poprzez skrypt a <code>false</code> jeśli była domyślna lub określona w <acronym title="Document Type Definition">DTD</acronym>.</dd> + <dt>{{domxref("Attr.value", "value")}}</dt> + <dd>Wartość atrybutu.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> DOM Level 3 zdefiniował <code>namespaceURI</code>, <code>localName</code> i <code>prefix</code> w interfejsie{{domxref("Node")}}. W DOM4 zostały przeniesione do <code>Attr</code>.</p> + +<p>Ta zmiana została zaimplementowana w Chrome 46.0 i Firefox od wersji 48.0.</p> +</div> + +<h2 id="Przestarzałe_właściwości_i_metody">Przestarzałe właściwości i metody</h2> + +<p>Następujące właściwości są przestarzałe. Kiedy to możliwe, odpowiednie zastępcze właściwości są podane.</p> + +<dl> + <dt><code>attributes</code></dt> + <dd>Obecnie zawsze zwraca <code>NULL</code>.</dd> + <dt><code>childNodes</code> {{obsolete_inline(14)}}</dt> + <dd>Ta właściwość obecnie zawsze zwraca pusty {{domxref("NodeList")}}.</dd> + <dt><code>firstChild</code> {{obsolete_inline(14)}}</dt> + <dd>Obecnie zawsze zwraca <code>NULL</code>.</dd> + <dt><code>isId</code> {{readOnlyInline}}</dt> + <dd>Wskazuje czy atrybut jest atrybutem "ID". An "ID" jest atrybutem, którego wartość powinna być unikalna w całym dokumencie DOM. W HTML DOM, "id" to atrybut ID, ale XML może definiować inne. To, czy atrybut jest unikalny, czy nie, jest często determinowane przez {{Glossary("DTD")}} lub inny schemat dokumentu.</dd> + <dt><code>lastChild</code> {{obsolete_inline(14)}}</dt> + <dd>Obecnie zawsze zwraca <code>NULL</code>.</dd> + <dt><code>nextSibling</code></dt> + <dd>Obecnie zawsze zwraca <code>NULL</code>.</dd> + <dt><code>nodeName</code></dt> + <dd>Zamiast tego używaj {{domxref("Attr.name")}} .</dd> + <dt><code>nodeType</code></dt> + <dd>Obecnie zawsze zwraca 2 (<code>ATTRIBUTE_NODE</code>).</dd> + <dt><code>nodeValue</code></dt> + <dd>Zamiast tego używaj {{domxref("Attr.value")}}.</dd> + <dt><code>ownerDocument</code></dt> + <dd>Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.</dd> + <dt><code>parentNode</code></dt> + <dd>Obecnie zawsze zwraca <code>NULL</code>.</dd> + <dt><code>previousSibling</code></dt> + <dd>Obecnie zawsze zwraca <code>NULL</code>.</dd> + <dt><code>schemaTypeInfo</code> {{obsolete_inline}} {{readOnlyInline}}</dt> + <dd>Typ informacji powiązane z tym atrybutem. Podczas gdy typ informacji zawierany przez ten atrybut ma gwarantowaną poprawność po waładowaniu dokumentu lub wywołaniu {{domxref("Document.normalizeDocument")}}, ta właściwość może nie być wiarygodna jeśli węzeł został przeniesiony.</dd> + <dt><code>specified</code></dt> + <dd>Obecnie zawsze zwraca <code>true</code>.</dd> + <dt><code>textContent</code></dt> + <dd>Zamiast tego używaj {{domxref("Attr.value")}}.</dd> +</dl> + +<p>Poniższe metody są przestarzałe:</p> + +<dl> + <dt><code>appendChild()</code> {{obsolete_inline(14)}}</dt> + <dd>Zamiast tego, modyfikuj wartość {{domxref("Attr.value")}}.</dd> + <dt><code>cloneNode()</code></dt> + <dd>Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.</dd> + <dt><code>createAttribute()</code></dt> + <dd>Zamiast tego używaj {{domxref("Element.setAttribute()")}}.</dd> + <dt><code>createAttributeNS()</code></dt> + <dd>Zamiast tego używaj {{domxref("Element.setAttributeNS()")}}.</dd> + <dt><code>getAttributeNode()</code></dt> + <dd>Zamiast tego używaj {{domxref("Element.getAttribute()")}}.</dd> + <dt><code>getAttributeNodeNS()</code></dt> + <dd>Zamiast tego używaj {{domxref("Element.getAttributeNS()")}}.</dd> + <dt><code>hasAttributes()</code> {{obsolete_inline("21.0")}}</dt> + <dd>Obecnie zawsze zwraca <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">false</span></font>.</dd> + <dt><code>hasChildNodes()</code></dt> + <dd>Obecnie zawsze zwraca <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">false</span></font>.</dd> + <dt><code>insertBefore()</code></dt> + <dd>Zamiast tego modyfikuj wartość {{domxref("Attr.value")}}.</dd> + <dt><code>isSupported()</code></dt> + <dd>Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.</dd> + <dt><code>isEqualNode()</code></dt> + <dd>Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.</dd> + <dt><code>normalize()</code></dt> + <dd>Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.</dd> + <dt><code>removeAttributeNode()</code></dt> + <dd>Zamiast tego używaj {{domxref("Element.removeAttribute()")}}.</dd> + <dt><code>removeChild()</code> {{obsolete_inline(14)}}</dt> + <dd>Zamiast tego, modyfikuj wartość {{domxref("Attr.value")}} instead.</dd> + <dt><code>replaceChild()</code> {{obsolete_inline(14)}}</dt> + <dd>Zamiast tego, modyfikuj wartość {{domxref("Attr.value")}} instead.</dd> + <dt><code>setAttributeNode()</code></dt> + <dd>Zamiast tego używaj {{domxref("Element.setAttribute()")}}.</dd> + <dt><code>setAttributeNodeNS()</code></dt> + <dd>Zamiast tego używaj {{domxref("Element.setAttributeNS()")}}.</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("DOM WHATWG", "#interface-attr", "Attr")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Przywraca właściwość <code>ownerElement</code> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#interface-attr", "Attr")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> + <ul> + <li>Przenosi <code>namespaceURI</code>, <code>prefix</code> i <code>localName</code> z {{domxref("Node")}} do tego API i usuwa <code>ownerElement</code>, <code>schemaTypeInfo</code> oraz <code>isId</code>.</li> + </ul> + </td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>Wstępna definicja</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + + + +<p>{{Compat("api.Attr")}}</p> diff --git a/files/pl/web/api/audiobuffer/index.html b/files/pl/web/api/audiobuffer/index.html new file mode 100644 index 0000000000..ea611b7250 --- /dev/null +++ b/files/pl/web/api/audiobuffer/index.html @@ -0,0 +1,174 @@ +--- +title: AudioBuffer +slug: Web/API/AudioBuffer +translation_of: Web/API/AudioBuffer +--- +<p>{{APIRef("Web Audio API")}}</p> + +<div> +<p>Interfejs <code>AudioBuffer</code> przedstawia krótki zasób dźwiękowy znajdujący się w pamięci, stworzony z pliku dźwiękowego za pomocą metody {{ domxref("AudioContext.decodeAudioData()") }} lub z surowych danych przy użyciu {{ domxref("AudioContext.createBuffer()") }}. Dane audio umieszczone w AudioBuffer mogą być następnie odtwarzane przez przekazanie ich do {{ domxref("AudioBufferSourceNode") }}.</p> +</div> + +<p>Obiekty tego typu są przeznaczone do przechowywania drobnych fragmentów dźwiękowych, zwykle mniej niż 45s. W przypadku dłuższych dźwięków, obiekty implementujące {{domxref("MediaElementAudioSourceNode")}} są bardziej odpowiednie. Bufor zawiera dane w następującym formacie: IEEE754 32 -bitowy liniowy PCM bez przeplotu o nominalnym zakresie między -1 i +1 , czyli 32-bitowy zmiennoprzecinkowy bufor z próbkami o znormalizowanych wartościach między -1.0 a 1.0. Jeśli {{domxref("AudioBuffer")}} ma wiele kanałów, są one przechowywane w osobnym buforze.</p> + +<h2 id="Właściwości">Właściwości</h2> + +<dl> + <dt>{{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}</dt> + <dd>Zwraca wartość typu <code>float</code> reprezentującą częstotliwość próbkowania danych PCM przechowywanych w buforze wyrażoną w próbkach na sekundę.</dd> + <dt>{{domxref("AudioBuffer.length")}} {{readonlyInline}}</dt> + <dd>Zwraca wartość typu <code>int</code> reprezentującą wielkość danych PCM przechowywanych w buforze wyrażoną jako liczba okien próbek.</dd> + <dt>{{domxref("AudioBuffer.duration")}} {{readonlyInline}}</dt> + <dd>Zwraca wartość typu <code>double </code>reprezentującą czas trwania danych PCM zapisanych w buforze wyrażoną w sekundach.</dd> + <dt>{{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}}</dt> + <dd>Zwraca wartość typu<code> int</code> reprezentującą liczbę pojedynczych kanałów audio opisanych przez dane PCM zapisanych w buforze.</dd> +</dl> + +<h2 id="Metody">Metody</h2> + +<dl> + <dt>{{domxref("AudioBuffer.getChannelData()")}}</dt> + <dd>Zwraca tablicę {{jsxref("Float32Array")}} zawierającą dane PCM powiązane z kanałem audio określonym jako parametr <code>channel</code> <code>(0</code> reprezentuje pierwszy kanał).</dd> + <dt>{{domxref("AudioBuffer.copyFromChannel()")}}</dt> + <dd>Kopiuje próbki z danego kanału w <span class="idlType"><code>AudioBuffer</code></span> do danej tablicy.</dd> + <dt>{{domxref("AudioBuffer.copyToChannel()")}}</dt> + <dd>Kopiuje próbki z danej tablicy do danego <span class="idlType"><code>kanału w AudioBuffer</code></span>.</dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<p>Następujący przykład kodu pokazuje jak stworzyć <code>AudioBuffer</code> i wypełnić go białym szumem. Pełną wersję kodu można znależć w naszym repozytorium <a href="https://github.com/mdn/audio-buffer">audio-buffer demo</a>; jest dostępna także uruchomiona na żywo wersja <a href="http://mdn.github.io/audio-buffer/">running live version</a>.</p> + +<pre class="brush: js;highlight:[7,14,27]">// Stereo +var channels = 2; + +// Tworzenie pustego, dwusekundowego buffera stereo +// na wskaźniku audio z AudioContext +var frameCount = audioCtx.sampleRate * 2.0; +var myArrayBuffer = audioCtx.createBuffer(channels, frameCount, audioCtx.sampleRate); + +button.onclick = function() { + // Wypełnienie buffera białym szumem; + // Wartość losowa pomiędzy -1.0 a 1.0 + for (var channel = 0; channel < channels; channel++) { + // To daje nam aktualną tablice zawierającą dane + var nowBuffering = myArrayBuffer.getChannelData(channel); + for (var i = 0; i < frameCount; i++) { + // Math.random() znajduje się w przedziale [0; 1.0] + // audio musi znajdować się w [-1.0; 1.0] + nowBuffering[i] = Math.random() * 2 - 1; + } + } + + // Dostarczenie AudioBufferSourceNode. + // To jest AudioNode dedykowane do używania wtedy, kiedy chcemy odtworzyć dany AudioBuffer + var source = audioCtx.createBufferSource(); + + // Określanie buffera w AudioBufferSourceNode + source.buffer = myArrayBuffer; + + // Podłączanie AudioBufferSourceNode do + // destynacji, dzięki czemu możemy usłyszeć dźwięk + source.connect(audioCtx.destination); + + // start odtwarzania źródła + source.start(); + +} +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API', '#the-audiobuffer-interface', 'AudioBuffer')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td>Definicja wstępna.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>14 {{property_prefix("webkit")}}</td> + <td>{{CompatGeckoDesktop(25)}}</td> + <td>{{CompatNo}}</td> + <td>15 {{property_prefix("webkit")}}<br> + 22</td> + <td>6 {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td><code>copyFromChannel()</code> and <code>copyToChannel()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(27)}}</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>Cecha</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>Wsparcie podstawowe</td> + <td>{{CompatNo}}</td> + <td>28 {{property_prefix("webkit")}}</td> + <td>{{CompatGeckoMobile(25)}}</td> + <td>1.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6 {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td><code>copyFromChannel()</code> and <code>copyToChannel()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(27)}}</td> + <td> </td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Używanie Web Audio API</a></li> +</ul> diff --git a/files/pl/web/api/audiocontext/createdynamicscompressor/index.html b/files/pl/web/api/audiocontext/createdynamicscompressor/index.html new file mode 100644 index 0000000000..7788cc64a9 --- /dev/null +++ b/files/pl/web/api/audiocontext/createdynamicscompressor/index.html @@ -0,0 +1,142 @@ +--- +title: AudioContext.createDynamicsCompressor() +slug: Web/API/AudioContext/createDynamicsCompressor +translation_of: Web/API/BaseAudioContext/createDynamicsCompressor +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<div> +<p>Metoda <code>createDynamicsCompressor() </code>interfejsu domxref("AudioContext") }} jest używana do utworzenia {{domxref("DynamicsCompressorNode")}}, który może być zastosowany do dodawania kompresji na sygnał audio.</p> +</div> + +<p>Kompresja zcisza najgłośniejsze fragmenty sygnału i podgłaśnia najcichsze. W rezultacie możemy uzyskać głośniejszy, bogatszy i pełniejszy dźwięk. Jest to szczególnie istotne w przypadku gier oraz aplikacji muzycznych, w których duża ilość dźwięków jest odtwarzana jednocześnie oraz tam, gdzie chcesz kontrolować poziom sygnału głównego i unikać zniekształceń sygnału wyjściowego audio.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="brush: js">var audioCtx = new AudioContext(); +var compressor = audioCtx.createDynamicsCompressor();</pre> + +<h3 id="Zwracanie_wartości_funkcji_(return)">Zwracanie wartości funkcji (return)</h3> + +<p>{{domxref("DynamicsCompressorNode")}}.</p> + +<h2 id="Przykład">Przykład</h2> + +<p>Poniższy kod przedstawia przykład prostego zastosowania createDynamicsCompressor() w celu dodania kompresji do ścieżki dźwiękowej. Pełniejszy przykład znajdziesz klikając na nasz <a href="https://mdn.github.io/webaudio-examples/compressor-example/">przykład podstawowego kompresora</a> (<a href="https://github.com/mdn/webaudio-examples/tree/master/compressor-example">zobacz kod źródłowy</a>).</p> + +<pre class="brush: js;highlight[6,18,19]">// utworzenie MediaElementAudioSourceNode +// wprowadzenie HTMLMediaElement +var source = audioCtx.createMediaElementSource(myAudio); + +// utworzenie węzła kompresora (compressor node) +var compressor = audioCtx.createDynamicsCompressor(); +compressor.threshold.value = -50; +compressor.knee.value = 40; +compressor.ratio.value = 12; +compressor.reduction.value = -20; +compressor.attack.value = 0; +compressor.release.value = 0.25; + +// podłączenie AudioBufferSourceNode do destynacji +source.connect(audioCtx.destination); + +button.onclick = function() { + var active = button.getAttribute('data-active'); + if(active == 'false') { + button.setAttribute('data-active', 'true'); + button.innerHTML = 'Remove compression'; + + source.disconnect(audioCtx.destination); + source.connect(compressor); + compressor.connect(audioCtx.destination); + } else if(active == 'true') { + button.setAttribute('data-active', 'false'); + button.innerHTML = 'Add compression'; + + source.disconnect(compressor); + compressor.disconnect(audioCtx.destination); + source.connect(audioCtx.destination); + } +}</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API', '#widl-AudioContext-createDynamicsCompressor-DynamicsCompressorNode', 'createDynamicsCompressor()')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</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>Wsparcie podstawowe</td> + <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</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> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>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> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Wsparcie podstawowe</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>33.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Używanie Web Audio API</a></li> +</ul> diff --git a/files/pl/web/api/audiocontext/index.html b/files/pl/web/api/audiocontext/index.html new file mode 100644 index 0000000000..db5d07d69c --- /dev/null +++ b/files/pl/web/api/audiocontext/index.html @@ -0,0 +1,293 @@ +--- +title: AudioContext +slug: Web/API/AudioContext +translation_of: Web/API/AudioContext +--- +<p>{{APIRef("Web Audio API")}}</p> + +<div> +<p>Interfejs <code>AudioContext</code> reprezentuje wykres przetwarzania sygnału audio, utworzonego z połączonych ze sobą modułów audio, przy czym każdy z tych modułów reprezentowany jest przez {{domxref("AudioNode")}}. Kontekst audio kontroluje zarówno powstawanie zawartych w nim powiązań, jak również realizację przetwarzania audio lub dekodowania. Niezbędne jest stworzenie AudioContext przez wprowadzeniem czegokolwiek innego, jako że wszystko dzieje się w kontekście.</p> +</div> + +<p>AudioCintext może stanowić cel (target) eventów, dlatego implementuje inferfejs {{domxref("EventTarget")}}.</p> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt>{{domxref("AudioContext.AudioContext", "AudioContext()")}}</dt> + <dd>Tworzy i zwraca nowy obiekt <code>AudioContext</code>.</dd> +</dl> + +<h2 id="Właściwości">Właściwości</h2> + +<dl> + <dt>{{domxref("AudioContext.currentTime")}} {{readonlyInline}}</dt> + <dd>Zwraca <code>double</code> reprezentujące stale liczony czas w sekundach, używany do przyporządkowywania. Rozpoczyna się od 0.</dd> + <dt>{{domxref("AudioContext.destination")}} {{readonlyInline}}</dt> + <dd>Zwraca {{domxref("AudioDestinationNode")}} reprezentujące ostateczny cel wszyskich audio w kontekście. Należy traktować go jako urządzenie interpretujące audio.</dd> + <dt>{{domxref("AudioContext.listener")}} {{readonlyInline}}</dt> + <dd>Zwraca obiekt {{domxref("AudioListener")}}, używany do przestrzenności 3D.</dd> + <dt>{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}</dt> + <dd>Zwraca<code> float</code> reprezentujący wskaźnik próbkowania (w samplach na sekundę) używany we wszystkich połączeniach w tym kontekście. Wskaźnik próbkowania {{domxref("AudioContext")}} nie może być zmieniany.</dd> + <dt>{{domxref("AudioContext.state")}} {{readonlyInline}}</dt> + <dd>Zwraca aktualny status <code>AudioContext</code>.</dd> + <dt>{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}</dt> + <dd>Używany do zwracania kanału audio, tak by grany dźwięk w {{domxref("AudioContext")}} był poprawnie odtwarzany na urządządzeniu Firefox OS.</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="Methods">Methods</h2> + +<p><em>Also implements methods from the interface </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.createConstantSource()")}}</dt> + <dd>Creates a {{domxref("ConstantSourceNode")}} object, which is an audio source that continuously outputs a monaural (one-channel) sound signal whose samples all have the same value.</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.createIIRFilter()")}}</dt> + <dd>Creates an {{domxref("IIRFilterNode")}}, which represents a second order filter configurable as several different common filter types.</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.getOutputTimestamp()")}}</dt> + <dd>Returns a new <code>AudioTimestamp</code> containing two correlated context's audio stream position values: the <code>AudioTimestamp.contextTime</code> member contains the time of the sample frame which is currently being rendered by the audio output device (i.e., output audio stream position), in the same units and origin as context's {{domxref("AudioContext.currentTime")}}; the AudioTimestamp.performanceTime member contains the time estimating the moment when the sample frame corresponding to the stored contextTime value was rendered by the audio output device, in the same units and origin as {{domxref("performance.now()")}}.</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_methods">Obsolete methods</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="Examples">Examples</h2> + +<p>Basic audio context declaration:</p> + +<pre class="brush: js">var audioCtx = new AudioContext();</pre> + +<p>Cross browser variant:</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="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-audiocontext-interface', 'AudioContext')}}</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>Edge</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>{{CompatVersionUnknown}}</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>{{CompatVersionUnknown}}</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>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(40.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>createConstantSource()</code></td> + <td>{{CompatChrome(56.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(52)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(43)}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Unprefixed</td> + <td>{{CompatVersionUnknown}}</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 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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(37.0)}} </td> + <td>2.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>createStereoPanner()</code></td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + <tr> + <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>createConstantSource()</code></td> + <td>{{CompatChrome(56.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(52)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(56.0)}}</td> + </tr> + <tr> + <td>Unprefixed</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(43)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</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/pl/web/api/audioparam/index.html b/files/pl/web/api/audioparam/index.html new file mode 100644 index 0000000000..390e9726f5 --- /dev/null +++ b/files/pl/web/api/audioparam/index.html @@ -0,0 +1,224 @@ +--- +title: AudioParam +slug: Web/API/AudioParam +tags: + - API + - Audio + - AudioParam + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Audio API +translation_of: Web/API/AudioParam +--- +<p>{{APIRef("Web Audio API")}}</p> + +<div> +<p>The <code>AudioParam</code> interface represents an audio-related parameter, usually a parameter of an {{domxref("AudioNode")}} (such as {{ domxref("GainNode.gain") }}). An <code>AudioParam</code> can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.</p> +</div> + +<p>There are two kinds of <code>AudioParam</code>, <em>a-rate</em> and <em>k-rate</em> parameters:</p> + +<ul> + <li id="a-rate">An <em>a-rate</em> <code>AudioParam</code> takes the current audio parameter value for each <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Audio_buffers.3A_frames.2C_samples_and_channels">sample frame</a> of the audio signal.</li> + <li id="k-rate">A <em>k-rate</em> <code>AudioParam</code> uses the same initial audio parameter value for the whole block processed, that is 128 sample frames.</li> +</ul> + +<p>Each {{domxref("AudioNode")}} defines which of its parameters are <em>a-rate</em> or <em>k-rate</em> in the spec.</p> + +<p>Each <code>AudioParam</code> has a list of events, initially empty, that define when and how values change. When this list is not empty, changes using the <code>AudioParam.value</code> attributes are ignored. This list of events allows us to schedule changes that have to happen at very precise times, using arbitrary timelime-based automation curves. The time used is the one defined in {{domxref("AudioContext.currentTime")}}.</p> + +<h2 id="Properties">Properties</h2> + +<p><code>AudioParam</code><em> Inherits properties from its parent, </em><code>AudioNode</code>.</p> + +<dl> + <dt>{{domxref("AudioParam.defaultValue")}} {{readonlyInline}}</dt> + <dd>Represents the initial volume of the attribute as defined by the specific {{domxref("AudioNode")}} creating the <code>AudioParam</code>.</dd> + <dt>{{domxref("AudioParam.maxValue")}} {{readonlyInline}}</dt> + <dd>Represents the maximum possible value for the parameter's nominal (effective) range. </dd> + <dt>{{domxref("AudioParam.minValue")}} {{readonlyinline}}</dt> + <dd>Represents the minimum possible value for the parameter's nominal (effective) range. </dd> + <dt>{{domxref("AudioParam.value")}}</dt> + <dd>Represents the parameter's current volume as a floating point value; initially set to the value of <code>AudioParam.defaultValue</code>. Though it can be set, any modifications happening while there are automation events scheduled — that is events scheduled using the methods of the <code>AudioParam</code> — are ignored, without raising any exception.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p>AudioParam<em> Inherits methods from its parent, </em><code>AudioNode</code>.</p> + +<dl> + <dt>{{domxref("AudioParam.setValueAtTime()")}}</dt> + <dd>Schedules an instant change to the value of the <code>AudioParam</code> at a precise time, as measured against {{domxref("AudioContext.currentTime")}}. The new value is given in the <code>value</code> parameter.</dd> + <dt>{{domxref("AudioParam.linearRampToValueAtTime()")}}</dt> + <dd>Schedules a gradual linear change in the value of the <code>AudioParam</code>. The change starts at the time specified for the <em>previous</em> event, follows a linear ramp to the new value given in the <code>value</code> parameter, and reaches the new value at the time given in the <code>endTime</code> parameter.</dd> + <dt>{{domxref("AudioParam.exponentialRampToValueAtTime()")}}</dt> + <dd>Schedules a gradual exponential change in the value of the <code>AudioParam</code>. The change starts at the time specified for the <em>previous</em> event, follows an exponential ramp to the new value given in the <code>value</code> parameter, and reaches the new value at the time given in the <code>endTime</code> parameter.</dd> + <dt>{{domxref("AudioParam.setTargetAtTime()")}}</dt> + <dd>Schedules the start of a change to the value of the <code>AudioParam</code>. The change starts at the time specified in <code>startTime</code> and exponentially moves towards the value given by the <code>target</code> parameter. The exponential decay rate is defined by the <code>timeConstant</code> parameter, which is a time measured in seconds.</dd> + <dt>{{domxref("AudioParam.setValueCurveAtTime()")}}</dt> + <dd>Schedules the values of the <code>AudioParam</code> to follow a set of values, defined by the <code>values</code> {{domxref("Float32Array")}} scaled to fit into the given interval, starting at <code>startTime</code>, and having a specific <code>duration</code>.</dd> + <dt>{{domxref("AudioParam.cancelScheduledValues()")}}</dt> + <dd>Cancels all scheduled future changes to the <code>AudioParam</code>.</dd> + <dt>{{domxref("AudioParam.cancelAndHoldAtTime()")}}</dt> + <dd>Cancels all scheduled future changes to the <code>AudioParam</code> but holds its value at a given time until further changes are made using other methods. The new value is given in the <code>value</code> parameter.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>First, a basic example showing a {{domxref("GainNode")}} having its <code>gain</code> value set. <code>gain</code> is an example of an a-rate AudioParam, as the value can potentially be set differently for each sample frame of the audio.</p> + +<pre class="brush: js;highlight[5]">var AudioContext = window.AudioContext || window.webkitAudioContext; +var audioCtx = new AudioContext(); + +var gainNode = audioCtx.createGain(); +gainNode.gain.value = 0;</pre> + +<p>Next, an example showing a {{ domxref("BiquadFilterNode") }} having some values set. These are examples of k-rate AudioParam's, as the values are set for the entire audio block at once.</p> + +<pre class="brush: js;highlight[6,7,8]">var AudioContext = window.AudioContext || window.webkitAudioContext; +var audioCtx = new AudioContext(); + +var biquadFilter = audioCtx.createBiquadFilter(); + +biquadFilter.type = "lowshelf"; +biquadFilter.frequency.value = 1000; +biquadFilter.gain.value = 25;</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-audioparam-interface', 'AudioParam')}}</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(14)}} {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(23)}}</td> + <td>{{CompatNo}}</td> + <td>15 {{property_prefix("webkit")}}<br> + 22 (unprefixed)</td> + <td>6 {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td>Unprefixed</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>minValue</code> and <code>maxValue</code></td> + <td>{{CompatChrome(52)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>39</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>cancelAndHoldAtTime()</code></td> + <td>{{CompatChrome(57)}}</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 Webview</th> + <th>Chrome for 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>{{CompatChrome(28)}} {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(25)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6 {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td>Unprefixed</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>minValue</code> and <code>maxValue</code></td> + <td>{{CompatChrome(52)}}</td> + <td>{{CompatChrome(52)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>39</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>cancelAndHoldAtTime()</code></td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatChrome(57)}}</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/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> +</ul> diff --git a/files/pl/web/api/audioparam/setvalueattime/index.html b/files/pl/web/api/audioparam/setvalueattime/index.html new file mode 100644 index 0000000000..7d733e7b2b --- /dev/null +++ b/files/pl/web/api/audioparam/setvalueattime/index.html @@ -0,0 +1,182 @@ +--- +title: AudioParam.setValueAtTime() +slug: Web/API/AudioParam/setValueAtTime +tags: + - API + - AudioParam + - Metodă + - Referencja + - Web Audio API + - setValueAtTime +translation_of: Web/API/AudioParam/setValueAtTime +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<div> +<p>Metoda <code>setValueAtTime()</code> interfejsu {{ domxref("AudioParam") }} odpowiada za precyzyjne przyporządkowanie nagłych zmian do wartości {{domxref("AudioParam")}} w określonym czasie względem {{domxref("AudioContext.currentTime")}}. Nowa wartość zostaje podana w wartości parametru.</p> +</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">var AudioParam = AudioParam.setValueAtTime(<em>value</em>, <em>startTime</em>)</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt>value</dt> + <dd>Liczba zmiennoprzecinkowa reprezentująca wartość <code>AudioParam</code> przyporządkuje się do podanego czasu.</dd> + <dt>startTime</dt> + <dd>Zmienna <code>double </code>reprezentująca czas (w sekundach) po {{ domxref("AudioContext") }} została utworzona jako pierwsza, dzięki czemu dochodzi do zmiany wartości. {{jsxref("TypeError")}} zostanie zwrócony, jeśli uzyskana wartość jest negatywna.</dd> +</dl> + +<h3 id="Zwracanie_wartości_funkcji_(return)">Zwracanie wartości funkcji (return)</h3> + +<p>Odnośnik do obiektu <code>AudioParam</code>. W niektórych przeglądarkach wprowadzenie tego interfejsu zaskutkuje zwróceniem pustego typu danych (<code>void</code>).</p> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Ten stosunkowo prosty przykład zawiera źródło mediaelementu z dwiema kontrolkami (sprawdź kod źródłowy poprzez nasze <a href="https://github.com/mdn/audio-param">repo audio-param</a> lub <a href="http://mdn.github.io/audio-param/">zobacz przykład live</a>). Jeśli kontrolki są wciśnięte, zmienna <code>currGain</code> jest inkrementowana/dekrementowana o 0.25. Wówczas metoda <code>setValueAtTime() </code>zostaje użyta do ustawienia wartości przedwzmacniacza (gain) jako równej currGain, jedną sekundę od teraz (audioCtx.currentTime + 1).</p> + +<pre class="brush: js;highlight[32,37]">// utworzenie kontekstu audio +var AudioContext = window.AudioContext || window.webkitAudioContext; +var audioCtx = new AudioContext(); + +// podanie podstawowych zmiennych dla przykładu +var myAudio = document.querySelector('audio'); +var pre = document.querySelector('pre'); +var myScript = document.querySelector('script'); + +pre.innerHTML = myScript.innerHTML; + +var targetAtTimePlus = document.querySelector('.set-target-at-time-plus'); +var targetAtTimeMinus = document.querySelector('.set-target-at-time-minus'); + +// utworzenie MediaElementAudioSourceNode +// wprowadzenie HTMLMediaElement +var source = audioCtx.createMediaElementSource(myAudio); + +// utworzenie parametrów <span class="st">przedwzmacniacz</span>a (gain node) i ustawienie wartości przedwzmacniacza na wartość 0.5 +var gainNode = audioCtx.createGain(); +gainNode.gain.value = 0.5; +var currGain = gainNode.gain.value; + +// podłączenie AudioBufferSourceNode do gainNode +// oraz gainNode do destynacji +source.connect(gainNode); +gainNode.connect(audioCtx.destination); + +// określenie, co ma się wykonać po kliknięciu +targetAtTimePlus.onclick = function() { + currGain += 0.25; + gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1); +} + +targetAtTimeMinus.onclick = function() { + currGain -= 0.25; + gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1); +}</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API', '#widl-AudioParam-setValueAtTime-void-float-value-double-startTime', 'setValueAtTime')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</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>Wsparcie podstawowe</td> + <td>{{CompatChrome(14)}} {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>23</td> + <td>{{CompatNo}}</td> + <td>15 {{property_prefix("webkit")}}<br> + 22 (unprefixed)</td> + <td>6 {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td>Bez prefiksu</td> + <td>{{CompatVersionUnknown}}</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>Cecha</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>25</td> + <td>1.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6 {{property_prefix("webkit")}}</td> + <td>{{CompatChrome(28)}} {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td>Bez prefiksu</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> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Używanie Web Audio API</a></li> +</ul> diff --git a/files/pl/web/api/cache/index.html b/files/pl/web/api/cache/index.html new file mode 100644 index 0000000000..a4c75fd8d0 --- /dev/null +++ b/files/pl/web/api/cache/index.html @@ -0,0 +1,121 @@ +--- +title: Cache +slug: Web/API/Cache +translation_of: Web/API/Cache +--- +<div>{{draft}} {{APIRef("Service Workers API")}}</div> + +<p>Interfejs <code>Cache</code> <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkera API</a> reprezentuje magazyn dla par obiektu<code> <a href="http://fetch.spec.whatwg.org/#request">żądania</a></code> oraz obiektu <code><a href="http://fetch.spec.whatwg.org/#request">odpowiedzi</a></code>, które są cache'owane jako część cyklu życia {{domxref("ServiceWorker", "ServiceWorkera")}}. Domena może mieć wielokrotne nazwane obiekty <code>Cache</code>, których zawartość jest pod całkowitą kontrolą service workerów.</p> + +<p>Każdy obiekt <code>Cache</code> jest kolekcją par klucz/wartość. By w pełni zarządzać zawartością cache'ów (by następnie użyć je offline), interfejs ten dostarcza metody w dużej mierze zgodne z obiektem {{jsxref("Map")}}, jednakże wraz z dodatkowymi, poręcznymi metodami.</p> + +<p>Jesteś odpowiedzialny za sposób zarządzania aktualizacjami <code>Cache'u</code> przez {{domxref("ServiceWorker", "ServiceWorkera")}}. Elementy w <code>Cache'u</code> nie są aktualizowane, chyba że jest to wyraźnie zażądane; nie wygasają jeżeli nie usunięte. Użyj {{domxref("CacheStorage.open", "CacheStorage.open(nazwa)")}}, by otworzyć własny, określony obiekt <code>Cache'u</code>, a następnie wywołać jakąkolwiek z jego metod, by nim operować.</p> + +<p>Również do Ciebie należy okresowe opróżnianie wpisów cache'u. Każda przeglądarka ma określony limit powierzchni, który może zostać użyty przez danego service workera. Upewnij się, że opisujesz cache'y poprzez nazwy oraz używasz cache tylko z danej wersji {{domxref("ServiceWorker", "ServiceWorkera")}}, ażeby mogły one bezpiecznie na nich pracować.</p> + +<h2 id="Właściwości">Właściwości</h2> + +<dl> + <dt>{{domxref("Cache.options")}}</dt> + <dd>Opcjonalny parametr przekazywany do metod: {{domxref("Cache.match", "Cache.match(żądanie, opcje)")}}, {{domxref("Cache.add", "Cache.add(żądanie)")}} i {{domxref("Cache.keys", "Cache.keys(żądanie, opcje)")}} z poniższymi atrybutami: <code>ignoreSearch</code>, <code>ignoreMethod</code>, <code>ignoreVary</code>, <code>prefixMatch</code>, <code>cacheName</code>.</dd> +</dl> + +<h2 id="Metody">Metody</h2> + +<dl> + <dt>{{domxref("Cache.match", "Cache.match(żądanie, opcje)")}}</dt> + <dd>Zwraca {{jsxref("Promise")}}, która jest rozwiązywana do pierwszego pasującego żądania w obiekcie {{domxref("Cache", "Cache'u")}}.</dd> + <dt>{{domxref("Cache.add", "Cache.add(żądanie)")}}</dt> + <dd>Zwraca {{jsxref("Promise")}}, która jest rozwiązywana do nowego wpisu {{domxref("Cache", "Cache'u")}}, którego kluczem jest żądanie. Ta metoda nadal jest w trakcie tworzenia (zobacz <a href="http://crbug.com/427652">http://crbug.com/427652</a>). Póki co używaj <a href="https://github.com/coonsta/cache-polyfill">ServiceWorker cache polyfill</a>.</dd> + <dt>{{domxref("Cache.addAll", "Cache.addAll(żądania)")}}</dt> + <dd>Zwraca {{jsxref("Promise")}}, która jest rozwiązywana do nowego szeregu złożonego z wpisów {{domxref("Cache", "Cache'u")}}, którego kluczami są żądania. Metoda ta jest nadal w trakcie tworzenia (zobacz <a href="http://crbug.com/427652">http://crbug.com/427652</a>). Póki co używaj <a href="https://github.com/coonsta/cache-polyfill">ServiceWorker cache polyfill</a>.</dd> + <dt>{{domxref("Cache.put", "Cache.put(żądanie, odpowiedź)")}}</dt> + <dd>Dodaje dodatkowe pary klucz/wartość do aktualnego obiektu {{domxref("Cache")}}.</dd> + <dt>{{domxref("Cache.delete", "Cache.delete(żądanie, opcje)")}}</dt> + <dd>Znajduje wpis {{domxref("Cache", "Cache'u")}}, którego klucz jest żądaniem, jeśli znaleziony, usuwa ten wpis, zwracając następnie {{jsxref("Promise")}}, rozwiązywany do <code>true</code>. Jeśli dany wpis {{domxref("Cache", "Cache'u")}} nie został znaleziony, zwraca <code>false</code>.</dd> + <dt>{{domxref("Cache.keys", "Cache.keys(żądanie, opcje)")}}</dt> + <dd>Zwraca {{jsxref("Promise")}}, który rozwiązuje się do szerego złożonego z kluczów {{domxref("Cache", "Cache'u")}}.</dd> +</dl> + +<p> + </p><h2 id="Specyfikacje">Specyfikacje</h2> +<p></p> + +<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" name="Browser_compatibility">Zgodność z przeglądarką</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("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>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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Warte_uwagi">Warte uwagi</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/pl/web/api/canvas_api/tutorial/basic_usage/index.html b/files/pl/web/api/canvas_api/tutorial/basic_usage/index.html new file mode 100644 index 0000000000..ca8bc15570 --- /dev/null +++ b/files/pl/web/api/canvas_api/tutorial/basic_usage/index.html @@ -0,0 +1,169 @@ +--- +title: Podstawowe użycie elementu canvas +slug: Web/API/Canvas_API/Tutorial/Basic_usage +tags: + - Canvas + - Grafika + - HTML + - Płótno + - Sredniozaawansowany + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div> + +<div class="summary"> +<p>Zacznijmy od przyjrzenia się znacznikowi {{HTMLElement("canvas")}} należącego do zbioru elementów {{Glossary("HTML")}}. W tym rozdziale nauczysz się jak ustanowić dwuwymiarowy kontekst płótna, oraz narysujesz swój pierwszy rysunek.</p> +</div> + +<h2 id="Element_<canvas>">Element <code><canvas></code></h2> + +<pre class="brush: html"><canvas id="tutorial" width="150" height="150"></canvas> +</pre> + +<div class="note"> +<p><strong>Uwaga:</strong> W tym tutorialu będziemy używać słowa <u>canvas</u> zamiennie ze słowem <u>płótno</u>.</p> +</div> + +<p>Na pierwszy rzut oka {{HTMLElement("canvas")}} wygląda jak element {{HTMLElement("img")}}, z tą różnicą, że nie posiada on atrybutów <code>src</code> oraz <code>alt</code>. W swojej specyfice element <code><canvas></code> posiada jedynie dwa atrybuty, {{htmlattrxref("width", "canvas")}} oraz {{htmlattrxref("height", "canvas")}}. Nie są one wymagane oraz mogą być ustanowione za pomocą <a href="/en-US/docs/Web/API/HTMLCanvasElement">właściwości</a> {{Glossary("DOM")}}. Jeśli wartości atrybutów <code>width</code> oraz <code>height</code> nie zostaną określone, zostaną użyte domyślne: szerokość - <strong>300 pikseli</strong>, wysokość - <strong>150 pikseli</strong>. Za pomocą {{Glossary("CSS")}} możemy narzucić rozmiar płótna, ale podczas renderowania dokumentu, rysunek zostanie dopasowany do domyślnej wielkości: jeśli wartości określone za pomocą CSS nie będą proporcjonalne z wartościami domyślnymi, rysunek zostanie zniekształcony.</p> + +<div class="note"> +<p><strong>Uwaga:</strong> Jeśli rysunek wydaje się zniekształcony, spróbuj określić atrybuty <code>width</code> oraz <code>height</code> bezpośrednio wewnątrz znacznika <code><canvas></code>, a nie za pomocą CSS.</p> +</div> + +<p><a href="/en-US/docs/Web/HTML/Global_attributes/id"><code>id</code></a> jest <a href="/en-US/docs/Web/HTML/Global_attributes">globalnym atrybutem HTML</a> i można go stosować z każdym elementem HTML (tak samo jak np. <code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code>). Warto go używać, aby w ten sposób mieć dostęp do elementu z poziomy skryptu.</p> + +<p>Element <code><canvas></code> można stylizować za pomocą CSS tak, jak każdy obraz ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…). Z tym, że żadna z reguł CSS nie wpłynie na zawartość płótna. Zobaczymy to w <a href="/pl/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">późniejszym rozdziale</a> tego tutorialu. Jeśli nie określimy inaczej, tło płótna będzie w pełni przezroczyste.</p> + +<div id="section_2"> +<h3 id="Treść_zastępcza">Treść zastępcza</h3> + +<p>Inaczej niż w przypadku {{HTMLElement("img")}}, w elemencie <code><canvas></code> tak samo jak w {{HTMLElement("video")}}, {{HTMLElement("audio")}}, czy {{HTMLElement("picture")}} łatwo jest określić to, co będzie wyświetlane w starszych przeglądarkach albo tych, które jeszcze nie obsługują tego elementu, jak np. Internet Explorer poprzedzający wersję 9 oraz przeglądarki tekstowe.</p> + +<p>Aby zapewnić treść zastępczą wystarczy zagnieździć ją wewnątrz elementu <code><canvas> ... </canvas></code>. Przeglądarki nieobsługujące tego elementu, zignorują rysunek i zamiast tego wyświetlą to, co zagnieździliśmy wewnątrz tegoż elementu. Natomiast przeglądarki obsługujące element <code><canvas></code> wygenerują jego zawartość ignorując przy tym wszystko, co znajduje się wewnątrz tego elementu.</p> + +<div class="note"> +<p><strong>Uwaga:</strong> Gdy mówimy o tym, co znajduje się <strong>w znaczniku</strong> <code><canvas></code>, mamy na myśli jego atrybuty czyli to, co znajduje się pomiędzy znakami <code><</code> oraz <code>></code> (np. <code><canvas class="nazwa-klasy"></code>. Natomiast gdy mówimy o tym, co znajduje się <strong>wewnątrz elementu</strong> <code><canvas></code>, mamy na myśli wszystko, co znajduje się pomiędzy znacznikiem otwierającym <code><canvas></code>, a znacznikiem zamykającym <code></canvas></code> (np. <code><canvas><img src="/canvas.jpg"></canvas></code>). W tym drugim przypadku mówimy o <em>zagnieżdżaniu </em>jednego elementu w drugim.</p> +</div> + +<p>Treść zastępczą może stanowić opis, tego co znajduje się na płótnie lub statyczny obraz wygenerowanej zawartości. Oto przykład:</p> + +<pre class="brush: html"><canvas id="stockGraph" width="150" height="150"> + current stock price: $3.15 + 0.15 +</canvas> + +<canvas id="clock" width="150" height="150"> + <img src="images/clock.png" width="150" height="150" alt=""/> +</canvas> +</pre> + +<p>Umieszczanie tekstu w stylu: <em>Twoja przeglądarka nie obsługuje elementu canvas</em>, nie pomoże czytelnikowi w zrozumieniu treści. Zapewnienie treści zastępczej uczyni <a href="/pl/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">element canvas bardziej dostępnym</a>.</p> + +<h3 id="Wymagany_znacznik_końca_<canvas>">Wymagany znacznik końca <code></canvas></code></h3> + +<p>Z uwagi na sposób w jaki tworzymy treść zastępczą, znacznikowi <code><canvas></code> <strong>musi towarzyszyć</strong> znacznik zamykający <code></canvas></code>. Gdybyśmy go nie wprowadzili, przeglądarka zinterpretowałaby wszystko, co znajduje się po znaczniku otwierającym <code><canvas></code> jako treść zastępczą.</p> + +<p>Jeśli nie decydujemy się, aby zapewnić treść zastępczą, w dalszym ciągu <strong>musimy</strong> użyć znaczników początkowego i końcowego <code><canvas id="foo" ...></canvas></code>, z tą różnicą, że nie będziemy umieszczać niczego wewnątrz tego elementu. Jest to prawidłowy zapis dla przeglądarki, która obsługuje element <code>canvas</code>. Przeglądarki, które go nie obsługują, niczego w tym miejscu nie wyświetlą.</p> + +<h2 id="Kontekst_renderingu">Kontekst renderingu</h2> + +<p>Element {{HTMLElement("canvas")}} tworzy powierzchnię rysunkową o stałym rozmiarze zapewniając jeden lub więcej kontekstów renderingu, które są używane do tworzenia i manipulowania wyświetlaną zawartością. W tym tutorialu skupimy się na kontekście dwuwymiarowym (2D). Inne konteksty mogą wykorzystywać odmienne sposoby renderowania, np <a href="/pl/docs/Web/WebGL">WebGL</a> wykorzystuje kontekst trójwymiarowy (3D) bazujący na <a href="https://pl.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a>.</p> + +<p>Początkowo płótno jest puste, pozbawione tła. Aby coś na nim wyświetlić, skrypt musi posiadać dostęp do kontekstu renderowania a następnie musi coś w nim narysować. Element {{HTMLElement("canvas")}} posiada metodę {{domxref("HTMLCanvasElement.getContext", "getContext()")}} niezbędną, aby uzyskać dostęp do nowego kontekstu renderowania oraz jego funcji rysujących. Metoda <code>getContext()</code> wymaga podania jednego argumentu, który określa typ kontekstu. Dla rysunków dwuwymiarowych, o których mowa w tym tutorialu, argument metody {{domxref("CanvasRenderingContext2D")}} wymaga podania wartości tekstowej "2d".</p> + +<pre class="brush: js">var canvas = document.getElementById('tutorial'); +var ctx = canvas.getContext('2d'); +</pre> + +<p>W pierwszej lini program uzyskuje dostęp do węzła DOM reprezentującego element {{HTMLElement("canvas")}} za pomocą metody {{domxref("document.getElementById()")}}. Posiadając dostęp do węzła DOM, możemy następnie uzyskać dostęp do kontekstu renderowania rysunku za pomocą metody <code>getContext()</code>.</p> + +<div id="section_5"> +<h2 id="Test_zgodności">Test zgodności</h2> + +<p>Treść zastępcza jest wyświetlana w przeglądarce, która nie obsługuje elementu {{HTMLElement("canvas")}}. Również z poziomu skryptu możemy sprawdzić czy przeglądarka wspiera znacznik <code>canvas</code>. W tym celu posługujemy się metodą <code>getContext()</code>. Oto przykład:</p> + +<pre class="brush: js">var canvas = document.getElementById('tutorial'); + +if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + // drawing code here +} else { + // canvas-unsupported code here +} +</pre> + +<p>Przeglądarka, która nie wspiera znacznika <code>canvas</code>, nie rozpoznaje również metody <code>getContext()</code>. W takim wypadku wyrażenie <code>canvas.getContext</code> zwróci logiczną wartość <code>false</code>.</p> +</div> +</div> + +<h2 id="Szkielet_szablonu"> Szkielet szablonu</h2> + +<p>Poniżej znajduje się szablon dokumentu HTML, którego będziemy używać jako podstawy w kolejnych przykładach ilustrujących <code>canvas</code>.</p> + +<div class="note"> +<p><strong>Uwaga:</strong> podczas produkcji stron internetowych warto umieszczać skrypty oraz arkusze stylów w osobnych plikach dla lepszej organizacji kodu. W tym tutorialu przykładowe skrypty będziemy jednak osadzać wewnątrz kodu HTML, tak aby cały przykład był zwięzły oraz w pełni funcjonalny.</p> +</div> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>Canvas tutorial</title> + <script type="text/javascript"> + function draw() { + var canvas = document.getElementById('tutorial'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + } + } + </script> + <style type="text/css"> + canvas { border: 1px solid black; } + </style> + </head> + <body onload="draw();"> + <canvas id="tutorial" width="150" height="150"></canvas> + </body> +</html> +</pre> + +<p>Skrypt zawiera funckcję <code>draw()</code>, która jest wykonywana po załadowaniu strony; uczyniliśmy to za pomocą obserwatora zdarzenia {{event("load")}} dokumentu HTML. Funkcja taka może być również wywołana za pomocą metody {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}} lub jeszcze innej, która obsługuje zdarzenia, po tym jak strona zostanie załadowana.</p> + +<p>Oto jak szablon wygląda w akcji. Jak widać, początkowo jest on pusty.</p> + +<p>{{EmbedLiveSample("A_skeleton_template", 160, 160)}}</p> + +<h2 id="Prosty_przykład">Prosty przykład</h2> + +<p>Na razie spójrzmy na poniższy przykład, zawierający rysunek dwóch przecinających się kwadratów, z których jeden jest przezroczysty. Szczegóły działania poszczególnych elementów kodu poznamy w dalszej części tego tutorialu.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <script type="application/javascript"> + function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'rgb(200, 0, 0)'; + ctx.fillRect(10, 10, 50, 50); + + ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'; + ctx.fillRect(30, 30, 50, 50); + } + } + </script> + </head> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> + +<p>Przykład wygląda następująco:</p> + +<p>{{EmbedLiveSample("A_simple_example", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</p> diff --git a/files/pl/web/api/canvas_api/tutorial/index.html b/files/pl/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..a8b41b4ca9 --- /dev/null +++ b/files/pl/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,60 @@ +--- +title: Rysowanie grafiki z elementem canvas +slug: Web/API/Canvas_API/Tutorial +tags: + - Grafika + - HTML + - HTML5 + - Internet + - Kanwa + - Poradnik + - instrukcja +translation_of: Web/API/Canvas_API/Tutorial +--- +<div>{{CanvasSidebar}}</div> + +<div><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></div> + +<div class="summary"> +<p><a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> jest elementem <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a>, który może być użyty do rysowania grafik używając skryptów (często <a href="https://developer.mozilla.org/pl/docs/Glossary/JavaScript" title="JavaScript">JavaScript</a>'u). To może zostać użyte do na przykład rysowania wykresów, tworzenia kompozycji zdjęcia lub prostych (i <a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">i nie prostych</a>) animacji. Obrazy na tej strone pokazują przykłady implementacji <strong><code><a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><canvas></a></code></strong>, które będą stworzone w tym poradniku.</p> +</div> + +<p><span class="seoSummary">Ten poradnik opisuje jak używać elementu <code><canvas></code> do rysowania grafik 2D, rozpoczynając od podstaw. Zawarte przykłady powinny dać Ci kilka czystych pomysłów co możesz zrobić z kanwą i zapewnią przykłady kodu, które mogą ci pomóc w budowaniu własnej zawartości.</span></p> + +<p>Wprowadzono ją jako pierwszą w WebKit przez Apple dla OS X Dashboard, <code><canvas></code> od tego momentu została wprowadzona do przeglądarek. Dziś wszystkie poważne przeglądarki wspierają kanwę.</p> + +<h2 id="Before_you_start" name="Before_you_start">Zanim zaczniesz</h2> + +<p>Używanie elementu <code><canvas></code> nie jest trudne, ale potrzebujesz podstawowego zrozumienia <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> i <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. Element <code><canvas></code> nie jest wspierany w kilku starszych przeglądarkach, ale ma wsparcie ze strony nowych wersji poważnych przeglądarek. Domyślnym rozmiarem kanwy jest 300 px × 150 px (szerokość × wysokość). Ale własne rozmiary mogą zostać zdefiniowane za pomocą własności HTML <code>height</code> i <code>width</code>. W celu narysowania grafik na kanwie używamy obiektu kontekstu w JavaScript, który tworzy grafiki w locie.</p> + +<h2 id="In_this_tutorial" name="In_this_tutorial">W tym poradniku</h2> + +<ul> + <li><a href="/pl/docs/Web/API/Canvas_API/Tutorial/Basic_usage">Podstawowe użycie</a></li> + <li><a href="/pl/docs/Web/API/Canvas_API/Tutorial/rysowanie_ksztaltow" title="Canvas_tutorial/Drawing_shapes">Rysowanie figur</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Dodawanie styli i kolorów</a></li> + <li><a href="/pl/docs/Rysowanie_tekstu_przy_użyciu_canvas">Rysowanie tekstu</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images" title="Canvas_tutorial/Using_images">Używanie obrazków</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations" title="Canvas_tutorial/Transformations">Przekształcenia</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Canvas_tutorial/Compositing">Compositing and clipping</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">Podstwowe animacje</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Zaawansowane animacje</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Manipulacja pikselami</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hitowe regiony i dostępność</a></li> + <li><a href="/pl/docs/Web/API/Canvas_API/Tutorial/Optymalizacja_canvas">Optymizacja kanwy</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Finale">Koniec</a></li> +</ul> + +<h2 id="See_also" name="See_also">Zobacz także</h2> + +<ul> + <li><a href="/pl/docs/Web/HTML/Canvas" title="HTML/Canvas">Strona tematów kanwy</a></li> + <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Wtyczka Canvas do Adobe Illustrator'a</a></li> + <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li> +</ul> + +<h2 id="Notka_dla_współtwórców">Notka dla współtwórców</h2> + +<p>Z powodu niefortunnego błędu technicznego, który miał miejsce 17 Czerwca 2013, straciliśmy historię tego poradnika, wliczając w to także atrybucje do wszystkich współtwórców do zawartości tego. Przepraszamy za to i mamy nadzieję, że wybaczycie nam tą niefortunną wpadkę.</p> + +<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div> diff --git a/files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html b/files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html new file mode 100644 index 0000000000..68efe0225f --- /dev/null +++ b/files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html @@ -0,0 +1,119 @@ +--- +title: Optymalizacja elementu canvas +slug: Web/API/Canvas_API/Tutorial/Optymalizacja_canvas +tags: + - Canvas + - Grafika + - HTML + - HTML5 + - Poradnik + - Tutorial + - zaawansowany +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div> + +<div class="summary"> +<p>{{HTMLElement("canvas")}} to jeden z najczęściej używanych standardów do renderowania grafiki 2D w przeglądarce. Zazwyczaj stosuje się go do tworzenia gier i skomplikowanych wizualizacji, które nierzadko starają się wycinąć z <span class="st">„</span>płótna" maksimum jego możliwości. Niestety, równie często prowadzi to do spadków wydajności. <span class="seoSummary">W tym artykule przygotowaliśmy dla was kilka wskazówek jak zoptymalizować element canvas, aby poprawić działanie waszych stron i aplikacji.</span></p> +</div> + +<h2 id="Wskazówki_dot._wydajności">Wskazówki dot. wydajności</h2> + +<p>Poniżej znajdziecie kilka rozwiązań, które poprawią wydajność elementu canvas:</p> + +<h3 id="Pre-renderuj_proste_lub_powtażające_się_obiekty_na_dodatkowym_canvasie_poza_ekranem">Pre-renderuj proste lub powtażające się obiekty na dodatkowym canvasie poza ekranem</h3> + +<p>Jeśli w każdej klatce rysujesz wiele podobnych obiektów, stwórz niewyświetlany, roboczy canvas, narysuj na nim swój element raz (lub za każdym razem gdy ulega zmianom), a następnie wykorzystaj render w głównym canvasie.</p> + +<pre class="brush: js">obiekt.canvasRoboczy = document.createElement('canvas'); +obiekt.canvasRoboczy.width = obiekt.width; +obiekt.canvasRoboczy.height = obiekt.height; +obiekt.canvasRoboczy = obiekt.canvasRoboczy.getContext('2d'); + +obiekt.render(obiekt.offscreenContext); +</pre> + +<h3 id="Staraj_się_używać_liczb_całkowitch_do_koordynatów">Staraj się używać liczb całkowitch do koordynatów</h3> + +<p>Renderowanie między pikselami zachodzi, gdy rysujesz obiekt używając niepełnych wartości.</p> + +<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5); +</pre> + +<p>Ta praktyka zmusza przeglądarkę do wykonania dodatkowych obliczeń, by wytworzyć efekt anty-aliasingu. Żeby temu zapobiec, zaokrąglij koordynaty, na przykład przy użyciu {{jsxref("Math.floor()")}}.</p> + +<h3 id="Nie_skaluj_obrazów_za_pomocą_drawImage">Nie skaluj obrazów za pomocą <code>drawImage</code></h3> + +<p>Posłuż się canvasem poza ekranem, renderując swój obrazek w kilku różnych rozmiarach podczas ładowania, zamiast renderować go w każdej klatce.</p> + +<h3 id="Używaj_wielu_warstw_w_skomplikowanych_scenach">Używaj wielu warstw w skomplikowanych scenach</h3> + +<p>Tak jak niektóre elementy nieustannie są w ruchu, inne (jak np. UI) nigdy nie zmieniają położenia. Dobrym sposobem na optymalizację w tej sytuacji jest zastosowanie warstw przy użyciu kilku canvasów roboczych.</p> + +<p>Przykładowo, możesz stworzyć warstwę dla interfejsu rysowaną nad innymi, która aktualizuje się tylko w momentach, gdy jest używana. Oprócz tego, możesz przenaczyć jedną warstwę na pierwszy plan, gdzie umieścisz wszystkie elementy, które odnawiane są często oraz jedną warstwę na tło, na której obiekty aktualizowane są bardzo rzadko.</p> + +<pre class="brush: html"><div id="scena"> + <canvas id="warstwaUi" width="480" height="320"></canvas> + <canvas id="warstwaGry" width="480" height="320"></canvas> + <canvas id="warstwaTla" width="480" height="320"></canvas> +</div> + +<style> + #scena { + width: 480px; + height: 320px; + position: relative; + border: 2px solid black + } + canvas { position: absolute; } + #warstwaUI { z-index: 3 } + #warstwaGry { z-index: 2 } + #warstwaTla { z-index: 1 } +</style> +</pre> + +<h3 id="Użyj_CSS_dla_dużych_obrazów_w_tle">Użyj CSS dla dużych obrazów w tle</h3> + +<p>Jeśli twoja gra, jak większość, posiada statyczne tło, stwórz element {{HTMLElement("div")}} z własnością CSS {{cssxref("background")}} , który umieścisz pod canvasem. Dzięki temu unikniesz rysowania dużego obrazu w każdej klatce z osobna.</p> + +<h3 id="Skaluj_canvas_za_pomocą_CSS">Skaluj canvas za pomocą CSS</h3> + +<p><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">Transformacje CSS</a> są szybsze dzięki wykorzystaniu karty graficznej. Powiększanie canvasu działa szybciej niż jego pomniejszanie. Dla Firefox OS ustaw 480 x 320 px.</p> + +<pre class="brush: js">var scaleX = window.innerWidth / canvas.width; +var scaleY = window.innerHeight / canvas.height; + +var scaleToFit = Math.min(scaleX, scaleY); +var scaleToCover = Math.max(scaleX, scaleY); + +stage.style.transformOrigin = '0 0'; //scale from top left +stage.style.transform = 'scale(' + scaleToFit + ')'; +</pre> + +<h3 id="Wyłącz_przezroczystość">Wyłącz przezroczystość</h3> + +<p>Jeśli twoja gra korzysta z canvasu i nie ma potrzeby, by był on przezroczysty, ustaw wartość <code>alpha</code> na <code>false</code> podczas tworzenia kontekstu: <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext" title="The HTMLCanvasElement.getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported."><code>HTMLCanvasElement.getContext()</code></a>. To powinno poprawić wydajność.</p> + +<pre class="brush: js">var ctx = canvas.getContext('2d', { alpha: false });</pre> + +<h3 id="Pozostałe_wskazówki">Pozostałe wskazówki</h3> + +<ul> + <li>Ujednolić wywołania canvasu (przykładowo, narysuj linię łamaną zamiast kilku osobnych linii).</li> + <li>Unikaj niepotrzebnych zmian stanu canvasu.</li> + <li>Renderuj tylko fragmenty, które uległy zmianie, zamiast całej, nowej klatki.</li> + <li>Unikaj {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} kiedy to możliwe.</li> + <li>Unikaj wyświetlania tekstu, kiedy to możliwe.</li> + <li>Wykorzystuj różne sposoby na wyczyszczenie canvasu: ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}, {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} lub zmiana rozmiaru canvasu).</li> + <li>Do tworzenie animacji skorzystaj z {{domxref("window.requestAnimationFrame()")}} zamiast {{domxref("window.setInterval()")}} .</li> + <li>Ostrożnie używaj dużych bibliotek do obliczania fizyki.</li> +</ul> + +<h2 id="Zobacz_również">Zobacz również:</h2> + +<ul> + <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Poprawa wydajności Canvas HTML5 – HTML5 </a></li> + <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optymalizacja skryptów JavaScript na Firefox OS – Mozilla Hacks</a></li> +</ul> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p> diff --git a/files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html b/files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html new file mode 100644 index 0000000000..08c589844b --- /dev/null +++ b/files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html @@ -0,0 +1,571 @@ +--- +title: Rysowanie kształtów w canvas +slug: Web/API/Canvas_API/Tutorial/rysowanie_ksztaltow +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div> + +<div class="summary"> +<p>Ok, <a href="/pl/docs/Web/API/Canvas_API/Tutorial/Basic_usage">stworzyliśmy nasze środowisko canvas</a> i teraz możemy poznać tajniki tworzenia grafiki za pomocą canvas. W tym rozdziale nauczysz się rysować prostokąty, trójkąty, linie, łuki oraz krzywe - czyli podstawowe kształty.</p> +</div> + +<h2 id="Siatka">Siatka</h2> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">Nim zaczniemy rysować, poznajmy najpierw siatkę czyli <strong>układ współrzędnych</strong> canvas. Szablon dokumentu z poprzedniego rozdziału zawiera element canvas o rozmiarach 150 na 150 (pikseli). Ilustracja po prawej ukazuje standardową siatkę naszego płótna. Domyślnie jedna jednostka odległości na siatce odpowiada wielkości jednego piksela na płótnie. Wartości siatki liczone są od lewego górnego rogu układu współrzędnych (x,y). W dalszej części dowiesz się, jak zamienić pozycję, tak by początek układu współrzędnych znajdował się gdzie indziej, jak go obrócić a nawet przeskalować. Na razie jednak użyjemy ustawień domyślnych. </p> + +<h2 id="Rysowanie_prostokątów">Rysowanie prostokątów</h2> + +<p>W przeciwieństwie do {{Glossary("SVG")}}, {{HTMLElement("canvas")}} na razie wspiera jedynie tworzenie prostokątów. Pozostałe figury geometryczne musimy stworzyć za pomocą ścieżek. Na szczęście mamy do dyspozycji zestaw funkcji za pomocą których jesteśmy w stanie stworzyć figury o dowolnej złożoności.</p> + +<p>Najpierw przyjrzyjmy się prostokątowi. Istnieją trzy funkcje rysujące prostokąt:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}</dt> + <dd>Rysuje pole prostokąta.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}</dt> + <dd>Rysuje obwód prostokąta.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}</dt> + <dd>Wymazuje prostokątny obszar, w wyniku czego staje się on całkiem przezroczysty. Działą to jak gumka w formie prostokąta.</dd> +</dl> + +<p>Każda z tych funkcji posiada jednakowe parametry. <code>x</code> i <code>y</code> to współrzędne na siatce - wyznaczają one pozycje lewego górnego rogu prostokąta. A <code>width</code> oraz <code>height</code> określają jego rozmiar.</p> + +<p>Poniżej znajduje się funkcja<code>draw()</code> z poprzedniej strony, tutaj wzbogacona o trzy metody tworzenia prostokątów.</p> + +<h3 id="Rectangular_shape_example">Rectangular shape example</h3> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.fillRect(25,25,100,100); + ctx.clearRect(45,45,60,60); + ctx.strokeRect(50,50,50,50); + } +}</pre> + +<p>Oto wynik działania tego skryptu:</p> + +<p>{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p> + +<p>Funkcja <code>fillRect()</code> rysuje czarny kwadrat o boku 100 pikseli. Funkcja <code>clearRect()</code> wymazuje kwadratowy obszar o boku 60 pikseli pośrodku czarnego prostokąta, a następnie wywołanie funkcji <code>strokeRect()</code> tworzy obrys kratdatu o boku 50 pikseli również w centrum poprzedniej figury.</p> + +<p>W kolejnych rozdziałąch poznasz dwie inne *metody dla <code>clearReact()</code>, oraz zobaczysz jak zmienić kolor oraz styl obrysu renderowanych kształtów.</p> + +<p>W przeciwieńśtwie do funkcji tworzących ścieżki o czym przekonasz się później, wszystkie trzy funkcje tworzące prostokąt rysują kształ natychmiast po ich wywołaniu.</p> + +<h2 id="Rysowanie_ścieżek">Rysowanie ścieżek</h2> + +<p>Drugim zarazem ostatnim podstawowym kształetem jest <em>cieżka</em>. Ścieżka złożona jest z punktów połączonych liniami prostymi lub krzywymi, o różnej grubości i o różnym kolorze. Ścieżka, a nawet jej fragment może być zamknięta. Aby utworzyć kształt za pomocą ścieżki wykonaj następujące kroki:</p> + +<ol> + <li>utwórz ścieżkę,</li> + <li>użyj <a href="/pl/docs/Web/API/CanvasRenderingContext2D#Paths">komend rysujących</a> aby rysować ścieżkę,</li> + <li>zamknij ścieżkę.</li> + <li>Po utworzeniu ścieżki możesz ją obrysować lub wypełnić, i dopiero wtedy ukaże się ona w canvasie.</li> +</ol> + +<p>Oto funkcje potrzebne do wykonania tego zadania:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt> + <dd>Tworzy nową ścieżkę. Po jej utworzeniu, wszelkie kolejne funkcce rysujące będą się do niej odwoływały oraz kontynuowały jej rysunek.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">Path methods</a></dt> + <dd>Metoda do ustalania innych ścieżek dla obiektów.</dd> + <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt> + <dd>Zamyka ścieżkę aby przyszłe polecenia rysowania, były kierowane ponownie do kontekstu(ctx).</dd> + <dt>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}</dt> + <dd>Rysuje kształ poprzez odrysowanie konturu.</dd> + <dt>{{domxref("CanvasRenderingContext2D.fill", "fill()")}}</dt> + <dd>Rysuje kształ poprzez wypełnienie ścieżek wyznaczonego obszaru kontekstowego.</dd> +</dl> + +<p>The first step to create a path is to call the <code>beginPath()</code>. Internally, paths are stored as a list of sub-paths (lines, arcs, etc) which together form a shape. Every time this method is called, the list is reset and we can start drawing new shapes.</p> + +<div class="note"><strong>Note:</strong> When the current path is empty, such as immediately after calling <code>beginPath()</code>, or on a newly created canvas, the first path construction command is always treated as a <code>moveTo()</code>, regardless of what it actually is. For that reason, you will almost always want to specifically set your starting position after resetting a path.</div> + +<p>The second step is calling the methods that actually specify the paths to be drawn. We'll see these shortly.</p> + +<p>The third, and an optional step, is to call <code>closePath()</code>. This method tries to close the shape by drawing a straight line from the current point to the start. If the shape has already been closed or there's only one point in the list, this function does nothing.</p> + +<div class="note"><strong>Note:</strong> When you call <code>fill()</code>, any open shapes are closed automatically, so you don't have to call <code>closePath()</code>. This is <strong>not</strong> the case when you call <code>stroke()</code>.</div> + +<h3 id="Drawing_a_triangle">Drawing a triangle</h3> + +<p>For example, the code for drawing a triangle would look something like this:</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="100" height="100"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + + ctx.beginPath(); + ctx.moveTo(75,50); + ctx.lineTo(100,75); + ctx.lineTo(100,25); + ctx.fill(); + } +} +</pre> + +<p>The result looks like this:</p> + +<p>{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}</p> + +<h3 id="Moving_the_pen">Moving the pen</h3> + +<p>One very useful function, which doesn't actually draw anything but becomes part of the path list described above, is the <code>moveTo()</code> function. You can probably best think of this as lifting a pen or pencil from one spot on a piece of paper and placing it on the next.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}</dt> + <dd>Moves the pen to the coordinates specified by <code>x</code> and <code>y</code>.</dd> +</dl> + +<p>When the canvas is initialized or <code>beginPath()</code> is called, you typically will want to use the <code>moveTo()</code> function to place the starting point somewhere else. We could also use <code>moveTo()</code> to draw unconnected paths. Take a look at the smiley face below.</p> + +<p>To try this for yourself, you can use the code snippet below. Just paste it into the <code>draw()</code> function we saw earlier.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight:[8,10,12]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + + ctx.beginPath(); + ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle + ctx.moveTo(110,75); + ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise) + ctx.moveTo(65,65); + ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye + ctx.moveTo(95,65); + ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye + ctx.stroke(); + } +} +</pre> + +<p>The result looks like this:</p> + +<p>{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p> + +<p>If you'd like to see the connecting lines, you can remove the lines that call <code>moveTo()</code>.</p> + +<div class="note"> +<p><strong>Note:</strong> To learn more about the <code>arc()</code> function, see the {{anch("Arcs")}} below.</p> +</div> + +<h3 id="Lines">Lines</h3> + +<p>For drawing straight lines, use the <code>lineTo()</code> method.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}</dt> + <dd>Draws a line from the current drawing position to the position specified by <code>x</code> and <code>y</code>.</dd> +</dl> + +<p>This method takes two arguments, <code>x</code> and <code>y</code>, which are the coordinates of the line's end point. The starting point is dependent on previously drawn paths, where the end point of the previous path is the starting point for the following, etc. The starting point can also be changed by using the <code>moveTo()</code> method.</p> + +<p>The example below draws two triangles, one filled and one outlined.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[9,10,16,17]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + + // Filled triangle + ctx.beginPath(); + ctx.moveTo(25,25); + ctx.lineTo(105,25); + ctx.lineTo(25,105); + ctx.fill(); + + // Stroked triangle + ctx.beginPath(); + ctx.moveTo(125,125); + ctx.lineTo(125,45); + ctx.lineTo(45,125); + ctx.closePath(); + ctx.stroke(); + } +} +</pre> + +<p>This starts by calling <code>beginPath()</code> to start a new shape path. We then use the <code>moveTo()</code> method to move the starting point to the desired position. Below this, two lines are drawn which make up two sides of the triangle.</p> + +<p>{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p> + +<p>You'll notice the difference between the filled and stroked triangle. This is, as mentioned above, because shapes are automatically closed when a path is filled, but not when they are stroked. If we left out the <code>closePath()</code> for the stroked triangle, only two lines would have been drawn, not a complete triangle.</p> + +<h3 id="Arcs">Arcs</h3> + +<p>To draw arcs or circles, we use the <code>arc()</code> or <code>arcTo()</code> methods.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}</dt> + <dd>Draws an arc which is centered at <em>(x, y)</em> position with radius<em> r</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction indicated by <em>anticlockwise</em> (defaulting to clockwise).</dd> + <dt>{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}</dt> + <dd>Draws an arc with the given control points and radius, connected to the previous point by a straight line.</dd> +</dl> + +<p>Let's have a more detailed look at the <code>arc</code> method, which takes six parameters: <code>x</code> and <code>y</code> are the coordinates of the center of the circle on which the arc should be drawn. <code>radius</code> is self-explanatory. The <code>startAngle</code> and <code>endAngle</code> parameters define the start and end points of the arc in radians, along the curve of the circle. These are measured from the x axis. The <code>anticlockwise</code> parameter is a Boolean value which, when <code>true</code>, draws the arc anticlockwise; otherwise, the arc is drawn clockwise.</p> + +<div class="note"> +<p><strong>Note</strong>: Angles in the <code>arc</code> function are measured in radians, not degrees. To convert degrees to radians you can use the following JavaScript expression: <code>radians = (Math.PI/180)*degrees</code>.</p> +</div> + +<p>The following example is a little more complex than the ones we've seen above. It draws 12 different arcs all with different angles and fills.</p> + +<p>The two <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> loops</a> are for looping through the rows and columns of arcs. For each arc, we start a new path by calling <code>beginPath()</code>. In the code, each of the parameters for the arc is in a variable for clarity, but you wouldn't necessarily do that in real life.</p> + +<p>The <code>x</code> and <code>y</code> coordinates should be clear enough. <code>radius</code> and <code>startAngle</code> are fixed. The <code>endAngle</code> starts at 180 degrees (half a circle) in the first column and is increased by steps of 90 degrees, culminating in a complete circle in the last column.</p> + +<p>The statement for the <code>clockwise</code> parameter results in the first and third row being drawn as clockwise arcs and the second and fourth row as counterclockwise arcs. Finally, the <code>if</code> statement makes the top half stroked arcs and the bottom half filled arcs.</p> + +<div class="note"> +<p><strong>Note:</strong> This example requires a slightly larger canvas than the others on this page: 150 x 200 pixels.</p> +</div> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="200"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[16]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + + for(var i=0;i<4;i++){ + for(var j=0;j<3;j++){ + ctx.beginPath(); + var x = 25+j*50; // x coordinate + var y = 25+i*50; // y coordinate + var radius = 20; // Arc radius + var startAngle = 0; // Starting point on circle + var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle + var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise + + ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); + + if (i>1){ + ctx.fill(); + } else { + ctx.stroke(); + } + } + } + } +} +</pre> + +<p>{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}</p> + +<h3 id="Bezier_and_quadratic_curves">Bezier and quadratic curves</h3> + +<p>The next type of paths available are <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve" rel="external" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Bézier curves</a>, available in both cubic and quadratic varieties. These are generally used to draw complex organic shapes.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}</dt> + <dd>Draws a quadratic Bézier curve from the current pen position to the end point specified by <code>x</code> and <code>y</code>, using the control point specified by <code>cp1x</code> and <code>cp1y</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}</dt> + <dd>Draws a cubic Bézier curve from the current pen position to the end point specified by <code>x</code> and <code>y</code>, using the control points specified by (<code>cp1x</code>, <code>cp1y</code>) and (cp2x, cp2y).</dd> +</dl> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">The difference between these can best be described using the image on the right. A quadratic Bézier curve has a start and an end point (blue dots) and just one <strong>control point</strong> (indicated by the red dot) while a cubic Bézier curve uses two control points.</p> + +<p>The <code>x</code> and <code>y</code> parameters in both of these methods are the coordinates of the end point. <code>cp1x</code> and <code>cp1y</code> are the coordinates of the first control point, and <code>cp2x</code> and <code>cp2y</code> are the coordinates of the second control point.</p> + +<p>Using quadratic and cubic Bézier curves can be quite challenging, because unlike vector drawing software like Adobe Illustrator, we don't have direct visual feedback as to what we're doing. This makes it pretty hard to draw complex shapes. In the following example, we'll be drawing some simple organic shapes, but if you have the time and, most of all, the patience, much more complex shapes can be created.</p> + +<p>There's nothing very difficult in these examples. In both cases we see a succession of curves being drawn which finally result in a complete shape.</p> + +<h4 id="Quadratic_Bezier_curves">Quadratic Bezier curves</h4> + +<p>This example uses multiple quadratic Bézier curves to render a speech balloon.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + // Quadratric curves example + ctx.beginPath(); + ctx.moveTo(75,25); + ctx.quadraticCurveTo(25,25,25,62.5); + ctx.quadraticCurveTo(25,100,50,100); + ctx.quadraticCurveTo(50,120,30,125); + ctx.quadraticCurveTo(60,120,65,100); + ctx.quadraticCurveTo(125,100,125,62.5); + ctx.quadraticCurveTo(125,25,75,25); + ctx.stroke(); + } +} +</pre> + +<p>{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p> + +<h4 id="Cubic_Bezier_curves">Cubic Bezier curves</h4> + +<p>This example draws a heart using cubic Bézier curves.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + + // Quadratric curves example + ctx.beginPath(); + ctx.moveTo(75,40); + ctx.bezierCurveTo(75,37,70,25,50,25); + ctx.bezierCurveTo(20,25,20,62.5,20,62.5); + ctx.bezierCurveTo(20,80,40,102,75,120); + ctx.bezierCurveTo(110,102,130,80,130,62.5); + ctx.bezierCurveTo(130,62.5,130,25,100,25); + ctx.bezierCurveTo(85,25,75,37,75,40); + ctx.fill(); + } +} +</pre> + +<p>{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p> + +<h3 id="Rectangles">Rectangles</h3> + +<p>In addition to the three methods we saw in {{anch("Drawing rectangles")}}, which draw rectangular shapes directly to the canvas, there's also the <code>rect()</code> method, which adds a rectangular path to a currently open path.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "rect(x, y, width, height)")}}</dt> + <dd>Draws a rectangle whose top-left corner is specified by (<code>x</code>, <code>y</code>) with the specified <code>width</code> and <code>height</code>.</dd> +</dl> + +<p>When this method is executed, the <code>moveTo()</code> method is automatically called with the parameters (0,0). In other words, the current pen position is automatically reset to the default coordinates.</p> + +<h3 id="Making_combinations">Making combinations</h3> + +<p>So far, each example on this page has used only one type of path function per shape. However, there's no limitation to the number or types of paths you can use to create a shape. So in this final example, let's combine all of the path functions to make a set of very famous game characters.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + + roundedRect(ctx,12,12,150,150,15); + roundedRect(ctx,19,19,150,150,9); + roundedRect(ctx,53,53,49,33,10); + roundedRect(ctx,53,119,49,16,6); + roundedRect(ctx,135,53,49,33,10); + roundedRect(ctx,135,119,25,49,10); + + ctx.beginPath(); + ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false); + ctx.lineTo(31,37); + ctx.fill(); + + for(var i=0;i<8;i++){ + ctx.fillRect(51+i*16,35,4,4); + } + + for(i=0;i<6;i++){ + ctx.fillRect(115,51+i*16,4,4); + } + + for(i=0;i<8;i++){ + ctx.fillRect(51+i*16,99,4,4); + } + + ctx.beginPath(); + ctx.moveTo(83,116); + ctx.lineTo(83,102); + ctx.bezierCurveTo(83,94,89,88,97,88); + ctx.bezierCurveTo(105,88,111,94,111,102); + ctx.lineTo(111,116); + ctx.lineTo(106.333,111.333); + ctx.lineTo(101.666,116); + ctx.lineTo(97,111.333); + ctx.lineTo(92.333,116); + ctx.lineTo(87.666,111.333); + ctx.lineTo(83,116); + ctx.fill(); + + ctx.fillStyle = "white"; + ctx.beginPath(); + ctx.moveTo(91,96); + ctx.bezierCurveTo(88,96,87,99,87,101); + ctx.bezierCurveTo(87,103,88,106,91,106); + ctx.bezierCurveTo(94,106,95,103,95,101); + ctx.bezierCurveTo(95,99,94,96,91,96); + ctx.moveTo(103,96); + ctx.bezierCurveTo(100,96,99,99,99,101); + ctx.bezierCurveTo(99,103,100,106,103,106); + ctx.bezierCurveTo(106,106,107,103,107,101); + ctx.bezierCurveTo(107,99,106,96,103,96); + ctx.fill(); + + ctx.fillStyle = "black"; + ctx.beginPath(); + ctx.arc(101,102,2,0,Math.PI*2,true); + ctx.fill(); + + ctx.beginPath(); + ctx.arc(89,102,2,0,Math.PI*2,true); + ctx.fill(); + } +} + +// A utility function to draw a rectangle with rounded corners. + +function roundedRect(ctx,x,y,width,height,radius){ + ctx.beginPath(); + ctx.moveTo(x,y+radius); + ctx.lineTo(x,y+height-radius); + ctx.arcTo(x,y+height,x+radius,y+height,radius); + ctx.lineTo(x+width-radius,y+height); + ctx.arcTo(x+width,y+height,x+width,y+height-radius,radius); + ctx.lineTo(x+width,y+radius); + ctx.arcTo(x+width,y,x+width-radius,y,radius); + ctx.lineTo(x+radius,y); + ctx.arcTo(x,y,x,y+radius,radius); + ctx.stroke(); +} +</pre> + +<p>The resulting image looks like this:</p> + +<p>{{EmbedLiveSample("Making_combinations", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}</p> + +<p>We won't go over this in detail, since it's actually surprisingly simple. The most important things to note are the use of the <code>fillStyle</code> property on the drawing context, and the use of a utility function (in this case <code>roundedRect()</code>). Using utility functions for bits of drawing you do often can be very helpful and reduce the amount of code you need, as well as its complexity.</p> + +<p>We'll take another look at <code>fillStyle</code>, in more detail, later in this tutorial. Here, all we're doing is using it to change the fill color for paths from the default color of black to white, and then back again.</p> + +<h2 id="Path2D_objects">Path2D objects</h2> + +<p>As we have seen in the last example, there can be a series of paths and drawing commands to draw objects onto your canvas. To simplify the code and to improve performance, the {{domxref("Path2D")}} object, available in recent versions of browsers, lets you cache or record these drawing commands. You are able to play back your paths quickly.<br> + Lets see how we can construct a <code>Path2D</code> object:</p> + +<dl> + <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt> + <dd>The <code><strong>Path2D()</strong></code> constructor returns a newly instantiated <code>Path2D</code> object, optionally with another path as an argument (creates a copy), or optionally with a string consisting of <a href="/en-US/docs/Web/SVG/Tutorial/Paths">SVG path</a> data.</dd> +</dl> + +<pre class="brush: js">new Path2D(); // empty path object +new Path2D(path); // copy from another Path2D object +new Path2D(d); // path from SVG path data</pre> + +<p>All <a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">path methods</a> like <code>moveTo</code>, <code>rect</code>, <code>arc</code> or <code>quadraticCurveTo</code>, etc., which we got to know above, are available on <code>Path2D</code> objects.</p> + +<p>The <code>Path2D</code> API also adds a way to combine paths using the <code>addPath</code> method. This can be useful when you want to build objects from several components, for example.</p> + +<dl> + <dt>{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}</dt> + <dd>Adds a path to the current path with an optional transformation matrix.</dd> +</dl> + +<h3 id="Path2D_example">Path2D example</h3> + +<p>In this example, we are creating a rectangle and a circle. Both are stored as a <code>Path2D</code> object, so that they are available for later usage. With the new <code>Path2D</code> API, several methods got updated to optionally accept a <code>Path2D</code> object to use instead of the current path. Here, <code>stroke</code> and <code>fill</code> are used with a path argument to draw both objects onto the canvas, for example.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="130" height="100"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[6,9]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + + var rectangle = new Path2D(); + rectangle.rect(10, 10, 50, 50); + + var circle = new Path2D(); + circle.moveTo(125, 35); + circle.arc(100, 35, 25, 0, 2 * Math.PI); + + ctx.stroke(rectangle); + ctx.fill(circle); + } +} +</pre> + +<p>{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p> + +<h3 id="Using_SVG_paths">Using SVG paths</h3> + +<p>Another powerful feature of the new canvas <code>Path2D</code> API is using <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">SVG path data</a> to initialize paths on your canvas. This might allow you to pass around path data and re-use them in both, SVG and canvas.</p> + +<p>The path will move to point (<code>M10 10</code>) and then move horizontally 80 points to the right (<code>h 80</code>), then 80 points down (<code>v 80</code>), then 80 points to the left (<code>h -80</code>), and then back to the start (<code>z</code>). You can see this example on the <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths"><code>Path2D</code> constructor</a> page.</p> + +<pre class="brush: js;">var p = new Path2D("M10 10 h 80 v 80 h -80 Z");</pre> + +<div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div> diff --git a/files/pl/web/api/childnode/index.html b/files/pl/web/api/childnode/index.html new file mode 100644 index 0000000000..f10d177d3c --- /dev/null +++ b/files/pl/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>childNodes</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent.</p> + +<p><code>childNodes</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("childNodes.remove()")}} {{experimental_inline}}</dt> + <dd>Removes this <code>childNodes</code> from the children list of its parent.</dd> + <dt>{{domxref("childNodes.before()")}} {{experimental_inline}}</dt> + <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>childNodes</code>'s parent, just before this <code>childNodes</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> + <dt>{{domxref("childNodes.after()")}} {{experimental_inline}}</dt> + <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>childNodes</code>'s parent, just after this <code>childNodes</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> + <dt>{{domxref("childNodes.replaceWith()")}} {{experimental_inline}}</dt> + <dd>Replaces this <code>childNodes</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', 'childNodes')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Split the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}} and <code>childNodes</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/pl/web/api/childnode/remove/index.html b/files/pl/web/api/childnode/remove/index.html new file mode 100644 index 0000000000..377e529db2 --- /dev/null +++ b/files/pl/web/api/childnode/remove/index.html @@ -0,0 +1,91 @@ +--- +title: ChildNode.remove() +slug: Web/API/ChildNode/remove +translation_of: Web/API/ChildNode/remove +--- +<div>{{APIRef("DOM")}}</div> + +<p>Metoda <code><strong>ChildNode.remove()</strong></code> usuwa obiekt z drzewa, do którego należy.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><em>node</em>.remove(); +</pre> + +<h2 id="Przykład">Przykład</h2> + +<h3 id="Użycie_remove()">Użycie <code>remove()</code></h3> + +<pre class="brush: html"><div id="div-01">To jest div-01</div> +<div id="div-02">To jest div-02</div> +<div id="div-03">To jest div-03</div> +</pre> + +<pre class="brush: js">var el = document.getElementById('div-02'); +el.remove(); // Usuwa div z ID 'div-02' +</pre> + +<h3 id="ChildNode.remove()_jest_poza_zakresem"><code>ChildNode.remove()</code> jest poza zakresem</h3> + +<p>Metoda <code>remove()</code> nie wchodzi w zakres wyrażenia <code>with</code>. Zobacz {{jsxref("Symbol.unscopables")}}, aby uzyskać więcej informacji.</p> + +<pre class="brush: js">with(node) { + remove(); +} +// ReferenceError: remove is not defined </pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Można utworzyć polyfill metody <code>remove()</code> w Internet Explorer 9 (lub wyższej wersji) za pomocą następującego kodu: </p> + +<pre class="brush: js">// from: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() { + this.parentNode.removeChild(this); + } + }); + }); +})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> + +<h2 id="Specyfikacje">Specyfikacje</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', '#dom-childnode-remove', 'ChildNode.remove')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('DOM4', '#dom-childnode-remove', 'ChildNode.remove')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<div>{{Compat("api.ChildNode.remove")}}</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>The {{domxref("ChildNode")}} 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/pl/web/api/console/index.html b/files/pl/web/api/console/index.html new file mode 100644 index 0000000000..0e2b03ab60 --- /dev/null +++ b/files/pl/web/api/console/index.html @@ -0,0 +1,232 @@ +--- +title: Console +slug: Web/API/Console +translation_of: Web/API/Console +--- +<div>{{APIRef}}{{Non-standard_header}}</div> + +<p>The <code>console</code> object provides access to the browser's debugging console (e.g. the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> in Firefox). The specifics of how it works vary from browser to browser, but there is a <em>de facto</em> set of features that are typically provided.</p> + +<p>The <code>console</code> can be accessed from any global object, {{domxref("Window")}} on browsing scopes, {{domxref("WorkerGlobalScope")}} and its specific variants in workers.</p> + +<p>This page documents the {{anch("Methods")}} available on the <code>console</code> object and gives a few {{anch("Usage")}} examples.</p> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Console.assert()")}}</dt> + <dd>Log a message and stack trace to console if first argument is <code>false</code>.</dd> + <dt>{{domxref("Console.count()")}}</dt> + <dd>Log the number of times this line has been called with the given label.</dd> + <dt>{{domxref("Console.debug()")}} {{deprecated_inline}}</dt> + <dd>An alias for <code>log()</code>; this was added to improve compatibility with existing sites already using <code>debug()</code>. However, you should use {{domxref("console.log()")}} instead.</dd> + <dt>{{domxref("Console.dir()")}}</dt> + <dd>Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.</dd> + <dt>{{domxref("Console.error()")}}</dt> + <dd>Outputs an error message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> + <dt>{{domxref("Console._exception()")}}</dt> + <dd>An alias for <code>error();</code></dd> + <dt>{{domxref("Console.group()")}}</dt> + <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level. To move back out a level, call <code>groupEnd()</code>.</dd> + <dt>{{domxref("Console.groupCollapsed()")}}</dt> + <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level; unlike <code>group()</code>, this starts with the inline group collapsed, requiring the use of a disclosure button to expand it. To move back out a level, call <code>groupEnd()</code>.</dd> + <dt>{{domxref("Console.groupEnd()")}}</dt> + <dd>Exits the current inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>.</dd> + <dt>{{domxref("Console.info()")}}</dt> + <dd>Informative logging information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> + <dt>{{domxref("Console.log()")}}</dt> + <dd>For general output of logging information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> + <dt>{{domxref("Console.profile()")}}</dt> + <dd>Starts the <a href="/en-US/docs/Tools/Profiler">JavaScript profiler</a>. You can specify an optional label for the profile.</dd> + <dt>{{domxref("Console.profileEnd()")}}</dt> + <dd>Stops the profiler. You can see the resulting profile in the <a href="/en-US/docs/Tools/Profiler">JavaScript profiler</a>.</dd> + <dt>{{domxref("Console.table()")}}</dt> + <dd>Displays tabular data as a table.</dd> + <dt>{{domxref("Console.time()")}}</dt> + <dd>Starts a <a href="/en-US/docs/Web/API/console#Timers">timer</a> with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.</dd> + <dt>{{domxref("Console.timeEnd()")}}</dt> + <dd>Stops the specified <a href="/en-US/docs/Web/API/console#Timers">timer</a> and logs the elapsed time in seconds since its start.</dd> + <dt>{{domxref("Console.trace()")}}</dt> + <dd>Outputs a <a href="/en-US/docs/Web/API/console#Stack_traces">stack trace</a>.</dd> + <dt>{{domxref("Console.warn()")}}</dt> + <dd>Outputs a warning message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> +</dl> + + +<h2 id="Usage" name="Usage">Usage</h2> + +<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Outputting text to the console</h3> + +<p>The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, and {{domxref("console.error()")}} methods. Each of these results in output that's styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.</p> + +<p>There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of the objects with which to replace them.</p> + +<h4 id="Outputting_a_single_object">Outputting a single object</h4> + +<p>The simplest way to use the logging methods is to output a single object:</p> + +<pre class="brush: js">var someObject = { str: "Some text", id: 5 }; +console.log(someObject); +</pre> + +<p>The output looks something like this:</p> + +<pre>[09:27:13.475] ({str:"Some text", id:5})</pre> + +<h4 id="Outputting_multiple_objects">Outputting multiple objects</h4> + +<p>You can also output multiple objects by simply listing them when calling the logging method, like this:</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>This output will look like this:</p> + +<pre>[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5}) +</pre> + +<h4 id="Using_string_substitutions">Using string substitutions</h4> + +<p>Gecko 9.0 {{geckoRelease("9.0")}} introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Substitution string</td> + <td class="header">Description</td> + </tr> + <tr> + <td>%o</td> + <td>Outputs a hyperlink to a JavaScript object. Clicking the link opens an inspector.</td> + </tr> + <tr> + <td>%d or %i</td> + <td>Outputs an integer. Formatting is not yet supported.</td> + </tr> + <tr> + <td>%s</td> + <td>Outputs a string.</td> + </tr> + <tr> + <td>%f</td> + <td>Outputs a floating-point value. Formatting is not yet supported.</td> + </tr> + </tbody> +</table> + +<p>Each of these pulls the next argument after the format string off the parameter list. For example:</p> + +<pre>for (var i=0; i<5; i++) { + console.log("Hello, %s. You've called me %d times.", "Bob", i+1); +} +</pre> + +<p>The output looks like this:</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="Styling_console_output">Styling console output</h4> + +<p>You can use the <code>"%c"</code> directive to apply a CSS style to console output:</p> + +<pre class="brush: js">console.log("%cMy stylish message", "color: red; font-style: italic");</pre> + +<div><img alt="" src="https://mdn.mozillademos.org/files/7739/console-style.png" style="display: block; height: 52px; margin-left: auto; margin-right: auto; width: 293px;"></div> + +<div>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</div> + +<p>You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call <code>console.group()</code>. The <code>console.groupCollapsed()</code> method is similar, but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.</p> + +<div class="note"><strong>Note:</strong> Collapsed groups are not supported yet in Gecko; the <code>groupCollapsed()</code> method is the same as <code>group()</code> at this time.</div> + +<p class="note">To exit the current group, simply call <code>console.groupEnd()</code>.</p> + +<p class="note">For example, given this 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>The output looks like this:</p> + +<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p> + +<div>{{h3_gecko_minversion("Timers", "10.0")}}</div> + +<p>In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the <code>console</code> object. To start a timer, call the <code>console.time</code><code>()</code> method, giving it a name as only parameter. To stop the timer, and to get the elapsed time in miliseconds, just call the <code>console.timeEnd()</code> method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.</p> + +<p>For example, given this code:</p> + +<pre class="brush: js">console.time("answer time"); +alert("Click to continue"); +console.timeEnd("answer time"); +</pre> + +<p>will log the time needed by the user to discard the alert box:</p> + +<p><img alt="timerresult.png" class="default internal" src="/@api/deki/files/6084/=timerresult.png"></p> + +<p>Notice that the timer's name is displayed both when the timer is started and when it's stopped.</p> + +<div class="note"><strong>Note:</strong> It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.</div> + +<h3 id="Stack_traces">Stack traces</h3> + +<p>The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{domxref("console.trace()")}}. Given code like this:</p> + +<pre>foo(); + +function foo() { + function bar() { + console.trace(); + } + bar(); +} +</pre> + +<p>The output in the console looks something like this:</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="Notes">Notes</h2> + +<ul> + <li>At least in Firefox, if a page defines a console object, that object overrides the one built into Firefox.</li> + <li>Prior to {{Gecko("12.0")}}, the console object's methods only work when the Web Console is open. Starting with {{Gecko("12.0")}}, output is cached until the Web Console is opened, then displayed at that time.</li> + <li>It's worth noting that the Firefox's built-in <code>console</code> object is compatible with the one provided by <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Tools" title="Tools">Tools</a></li> + <li><a href="/en-US/docs/Tools/Web_Console" title="Web Console">Web Console</a> - how the Web Console in Firefox handles console API calls</li> + <li><a href="/en-US/docs/Tools/Remote_Debugging">Remote debugging</a> - how to see console output when the debugging target is a mobile device</li> + <li><a href="/en-US/Firefox_OS/Using_the_App_Manager">Debugging apps on Firefox OS</a> - using the App Manager to debug apps running on Firefox OS</li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a> - how to do logging on Firefox OS devices</li> +</ul> + +<h3 id="Other_implementations">Other implementations</h3> + +<p> </p> + +<ul> + <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</a>;</li> + <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</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://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a>.</li> +</ul> diff --git a/files/pl/web/api/console/log/index.html b/files/pl/web/api/console/log/index.html new file mode 100644 index 0000000000..0f18916b5a --- /dev/null +++ b/files/pl/web/api/console/log/index.html @@ -0,0 +1,69 @@ +--- +title: Console.log() +slug: Web/API/Console/log +translation_of: Web/API/Console/log +--- +<div>{{APIRef("Console API")}}{{Non-standard_header}}</div> + +<p>Wyświetla tekst w konsoli.</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="Parameters">Parameters</h2> + +<dl> + <dt><code>obj1</code> ... <code>objN</code></dt> + <dd>Lista obiektów JavaScript do wyświelenia. Podane obiekty są kolejno dołączane i przekazywane na wyjście.</dd> + <dt><code>msg</code></dt> + <dd>String JavaScript zawierający zero lub więcej stringów podmieniających.</dd> + <dt><code>subst1</code> ... <code>substN</code></dt> + <dd>Obiekt JavaScript w którym zastępowane są stringi podmieniające z msg. Daje Ci to dodatkową kontrolę nad formatem.</dd> +</dl> + +<p>Zobacz również <a href="/en-US/docs/DOM/console#Outputting_text_to_the_console">Outputting text to the console</a> w dokumentacji {{domxref("console")}}.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#consolelogobject--object-", "console.log()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Początkowa definicja</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p> </p> + +<div class="hidden"> +<p>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> +</div> + +<p>{{Compat("api.Console.log")}}</p> + +<p> </p> + +<h2 id="Zobacz_również">Zobacz również</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 supports additional features in its console.log() implementation, such as <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/pl/web/api/cssnumericvalue/div/index.html b/files/pl/web/api/cssnumericvalue/div/index.html new file mode 100644 index 0000000000..cd74042e3e --- /dev/null +++ b/files/pl/web/api/cssnumericvalue/div/index.html @@ -0,0 +1,59 @@ +--- +title: CSSNumericValue.div() +slug: Web/API/CSSNumericValue/div +translation_of: Web/API/CSSNumericValue/div +--- +<div>{{draft}}{{APIRef("CSS Typed OM")}}{{SeeCompatTable}}</div> + +<p class="summary">The <strong><code>div()</code></strong> method of the {{domxref("CSSNumericValue")}} interface divides the <code>CSSNumericValue</code> by the supplied value.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var cssNumericValue = CSSNumericValue.div(<em>number</em>);</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt>number</dt> + <dd>Either a {{jsxref('Number')}} or a {{domxref('CSSNumericValue')}}.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>A {{domxref('CSSMathProduct')}}.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt>TypeError</dt> + <dd>Indicates that an invalid type was passed to the method.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">let mathProduct = CSS.px("24").div(CSS.percent("4")); +// Prints "calc(24px / 4%)" +mathProduct.toString();</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('CSS Typed OM','#dom-cssnumericvalue-div','div')}}</td> + <td>{{Spec2('CSS Typed OM')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.CSSNumericValue.div")}}</p> diff --git a/files/pl/web/api/cssnumericvalue/index.html b/files/pl/web/api/cssnumericvalue/index.html new file mode 100644 index 0000000000..eace9532a3 --- /dev/null +++ b/files/pl/web/api/cssnumericvalue/index.html @@ -0,0 +1,113 @@ +--- +title: CSSNumericValue +slug: Web/API/CSSNumericValue +tags: + - API + - CSS Typed Object Model API + - CSSNumericValue + - Experimental + - Houdini + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/CSSNumericValue +--- +<div>{{draft}}{{APIRef("CSS Typed OM")}}{{SeeCompatTable}}</div> + +<p class="summary">The <strong><code>CSSNumericValue</code></strong> interface of the <a href="/docs/Web/API/CSS_Typed_Object_Model_API">CSS Typed Object Model API</a> represents operations that all numeric values can perform.</p> + +<h2 id="Interfaces_based_on_CSSNumericValue">Interfaces based on CSSNumericValue</h2> + +<p>Below is a list of interfaces based on the CSSNumericValue interface.</p> + +<div class="index"> +<ul> + <li>{{domxref('CSSMathInvert')}}</li> + <li>{{domxref('CSSMathMax')}}</li> + <li>{{domxref('CSSMathMin')}}</li> + <li>{{domxref('CSSMathNegate')}}</li> + <li>{{domxref('CSSMathProduct')}}</li> + <li>{{domxref('CSSMathSum')}}</li> + <li>{{domxref('CSSMathValue')}}</li> + <li>{{domxref('CSSNumericArray')}}</li> + <li>{{domxref('CSSPerspective')}}</li> + <li>{{domxref('CSSPositionValue')}}</li> + <li>{{domxref('CSSRotate')}}</li> + <li>{{domxref('CSSSkew')}}</li> + <li>{{domxref('CSSSkeyX')}}</li> + <li>{{domxref('CSSSkeyW')}}</li> + <li>{{domxref('CSSTranslate')}}</li> + <li>{{domxref('CSSUnitValue')}}</li> +</ul> +</div> + +<h2 id="Properties">Properties</h2> + +<p>None.</p> + +<h3 id="Event_handlers">Event handlers</h3> + +<p>No</p> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref('CSSNumericValue.add')}}</dt> + <dd>Adds a supplied number to the <code>CSSNumericValue</code>.</dd> + <dt>{{domxref('CSSNumericValue.sub')}}</dt> + <dd>Subtracts a supplied number from the <code>CSSNumericValue</code>.</dd> + <dt>{{domxref('CSSNumericValue.mul')}}</dt> + <dd>Multiplies the <code>CSSNumericValue</code> by the supplied value.</dd> + <dt>{{domxref('CSSNumericValue.div')}}</dt> + <dd>Divides the <code>CSSNumericValue</code> by the supplied value.</dd> + <dt>{{domxref('CSSNumericValue.min')}}</dt> + <dd>Returns the minimum value passed</dd> + <dt>{{domxref('CSSNumericValue.max')}}</dt> + <dd>Returns the maximum value passed</dd> + <dt>{{domxref('CSSNumericValue.equals')}}</dt> + <dd><em>True</em> if all the values are the exact same type and value, in the same order. Otherwise, <em>false.</em></dd> + <dt>{{domxref('CSSNumericValue.to')}}</dt> + <dd>Converts <code>value</code> into another one with the specified <var>unit.</var></dd> + <dt>{{domxref('CSSNumericValue.toSum')}}</dt> + <dd>TBD</dd> + <dt>{{domxref('CSSNumericValue.type')}}</dt> + <dd>TBD</dd> + <dt>{{domxref('CSSNumericValue.parse')}}</dt> + <dd>Allows a <code class="idl">CSSNumericValue</code> to be constructed directly from a string containing CSS. </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('CSS Typed OM','#numeric-value','CSSNumericValue')}}</td> + <td>{{Spec2('CSS Typed OM')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.CSSNumericValue")}}</p> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li>{{domxref('CSSImageValue')}}</li> + <li>{{domxref('CSSKeywordValue')}}</li> + <li>{{domxref('CSSPositionValue')}}</li> + <li>{{domxref('CSSTransformValue')}}</li> + <li>{{domxref('CSSUnparsedValue')}}</li> +</ul> diff --git a/files/pl/web/api/cssrule/index.html b/files/pl/web/api/cssrule/index.html new file mode 100644 index 0000000000..e8893fe44c --- /dev/null +++ b/files/pl/web/api/cssrule/index.html @@ -0,0 +1,97 @@ +--- +title: cssRule +slug: Web/API/CSSRule +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/CSSRule +--- +<p>{{ ApiRef() }}</p> +<p>Obiekt <code>CSSRule</code> reprezentuje pojedynczy arkusz stylu CSS. To może być pojedyncza reguła arkusza stylów CSS. Może być częścią listy <a href="pl/DOM/stylesheet">stylesheet</a> <a href="pl/DOM/stylesheet.cssRules">cssRules</a>.</p> +<p>Jest tu kilka rodzajów reguł. Wszystkie one dzielą kilka wspólnych własności interfejsu {{ Anch("CSSRule") }} i większość posiada pewne specyficzne własności oraz typy reguł.</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Typ</th> + <th>Interfejs związany z regułą</th> + <th>Opis</th> + </tr> + <tr> + <td><code>CSSRule.STYLE_RULE</code></td> + <td>{{ Anch("CSSStyleRule") }}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.MEDIA_RULE</code></td> + <td>{{ Anch("CSSMediaRule") }}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.FONT_FACE_RULE</code></td> + <td>{{ Anch("CSSFontFaceRule") }}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.PAGE_RULE</code></td> + <td>{{ Anch("CSSPageRule") }}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.IMPORT_RULE</code></td> + <td>{{ Anch("CSSImportRule") }}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.CHARSET_RULE</code></td> + <td>{{ Anch("CSSCharsetRule") }}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.UNKNOWN_RULE</code></td> + <td>{{ Anch("CSSUnknownRule") }}</td> + <td> </td> + </tr> + </tbody> +</table> +<h3 id="CSSRule" name="CSSRule">CSSRule</h3> +<dl> + <dt> + <a href="pl/DOM/cssRule.cssText">cssText</a></dt> + <dd> + Zwraca tekstową reprezentację reguły, np. "h1,h2 { font-size: 16pt }".</dd> + <dt> + <a href="pl/DOM/cssRule.parentRule">parentRule</a></dt> + <dd> + Zwraca regule zawarta w treści jeśli takowa istnieje, np. regułę stylu znajdującą sie wewnątrz bloku @media.</dd> + <dt> + <a href="pl/DOM/cssRule.parentStyleSheet">parentStyleSheet</a></dt> + <dd> + Zwraca obiekt <a href="pl/DOM/stylesheet">stylesheet</a>, którego reguła jest częścią.</dd> + <dt> + <a href="pl/DOM/cssRule.type">type</a></dt> + <dd> + Zwraca typ reguły, np. <code>CSSRule.CHARSET_RULE</code> lub <code>CSSRule.IMPORT_RULE</code>.</dd> +</dl> +<h3 id="CSSStyleRule" name="CSSStyleRule">CSSStyleRule</h3> +<dl> + <dt> + <a href="pl/DOM/cssRule.selectorText">selectorText</a></dt> + <dd> + Pobiera/ustawia tekstową reprezentację selektora dla reguły, np.: "h1,h2".</dd> + <dt> + <a href="pl/DOM/cssRule.style">style</a></dt> + <dd> + Zwraca obiekt <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration">CSSStyleDeclaration</a> dla reguły <a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block">deklaracji bloku</a>.</dd> +</dl> +<h3 id="CSSStyleRule_2" name="CSSStyleRule_2">CSSStyleRule</h3> +<h3 id="CSSMediaRule" name="CSSMediaRule">CSSMediaRule</h3> +<h3 id="CSSFontFaceRule" name="CSSFontFaceRule">CSSFontFaceRule</h3> +<h3 id="CSSPageRule" name="CSSPageRule">CSSPageRule</h3> +<h3 id="CSSImportRule" name="CSSImportRule">CSSImportRule</h3> +<h3 id="CSSCharsetRule" name="CSSCharsetRule">CSSCharsetRule</h3> +<h3 id="CSSUnknownRule" name="CSSUnknownRule">CSSUnknownRule</h3> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRule">DOM Level 2 CSS: CSSRule</a></p> +<p>{{ languages( { "en": "en/DOM/cssRule" } ) }}</p> diff --git a/files/pl/web/api/document/activeelement/index.html b/files/pl/web/api/document/activeelement/index.html new file mode 100644 index 0000000000..bd8527e319 --- /dev/null +++ b/files/pl/web/api/document/activeelement/index.html @@ -0,0 +1,26 @@ +--- +title: document.activeElement +slug: Web/API/Document/activeElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/DocumentOrShadowRoot/activeElement +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca element, na którym ustawiony jest fokus.</p> +<p>{{ Note("Ten atrybut jest częścią specyfikacji HTML 5, która jest wciąż opracowywana.") }}</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">var curElement = document.activeElement; +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#focus-management">Zarządzanie fokusem </a></p> +<p> </p> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/document.activeElement", "es": "es/DOM/element.activeElement", "fr": "fr/DOM/document.activeElement", "ja": "ja/DOM/document.activeElement" } ) }}</p> diff --git a/files/pl/web/api/document/alinkcolor/index.html b/files/pl/web/api/document/alinkcolor/index.html new file mode 100644 index 0000000000..82e8dda6cd --- /dev/null +++ b/files/pl/web/api/document/alinkcolor/index.html @@ -0,0 +1,24 @@ +--- +title: document.alinkColor +slug: Web/API/Document/alinkColor +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/alinkColor +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca bądź ustawia kolor aktywnych odnośników w ciele dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>kolor</i> = HTMLBodyElement.aLinkColor +HTMLBodyElement.aLinkColor =<i>kolor</i> +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>kolor</code> jest ciągiem zawierającym nazwę koloru (np. "blue", "darkblue", itp.) lub wartość szesnastkową (np. "#fefdf8").</li> +</ul> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0 - brak w specyfikacji.</p> +<p>{{ languages( { "en": "en/DOM/document.alinkColor", "es": "es/DOM/document.alinkColor" } ) }}</p> diff --git a/files/pl/web/api/document/anchors/index.html b/files/pl/web/api/document/anchors/index.html new file mode 100644 index 0000000000..e1681f5372 --- /dev/null +++ b/files/pl/web/api/document/anchors/index.html @@ -0,0 +1,38 @@ +--- +title: document.anchors +slug: Web/API/Document/anchors +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/anchors +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><code>anchors</code> zwraca listę wszystkich kotwic w dokumencie.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>listaWęzłów</em> = document.anchors +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">if ( document.anchors.length >= 5 ) { + dump("dump found too many anchors"); + window.location = "http<span class="nowiki">:</span>//www.google.com"; +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Ze względu na zgodność wsteczną, zwracany zestaw kotwic zawiera tylko kotwice posiadające atrybut <code>name</code>, bez tych które posiadają jedynie atrybut <code>id</code>.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7577272">DOM Level 2 HTML: anchors</a></p> + +<p>{{ languages( { "en": "en/DOM/document.anchors", "es": "es/DOM/document.anchors", "ja": "ja/DOM/document.anchors" } ) }}</p> diff --git a/files/pl/web/api/document/applets/index.html b/files/pl/web/api/document/applets/index.html new file mode 100644 index 0000000000..719c43b33b --- /dev/null +++ b/files/pl/web/api/document/applets/index.html @@ -0,0 +1,26 @@ +--- +title: document.applets +slug: Web/API/Document/applets +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/applets +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>applets</b> zwraca uporządkowaną listę apletów umieszczonych w dokumencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>listaWęzłów</i> = document.applets +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">// (Kiedy wiesz, że drugi aplet jest tym, +// którego szukasz) +my_java_app = document.applets[1]; +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-85113862">applets </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/document.applets", "es": "es/DOM/document.applets" } ) }}</p> diff --git a/files/pl/web/api/document/bgcolor/index.html b/files/pl/web/api/document/bgcolor/index.html new file mode 100644 index 0000000000..cdc5731cbf --- /dev/null +++ b/files/pl/web/api/document/bgcolor/index.html @@ -0,0 +1,33 @@ +--- +title: document.bgColor +slug: Web/API/Document/bgColor +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/bgColor +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>{{ Deprecated_header() }} Własność + <i> + bgColor</i> + pobiera/zwraca kolor tła dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>kolor</i> = document.bgColor +document.bgColor =<i>kolor</i> +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>kolor</code> jest łańcuchem znaków reprezentującym nazwę koloru - słownie (np. "red") lub w systemie szesnastkowym, jak w HTML-u (np. "#fdfef8")</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">document.bgColor = "darkblue"; +</pre> +<h3 id="Notes" name="Notes">Notes</h3> +<p>Domyślną wartością tej własności w Mozilli Firefox jest kolor biały (<code>#ffffff</code> w systemie szesnastkowym).</p> +<p>Własność <code>document.bgColor</code> jest wycofywana <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a>. Zalecanym rozwiązaniem alternatywnym jest użycie stylu CSS <a href="pl/CSS/background-color"> background-color</a>, gdy możemy uzyskać dostęp bezpośrednio przez DOM za pomocą własności<code>document.body.style.backgroundColor</code>. Innym alternatywnym rozwiązaniem jest <code>document.body.bgColor</code>, chociaż to rozwiązanie jest także wycofywane w HTML 4.01 na rzecz rozwiązania wykorzystującego CSS .</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0 - brak w specyfikacji.</p> +<p>{{ languages( { "en": "en/DOM/document.bgColor", "es": "es/DOM/document.bgColor" } ) }}</p> diff --git a/files/pl/web/api/document/body/index.html b/files/pl/web/api/document/body/index.html new file mode 100644 index 0000000000..1ae1aa480e --- /dev/null +++ b/files/pl/web/api/document/body/index.html @@ -0,0 +1,31 @@ +--- +title: document.body +slug: Web/API/Document/body +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/body +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>body</b> zwraca węzeł <code><body></code> lub <code><frameset></code> z bieżącego dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>objRef</i> = document.body +document.body =<i>objRef</i> +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">// 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> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>document.body</code> to element zawierający treść dokumentu. W dokumentach z elementem <code><body></code> własność zwraca tenże element, w dokumentach z definicją ramek zwracany jest najbardziej zewnętrzny element <code><frameset></code>.</p> +<p>Mimo, że <code>body</code> można samemu ustawić, jego zmiana spowoduje skuteczne usunięcie wszystkich potomków istniejącego elementu <code><body></code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-56360201">body </a></p> +<p>{{ languages( { "en": "en/DOM/document.body", "es": "es/DOM/document.body" } ) }}</p> diff --git a/files/pl/web/api/document/characterset/index.html b/files/pl/web/api/document/characterset/index.html new file mode 100644 index 0000000000..4d7fa83359 --- /dev/null +++ b/files/pl/web/api/document/characterset/index.html @@ -0,0 +1,26 @@ +--- +title: document.characterSet +slug: Web/API/Document/characterSet +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/characterSet +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca kodowanie znaków dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>ciąg</i> = document.characterSet +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval"><button onclick="alert(document.characterSet);">Pokaż kodowanie znaków</button> +// zwraca kodowanie znaków dokumentu, takie jak "ISO-8859-1 lub UTF-8" +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jest to zestaw znaków użyty przy renderowaniu strony, niekoniecznie taki, jak zadeklarowany w kodzie strony (użytkownik może narzucić własne kodowanie).</p> +<p>Kompletną listę dostępnych zestawów znaków znajdziesz tu: <a class="external" href="http://www.iana.org/assignments/character-sets" rel="freelink">http://www.iana.org/assignments/character-sets</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0 - brak w specyfikacji.</p> +<p>{{ languages( { "en": "en/DOM/document.characterSet", "es": "es/DOM/document.characterSet" } ) }}</p> diff --git a/files/pl/web/api/document/clear/index.html b/files/pl/web/api/document/clear/index.html new file mode 100644 index 0000000000..fdeaf2e52e --- /dev/null +++ b/files/pl/web/api/document/clear/index.html @@ -0,0 +1,19 @@ +--- +title: document.clear +slug: Web/API/Document/clear +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/clear +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <b>clear</b> czyści dokument, usuwając całą jego zawartość.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre>document.clear() +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><button label="empty" onclick="document.clear();" /> +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0 - brak w specyfikacji.</p> diff --git a/files/pl/web/api/document/close/index.html b/files/pl/web/api/document/close/index.html new file mode 100644 index 0000000000..b325beb8cc --- /dev/null +++ b/files/pl/web/api/document/close/index.html @@ -0,0 +1,26 @@ +--- +title: document.close +slug: Web/API/Document/close +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/close +--- +<div> + {{APIRef}}</div> +<div> + </div> +<p><span style="font-size: 1.71428571428571rem; letter-spacing: -0.5px; line-height: 24px;">Podsumowanie</span></p> +<p>Metoda <code>document.close()</code> kończy zapis do otwartego dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre>document.close() +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// otwieramy dokument do zapisu +// i kończymy zamknięciem poprzez close() +document.open(); +document.write("<P>The only content</P>."); +document.close(); +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-98948567">close</a></p> diff --git a/files/pl/web/api/document/compatmode/index.html b/files/pl/web/api/document/compatmode/index.html new file mode 100644 index 0000000000..a2750f2ad8 --- /dev/null +++ b/files/pl/web/api/document/compatmode/index.html @@ -0,0 +1,32 @@ +--- +title: document.compatMode +slug: Web/API/Document/compatMode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/compatMode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wskazuje, czy dokument renderowany jest w trybie zgodności wstecznej (ang. + <i> + quirks mode</i> + ), czy też w trybie standardów (ang. + <i> + strict mode</i> + ).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>tryb</i> = document.compatMode +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>tryb</code> jest ciągiem zawierającym "BackCompat" dla trybu zgodności wstecznej lub "CSS1Compat" dla trybu standardów.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">if ( document.compatMode == "BackCompat" ){ + //wykonaj coś dla trybu zgodności +} +</pre> +<p>{{ languages( { "en": "en/DOM/document.compatMode" } ) }}</p> diff --git a/files/pl/web/api/document/cookie/index.html b/files/pl/web/api/document/cookie/index.html new file mode 100644 index 0000000000..a711e9c1d2 --- /dev/null +++ b/files/pl/web/api/document/cookie/index.html @@ -0,0 +1,49 @@ +--- +title: document.cookie +slug: Web/API/Document/cookie +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/cookie +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Pobiera/ustawia listę ciasteczek powiązanych z dokumentem.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>listaCiasteczek</em> = document.cookie +document.cookie = <em>listaCiasteczek</em> +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<ul> + <li><code>listaCiasteczek</code> jest ciągiem zawierającym rozdzieloną średnikami listę ciasteczek.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">// ta funkcja ustawia dwa ciasteczka +// a następnie wyświetla je w ostrzeżeniu +function sgCookie() { + document.cookie = "name=oeschger"; + document.cookie = "favorite_food=tripe"; + alert(document.cookie); +} +// wyświetli: name=oeschger;favorite_food=tripe +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Jeżeli nie ma ciasteczek powiązanych z tym dokumentem, funkcja zwraca pusty ciąg. Zauważ również, że nie możesz użyć tej własności, bu ustawić więcej niż jedno ciasteczko za jednym razem.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-8747038">cookie </a></p> + +<p>{{ languages( { "en": "en/DOM/document.cookie", "es": "es/DOM/document.cookie" } ) }}</p> diff --git a/files/pl/web/api/document/createattribute/index.html b/files/pl/web/api/document/createattribute/index.html new file mode 100644 index 0000000000..ad996d5161 --- /dev/null +++ b/files/pl/web/api/document/createattribute/index.html @@ -0,0 +1,29 @@ +--- +title: document.createAttribute +slug: Web/API/Document/createAttribute +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/createAttribute +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>createAttribute</b> tworzy nowy atrybut w bieżącym elemencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>atrybut</i> = element.createAttribute(<i>nazwa</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>atrybut</code> jest węzłem atrybutu</li> + <li><code>nazwa</code> jest ciągiem znaków zawierającym nazwę atrybutu</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>d = document.getElementById("div1"); +p = d.createAttribute("proportion"); +p.value = "100"; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zwracany jest węzeł typu <code>Attribute</code>. Kiedy masz już ten węzeł, tak jak w powyzszym przykładzie, możesz ustawić jego wartość za pomocą własności <code>value</code>. DOM nie wymusza typu atrybutów, jakie mogą zostać dodane w ten sposób do konkretnych elementów.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1084891198">createAttribute </a></p> +<p>{{ languages( { "en": "en/DOM/document.createAttribute", "fr": "fr/DOM/document.createAttribute" } ) }}</p> diff --git a/files/pl/web/api/document/createdocumentfragment/index.html b/files/pl/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..e6bf6e6da3 --- /dev/null +++ b/files/pl/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,43 @@ +--- +title: document.createDocumentFragment +slug: Web/API/Document/createDocumentFragment +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createDocumentFragment +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Tworzy pusty fragment dokumentu.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">var fragmentDokumentu = document.createDocumentFragment(); +</pre> + +<p><code>fragmentDokumentu</code> jest odniesieniem do pustego obiektu <code>DocumentFragment</code>.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>var frag = document.createDocumentFragment(); +frag.appendChild(document.createTextNode('Ipsum Lorem')); +document.body.appendChild(frag); +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><code><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-B63ED1A3">DocumentFragment</a></code> jest minimalnym obiektem dokumentu, który nie posiada rodzica. Obsługuje on następujące metody DOM 2: <code><a href="pl/DOM/element.appendChild">appendChild</a></code>, <code><a href="pl/DOM/element.cloneNode">cloneNode</a></code>, <code><a href="pl/DOM/element.hasAttributes">hasAttributes</a></code>, <code><a href="pl/DOM/element.hasChildNodes">hasChildNodes</a></code>, <code><a href="pl/DOM/element.insertBefore">insertBefore</a></code>, <code><a href="pl/DOM/element.normalize">normalize</a></code>, <code><a href="pl/DOM/element.removeChild">removeChild</a></code>, <code><a href="pl/DOM/element.replaceChild">replaceChild</a></code>.</p> + +<p>Obsługuje on również następujące własności DOM 2: <code><a href="pl/DOM/element.attributes">attributes</a></code>, <code><a href="pl/DOM/element.childNodes">childNodes</a></code>, <code><a href="pl/DOM/element.firstChild">firstChild</a></code>, <code><a href="pl/DOM/element.lastChild">lastChild</a></code>, <code><a href="pl/DOM/element.localName">localName</a></code>, <code><a href="pl/DOM/element.namespaceURI">namespaceURI</a></code>, <code><a href="pl/DOM/element.nextSibling">nextSibling</a></code>, <code><a href="pl/DOM/element.nodeName">nodeName</a></code>, <code><a href="pl/DOM/element.nodeType">nodeType</a></code>, <code><a href="pl/DOM/element.nodeValue">nodeValue</a></code>, <code><a href="pl/DOM/element.ownerDocument">ownerDocument</a></code>, <code><a href="pl/DOM/element.parentNode">parentNode</a></code>, <code><a href="pl/DOM/element.prefix">prefix</a></code>, <code><a href="pl/DOM/element.previousSibling">previousSibling</a></code>, <code><a href="pl/DOM/element.textContent">textContent</a></code>.</p> + +<p>Różne inne metody potrafią pobrać fragment dokumentu jako argument (na przykład metody interfejsu <code><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1950641247">Node</a></code> takie jak <code><a href="pl/DOM/element.appendChild">appendChild</a></code> i <code><a href="pl/DOM/element.insertBefore">insertBefore</a></code>), w przypadku których dodawane lub wstawiane są dzieci fragmentu, nie zaś same fragmenty.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-35CB04B5">createDocumentFragment</a></p> + +<p>{{ languages( { "en": "en/DOM/document.createDocumentFragment" } ) }}</p> diff --git a/files/pl/web/api/document/createelement/index.html b/files/pl/web/api/document/createelement/index.html new file mode 100644 index 0000000000..bf657b4103 --- /dev/null +++ b/files/pl/web/api/document/createelement/index.html @@ -0,0 +1,74 @@ +--- +title: document.createElement +slug: Web/API/Document/createElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createElement +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Tworzy element podanego typu. Zauważ, że zwracana instancja implementuje interfejs Element, zatem można manipulować atrybutami bezpośrednio na zwróconym obiekcie.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre>''element'' = document.createElement(''typ'') +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<ul> + <li><em>element</em>jest obiektem</li> + <li><em>typ</em>jest ciągiem znaków oznaczającym typ tworzonego elementu</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre><html> +<head> +<title>||Praca z elementami||</title> +</head> + +<script type="text/javascript"> +var my_div = null; +var newDiv = null; + +function addElement() +{ + // tworzy nowy element div + // i daje jego zawartość + newDiv = document.createElement("div"); + newDiv.innerHTML = "<h1>Hi there and greetings!</h1>"; + + // add the newly created element and it's content into the DOM + my_div = document.getElementById("org_div1"); + document.body.insertBefore(newDiv, my_div); +} + +</script> + +<body onload="addElement()"> + <div id='org_div1'> The text above has been created dynamically.</div> +</body> +</html> +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Jeżeli znane są atrybuty o domyślnych wartościach, zostaną automatycznie utworzone i przypisane do elementu węzły tychże atrybutów.</p> + +<p>Aby utworzyć element o uściślonej nazwie i URI przestrzeni nazw, użyj metody <strong>createElementNS</strong>.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-2141741547">createElement</a></p> + + + +<div class="noinclude"></div> + +<p>{{ languages( { "en": "en/DOM/document.createElement", "fr": "fr/DOM/document.createElement", "it": "it/DOM/document.createElement", "ja": "ja/DOM/document.createElement", "ko": "ko/DOM/document.createElement" } ) }}</p> diff --git a/files/pl/web/api/document/createevent/index.html b/files/pl/web/api/document/createevent/index.html new file mode 100644 index 0000000000..1064131504 --- /dev/null +++ b/files/pl/web/api/document/createevent/index.html @@ -0,0 +1,134 @@ +--- +title: document.createEvent +slug: Web/API/Document/createEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createEvent +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Tworzy obiekt obsługi <a href="pl/DOM/event">zdarzenia</a> o określonym typie. Utworzony obiekt powinien zostać najpierw zainicjalizowany, a następnie przekazany do metody <a href="pl/DOM/element.dispatchEvent">dispatchEvent</a> elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>var zdarzenie</i> =<i>document</i>.createEvent(<i>typ);</i> +</pre> +<ul> + <li><code>zdarzenie</code> to utworzony obiekt <a href="pl/DOM/event">Event</a>.</li> + <li><code>typ</code> to ciąg oznaczający typ tworzonego zdarzenia. Możliwe typy to m.in.: <code>"UIEvents"</code>, <code>"MouseEvents"</code>, <code>"MutationEvents"</code>, i <code>"HTMLEvents"</code>. Zob. {{ Anch("Uwagi") }}.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p><a href="/pl/docs/DOM/dispatchEvent_-_przyk%C5%82ad" title="/pl/docs/DOM/dispatchEvent_-_przyk%C5%82ad">dispatchEvent - przykład [pl]</a></p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Nazwy typów zdarzeń, które można przekazać do <code>createEvent</code> określane są przez + <i> + moduły zdarzeń</i> + . Niektóre moduły zdarzeń zdefiniowane są w specyfikacjach DOM Events, niektóre moduły w innych specyfikacjach (jak np. SVG), a pewne typy zdarzeń są specyficzne dla Gecko.</p> +<p>Szczegóły znajdziesz w poniższej tabeli.</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Moduł zdarzeń</th> + <th>Typ do przekazania w <code>createEvent</code></th> + <th>Metoda używana do inicjalizacji zdarzenia</th> + </tr> + <tr style="background-color: #eee;"> + <td colspan="3"><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings">DOM Level 2 Events</a></td> + </tr> + <tr> + <td>Moduł zdarzeń interfejsu użytkownika</td> + <td><code>"UIEvents"</code></td> + <td><a href="pl/DOM/event.initUIEvent">event.initUIEvent</a></td> + </tr> + <tr> + <td>Moduł zdarzeń myszy</td> + <td><code>"MouseEvents"</code></td> + <td><a href="pl/DOM/event.initMouseEvent">event.initMouseEvent</a></td> + </tr> + <tr> + <td>Moduł zdarzeń mutacji</td> + <td><code>"MutationEvents"</code></td> + <td><a href="pl/DOM/event.initMutationEvent">event.initMutationEvent</a></td> + </tr> + <tr> + <td>Moduł zdarzeń HTML</td> + <td><code>"HTMLEvents"</code></td> + <td><a href="pl/DOM/event.initEvent">event.initEvent</a></td> + </tr> + <tr style="background-color: #eee;"> + <td colspan="3"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-eventgroupings">DOM Level 3 Events</a></td> + </tr> + <tr> + <td>Moduł zdarzeń interfejsu użytkownika</td> + <td><code>"UIEvent"</code>, <code>"UIEvents"</code></td> + <td><a href="pl/DOM/event.initUIEvent">event.initUIEvent</a></td> + </tr> + <tr> + <td>Moduł zdarzeń myszy</td> + <td><code>"MouseEvent"</code>, <code>"MouseEvents"</code></td> + <td><a href="pl/DOM/event.initMouseEvent">event.initMouseEvent</a></td> + </tr> + <tr> + <td>Moduł zdarzeń mutacji</td> + <td><code>"MutationEvent"</code>, <code>"MutationEvents"</code></td> + <td><a href="pl/DOM/event.initMutationEvent">event.initMutationEvent</a></td> + </tr> + <tr> + <td>Moduł zdarzeń mutacji nazw (nie zaimplementowany przez Gecko - czerwiec 2006)</td> + <td><code>"MutationNameEvent"</code></td> + <td><a href="pl/DOM/event.initMutationNameEvent">event.initMutationNameEvent</a></td> + </tr> + <tr> + <td>Moduł zdarzeń tekstowych</td> + <td><code>"TextEvent"</code> (Gecko obsługuje też <code>"TextEvents"</code>)</td> + <td><a href="pl/DOM/event.initTextEvent">event.initTextEvent</a></td> + </tr> + <tr> + <td>Moduł zdarzeń klawiatury</td> + <td><code>"KeyboardEvent"</code> (Gecko obsługuje też <code>"KeyEvents"</code>)</td> + <td><a href="pl/DOM/event.initKeyboardEvent">event.initKeyboardEvent</a></td> + </tr> + <tr> + <td>Moduł podstawowych zdarzeń</td> + <td><code>"Event"</code> (Gecko obsługuje też <code>"Events"</code>)</td> + <td><a href="pl/DOM/event.initEvent">event.initEvent</a></td> + </tr> + <tr style="background-color: #eee;"> + <td colspan="3"><a class="external" href="http://www.w3.org/TR/SVG/script.html#DOMInterfaces">SVG 1.1 Scripting</a></td> + </tr> + <tr> + <td rowspan="2">SVG</td> + <td><code>"SVGEvents"</code> (Gecko obsługuje też <code>"SVGEvent"</code>)</td> + <td><a href="pl/DOM/event.initEvent">event.initEvent</a></td> + </tr> + <tr> + <td><code>"SVGZoomEvents"</code> (Gecko obsługuje też <code>"SVGZoomEvent"</code>)</td> + <td><a href="pl/DOM/event.initUIEvent">event.initUIEvent</a></td> + </tr> + <tr style="background-color: #eee;"> + <td colspan="3">Inne typy zdarzeń obsługiwane przez Gecko <span class="comment">Gecko-related information is taken from nsEventDispatcher::CreateEvent code - see lxr.m.o</span></td> + </tr> + <tr> + <td rowspan="3">-</td> + <td><code>"MouseScrollEvents"</code>, <code>"PopupEvents"</code></td> + <td><a href="pl/DOM/event.initMouseEvent">event.initMouseEvent</a></td> + </tr> + <tr> + <td><code>"PopupBlockedEvents"</code></td> + <td><a href="pl/DOM/event.initPopupBlockedEvent">event.initPopupBlockedEvent</a></td> + </tr> + <tr> + <td><code>"XULCommandEvent"</code>, <code>"XULCommandEvents"</code></td> + <td><a href="pl/DOM/event.initCommandEvent">event.initCommandEvent</a></td> + </tr> + </tbody> +</table> +<p>Niektóre zdarzenia mogą być tworzone przy użyciu dwóch nazw typów, ponieważ w specyfikacji DOM Level 3 Events zmieniono nazwy z liczby mnogiej na pojedynczą, pozostawiając nazwy w liczbie mnogiej dla zgodności wstecznej.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent-createEvent">DOM Level 2 Events: createEvent</a></p> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-DocumentEvent-createEvent">DOM Level 3 Events: createEvent</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/document.createEvent", "es": "es/DOM/document.createEvent", "ja": "ja/DOM/document.createEvent" } ) }}</p> diff --git a/files/pl/web/api/document/createrange/index.html b/files/pl/web/api/document/createrange/index.html new file mode 100644 index 0000000000..75dbacfe83 --- /dev/null +++ b/files/pl/web/api/document/createrange/index.html @@ -0,0 +1,29 @@ +--- +title: document.createRange +slug: Web/API/Document/createRange +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createRange +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca nowy objekt <code><a href="pl/DOM/range">Range</a></code>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><var>range</var> = <var>document</var>.createRange(); +</pre> +<p><code>range</code> jest utworzonym objektem <a href="pl/DOM/range">range</a>.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var range = document.createRange(); +range.setStart(startNode, startOffset); +range.setEnd(endNode, endOffset); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Gdy tylko <code>Range</code> jest utworzony, musisz określić jego punkty graniczne zanim będziesz mógł użyć większości jego metod.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-DocumentRange-method-createRange">DOM Level 2 Range: DocumentRange.createRange</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/document.createRange", "es": "es/DOM/document.createRange" } ) }}</p> diff --git a/files/pl/web/api/document/createtextnode/index.html b/files/pl/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..1fe0f9bd27 --- /dev/null +++ b/files/pl/web/api/document/createtextnode/index.html @@ -0,0 +1,62 @@ +--- +title: document.createTextNode +slug: Web/API/Document/createTextNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createTextNode +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Tworzy nowy węzeł tekstowy.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>var tekst</em> = document.createTextNode(<em>tresc</em>) +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<ul> + <li><code>tekst</code> jest węzłem tekstowym</li> + <li><code>treść</code> jest ciągiem zawierającym dane do umieszczenia w węźle tekstowym.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre><code><!DOCTYPE html> +<html lang="en"> +<head> +<title>createTextNode - przyklad</title> +<script> +function dodajWezelTekstowy(tekst) { + var nowytekst = document.createTextNode(tekst), + p1 = document.getElementById("p1"); + + p1.appendChild(nowytekst); +} +</script> +</head> + +<body> + <button onclick="dodajWezelTekstowy('TAK! ');">TAK!</button> + <button onclick="dodajWezelTekstowy('NIE! ');">NIE!</button> + <button onclick="dodajWezelTekstowy('JASNE! ');">JASNE!</button> + + <hr /> + + <p id="p1">Pierwsza linia paragrafu.</p> +</body> +</html></code></pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1975348127">createTextNode </a></p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/document.createTextNode", "fr": "fr/DOM/document.createTextNode", "ko": "ko/DOM/document.createTextNode" } ) }}</p> diff --git a/files/pl/web/api/document/defaultview/index.html b/files/pl/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..905a966998 --- /dev/null +++ b/files/pl/web/api/document/defaultview/index.html @@ -0,0 +1,24 @@ +--- +title: document.defaultView +slug: Web/API/Document/defaultView +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/defaultView +--- +<p>{{ ApiRef() }}</p> +<p> </p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>document.defaultView</b> zwraca odnośnik do domyślnego <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a> dokumentu, lub <code>null</code> jeśli żadny nie jest dostępne</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">var docDView = document.defaultView; +</pre> +<p>Własność tylko do odczytu.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>document.defaultView</code> jest częścią interfejsu DOM poziomu 2 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView">DocumentView</a>.</p> +<p><code>document.defaultView</code> jest głównie odnośnikiem do <a href="pl/DOM/window">okna</a> obiektu dla dokumentu, jednakże nie jest to zdefiniowane w specyfikacji i nie można się na tym opierać we wszystkich środowiskach zwłaszcza, że nie wszystkie przeglądarki to implementują. <span class="comment">it would probably be useful to provide concrete examples here</span></p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView-defaultView">DOM Level 2 Views: defaultView</a></p> +<p>{{ languages( { "en": "en/DOM/document.defaultView" } ) }}</p> diff --git a/files/pl/web/api/document/designmode/index.html b/files/pl/web/api/document/designmode/index.html new file mode 100644 index 0000000000..3956fa8d9e --- /dev/null +++ b/files/pl/web/api/document/designmode/index.html @@ -0,0 +1,53 @@ +--- +title: Document.designMode +slug: Web/API/Document/designMode +translation_of: Web/API/Document/designMode +--- +<div>{{ApiRef()}}</div> + +<p><strong><code>document.designMode</code></strong> kontroluje czy dokument może być edytowany. Dopuszczalne wartości to <code>"on"</code> (włączona edycja) oraz <code>"off"</code> (wyłączona edycja). Zgodnie ze specyfikacją, wartość domyślna to <code>"off"</code>. Firefox stosuje ten standard. Dla wcześniejszych wersji Chrome oraz IE domyślną wartością było <code>"inherit"</code>. Od wersji Chrome 43, standardem jest wartość <code>"off"</code>, a <code>"inherit"</code> nie jest wspierane. W IE 6-10, wartość jest używana naprzemiennie.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">var mode = document.designMode; +document.designMode = "on" || "off";</pre> + +<h2 id="Przykład">Przykład</h2> + +<p>Spraw aby element {{HTMLElement("iframe")}} był edytowalny:</p> + +<pre class="brush: js">iframeNode.contentDocument.designMode = "on"; +</pre> + +<h2 id="Specyfikacje">Specyfikacje</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', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definicja</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<div class="hidden">Tablica kompatybilności jest na tej stronie generowana z danych strukturalnych. Jeżeli chcesz przyczynić się do rozwoju danych wejdź na <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam zapytanie.</div> + +<p>{{Compat("api.Document.designMode")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Edycja "Rich-Text" w witrynie Mozilla</a></li> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li><a href="https://msdn.microsoft.com/en-us/library/ms533720(v=vs.85).aspx">Właściwości designMode</a> na stronie MSDN</li> +</ul> diff --git a/files/pl/web/api/document/doctype/index.html b/files/pl/web/api/document/doctype/index.html new file mode 100644 index 0000000000..4894005b15 --- /dev/null +++ b/files/pl/web/api/document/doctype/index.html @@ -0,0 +1,21 @@ +--- +title: document.doctype +slug: Web/API/Document/doctype +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/doctype +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca definicję typu bieżącego dokumentu (DTD).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>ciąg</i> = document.doctype +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Atrybut <b>doctype</b> jest tylko do odczytu. Jeżeli nie ma DTD w dokumencie, zwrócone zostaje NULL.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-B63ED1A31">docType</a></p> +<p>{{ languages( { "en": "en/DOM/document.doctype" } ) }}</p> diff --git a/files/pl/web/api/document/documentelement/index.html b/files/pl/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..bc729c829f --- /dev/null +++ b/files/pl/web/api/document/documentelement/index.html @@ -0,0 +1,60 @@ +--- +title: document.documentElement +slug: Web/API/Document/documentElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/documentElement +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><strong>Tylko do odczytu</strong></p> + +<p>Zwraca <code><a href="pl/DOM/element">Element</a></code> będący bezpośrednim dzieckiem <a href="pl/DOM/document">document</a> (na przykład dla dokumentów HTML jest to element <code><html></code>).</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">var<em>element</em> = document.documentElement; +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">actual_doc = document.documentElement; +first_tier = actual_doc.childNodes; +//first_tier to bezpośrednie dzieci HTML +for (var i = 0; i < first_tier.length; i++) { + //zrób cos z każdym dzieckiem HTML + //poprzez first_tier[i] +} +</pre> + +<pre class="eval">var rootElement = document.documentElement; +var firstTier = rootElement.childNodes; +// firstTier jest NodeList bezpośredniego dziecka elementu głównego +for (var i = 0; i < firstTier.length; i++) { + // zrób coś z każdym dzieckiem HTML głównego elementu + // as firstTier[i] +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Ta własność tylko do odczytu jest udogodnieniem w przechwytywaniu elementu HTML, powiązanego z każdym prawidłowym dokumentem HTML.</p> + +<p>Powyżej typowy przykład: potrzebujesz w rzeczywistości elementu HTML, aby mieć dostęp do wszystkich jego dzieci, więc używasz tej własności obiektu <code>document</code>, aby go przejąć.</p> + +<p>Zauważ też, że zazwyczaj <code>document</code> zawiera jeden węzeł-dziecko - HTML - który sam zawiera wszystkie elementy faktycznego dokumentu jako listę węzłów-dzieci (<code>nodeList</code>).</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-87CD092">DOM Level 2 Core: Document.documentElement</a></p> + + + +<div class="noinclude"></div> + +<p>{{ languages( { "en": "en/DOM/document.documentElement", "es": "es/DOM/document.documentElement", "fr": "fr/DOM/document.documentElement", "ja": "ja/DOM/document.documentElement" } ) }}</p> diff --git a/files/pl/web/api/document/domain/index.html b/files/pl/web/api/document/domain/index.html new file mode 100644 index 0000000000..e64ad2e641 --- /dev/null +++ b/files/pl/web/api/document/domain/index.html @@ -0,0 +1,30 @@ +--- +title: document.domain +slug: Web/API/Document/domain +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/domain +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>domain</b> pobiera/ustawia domenę bieżącego dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>ciąg</i> = document.domain +document.domain =<i>ciąg</i> +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">bad_domain = "www.love.com"; +if ( document.domain == bad_domain ) { + window.close(); +} +// jeśli dokument to www.love.com/good.html, +// to skrypt zamknie okno +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Właściwość zwraca NULL jezeli nie można zidentyfikować serwera. W specyfikacji DOM własność tą oznaczono jako tylko do oczytu, jednak Mozilla pozwala na jej modyfikację.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-2250147">domain </a></p> +<p>{{ languages( { "en": "en/DOM/document.domain" } ) }}</p> diff --git a/files/pl/web/api/document/drag_event/index.html b/files/pl/web/api/document/drag_event/index.html new file mode 100644 index 0000000000..ccc5d55cbb --- /dev/null +++ b/files/pl/web/api/document/drag_event/index.html @@ -0,0 +1,333 @@ +--- +title: drag +slug: Web/API/Document/drag_event +tags: + - DOM + - Zdarzenie + - przeciągnij i upuść +translation_of: Web/API/Document/drag_event +--- +<div>{{APIRef}}</div> + +<p>Zdarzenie <code>przeciągania</code> uruchamiane jest po przeciągnięciu elementu lub tekstu (co kilkaset milisekund).</p> + +<h2 id="Ogólne_informacje">Ogólne informacje</h2> + +<table class="properties"> + <tbody> + <tr> + <td>Bąbelkowanie</td> + <td>Tak</td> + </tr> + <tr> + <td>Cancelable</td> + <td>Tak</td> + </tr> + <tr> + <td>Obiekt docelowy</td> + <td>{{domxref("Document")}}, {{domxref("Element")}}</td> + </tr> + <tr> + <td>Interfejs</td> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <td>Domyślna akcja</td> + <td>Kontynuuje operacje przeciągania i upuszczania</td> + </tr> + </tbody> +</table> + +<h2 id="Właściwości">Właściwości</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="Przykład">Przykład</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> + var dragged; + + /* events fired on the draggable target */ + document.addEventListener("drag", function( event ) { + + }, false); + + document.addEventListener("dragstart", function( event ) { + // store a ref. on the dragged elem + dragged = event.target; + // make it half transparent + event.target.style.opacity = .5; + }, false); + + document.addEventListener("dragend", function( event ) { + // reset the transparency + event.target.style.opacity = ""; + }, false); + + /* events fired on the drop targets */ + document.addEventListener("dragover", function( event ) { + // prevent default to allow drop + event.preventDefault(); + }, false); + + document.addEventListener("dragenter", function( event ) { + // highlight potential drop target when the draggable element enters it + if ( event.target.className == "dropzone" ) { + event.target.style.background = "purple"; + } + + }, false); + + document.addEventListener("dragleave", function( event ) { + // reset background of potential drop target when the draggable element leaves it + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + } + + }, false); + + document.addEventListener("drop", function( event ) { + // prevent default action (open as link for some elements) + 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); +</script> +</pre> + +<h2 id="Specyfikacja">Specyfikacja</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", "interaction.html#dndevents", "drag event")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Obsługiwane_przeglądarki">Obsługiwane przeglądarki</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>4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10</td> + <td>12</td> + <td>3.1</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>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>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<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> + <li><a href="http://jsfiddle.net/zfnj5rv4/">Demo</a></li> +</ul> diff --git a/files/pl/web/api/document/embeds/index.html b/files/pl/web/api/document/embeds/index.html new file mode 100644 index 0000000000..ca0ab4ff2f --- /dev/null +++ b/files/pl/web/api/document/embeds/index.html @@ -0,0 +1,22 @@ +--- +title: document.embeds +slug: Web/API/Document/embeds +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/embeds +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>embeds</b> zwraca listę obiektów OBJECT zagnieżdżonych w bieżącym dokumencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>listaWęzłów</i> = document.embeds +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<p><br> + <a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/collections/embeds.asp">MSDN: embeds collection</a></p> +<p>{{ languages( { "en": "en/DOM/document.embeds" } ) }}</p> diff --git a/files/pl/web/api/document/execcommand/index.html b/files/pl/web/api/document/execcommand/index.html new file mode 100644 index 0000000000..0718107051 --- /dev/null +++ b/files/pl/web/api/document/execcommand/index.html @@ -0,0 +1,280 @@ +--- +title: Document.execCommand() +slug: Web/API/Document/execCommand +tags: + - API + - DOM + - Method + - NeedsBrowserCompatibility + - NeedsExample + - Reference + - edytor +translation_of: Web/API/Document/execCommand +--- +<div></div> + +<div>Kiedy dokument HTML jest przełączony w tryb <code>designMode</code>, obiekt dokumentu udostępnia metodę <code>execCommand</code>, która pozwala uruchomić komendy manipulujące edytowalnym obszarem. Większość poleceń wpływa na zaznaczony obszar (pogrubienie, kursywa itd.), podczas gdy inne wstawiają nowe elementy (dodawanie linku) lub wpływają na całą linię (wcięcia). Przy użyciu <code>contentEditable</code>, wywołanie <code>execCommand()</code> wpływa na aktywny edytowalny element.</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate"><em>bool</em> = document.execCommand(<em>aCommandName</em>, <em>aShowDefaultUI</em>, <em>aValueArgument</em>) +</pre> + +<h3 id="Zwracane_wartości">Zwracane wartości</h3> + +<p>Obiekt {{jsxref('Boolean')}}, który zwraca <code>false</code>, jeśli polecenie jest niewspierane lub włączone. <strong>Uwaga</strong>: Zwraca prawdę tylko jeśli jest częścią UI, to znaczy - nie jest używana do sprawdzania wsparcia przeglądarki przed renderowaniem elementu, który wywołuje polecenie. </p> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>aCommandName</code></dt> + <dd>Typu {{domxref("DOMString")}} - określanazwę polecenia do wykonania. Zobacz {{anch("Commands")}}, aby wyświetlić listę poleceń.</dd> + <dt><code>aShowDefaultUI</code></dt> + <dd>Typu {jsxref("Boolean")}} - wskazuje czy domyślny interfejs użytkownika powinien być pokazany. Nie jest implementowane przez Mozillę.</dd> + <dt><code>aValueArgument</code></dt> + <dd>W przypadku komend wymagających wprowadzenia argumentu (takiego jak <code>insertImage</code>, gdzie jest to URL do grafiki do wstawienia), jest to {{domxref("DOMString")}} przekazujący te informacje. Podaj null, jeśli niewymagany.</dd> +</dl> + +<h3 id="Polecenia">Polecenia</h3> + +<dl> + <dt><code>backColor</code></dt> + <dd>Zmienia kolor tła. W trybie <code>styleWithCss</code> zmieia kolor jedynie zawierającego elementu. Wymaga podania ciągu znaków{{cssxref("<color>")}} jako wartości argumentu. Zwróć uwagę na to, że Internet Explorer używa tego do zmiany koloru tła tekstu.</dd> + <dt><code>bold</code></dt> + <dd>Włącza/wyłącza pogrubienie w zaznaczeniu lub miejscu wstawiania. IE używa znacznika {{HTMLElement("strong")}} zamiast {{HTMLElement("b")}}.</dd> + <dt><code>contentReadOnly</code></dt> + <dd>Sprawia, że dokument jest zawartość jest tylko do odczytu lub edytowalna. Wymaga prawdy/fałszu jako wartości argumentu. (Nie wspierany przez IE).</dd> + <dt><code>copy</code></dt> + <dd>Kopiuje zaznaczenie do schowkka. Warunki włączenia tego zachowania różnią się między przeglądarkami i zmieniają się w czasie. Sprawdź tabelę zgodności, aby określić, czy możesz użyć w swoim przypadku.</dd> + <dt><code>createLink</code></dt> + <dd>Wstawia link z zaznaczenia (wymaga zaznaczenia). HREF URI musi być podany jako wartość argumentu. URI musi zawierać co najmniej jeden zak, może być białym znakiem (IE utworzy link z wartością null).</dd> + <dt><code>cut</code></dt> + <dd>Usuwa zaznaczenie kopiując do schowka. Warunki włączenia tego zachowania różnią się między przeglądarkami i zmieniają się w czasie. Sprawdź tabelę zgodności, aby określić, czy możesz użyć w swoim przypadku.</dd> + <dt><code>decreaseFontSize</code></dt> + <dd>Wstawia znacznik {{HTMLElement("small")}} wokół zaznaczenia lub w miejscu wstawienia. (Nie wspierane przez IE.)</dd> + <dt><code>defaultParagraphSeparator</code></dt> + <dd>Zmienia separator akapitu używany podczas tworzenia nowych akapitów w edytowalnych regionach tekstowych. Zobacz <a href="/pl/docs/Web/Guide/HTML/Editable_content#Differences_in_markup_generation">Differences in markup generation</a> po więcej szczegółów.</dd> + <dt><code>delete</code></dt> + <dd>Usuwa zaznaczenie.</dd> + <dt><code>enableInlineTableEditing</code></dt> + <dd>Włącza lub wyłącza wstawianie wierszy i kolumn oraz elementy sterujące usuwaniem. (Nie obsługiwane przez Internet Explorer.)</dd> + <dt><code>enableObjectResizing</code></dt> + <dd>Umożliwia lub uniemożliwia zmianę rozmiaru uchwytów na obrakach lub innych skalowalnych obiektów. (Nie wspierane przez IE)</dd> + <dt><code>fontName</code></dt> + <dd>Zmienia nazwę czcionki dla zaznaczenia lub w punkcie wstawiania. Wymaga ciągu znaków (np. <code>"Arial"</code>) jako wartości argumentu.</dd> + <dt><code>fontSize</code></dt> + <dd>Zmienia rozmiar czcionki dla zaznaczenia lub w punkcie wstawiania. Wymaga rozmiaru czcionki HTML (<code>1</code>-<code>7</code>) jako wartości argumentu.</dd> + <dt><code>foreColor</code></dt> + <dd>Zmienia kolor czcionki dla zaznaczenia lub w punkcie wstawiania. Wymaga wartości koloru (w postaci ciągu znaków) jako wartości argumentu.</dd> + <dt><code>formatBlock</code></dt> + <dd>Wstawia tag stylu blokowego dla linii w zaznaczeniu, zastępując blokowy element zawierający linię, jeśli taki istnieje (w Firefoxie, BLOCKQUOTE jest wyjątkiem - zawinie blokowy element zawierający). Wymaga ciągu znaków oznaczającego znacznik jako wartość argumentu. Można użyć praktycznie wszystkich (np. "H1", "P", "DL", "BLOCKQUOTE). (IE wspiera jedynie H1-H6, "ADDRESS", PRE, które jeszcze muszą zawierać nawiasy znaczników <>, tak jak "<h1">).</dd> + <dt><code>forwardDelete</code></dt> + <dd>Usuwa znak przed pozycją <a href="http://en.wikipedia.org/wiki/Cursor_%28computers%29">kursora</a>. Działa jak wciśnięcie klawisza Delete.</dd> + <dt><code>heading</code></dt> + <dd>Wstawia tag nagłówka naokoło zaznaczenia lub w miejscu wstawiania. Wymaga ciągu znaków oznaczającego nazwę tagu jako wartości argumentu (np. "H1", "H6"). (Nie wspierane przez IE ani Safari).</dd> + <dt><code>hiliteColor</code></dt> + <dd>Zmienia kolor tła dla zaznaczenia lub w miejscu wstawiania. Wymaga ciągu znaków w postaci wartości kolorów jako wartości argumentu. Do użycia tej funkcji jest wymagane użycie CSS. (Nie wspierane przez IE).</dd> + <dt><code>increaseFontSize</code></dt> + <dd>Wstawia tag BIG naokoło zaznaczenia lub w miejscu wstawiania. (Nie wspierane przez IE).</dd> + <dt><code>indent</code></dt> + <dd>Wcina wiersz zawierający zaznaczenie lub punkt wstawiania. W Firefixie, jeśli zaznaczenie obejmuje wiele linii na różnych poziomach wcięcia, jedynie ostatnie wcięte linie zostaną wcięte.</dd> + <dt><code>insertBrOnReturn</code></dt> + <dd>Kontroluje, czy klawisz Enter wstawia tag BR, czy dzieli elemet blokowy na dwa (Nie wspierane przez IE)</dd> + <dt><code>insertHorizontalRule</code></dt> + <dd>Wstawia poziomą linię w miejscu wstawiania (usuwa zaznaczenie).</dd> + <dt><code>insertHTML</code></dt> + <dd>Wstawia ciąg znaków w postaci kodu HTML (usuwa zaznaczenie). Wymaga poprawnego kodu jako wartość argumentu. (Nie wspierane prze</dd> + <dt><code>insertImage</code></dt> + <dd>Wstawia grafikę w punkcie wstawiania (usuwa zaznaczenie). Wymaga ciągu znaków w postaci SRC URI jako wartości argumentu. URI musi zawierać co najmniej jeden znak (może być to biały znak). (Nie wspierane przez IE).</dd> + <dt><code>insertOrderedList</code></dt> + <dd>Wstawia numerowaną listę dla zaznaczenia lub w punkcie wstawiania.</dd> + <dt><code>insertUnorderedList</code></dt> + <dd>Wstawia punktowaną listę dla zaznaczenia lub w punkcie wstawiania.</dd> + <dt><code>insertParagraph</code></dt> + <dd>Wstawia akapit naokoło zaznaczenia lub w danej linii. (IE wstawia akapit w miejscu wstaawiania i usuwa zaznaczenie).</dd> + <dt><code>insertText</code></dt> + <dd>Wstawia dany tekst w miejsce wstawiania (usuwa zaznaczenie).</dd> + <dt><code>italic</code></dt> + <dd>Włącza/wyłącza pochylenie dla zaznaczenia lub w miejscu wstawiania (IE używa tagu EM zamiast I).</dd> + <dt><code>justifyCenter</code></dt> + <dd>Wyśrodkowuje zaznaczenie lub miejsce wstawiania.</dd> + <dt><code>justifyFull</code></dt> + <dd>Justuje zaznaczenie lub miejsce wstawiania.</dd> + <dt><code>justifyLeft</code></dt> + <dd>Wyrównuje do lewej zaznaczenie lub miejsce wstawiania.</dd> + <dt><code>justifyRight</code></dt> + <dd>Wyrównuje do prawej zaznaczenie lub miejsce wstawiaia.</dd> + <dt><code>outdent</code></dt> + <dd>Wysuwa linię zawierającą zaznaczenie lub punkt wstawiania.</dd> + <dt><code>paste</code></dt> + <dd>Wstawia zawartość schowka w miejscu wstawiania (zastępuje zaznaczenie). Nie działa dla zawartości z internetu. Zobacz [1]</dd> + <dt><code>redo</code></dt> + <dd>Ponawia ostatnio cofniętą komendę.</dd> + <dt><code>removeFormat</code></dt> + <dd>Usuwa całe formatowanie z zaznaczenia.</dd> + <dt><code>selectAll</code></dt> + <dd>Zaznacza całą zawartość z edytowalnego obszaru.</dd> + <dt><code>strikeThrough</code></dt> + <dd>Włącza/wyłącza przekreślenie dla zaznaczenia lub w punkcie wstawiania.</dd> + <dt><code>subscript</code></dt> + <dd>Włącza/wyłącza indeks dolny dla zaznaczenia lub w punkcie wstawiania.</dd> + <dt><code>superscript</code></dt> + <dd>Włącza/wyłącza indeks górny dla zaznaczenia lub w punkcie wstawiania.</dd> + <dt><code>underline</code></dt> + <dd>Włącza/wyłącza podkreślenie dla zaznaczenia lub w punkcie wstawiania.</dd> + <dt><code>undo</code></dt> + <dd>Cofa ostatnio wykonaną komendę.</dd> + <dt><code>unlink</code></dt> + <dd>Usuwa tag kotwicy z zaznaczonego linku.</dd> + <dt><code>useCSS</code> {{Deprecated_inline}}</dt> + <dd>Przełącza użycie HTML/CSS dla generowanego kodu. Wymaga prawdy/fałszu jako wartości argumentu. UWAGA: dla CSS wymaga fałszu, dla HTML - prawdy. (Nie jest wspierane przez IE). Deprecjonowana właściwość. Użyj <em>styleWithCSS</em></dd> + <dt><code>styleWithCSS</code></dt> + <dd>Zastępuje <em>useCSS</em>; działa normalnie - dla CSS wymaga prawdy, fałsz generuje HTML.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>Zobacz <a href="http://codepen.io/netsi1964/full/QbLLGW/">how to use</a> w CodePen.</p> + +<h2 id="Specifications">Specifications</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 Editing', '#execcommand()', 'execCommand')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</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}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>insertBrOnReturn</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>copy</code>/<code>cut</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(41)}}</td> + <td>9</td> + <td>29</td> + <td>10</td> + </tr> + <tr> + <td><code>defaultParagraphSeparator</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(55)}}</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>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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>insertBrOnReturn</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>copy</code>/<code>cut</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(41)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>defaultParagraphSeparator</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(55)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Przed przeglądarką Firefox 41 w pliku preferencji user.js trzeba było włączyć obsługę schowka. Aby uzyskać więcej informacji, zobacz <a href="/en-US/docs/Preferences/A_brief_guide_to_Mozilla_preferences">Krótki przewodnik po preferencjach Mozilli</a>. Jeśli polecenie nie było obsługiwane lub włączone, <code>execCommand</code> rzucał wyjątek zamiast zwracać <code>false</code>. W Firefoxie 41 i nowszych, schowek może zostać zapisany w dowolnym programie obsługi zdarzeń read the clipboard. WebExtensions can <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">interact with the clipboard</a>.</p> + +<p>Przed przeglądarką Firefox 41 w pliku preferencji user.js trzeba było włączyć obsługę schowka. Aby uzyskać więcej informacji, zobacz Krótki przewodnik po preferencjach Mozilli. Jeśli polecenie nie było obsługiwane lub włączone, execCommand podnosił wyjątek zamiast zwracać fałsz. W przeglądarce Firefox 41 i nowszych schowek może zostać zapisany w dowolnej obsłudze zdarzeń, która może spowodować wyskoczenie okna (częściowo zaufane skrypty), ale żadna treść internetowa nie może odczytać schowka. WebExtensions mogą wchodzić w interakcje ze schowkiem.</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li>{{domxref("document.designMode")}}</li> + <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li> + <li><a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md">Scribe's "Browser Inconsistencies" documentation</a> z błędami odnoszącymi się do <code>document.execCommand</code>.{{CompatUnknown}}</li> +</ul> diff --git a/files/pl/web/api/document/fgcolor/index.html b/files/pl/web/api/document/fgcolor/index.html new file mode 100644 index 0000000000..a9f0287372 --- /dev/null +++ b/files/pl/web/api/document/fgcolor/index.html @@ -0,0 +1,28 @@ +--- +title: document.fgColor +slug: Web/API/Document/fgColor +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/fgColor +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>fgColor</b> pobiera/ustawia kolor pierwszoplanowy (kolor tekstu) bieżącego dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>kolor</i> = document.fgColor +document.fgColor =<i>kolor</i> +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>kolor</code> jest ciągiem określającym kolor - słownie (np. "red") lub szesnastkowo, jak w HTML-u (np. "#fdfef8").</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">document.fgColor = "white"; +document.bgColor = "darkblue"; +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0 - brak w specyfikacji.</p> +<p>{{ languages( { "en": "en/DOM/document.fgColor" } ) }}</p> diff --git a/files/pl/web/api/document/firstchild/index.html b/files/pl/web/api/document/firstchild/index.html new file mode 100644 index 0000000000..c2bc145b41 --- /dev/null +++ b/files/pl/web/api/document/firstchild/index.html @@ -0,0 +1,36 @@ +--- +title: document.firstChild +slug: Web/API/Document/firstChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/firstChild +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>document.firstChild</b> zwraca pierwszy węzeł z listy bezpośrednich dzieci dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>dziecko</i> = document.firstChild +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>dziecko</code> jest węzłem typu <a href="pl/DOM/element">element</a>.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>function fChild() { + f = document.firstChild; + alert(f.tagName); +} +// wyświetli: HTML +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zauważ, że możesz powrócić do drzewa DOM z tą własnością, by przejąć te węzły potomne, których potrzebujesz, ponieważ prawie zawsze <b>firstChild</b> zwraca element HTML.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-169727388">firstChild </a></p> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/document.firstChild", "es": "es/DOM/document.firstChild", "fr": "fr/DOM/document.firstChild", "ja": "ja/DOM/document.firstChild" } ) }}</p> diff --git a/files/pl/web/api/document/forms/index.html b/files/pl/web/api/document/forms/index.html new file mode 100644 index 0000000000..dcba1e18e0 --- /dev/null +++ b/files/pl/web/api/document/forms/index.html @@ -0,0 +1,45 @@ +--- +title: document.forms +slug: Web/API/Document/forms +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/forms +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>forms</b> zwraca listę elementów FORM z bieżącego dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>listaWęzłów</i> = document.forms +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><html> + +<head> +<title> document.forms example</title> +</head> + +<body> +<form id="robby"> + <input type="button" onclick="alert(document.forms[0].id);" + value="robby's form" /> +</form> + +<form id="dave"> + <input type="button" onclick="alert(document.forms[1].id);" + value="dave's form" /> +</form> + +<form id="paul"> + <input type="button" onclick="alert(document.forms[2].id);" + value="paul's form" /> +</form> + +</body> +</html> +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-1689064">forms </a></p> +<p>{{ languages( { "en": "en/DOM/document.forms", "ja": "ja/DOM/document.forms" } ) }}</p> diff --git a/files/pl/web/api/document/getelementbyid/index.html b/files/pl/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..51e1bd68c0 --- /dev/null +++ b/files/pl/web/api/document/getelementbyid/index.html @@ -0,0 +1,67 @@ +--- +title: document.getElementById +slug: Web/API/Document/getElementById +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/getElementById +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca element o określonym ID.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>var element</em> = document.getElementById(<em>id</em>); +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<ul> + <li><code>element</code> jest obiektem <a href="pl/DOM/element">element</a></li> + <li><code>id</code> jest ciągiem zawierającym unikalny ID szukanego elementu</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre><html> +<head> +<title>Przykład getElementById</title> + +<script type="text/javascript"> + +function changeColor(newColor) +{ + var elem = document.getElementById("para1"); + elem.style.color = newColor; +} +</script> +</head> + +<body> +<p id="para1">Jakiś tekst</p> +<button onclick="changeColor('blue');">niebieski</button> +<button onclick="changeColor('red');">czerwony</button> +</body> +</html> +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><strong>getElementById</strong> jest absolutną podstawą DOM. Jedną z najważniejszych zasad w programowaniu DOM jest unikalne identyfikowanie elementów, dzięki czemu można je przechwycić i manipulować nimi.</p> + +<p>Jeżeli nie ma elementu o podanym ID, funkcja zwraca NULL. Zauważ też, że implementacja DOM musi wiedzieć, które atrybuty mają typ ID. Atrybuty o nazwie "ID" nie mają typu ID, o ile nie zostanie to tak zdefiniowane. Implementacje, które nie wiedzą, czy atrybuty mają typ ID czy nie, powinny zwracać NULL.</p> + +<p><strong>getElementById</strong> wprowadzono w DOM Level 2.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<ul> + <li>DOM Level 2 Core Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBId">getElementById </a></li> +</ul> + +<p>{{ languages( { "en": "en/DOM/document.getElementById", "fr": "fr/DOM/document.getElementById", "ja": "ja/DOM/document.getElementById" } ) }}</p> diff --git a/files/pl/web/api/document/getelementsbyclassname/index.html b/files/pl/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..a9e2037ac3 --- /dev/null +++ b/files/pl/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,82 @@ +--- +title: Document.getElementsByClassName() +slug: Web/API/Document/getElementsByClassName +tags: + - API + - DOM + - HTML5 + - Klasy +translation_of: Web/API/Document/getElementsByClassName +--- +<p id="Summary">{{APIRef("DOM")}}</p> + +<p>Zwraca obiekt podobny do tablicy, zawierający wszystkie elementy, które mają przypisaną daną klasę. Kiedy użyjemy tej funkcji w odniesieniu do elementu document, cały dokument jest przeszukiwany - na wszystkich poziomach.</p> + +<p>Możesz również użyć funkcji {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} na dowolnym elemencie; wtedy zwróci jedynie elementy zawierające daną klasę, które zawierają się w obrębie elementu wskazanego przez nas.</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox"><var>var elements</var> = document.getElementsByClassName(<em>names</em>); // or: +<var>var elements</var> = rootElement.getElementsByClassName(<em>names</em>);</pre> + +<ul> + <li><var>elements</var> jest bieżącym zbiorem znalezionych elementów.</li> + <li><var>names</var> jest łańcuchem reprezentującym listę szukanych przez nas nazw klas (nazwy klas są oddzielone od siebie spacjami)</li> + <li>getElementsByClassName może być użyta na dowolnym elemencie - nie tylko w całym dokumencie.</li> +</ul> + +<h2 id="Examples" name="Examples">Przykłady</h2> + +<p>Szukamy wszystkich elementów posiadających klasę 'test':</p> + +<pre class="brush: js">document.getElementsByClassName('test');</pre> + +<p>Szukamy elementów, które posiadają jednocześnie klasę 'red' oraz 'test':</p> + +<pre class="brush: js">document.getElementsByClassName('red test');</pre> + +<p>Szukamy elementów posiadających klasę 'test', w obrębie elementu o ID 'main':</p> + +<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre> + +<p>Możemy też użyć metody Array.prototype. W ten sposób znajdziemy wszystkie elementy div posiadające klasę '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="Uwagi">Uwagi</h2> + +<p>Należy zwrócić uwagę na różnice w zwracanej wartości w zależności od składni (aby została zwrócona konkretna wartość należy posłużyć się indeksem):</p> + +<pre><!doctype html> +<html> +<head> + <meta charset="UTF-8"> + <title>Document</title> +</head> +<body> + <div id="parent-id"> + <p>hello word1</p> + <p class="test">hello word2</p> + <p >hello word3</p> + <p>hello word4</p> + </div> + <script> + var parentDOM = document.getElementById("parent-id"); + + var test=parentDOM.getElementsByClassName("test");//test is not target element + console.log(test);//HTMLCollection[1] + + var testTarget=parentDOM.getElementsByClassName("test")[0];//here , this element is target + console.log(testTarget);//<p class="test">hello word2</p> + </script> +</body> +</html></pre> + +<h2 id="Specyfikacja">Specyfikacja</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/pl/web/api/document/getelementsbyname/index.html b/files/pl/web/api/document/getelementsbyname/index.html new file mode 100644 index 0000000000..1cadc785de --- /dev/null +++ b/files/pl/web/api/document/getelementsbyname/index.html @@ -0,0 +1,35 @@ +--- +title: document.getElementsByName +slug: Web/API/Document/getElementsByName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/getElementsByName +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca listę elementów w dokumencie o żądanym atrybucie <code>name</code>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">elementy = document.getElementsByName(<i>nazwa</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>elementy</code> to lista elementów typu <code>nodeList</code></li> + <li><code>nazwa</code> to ciąg znaków reprezentujący wartość atrybutu <code>name</code> elementu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// zwraca niektóre z DIV-ów +<div name="up">200</div> +<div name="up">145</div> +<div name="down">146</div> +<div name="other">178</div> +up_divs = document.getElementsByName("up"); +dump(up_divs.item(0).tagName); // zwraca "div" +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><b>document.getElementsByName</b> zwraca listę węzłów wszystkich elementów o zadanej wartości atrybutu <code>name</code>. W przeciwieństwie do <a href="pl/DOM/element.getElementsByTagName">getElementsByTagName</a>, który analizuje samą nazwę elementu, ta metoda pracuje tylko na elementach, których atrybut <code>name</code> został wyraźnie podany.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-71555259">getElementsByName</a></p> +<p>{{ languages( { "en": "en/DOM/document.getElementsByName", "fr": "fr/DOM/document.getElementsByName", "ja": "ja/DOM/document.getElementsByName" } ) }}</p> diff --git a/files/pl/web/api/document/getelementsbytagname/index.html b/files/pl/web/api/document/getelementsbytagname/index.html new file mode 100644 index 0000000000..b4db8f428d --- /dev/null +++ b/files/pl/web/api/document/getelementsbytagname/index.html @@ -0,0 +1,108 @@ +--- +title: document.getElementsByTagName +slug: Web/API/Document/getElementsByTagName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Document/getElementsByTagName +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca listę elementów o podanej nazwie znacznika. Przeszukiwany jest cały dokument, łącznie z głównym węzłem.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>elements</em> = document.getElementsByTagName(<em>name</em>) +</pre> + +<ul> + <li><code>elements</code> is a live <code>NodeList</code> of found elements in the order they appear in the tree.</li> + <li><code>name</code> jest łańcuchem znaków reprezentującym nazwę elementów. Łańcuch znaków "*" reprezentuje wszystkie elementy.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<p>W poniższym przykładzie <code>getElementsByTagName</code> starts from a particular parent element, and searches topdown recursively through the DOM from that parent element, looking for child elements matching the tag <code>name</code> parameter.</p> + +<p>Zauważ, że gdy węzeł, w którym przywołano <code>getElementsByTagName</code>, nie jest węzłem <code>document</code>, to w rzeczywistości użyta jest metoda <a href="pl/DOM/element.getElementsByTagName">element.getElementsByTagName</a>.</p> + +<pre><html> + +<head> +<title>Przykład getElementsByTagName</title> + +<script type="text/javascript"> + +function getAllParaElems() +{ + var allParas = document.getElementsByTagName("p"); + + var num = allParas.length; + + alert("W tym dokumencie jest " + num + " elementów <p>"); +} + + +function div1ParaElems() +{ + var div1 = document.getElementById("div1") + var div1Paras = div1.getElementsByTagName("p"); + + var num = div1Paras.length; + + alert("W elemencie div1 znajduje się " + num + " elementów <p>"); +} + + +function div2ParaElems() +{ + var div2 = document.getElementById("div2") + var div2Paras = div2.getElementsByTagName("p"); + + var num = div2Paras.length; + + alert("W elemencie div2 znajduje się " + num + " elementów <p>"); +} + +</script> +</head> + +<body style="border: solid green 3px"> +<p>Trochę zewnętrznego tekstu</p> +<p>Trochę zewnętrznego tekstu</p> + + <div id="div1" style="border: solid blue 3px"> + <p>Trochę tekstu w div1</p> + <p>Trochę tekstu w div1</p> + <p>Trochę tekstu w div1</p> + + <div id="div2" style="border: solid red 3px"> + <p>Trochę tekstu w div2</p> + <p>Trochę tekstu w div2</p> + </div> + </div> + +<p>Trochę zewnętrznego tekstu</p> +<p>Trochę zewnętrznego tekstu</p> + +<button onclick="getAllParaElems();"> + pokaż wszystkie elementy p w dokumencie</button><br /> + +<button onclick="div1ParaElems();"> + pokaż wszystkie elementy p w elemencie div1</button><br /> + +<button onclick="div2ParaElems();"> + pokaż wszystkie elementy p w elemencie div2</button> + +</body> +</html> +</pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094">DOM Level 2 Core: Document.getElementsByTagName</a></p> diff --git a/files/pl/web/api/document/hasfocus/index.html b/files/pl/web/api/document/hasfocus/index.html new file mode 100644 index 0000000000..afaa6079af --- /dev/null +++ b/files/pl/web/api/document/hasfocus/index.html @@ -0,0 +1,25 @@ +--- +title: document.hasFocus +slug: Web/API/Document/hasFocus +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/hasFocus +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność <code>hasFocus</code> zwraca wartość <code>true</code>, jeżeli fokus jest zlokalizowany w dowolnym miejscu danego dokumentu. {{ Note("Ten atrybut jest częścią specyfikacji HTML 5, która jest wciąż opracowywana.") }}</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">focused = document.hasFocus(); +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#focus-management">Zarządzanie fokusem </a></p> +<p> </p> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/document.hasFocus", "es": "es/DOM/element.hasFocus", "fr": "fr/DOM/document.hasFocus", "ja": "ja/DOM/document.hasFocus" } ) }}</p> diff --git a/files/pl/web/api/document/head/index.html b/files/pl/web/api/document/head/index.html new file mode 100644 index 0000000000..d5436385fa --- /dev/null +++ b/files/pl/web/api/document/head/index.html @@ -0,0 +1,110 @@ +--- +title: Document.head +slug: Web/API/Document/head +translation_of: Web/API/Document/head +--- +<p>{{APIRef("DOM")}}</p> + +<p>Zwraca element {{HTMLElement("head")}} aktualnego dokumentu. Jeżeli występuje więcej niż jeden element <code><head></code>, zwrócony zostanie tylko pierwszy.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>var objRef</em> = document.head; +</pre> + +<h2 id="Example" name="Example">Przykład</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">Uwagi</h2> + +<p><code>document.head</code> jest atrybutem tylko do odczytu. Próby przypisania mu wartości nie spowodują żadnego efektu czy skutku ubocznego (przejdą 'po cichu') lub, jeżeli pracujemy w <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">ECMAScript Strict Mode</a> w przeglądarce Gecko, zostanie rzucony <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError"><code>TypeError</code></a>.</p> + +<h2 id="Specyfikacje">Specyfikacje</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','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial 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="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</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>4.0</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>9.0</td> + <td>11.0</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>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{domxref("document.body")}}</li> +</ul> diff --git a/files/pl/web/api/document/height/index.html b/files/pl/web/api/document/height/index.html new file mode 100644 index 0000000000..1f777a7eb5 --- /dev/null +++ b/files/pl/web/api/document/height/index.html @@ -0,0 +1,34 @@ +--- +title: document.height +slug: Web/API/Document/height +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/height +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>height</b> pobiera/ustawia wysokość dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>wysokość</i> = document.height +document.height =<i>wysokość</i> +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>wysokość</code> jest ciągiem reprezentującym wysokość dokumentu w pikselach, calach bądź poprzez <code>em</code>. Jesli nie zostanie określona jednostka (jak np. "px" w "200px"), domyślnie przyjmowane są piksele.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">// zmniejsz okno po załadowaniu +function onLoad() { + document.height = "200"; + document.width = "200"; +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zobacz także <a href="pl/DOM/document.width">DOM:document.width</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<p>{{ languages( { "en": "en/DOM/document.height" } ) }}</p> diff --git a/files/pl/web/api/document/images/index.html b/files/pl/web/api/document/images/index.html new file mode 100644 index 0000000000..e7d21794da --- /dev/null +++ b/files/pl/web/api/document/images/index.html @@ -0,0 +1,31 @@ +--- +title: document.images +slug: Web/API/Document/images +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/images +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>document.images</code> zwraca listę obrazków w dokumencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><em>listaWęzłów</em> = document.images +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var ilist = document.images; +for(var i = 0; i < ilist.length; i++) { + if(ilist[i] == "banner.gif") { + // found the banner + } +} +</pre> +<p> </p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>document.images.length</code> – własność, zwraca liczbę obrazków na stronie.</p> +<p><code>document.images</code> jest częścią DOM HTML i działa tylko dla dokumentów HTML.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117">DOM Level 2 HTML: HTMLDocument.images</a></p> +<p>{{ languages( { "ru": "ru/DOM/document.images", "en": "en/DOM/document.images", "fr": "fr/DOM/document.images" } ) }}</p> diff --git a/files/pl/web/api/document/implementation/index.html b/files/pl/web/api/document/implementation/index.html new file mode 100644 index 0000000000..3fe4d51af0 --- /dev/null +++ b/files/pl/web/api/document/implementation/index.html @@ -0,0 +1,21 @@ +--- +title: document.implementation +slug: Web/API/Document/implementation +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/implementation +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca obiekt implementacji DOM powiązanej z bieżącym dokumentem.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>obiektDOMImplementation</i> = document.DOMImplentation +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Obiekt DOMImplementaion, jeżeli jest dostępny, stanowi specjalny obiekt zapewniający możliwość kontrolowania spraw poza pojedynczym dokumentem. Na przykład interfejs <code>DOMImplementation</code> zawiera metodę <code>createDocumentType</code> pozwalającą na tworzenie DTD dla jednego lub więcej dokumentów zarządzanych przez implementację.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-90379117">implementation</a> (?)</p> +<p>{{ languages( { "en": "en/DOM/document.implementation" } ) }}</p> diff --git a/files/pl/web/api/document/importnode/index.html b/files/pl/web/api/document/importnode/index.html new file mode 100644 index 0000000000..be2cdf6367 --- /dev/null +++ b/files/pl/web/api/document/importnode/index.html @@ -0,0 +1,57 @@ +--- +title: document.importNode +slug: Web/API/Document/importNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Document/importNode +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Tworzy kopię węzła z zewnętrznego dokumentu, która może być umieszczona wewnątrz bieżącego dokumentu.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">var <em>node</em> = <em>document</em>.importNode(<em>externalNode</em>,<em>deep</em>); +</pre> + +<dl> + <dt><code>node</code></dt> + <dd>Zaimportowany węzeł<br> + Własność <code><a href="/pl/docs/Web/API/Element/parentNode">parentNode</a></code> jest ustawiona na null, ponieważ nie został jeszcze wstawiony do drzewa dokumentu</dd> + <dt><code>externalNode</code></dt> + <dd>Węzeł, bądź <code>DocumentFragment</code> przeznaczony do zaimportowania do bieżącego dokumentu.</dd> + <dt><code>deep</code></dt> + <dd>Boolean mówiący, czy importować potomki <code>externalNode</code></dd> +</dl> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">var iframe = document.getElementsByTagName("iframe")[0]; +var oldNode = iframe.contentDocument.getElementById("myNode"); +var newNode = document.importNode(oldNode,true); +document.getElementById("container").appendChild(newNode); +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Pierwotny węzeł nie jest usunięty z oryginalnego dokumentu. Importowany węzeł jest klonem oryginału .</p> + + +<p></p><p>Przed włączeniem węzłów pochodzących z zewnętrznych dokumentów do bieżącego dokumentu konieczne jest ich sklonowanie za + pomocą metody <a href="/pl/docs/Web/API/Document/importNode" title="Tworzy kopię węzła z zewnętrznego dokumentu, która może być umieszczona wewnątrz bieżącego dokumentu."><code>document.importNode()</code></a> (lub zaadaptowanie przy użyciu metody <a class="new" href="/pl/docs/Web/API/Document/adoptNode" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>document.adoptNode()</code></a>). Więcej informacji na temat własności + <a class="new" href="/pl/docs/Web/API/Node/ownerDocument" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>Node.ownerDocument</code></a> znajduje się na liście najczęściej zadawanych pytań na <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">temat + DOM w witrynie W3C</a>.</p> + + <p>Aktualnie Firefox nie wymusza tej reguły (robił to przez pewien czas podczas cykli rozwojowych Firefoksa 3, ale zbyt + dużo stron przestawało działać po wymuszeniu tej reguły). Zachęcamy autorów stron do poprawienia ich kodu dla lepszej + kompatybilności w przyszłości.</p><p></p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Core-Document-importNode">DOM Level 2 Core: Document.importNode</a></p> diff --git a/files/pl/web/api/document/index.html b/files/pl/web/api/document/index.html new file mode 100644 index 0000000000..a5aa06d6dd --- /dev/null +++ b/files/pl/web/api/document/index.html @@ -0,0 +1,332 @@ +--- +title: document +slug: Web/API/Document +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Wprowadzenie" name="Wprowadzenie">Wprowadzenie</h3> + +<p>Obiekt <code>document</code> stanowi w <a href="pl/DOM">DOM</a> ogólny sposób reprezentowania dokumentów <a href="pl/HTML">HTML</a>, <a href="pl/XHTML">XHTML</a> i <a href="pl/XML">XML</a>. Poza ogólnym interfejsem dokumentu, w ponizszej liscie uwzgledniono takze <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM HTMLDocument</a>, bedacy bardziej wyspecjalizowanym interfejsem, przeznaczonym do pracy z dokumentami HTML (np. wlasnosci takie jak <a href="pl/DOM/document.cookie">document.cookie</a>, <a href="pl/DOM/document.alinkColor">document.alinkColor</a>). Czesci tego bardziej wyspecjalizowanego interfejsu zostaly oznaczone gwiazdka (*).</p> + +<p><code>document</code> zawarty jest w obiekcie <a href="pl/DOM/window">window</a> i moze zawierac dowolna liczbe <a href="pl/DOM/element">elementów</a>.</p> + +<p>Tak jak widac na ponizszej liscie, interfejsy <code>document</code> odpowiadaja za rzeczy takie jak typ dokumentu, jego cechy, jak kolory czy formatowanie, wtyczki i aplety przedstawiane uzytkownikowi, ale sa tu tez metody do tworzenia węzłów potomnych dokumentu, a takze elementy znajdujace sie zwykle w reprezentacji dokumentu, jak <BODY>.</p> + +<h3 id="Wlasnosci" name="Wlasnosci">Wlasnosci</h3> + +<dl> + <dt><a href="pl/DOM/document.alinkColor">document.alinkColor</a>* {{ Deprecated_inline() }}</dt> + <dd>Zwraca lub ustawia kolor aktywnych odnośników w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.anchors">document.anchors</a>*</dt> + <dd>Zwraca listę wszystkich kotwic w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.applets">document.applets</a>*</dt> + <dd>Zwraca uporządkowaną listę apletów w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.bgColor">document.bgColor</a>* {{ Deprecated_inline() }}</dt> + <dd>Pobiera/ustawia kolor tła dokumentu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.body">document.body</a>*</dt> + <dd>Zwraca węzeł elementu BODY w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.characterSet">document.characterSet</a></dt> + <dd>Zwraca nazwę zestawu znaków uzytego w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.compatMode">document.compatMode</a>*</dt> + <dd>Wskazuje, czy dokument jest renderowany w trybie zgodności wstecznej czy w trybie standardów.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.contentType">document.contentType</a></dt> + <dd>Zwraca Content-Type z nagłówka MIME bieżącego dokumentu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.cookie">document.cookie</a>*</dt> + <dd>Zwraca rozdzielona średnikami listę ciasteczek dokumentu bądź zapisuje pojedyncze ciasteczko.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.defaultView">document.defaultView</a></dt> + <dd>Zwraca referencje do obiektu <code>window</code>.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.designMode">document.designMode</a>*</dt> + <dd>Pobiera/ustawia możliwość edytowania w trybie WYSIWYG za pomocą edytora <a href="pl/Midas">Midas</a>. Może zostać użyty wyłącznie w dokumentach HTML.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.doctype">document.doctype</a></dt> + <dd>Zwraca definicje typu dokumentu (DTD).</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.documentElement">document.documentElement</a></dt> + <dd>Zwraca element będący bezpośrednim dzieckiem dokumentu.W dokumentach <HTML> jest to zazwyczaj element.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.documentURIObject">document.documentURIObject</a> {{ Fx_minversion_inline(3) }}</dt> + <dd>Zwraca obiekt nsIURI reprezentujący URI dokumentu. Własność ta jest wspomagana wyłącznie z kodu JavaScriptu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.domain">document.domain</a>*</dt> + <dd>Zwraca domenę bieżącego dokumentu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.embeds">document.embeds</a>*</dt> + <dd>Zwraca listę obiektów (OBJECT) zagnieżdżonych w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.fgColor">document.fgColor</a>* {{ Deprecated_inline() }}</dt> + <dd>Pobiera/ustawia kolor pierwszoplanowy (kolor tekstu) w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.firstChild">document.firstChild</a></dt> + <dd>Zwraca pierwszy węzeł spośród bezpośrednich dzieci dokumentu (zob. własność elementów <a href="pl/DOM/element.firstChild">firstChild</a>).</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.forms">document.forms</a>*</dt> + <dd>Zwraca listę elementów FORM w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.height">document.height</a>*</dt> + <dd>Pobiera/ustawia wysokość dokumentu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.images">document.images</a>*</dt> + <dd>Zwraca listę obrazków w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.implementation">document.implementation</a>*</dt> + <dd>Zwraca obiekt implementacji DOM powiązany z bieżącym dokumentem.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.lastModified">document.lastModified</a>*</dt> + <dd>Zwraca datę ostatniej modyfikacji dokumentu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.linkColor">document.linkColor</a>* {{ Deprecated_inline() }}</dt> + <dd>Pobiera/ustawia kolor odnośników w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.links">document.links</a>*</dt> + <dd>Zwraca listę wszystkich odnośników w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.location">document.location</a>*</dt> + <dd>Zwraca URI bieżącego dokumentu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.namespaceURI">document.namespaceURI</a></dt> + <dd>Zwraca przestrzeń nazw XML dokumentu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.plugins">document.plugins</a>*</dt> + <dd>Zwraca listę dostępnych wtyczek.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.popupNode">document.popupNode</a></dt> + <dd>Zwraca węzeł, do którego odwoływał sie {{ XULElem("popup") }} (wyłącznie dokumenty XUL).</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.referrer">document.referrer</a>*</dt> + <dd>Zwraca URI strony, która przekierowała do bieżącej strony.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.styleSheets">document.styleSheets</a>*</dt> + <dd>Zwraca listę obiektów typu <a href="pl/DOM/stylesheet">stylesheet</a> w bieżącym dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.title">document.title</a>*</dt> + <dd>Zwraca tytuł bieżącego dokumentu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.tooltipNode">document.tooltipNode</a></dt> + <dd>Zwraca węzeł, który jest bieżącym celem {{ XULElem("tooltip") }}.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.URL">document.URL</a></dt> + <dd>Zwraca ciąg znaków zawierający adres URL bieżącego dokumentu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.vlinkColor">document.vlinkColor</a>* {{ Deprecated_inline() }}</dt> + <dd>Pobiera/ustawia kolor odwiedzonych odnośników.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.width">document.width</a>*</dt> + <dd>Zwraca szerokość bieżącego dokumentu.</dd> +</dl> + +<h3 id="Metody" name="Metody">Metody</h3> + +<dl> + <dt><a href="/pl/DOM/document.clear" title="pl/DOM/document.clear">document.clear</a>* {{ Deprecated_inline() }}</dt> + <dd>W wiekszosci nowoczesnych przegladarek wlacznie z Firefoksem oraz Internet Explorerem metoda ta nie robi nic.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.close" title="pl/DOM/document.close">document.close</a>*</dt> + <dd>Konczy dopisywanie do strumienia dokumentu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.createAttribute" title="pl/DOM/document.createAttribute">document.createAttribute</a></dt> + <dd>Tworzy i zwraca nowy wezel atrybutu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.createDocumentFragment" title="pl/DOM/document.createDocumentFragment">document.createDocumentFragment</a></dt> + <dd>Tworzy nowy fragment dokumentu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.createElement" title="pl/DOM/document.createElement">document.createElement</a></dt> + <dd>Tworzy nowy element o podanej nazwie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.createElementNS" title="pl/DOM/document.createElementNS">document.createElementNS</a></dt> + <dd>Tworzy nowy element o podanej nazwie i URI przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.createNSResolver" title="pl/DOM/document.createNSResolver">document.createNSResolver</a></dt> + <dd>Tworzy XPathNSResolver.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.createTextNode" title="pl/DOM/document.createTextNode">document.createTextNode</a></dt> + <dd>Tworzy nowy wezel tekstowy.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.createTreeWalker" title="pl/DOM/document.createTreeWalker">document.createTreeWalker</a></dt> + <dd>Tworzy obiekt <code><a href="/pl/DOM/treeWalker" title="pl/DOM/treeWalker">TreeWalker</a></code>.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.createEvent" title="pl/DOM/document.createEvent">document.createEvent</a></dt> + <dd>Tworzy obiekt zdarzenia.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.createRange" title="pl/DOM/document.createRange">document.createRange</a></dt> + <dd>Tworzy obiekt Range.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.execCommand" title="pl/DOM/document.execCommand">document.execCommand</a></dt> + <dd>Wykonuje komende dla edytora <a href="/pl/Midas" title="pl/Midas">Midas</a>.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.evaluate" title="pl/DOM/document.evaluate">document.evaluate</a></dt> + <dd>Wykonuje wyrazenie XPath.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.getElementById" title="pl/DOM/document.getElementById">document.getElementById</a></dt> + <dd>Zwraca referencje do elementu o podanym ID.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.getElementsByName" title="pl/DOM/document.getElementsByName">document.getElementsByName</a></dt> + <dd>Zwraca liste elementów o podanej nazwie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.getElementsByTagName" title="pl/DOM/document.getElementsByTagName">document.getElementsByTagName</a></dt> + <dd>Zwraca liste elementów o danej nazwie znacznika.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.importNode" title="pl/DOM/document.importNode">document.importNode</a></dt> + <dd>Zwraca kopie wezla z zewnetrznego dokumentu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.loadOverlay" title="pl/DOM/document.loadOverlay">document.loadOverlay</a></dt> + <dd>{{ Fx_minversion_inline(1.5) }} Laduje <a href="/pl/Nakladki_XUL" title="pl/Nakladki_XUL">nakladke XUL</a>. Dziala to tylko w dokumentach XUL.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.open" title="pl/DOM/document.open">document.open</a>*</dt> + <dd>Otwiera strumien dokumentu do zapisu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.queryCommandEnabled" title="pl/DOM/document.queryCommandEnabled">document.queryCommandEnabled</a>*</dt> + <dd>Zwraca prawde, jesli komenda edytora <a href="/pl/Midas" title="pl/Midas">Midas</a> moze byc wykonana na biezacym zakresie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.queryCommandIndeterm" title="pl/DOM/document.queryCommandIndeterm">document.queryCommandIndeterm</a>*</dt> + <dd>Zwraca prawde, jesli komenda edytora <a href="/pl/Midas" title="pl/Midas">Midas</a> jest w stanie nieokreslonym dla biezacego zakresu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.queryCommandState" title="pl/DOM/document.queryCommandState">document.queryCommandState</a>*</dt> + <dd>Zwraca prawde, jesli komenda edytora <a href="/pl/Midas" title="pl/Midas">Midas</a> zostala wykonana na biezacym zakresie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.queryCommandValue" title="pl/DOM/document.queryCommandValue">document.queryCommandValue</a>*</dt> + <dd>Zwraca wartosc biezacego zakresu dla komendy edytora <a href="/pl/Midas" title="pl/Midas">Midas</a>.Wraz z Firefoksem 2.0.0.2 queryCommandValue zwróci pusty ciag jesli wartosc nie zostala ustawiona.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.write" title="pl/DOM/document.write">document.write</a>*</dt> + <dd>Zapisuje tekst w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.writeln" title="pl/DOM/document.writeln">document.writeln</a>*</dt> + <dd>Zapisuje linie tekstu w dokumencie.</dd> +</dl> + +<p> </p> + +<p>{{ languages( { "en": "en/DOM/document", "es": "es/DOM/document", "fr": "fr/DOM/document", "ja": "ja/DOM/document", "zh-cn": "cn/DOM/document", "de" : "de/DOM/document" } ) }}</p> diff --git a/files/pl/web/api/document/lastmodified/index.html b/files/pl/web/api/document/lastmodified/index.html new file mode 100644 index 0000000000..a79e097ab8 --- /dev/null +++ b/files/pl/web/api/document/lastmodified/index.html @@ -0,0 +1,25 @@ +--- +title: document.lastModified +slug: Web/API/Document/lastModified +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/lastModified +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca datę i czas ostatniej modyfikacji dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>ciąg</i> = document.lastModified +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">dump(document.lastModified); +// zwróci np.: Tuesday, July 10, 2001 10:19:42 +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zauważ, że <b>lastModified</b> będąc ciągiem nie może zostać łatwo użyte do porównywania dat modyfikacji między dokumentami.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>(DOM Level 0 - brak w specyfikacji (?))</p> +<p>{{ languages( { "en": "en/DOM/document.lastModified" } ) }}</p> diff --git a/files/pl/web/api/document/linkcolor/index.html b/files/pl/web/api/document/linkcolor/index.html new file mode 100644 index 0000000000..ef025b4bfa --- /dev/null +++ b/files/pl/web/api/document/linkcolor/index.html @@ -0,0 +1,33 @@ +--- +title: document.linkColor +slug: Web/API/Document/linkColor +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/linkColor +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>{{ Deprecated_header() }} <code>linkColor</code> pobiera/ustawia kolor odnośników w dokumencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>kolor</i> = document.linkColor +document.linkColor =<i>kolor</i> +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>kolor</code> jest ciągiem zawierającym nazwę koloru (np. "blue", "darkblue", itp.) lub wartość szesnastkową, jak w HTML (np. "#fefdf8").</li> +</ul> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>document.linkColor</code> jest <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">przestarzałe w DOM Level 2 HTML</a>.</p> +<p>Rekomendowaną alternatywą jest pobranie/ustawienie własności CSS {{ Cssxref("color") }} na elemencie <a href="pl/HTML/Element/a">HTML anchor (<a>) links</a> (np: <code>a {color:red;}</code>).</p> +<p>Kolejną alternatywą <code>document.body.link</code> mimo, że jest <a class="external" href="http://www.w3.org/TR/html401/struct/global.html#adef-link">przestarzałe w HTML 4.01</a> szczególnie przy użyciu alternatywnego CSS.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">document.linkColor = "blue"; +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/linkcolor.asp">MSDN: Własność linkColor</a></p> +<p>{{ languages( { "en": "en/DOM/document.linkColor" } ) }}</p> diff --git a/files/pl/web/api/document/links/index.html b/files/pl/web/api/document/links/index.html new file mode 100644 index 0000000000..d4ed79c435 --- /dev/null +++ b/files/pl/web/api/document/links/index.html @@ -0,0 +1,30 @@ +--- +title: document.links +slug: Web/API/Document/links +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/links +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność <b>links</b> zwraca zestaw wszystkich elementów AREA i A z ustawioną wartością atrybutu <code>href</code>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>listaWęzłów</i> = document.links +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var links = document.links; +for(var i = 0; i < links.length; i++) { + var linkHref = document.createTextNode(links[i].href); + var lineBreak = document.createElement("br"); + document.body.appendChild(linkHref); + document.body.appendChild(lineBreak); +} +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-7068919">links </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/document.links", "it": "it/DOM/document.links", "ja": "ja/DOM/document.links" } ) }}</p> diff --git a/files/pl/web/api/document/location/index.html b/files/pl/web/api/document/location/index.html new file mode 100644 index 0000000000..6a754d5c0d --- /dev/null +++ b/files/pl/web/api/document/location/index.html @@ -0,0 +1,37 @@ +--- +title: document.location +slug: Web/API/Document/location +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/location +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Pobiera URL bieżącego dokumentu.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>ciąg</em> = document.location +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">dump(document.location); +// zwraca ciąg taki jak np.: +// <a class="external" href="http://www.peoplemagazine.com/juicybits.html" rel="freelink">http://www.peoplemagazine.com/juicybits.html</a> +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><strong>document.location</strong> działa tak samo jak <a href="/pl/DOM/document.URL">document.URL</a>. Obydwie te własności są tylko do odczytu, w przeciwieństwie do <a href="/pl/docs/web/api/Window/location">window.location</a>, które można ustawiać. Ponieważ <code>document</code> reprezentuje jeden dokument lub URL, nie można zmieniać jego lokalizacji.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>DOM Level 0 - brak w specyfikacji.</p> + +<p>{{ languages( { "en": "/en/DOM/document.location" } ) }}</p> diff --git a/files/pl/web/api/document/namespaceuri/index.html b/files/pl/web/api/document/namespaceuri/index.html new file mode 100644 index 0000000000..d6f9e8ac44 --- /dev/null +++ b/files/pl/web/api/document/namespaceuri/index.html @@ -0,0 +1,25 @@ +--- +title: document.namespaceURI +slug: Web/API/Document/namespaceURI +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/namespaceURI +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>namespaceURI</b> zwraca przestrzeń nazw XML dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>NSURI</i> = document.namespaceURI +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>NSURI</code> jest ciągiem zawierjącym przestrzeń nazw.</li> +</ul> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>DOM jako takie nie obsługuje ani nie wymaga walidacji przestrzeni nazw. Przeprowadzenie walidacji, jeśli jest taka potrzeba, zależy od aplikacji obsługującej DOM. Zauważ też, że prefiks przestrzeni nazw nie może zostać zmieniony, kiedy już raz zostanie przypisany węzłowi.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#Namespaces-Considerations">namespaceURI </a></p> +<p>{{ languages( { "en": "en/DOM/document.namespaceURI", "fr": "fr/DOM/document.namespaceURI" } ) }}</p> diff --git a/files/pl/web/api/document/open/index.html b/files/pl/web/api/document/open/index.html new file mode 100644 index 0000000000..2a7b0347b7 --- /dev/null +++ b/files/pl/web/api/document/open/index.html @@ -0,0 +1,40 @@ +--- +title: document.open +slug: Web/API/Document/open +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/open +--- +<p id="Summary">{{APIRef("DOM")}}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Metoda <b>document.open</b> otwiera strumień dokumentu do zapisu.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">document.open() +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>//W tym przykładzie zawartość dokumentu jest +//usuwana przy reinicjalizacji poprzez open() + +document.write("<html><p>wyczyść to</p></html>"); +document.open(); +//dokument jest pusty +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Jeżeli dokument docelowy istnieje, metoda ta wyczyści go (zob. powyzszy przykład). <b>document.open</b> jest wywoływane również wtedy, gdy zostanie użyte <a href="pl/DOM/document.write">document.write</a> po załadowaniu dokumentu.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-72161170">open </a></p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/document.open", "fr": "fr/DOM/document.open", "ja": "ja/DOM/document.open" } ) }}</p> diff --git a/files/pl/web/api/document/plugins/index.html b/files/pl/web/api/document/plugins/index.html new file mode 100644 index 0000000000..fb946ff710 --- /dev/null +++ b/files/pl/web/api/document/plugins/index.html @@ -0,0 +1,40 @@ +--- +title: document.plugins +slug: Web/API/Document/plugins +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/plugins +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca listę aktualnie zainstalowanych wtyczek.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>obiektPluginArray</i> = document.plugins +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p>Poniższy przykład wyświetla informację o zainstalowanych wtyczkach dla dokumentu wysokiego poziomu. Zwróć uwagę na właściwości obiektu Plugin: <b>length</b> (dla tablicy wtyczek), <b>name</b>, <b>filename</b> i <b>description</b>.</p> +<pre> <script TYPE="text/javascript"> + <!-- + var L = navigator.plugins.length + document.write( L ); + document.write("Plugins".bold()); + document.write("<BR>"); + document.write("Name | Filename | description".bold()); + document.write("<BR>"); + for(i=0; i<L; i++){ + document.write(navigator.plugins[i].name); + document.write(" | ".bold()); + document.write(navigator.plugins[i].filename); + document.write(" | ".bold()); + document.write(navigator.plugins[i].description); + document.write("<BR>"); + } + //--> + </script> +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0 - brak w specyfikacji.</p> +<p>{{ languages( { "en": "en/DOM/document.plugins" } ) }}</p> diff --git a/files/pl/web/api/document/queryselector/index.html b/files/pl/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..cecd7c4f14 --- /dev/null +++ b/files/pl/web/api/document/queryselector/index.html @@ -0,0 +1,159 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - DOM + - Metodă + - Referencje + - Selektory +translation_of: Web/API/Document/querySelector +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>Funkcja zwraca pierwszy element wewnątrz dokumentu, który pasuje do podanego selektora lub grupy selektorów.</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="brush: js">element = document.querySelector(selectors); +</pre> + +<p>gdzie</p> + +<ul> + <li><code>element</code> jest obiektem typu <a href="/en-US/docs/DOM/element" title="en-US/docs/DOM/element">element</a>.</li> + <li><code>selectors</code> jest łańcuchem znaków (<code>string</code>) zawierającym jeden lub więcej <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selektorów CSS</a> oddzielonych przecinkami.</li> +</ul> + +<h2 id="Example" name="Example">Przykład</h2> + +<p>W tym przykladzie zostaje zwrócony pierwszy element w dokumencie o klasie "<code style="font-style: normal;">myclass</code>":</p> + +<pre class="brush: js">var el = document.querySelector(".myclass"); +</pre> + +<h2 id="ExamplePowerful" name="ExamplePowerful">Przykład: Powerful</h2> + +<p><em>Selectory</em> mogą być naprawdę potężne, jak pokazano na poniższym przykładzie. Pierwszy element <code><input name="login"/></code> wewnątrz <code><div class="user-panel main"></code> w dokumencie zostaje zwrócony:</p> + +<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name='login']"); +</pre> + +<h2 id="Notes" name="Notes">Uwagi</h2> + +<p>Jeśli nie znaleziono dopasowań - zwraca null. W przeciwnym wypadku zwraca pierwszy pasujący element.</p> + +<p>Jeśli selektor zawiera ID i to ID zostaje wielokrotnie błędnie użyte w dokumencie, zwracany jest pierwszy pasujący element.</p> + +<p>Gdy podana grupa selektorów jest nieprawidłowa, zwrócony zostaje wyjątek <span style="font-family: courier,andale mono,monospace;">SYNTAX_ERR.</span></p> + +<p><code>querySelector()</code> został wprowadzony w API Selektorów.</p> + +<p>Przekazany do funkcji <code>querySelector</code> łańcuch znaków (<code>string</code>) musi być zgodny ze składnią CSS.</p> + +<p>Zgodnie z <a href="http://www.w3.org/TR/selectors-api/#grammar">API Selektorów</a> pseudoklasy CSS nigdy nie zwrócą żadnego elementu.</p> + +<p><span style="line-height: 22.0080013275147px;">Aby użyć ID lub selektorów niezgodnych ze składnią CSS (</span>np. ze względu na niewłaściwe użycie dwukropka czy spacji<span style="line-height: 22.0080013275147px;">) należy poprzedzić niezgodny znak ukośnikiem wstecznym (backslash). </span>Z racji, że w JavaScript backslash jest używany jako znak ucieczki chcąc użyć go w stringu należy wpisać go podwójnie(jeden dla stringa JavaScriptu i drugi raz dla querySelector):</p> + +<pre class="brush: html"><div id="foo\bar"></div> +<div id="foo:bar"></div> + +<script> + console.log('#foo\bar') // "#fooar" + document.querySelector('#foo\bar') // Nie pasuje do żadnego elementu + + console.log('#foo\\bar') // "#foo\bar" + console.log('#foo\\\\bar') // "#foo\\bar" + document.querySelector('#foo\\\\bar') // Odnosi się do pierwszego diva + + document.querySelector('#foo:bar') // Nie pasuje do żadnego elementu + document.querySelector('#foo\\:bar') // Odnosi się do drugiego diva +</script> +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</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>Definicja wstępna</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Zgodność z przeglądarkami</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>1</td> + <td>3.5 (1.9.1)<br> + {{bug(416317)}}</td> + <td>8</td> + <td>10</td> + <td>3.2 (525.3)<br> + {{Webkitbug("16587")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>2.1</td> + <td>yes</td> + <td>9</td> + <td>10.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + + + +<h2 id="See_also" name="See_also">Zobacz także</h2> + + + +<ul> + <li>{{domxref("document.querySelectorAll()")}}</li> + <li>{{domxref("element.querySelector()")}}</li> + <li>{{domxref("element.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Przykłady kodu z użyciem querySelector</a></li> +</ul> diff --git a/files/pl/web/api/document/referrer/index.html b/files/pl/web/api/document/referrer/index.html new file mode 100644 index 0000000000..0667be8e4c --- /dev/null +++ b/files/pl/web/api/document/referrer/index.html @@ -0,0 +1,22 @@ +--- +title: document.referrer +slug: Web/API/Document/referrer +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/referrer +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca URI strony, która przekierowała na bieżącą stronę.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>ciąg</i> = document.referrer +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jeżeli użytkownik otworzył stronę bezpośrednio (nie poprzez odnośnik, ale np. za pomocą zakładki), wartością tej właściwości jest pusty ciąg.</p> +<p>Zauważ też, że właściwość ta zwraca tylko ciąg tekstowy, nie daje dostępu do DOM strony odsyłającej.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-95229140">referrer </a></p> +<p>{{ languages( { "en": "en/DOM/document.referrer" } ) }}</p> diff --git a/files/pl/web/api/document/releasecapture/index.html b/files/pl/web/api/document/releasecapture/index.html new file mode 100644 index 0000000000..7585229fe5 --- /dev/null +++ b/files/pl/web/api/document/releasecapture/index.html @@ -0,0 +1,31 @@ +--- +title: Document.releaseCapture() +slug: Web/API/Document/releaseCapture +translation_of: Web/API/Document/releaseCapture +--- +<div>{{ ApiRef("DOM") }} {{gecko_minversion_header("2.0")}}</div> + +<div> </div> + +<p>Zwalnia śledzenie myszy, jeśli śledzenie jest ustawione na jakimś elemencie wewnątrz dokumentu. Możesz włączyć śledzenie wywołując {{domxref("element.setCapture()")}}.</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox">document.releaseCapture() +</pre> + +<p>Po zwolnieniu śledzenia, zdarzenia myszy nie będą przekierowywane do elementu dla którego śledzenie było włączone.</p> + +<h2 id="Example" name="Example">Przykład</h2> + +<p>Zobacz przykład <a href="/en-US/docs/Web/API/element.setCapture#Example">przykład</a> dla {{domxref("element.setCapture()")}}.</p> + +<h2 id="Specification" name="Specification">Specyfikacja</h2> + +<p>Oparta na implementacji Internet Explorera.</p> + +<h2 id="See_also" name="See_also">Zobacz także</h2> + +<ul> + <li>{{domxref("element.setCapture()")}}</li> +</ul> diff --git a/files/pl/web/api/document/stylesheets/index.html b/files/pl/web/api/document/stylesheets/index.html new file mode 100644 index 0000000000..4c8312b281 --- /dev/null +++ b/files/pl/web/api/document/stylesheets/index.html @@ -0,0 +1,19 @@ +--- +title: document.styleSheets +slug: Web/API/Document/styleSheets +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność <b>styleSheets</b> zwraca listę obiektów <code>stylesheet</code> w bieżącym dokumencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>listaWęzłów</i> = document.styleSheets +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 2.</p> +<p>{{ languages( { "en": "en/DOM/document.styleSheets", "ja": "ja/DOM/document.styleSheets" } ) }}</p> diff --git a/files/pl/web/api/document/title/index.html b/files/pl/web/api/document/title/index.html new file mode 100644 index 0000000000..0a379426e5 --- /dev/null +++ b/files/pl/web/api/document/title/index.html @@ -0,0 +1,45 @@ +--- +title: document.title +slug: Web/API/Document/title +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/title +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Pobiera lub ustawia tytuł dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>tytul</i> =<i>document</i>.title; +</pre> +<ul> + <li><code>tytul</code> jest łańcuchem znaków zawierającym tytuł dokumentu. Jeśli tytuł został nadpisany poprzez ustawienie <code>document.title</code>, zwraca tę wartość. W przeciwnym wypadku zwraca tytuł określony w znaczniku (zobacz poniższe {{ Anch("Uwagi") }}).</li> +</ul> +<pre class="eval"><i>document</i>.title =<i>nowyTytul</i>; +</pre> +<ul> + <li><code>nowyTytul</code> jest nowym tytułem dokumentu. Przypisanie to ma wpływ na wartość zwracaną przez <code>document.title</code> oraz wyświetlany tytuł dokumentu (np. w pasku tytułowym okna), ale nie wpływa na DOM dokumentu (np. zawartość elementu <code><title></code> w dokumencie HTML).</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><html> +<head> + <title>Hello World!</title> +</head> +<body> + <script> + alert(document.title); // wyswietla "Hello World!" + document.title = "Goodbye World!"; + alert(document.title); // wyswietla "Goodbye World!" + </script> +</body> +</html> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Własność ta ma zastosowanie w HTML, SVG, XUL i innych dokumentach w Gecko.</p> +<p>Dla dokumentów HTML początkową wartością <code>document.title</code> jest zawartość tekstowa elementu <code><title></code>. Dla XUL-a jest to wartość atrybutu {{ XULAttr("title") }} elementu {{ XULElem("window") }} lub innego elementu XUL najwyższego poziomu.</p> +<p>W XUL-u próba dostępu do <code>document.title</code> zanim jeszcze dokument zostanie w pełni załadowany może skutkować niepożądanym zachowaniem (<code>document.title</code> może zwrócić pusty łańcuch znaków, a ustawienie <code>document.title</code> może nie mieć żadnego efektu).</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-18446827">DOM Level 2 HTML: document.title</a></p> +<p>{{ languages( { "en": "en/DOM/document.title" } ) }}</p> diff --git a/files/pl/web/api/document/url/index.html b/files/pl/web/api/document/url/index.html new file mode 100644 index 0000000000..90bb037e8b --- /dev/null +++ b/files/pl/web/api/document/url/index.html @@ -0,0 +1,25 @@ +--- +title: document.URL +slug: Web/API/Document/URL +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/URL +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca URL bieżącego dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>ciąg</i> = document.URL +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var currentURL = document.URL; +alert(currentURL); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>URL ma zastąpić używaną w DOM Level 0 własność <code>document.location.href</code>. Jednakże, w przeciwieństwie do niej, <code>document.URL</code> nie można ustawiać.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-46183437">DOM Level 2 HTML: URL</a></p> +<p>{{ languages( { "en": "en/DOM/document.URL", "es": "es/DOM/document.URL", "ja": "ja/DOM/document.URL" } ) }}</p> diff --git a/files/pl/web/api/document/vlinkcolor/index.html b/files/pl/web/api/document/vlinkcolor/index.html new file mode 100644 index 0000000000..b33a53c482 --- /dev/null +++ b/files/pl/web/api/document/vlinkcolor/index.html @@ -0,0 +1,29 @@ +--- +title: document.vlinkColor +slug: Web/API/Document/vlinkColor +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/vlinkColor +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca/ustawia kolor odwiedzonych linków w dokumencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>kolor</i> = document.vlinkColor +document.vlinkColor =<i>kolor</i> +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>kolor</code> jest ciągiem zawierającym nazwę koloru (np. "blue", "darkblue", itp.) lub wartość szesnastkową (np. "#fefdf8").</li> +</ul> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Domyślną wartością tej własności jest + <i> + purple</i> + .</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0 - brak w specyfikacji.</p> +<p>{{ languages( { "en": "en/DOM/document.vlinkColor" } ) }}</p> diff --git a/files/pl/web/api/document/width/index.html b/files/pl/web/api/document/width/index.html new file mode 100644 index 0000000000..af36011079 --- /dev/null +++ b/files/pl/web/api/document/width/index.html @@ -0,0 +1,28 @@ +--- +title: document.width +slug: Web/API/Document/width +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/width +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca szerokość bieżącego dokumentu w pikselach.</p> +<p>Nie obsługiwana przez IE.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>piksele</i> = document.width +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">function init() { + alert("Szerokość dokumentu wynosi " + document.width + " pikseli."); +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zobacz także <a href="pl/DOM/document.height">DOM:document.height</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<p>{{ languages( { "en": "en/DOM/document.width" } ) }}</p> diff --git a/files/pl/web/api/document/write/index.html b/files/pl/web/api/document/write/index.html new file mode 100644 index 0000000000..24daccf070 --- /dev/null +++ b/files/pl/web/api/document/write/index.html @@ -0,0 +1,38 @@ +--- +title: document.write +slug: Web/API/Document/write +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/write +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zapisuje ciąg tekstu w strumieniu dokumentu otwartym przez <a href="pl/DOM/document.open">document.open</a>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">document.write(<i>tekst</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>tekst</code> jest ciągiem znaków preznaczonym do zapisania w dokumencie.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>document.open(); +document.write("<h1>witam!</h1>"); +document.close(); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zapis do dokumentu, który już się załadował, bez wywoływania <code>document.open</code> spowoduje automatyczne przeprowadzenie <code>document.open</code>. Zaleca się wywołanie <a href="pl/DOM/document.close">document.close</a> po skończeniu zapisu, aby poinformować przeglądarkę, by zakończyła ładowanie strony. Tekst, który zapisujesz, jest parsowany i trafia do modelu struktury dokumentu. W poniższym przykładzie element H1 staje się węzłem. Jeżeli wywołanie <code>document.write()</code> zostało zagnieżdżone bezpośrednio w kodzie HTML, nie spowoduje ono uruchomienia <code>document.open</code>. Np.:</p> +<pre> <div> + <script type="text/javascript"> + document.write("<h1>Main title</h1>") + </script> + </div> +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-75233634">write </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/document.write", "fr": "fr/DOM/document.write", "ja": "ja/DOM/document.write" } ) }}</p> diff --git a/files/pl/web/api/document/writeln/index.html b/files/pl/web/api/document/writeln/index.html new file mode 100644 index 0000000000..f70d4f72a4 --- /dev/null +++ b/files/pl/web/api/document/writeln/index.html @@ -0,0 +1,41 @@ +--- +title: document.writeln +slug: Web/API/Document/writeln +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/writeln +--- +<p id="Summary">{{APIRef("DOM")}}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zapisuje w dokumencie ciąg tekstu, a po nim znak nowej linii.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">document.writeln(<i>linia</i>) +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<ul> + <li><code>linia</code> jest ciągiem zawierającym wiersz tekstu do wpisania.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>document.writeln("<p>podaj hasło:</p>"); +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><b>document.writeln</b> nie różni się niczym od <a href="pl/DOM/document.write">document.write</a>, poza tym, że dodaje na końcu znak nowego wiersza.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-35318390">writeln </a></p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/document.writeln", "ja": "ja/DOM/document.writeln" } ) }}</p> diff --git a/files/pl/web/api/domapplicationsmanager/getall/index.html b/files/pl/web/api/domapplicationsmanager/getall/index.html new file mode 100644 index 0000000000..272c82b938 --- /dev/null +++ b/files/pl/web/api/domapplicationsmanager/getall/index.html @@ -0,0 +1,47 @@ +--- +title: DOMApplicationsManager.getAll() +slug: Web/API/DomApplicationsManager/getAll +translation_of: Archive/Marketplace/API/DOMApplicationsManager/getAll +--- +<p><span style="display: none;"> </span> </p> + +<pre>{{ ApiRef("Apps") }}</pre> + +<p>{{ non-standard_header() }}</p> + +<h2 id="Summary">Summary</h2> + +<p>Lists all installed apps in the user's repository.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre>window.navigator.mozApps.mgmt.getAll() +</pre> + +<h3 id="Return_value">Return value</h3> + +<p><code>getAll()</code> returns a <code>pendingGetAll</code> object. Callers are expected to set the <code>onsuccess</code> and <code>onerror</code> callback properties of the returned object.</p> + +<p><code>pendingGetAll.result</code> will be an array of <code>App</code> objects that contains all the apps installed in the current browser. <code>pendingGetAll.result</code> will be the empty list if no apps are installed. <code>onerror</code> will be called if a serious problem occurs while checking this.</p> + +<p>This is a privileged call. <code>navigator.mozApps.mgmt</code> will be <code>null</code> if you do not have the privilege to query apps.</p> + +<h3 id="Errors">Errors</h3> + +<p>The following error can be returned in <code>DOMRequest.error</code>.</p> + +<dl> +</dl> + +<dl> + <dt>DENIED</dt> + <dd>Permission denied.</dd> +</dl> + +<h2 id="Related_topics">Related topics</h2> + +<ul> + <li><a href="/en-US/docs/Web/Apps/JavaScript_API">Apps JavaScript API</a></li> +</ul> + +<p><span style="display: none;"> </span> </p> diff --git a/files/pl/web/api/domapplicationsmanager/index.html b/files/pl/web/api/domapplicationsmanager/index.html new file mode 100644 index 0000000000..e19495d68e --- /dev/null +++ b/files/pl/web/api/domapplicationsmanager/index.html @@ -0,0 +1,86 @@ +--- +title: DOMApplicationsManager +slug: Web/API/DOMApplicationsManager +tags: + - API + - Apps + - Apps API + - NeedsTranslation + - TopicStub +translation_of: Archive/Marketplace/API/DOMApplicationsManager +--- +<p>{{ ApiRef("Apps") }}</p> + +<p>{{ non-standard_header() }}</p> + +<p>Provides support for managing, and Open Web apps in a browser. A manager can be accessed via {{domxref("DOMApplicationsRegistry.mgmt", "Navigator.mozApps.mgmt")}}</p> + +<h2 id="Property">Property</h2> + +<dl> + <dt>{{domxref("DOMApplicationsManager.oninstall")}}</dt> + <dd>Is an {{domxref("EventManager")}} call when <code>install</code> event is received.</dd> + <dt>{{domxref("DOMApplicationsManager.onuninstall")}}</dt> + <dd>Is an {{domxref("EventManager")}} call when <code>uninstall</code> event is received.</dd> + <dt>{{domxref("DOMApplicationsManager.onenablestatechange")}}</dt> + <dd>Is an {{domxref("EventManager")}} call when <code>enablestatechange</code> event is received.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{ domxref("DOMApplicationsManager.getAll()") }}</dt> + <dd>Returns all applications.</dd> +</dl> + +<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>{{ CompatUnknown() }}</td> + <td>16.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 Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>16.0</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/pl/web/api/element/addeventlistener/index.html b/files/pl/web/api/element/addeventlistener/index.html new file mode 100644 index 0000000000..781ec7f3b6 --- /dev/null +++ b/files/pl/web/api/element/addeventlistener/index.html @@ -0,0 +1,109 @@ +--- +title: element.addEventListener +slug: Web/API/Element/addEventListener +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/EventTarget/addEventListener +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <code>addEventListener</code> pozwala zarejestrować obserwatora zdarzeń dla określonego typu zdarzenia na elemencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><em>target</em>.addEventListener(<em>type</em>, <em>listener</em>, <em>useCapture</em>); +</pre> +<dl> + <dt> + type </dt> + <dd> + Łańcuch przedstawiający typ zdarzenia do nasłuchu.<span class="comment">Need a link here</span></dd> + <dt> + listener </dt> + <dd> + Obiekt, który otrzymuje zawiadomienie, gdy nastąpi zdarzenie określonego typu. Musi być zaimplementowanym obiektem interfejsu <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener"><code>EventListener</code></a> lub pojedynczą <a href="/pl/Przewodnik_po_języku_JavaScript_1.5#Funkcje" title="pl/Przewodnik_po_języku_JavaScript_1.5#Funkcje">funkcją</a> JavaScript.</dd> + <dt> + useCapture </dt> + <dd> + Jeśli zostanie ustawione na <code>true</code>, <code>useCapture</code> wskazuje, że użytkownik chce przechwytywać zdarzenia. Po rozpoczęciu przechwytywania, wszystkie zdarzenia typu <code>type</code> będą przekazywane do naszego <code>listener</code>'a zanim zostaną wysłane do innych obiektów nasłuchujących (<code>EventTarget</code>) znajdujących się poniżej w drzewie DOM. Zdarzenia, które propagują w górę drzewa nie uruchamiają systemu nasłuchującego (<code>listener</code>) ustawionego na przechwytywanie.</dd> +</dl> +<p>Dla uzyskania szczegółowego objaśnienia zobacz <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a>.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> <html> + <head> + <title>Przykład zdarzenia DOM</title> + <style type="text/css"> + #t { border: 1px solid red } + #t1 { background-color: pink; } + </style> + <script type="text/javascript"> + + // Funkcja zmieniająca zawartość komórki tabeli t2 + function modifyText() { + var t2 = document.getElementById("t2"); + t2.firstChild.nodeValue = "Trzy"; + } + + // Funkcja dodająca obserwatora zdarzeń dla tabeli t + function load() { + var el = document.getElementById("t"); + el.addEventListener("click", modifyText, false); + } + + </script> + </head> + <body onload="load();"> + <table id="t"> + <tr><td id="t1">Jeden</td></tr> + <tr><td id="t2">Dwa</td></tr> + </table> + </body> + </html> +</pre> +<p>W powyższym przykładzie, funkcja <code>modifyText()</code> została zarejestrowana za pomocą <code>addEventListener()</code> do obsługi zdarzenia typu <code>click</code> na tabeli <code>t</code>. Kliknięcie w dowolnym miejscu tej tabeli rozpocznie propagowanie zdarzenia i wywoła funkcję <code>modifyText()</code>.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<h4 id="Po_co_u.C5.BCywa.C4.87_addEventListener.3F" name="Po_co_u.C5.BCywa.C4.87_addEventListener.3F">Po co używać <code>addEventListener</code>?</h4> +<p><code>addEventListener</code> daje możliwość zarejestrowania obsługi zdarzenia według specyfikacji W3C DOM. Korzyści są następujące:</p> +<ul> + <li>Pozwala na dodanie więcej niż jednego obiektu obsługującego zdarzenie. Jest to szczególnie użyteczne przy bibliotekach <a href="/pl/DHTML" title="pl/DHTML">DHTML</a> czy <a href="/pl/Rozszerzenia" title="pl/Rozszerzenia">rozszerzeniach Mozilli</a>, które pracują, gdy uruchomione są inne biblioteki i rozszerzenia,</li> + <li>Daje większą kontrolę nad etapem aktywacji obiektu nasłuchującego <code>listener</code> (przechwytywanie vs. propagowanie),</li> + <li>Działa dla każdego elementu z DOM, a nie tylko dla elementów HTML.</li> +</ul> +<p>Alternatywne, starsze sposoby rejestracji zdarzeń są <a href="#Starsze_sposoby_do.C5.82.C4.85czania_zdarze.C5.84">opisane poniżej</a>.</p> +<h4 id="Dodawanie_nas.C5.82uchu_podczas_obs.C5.82ugi_zdarzenia" name="Dodawanie_nas.C5.82uchu_podczas_obs.C5.82ugi_zdarzenia">Dodawanie nasłuchu podczas obsługi zdarzenia</h4> +<p>Jeśli podczas obsługi zdarzenia zostanie dodany nowy obiekt nasłuchujący to zdarzenie, nie zostanie on uruchomiony dla tego zdarzenia. Może zostać wywołany podczas dalszego etapu przepływu zdarzeń(<code>Event flow</code>), np. w fazie propagowania zdarzenia w górę drzewa DOM.</p> +<h4 id="Identyczne_obiekty_nas.C5.82uchuj.C4.85ce" name="Identyczne_obiekty_nas.C5.82uchuj.C4.85ce">Identyczne obiekty nasłuchujące</h4> +<p>Jeśli kilka identycznych obiektów nasłuchujących zostanie zarejestrowanych dla tego samego zdarzenia (<code>EventTarget</code>) z tymi samymi parametrami to duplikaty są ignorowane. Obiekt nasłuchujący nie będzie wywołany więcej niż jeden raz. Powielone powiązania nie muszą być usuwane ręcznie za pomocą funkcji <code><a href="/pl/DOM/element.removeEventListener" title="pl/DOM/element.removeEventListener">removeEventListener</a></code>, ponieważ są one usuwane automatycznie.</p> +<h4 id="Warto.C5.9B.C4.87_this" name="Warto.C5.9B.C4.87_this">Wartość <code>this</code></h4> +<p>Doczepianie akcji używając <code>addEventListener()</code> zmienia wartość <code>this</code>—zauważ, że wartość <code>this</code> ijest przekazywana funkcji przez zdarzenie.</p> +<p>W powyższym przykładzie, wartość <code>this</code> wewnątrz <code>modifyText()</code> gdy zostanie wywołana ze zdarzenia onclick event jest odwołaniem do tabeli 't'. Jeśli obsługa zdarzenia onclick jest dodana w źródle HTML:</p> +<pre><table id="t" onclick="modifyText();"> + ... +</table> +</pre> +<p>to wartość <code>this</code> wewnątrz funkcji <code>modifyText()</code> wywołanej z poziomu zdarzenia onclick będzie odwołaniem od obiektu globalnego(window).</p> +<h4 id="Internet_Explorer" name="Internet_Explorer">Internet Explorer</h4> +<p>W IE 8 i niższych należy użyć <code>attachEvent</code> zamiast standardowego <code>addEventListener</code>. By wspierać IE, powyższy przykład może zostać zmodyfikowany do:</p> +<pre>if (el.addEventListener){ + el.addEventListener('click', modifyText, false); +} else if (el.attachEvent){ + el.attachEvent('onclick', modifyText); +} +</pre> +<h4 id="Starsze_sposoby_do.C5.82.C4.85czania_zdarze.C5.84" name="Starsze_sposoby_do.C5.82.C4.85czania_zdarze.C5.84">Starsze sposoby dołączania zdarzeń</h4> +<p><code>addEventListener()</code> zostało wprowadzone wraz ze specyfikacją DOM 2 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a>. Wcześniej, zdarzenia były dołączone jak pokazano poniżej:</p> +<pre>// Using a function reference—note lack of '()' +el.onclick = modifyText; + +// Używając deklaracji funkcji +element.onclick = function(){ + // ... logika funkcji ... + }; +</pre> +<p>Ta metoda zastępuje istniejącą obsługę zdarzenia <code>onclick</code> na elemencie jeśli jest jakakolwiek. Podobnie do innych zdarzeń 'on' takich jak <code>onblur</code>, <code>onkeypress</code>, i tak dalej.</p> +<p>Ponieważ była to istotna część DOM 0, ta metoda jest bardzo szeroko wspierana i nie wymaga specjalnych kodów do różnych przeglądarek; stąd też jest to normalnie używana do dynamicznego zaczepienia obsługi zdarzenia jeśli nie potrzeba dodatkowych możliwości <code>addEventListener()</code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener">DOM Level 2 Events: addEventListener</a></p> +<p>{{ languages( { "en": "en/DOM/element.addEventListener", "fr": "fr/DOM/element.addEventListener", "ja": "ja/DOM/element.addEventListener" } ) }}</p> diff --git a/files/pl/web/api/element/appendchild/index.html b/files/pl/web/api/element/appendchild/index.html new file mode 100644 index 0000000000..ae2b141231 --- /dev/null +++ b/files/pl/web/api/element/appendchild/index.html @@ -0,0 +1,52 @@ +--- +title: element.appendChild +slug: Web/API/Element/appendChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/appendChild +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Metoda <code>Node.appendChild()</code> wstawia określony węzeł na koniec listy dzieci określonego rodzica. Jeśli węzeł ma już rodzica, jest on najpierw od niego oddzielany.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>var dziecko = element</em>.appendChild(<em>dziecko</em>) +</pre> + +<ul> + <li><code>element</code> jest rodzicem elementu.</li> + <li><code>dziecko</code> jest węzłem.</li> +</ul> + +<h3 id="Opis">Opis</h3> + +<p>Metoda <code>appendChild</code> zwraca referencję do dodanego węzła. </p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>// Tworzy nowy element paragrafu +var p = document.createElement("p"); + +// Wstawia go na koniec ciała dokumentu +document.body.appendChild(p); +</pre> + +<p> </p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><code>appendChild</code> jest jedną z fundamentalnych metod w programowaniu z użyciem DOM. Metoda ta wstawia nowy węzeł do struktury DOM dokumentu HTML. Jest to druga część procesu <em>stwórz-i-wstaw</em>, podstawowego przy programowym budowaniu strony. Inne związane z tym metody to <a href="/pl/DOM/element.insertBefore" title="pl/DOM/element.insertBefore">insertBefore</a>, <a href="/pl/DOM/element.replaceChild" title="pl/DOM/element.replaceChild">replaceChild</a> i <a href="/pl/DOM/element.removeChild" title="pl/DOM/element.removeChild">removeChild</a>.</p> + +<p>Jeśli <code>dziecko</code> jest referencją do węzła, który istnieje już w dokumencie, <code>appendChild</code> przenosi go z dotychczasowej pozycji w nowe miejsce (tj. nie ma potrzeby odzielać węzeł od jego rodzica przed wstawieniem go do innego węzła).</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-184E7107">DOM Level 2 Core: appendChild</a></p> + +<p>{{ languages( { "en": "en/DOM/element.appendChild", "fr": "fr/DOM/element.appendChild", "ja": "ja/DOM/element.appendChild" } ) }}</p> diff --git a/files/pl/web/api/element/attributes/index.html b/files/pl/web/api/element/attributes/index.html new file mode 100644 index 0000000000..5ae9839a79 --- /dev/null +++ b/files/pl/web/api/element/attributes/index.html @@ -0,0 +1,82 @@ +--- +title: element.attributes +slug: Web/API/Element/attributes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/attributes +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><strong>attributes</strong> zwraca <em>kolekcję</em> atrybutów określonych dla danego elementu.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">var <var>kolekcjaAtrybutów</var> = elementNodeReference.attributes; +</pre> +<p>Typem zwracanego obiektu kolekcji jest <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1780488922">NamedNodeMap</a>. Jeśli element nie ma określonych żadnych atrybutów, zwrócony obiekt ma zerową długość. Właściwość <code>attributes</code> jest tylko do odczytu.</p> +<p><var>kolekcjaAtrybutów</var> to referencja do kolekcji atrybutów.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// weź pierwszy element <p> z dokumentu +var para = document.getElementsByTagName("p")[0]; +var atts = para.attributes; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zwracany obiekt ma typ <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1780488922">NamedNodeMap</a>, nazywany także <em>kolekcją</em>, będący listą węzłów, a nie ciągów znakowych. Właściwości obiektów atrybutów dostępne są poprzez indeks, tak jak w poniższym przykładzie, który pobiera parę nazwa/wartość pierwszego atrybutu akapitu "p1":</p> +<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" +"http://www.w3.org/TR/html4/strict.dtd"> + +<html> + + <head> + <title>Attributes example</title> + <script type="text/javascript"> + function showFirstAttr() + { + var FirstParg = document.getElementById("p1"); + var outputText = document.getElementById("result"); + + if (FirstParg.hasAttributes()) + // sprawdźmy, czy FirstParg ma atrybuty + { + outputText.value = FirstParg.attributes[0].name + "->" + + FirstParg.attributes[0].value; + } + else + { + outputText.value = "Brak atrybutów do wyświetlenia" + }; + } + </script> + </head> + +<body> + <p id="p1" style="color: green;">Przykładowy akapit</p> + <form action=""> + <p><input type="button" value="Pokaż nazwę i wartość pierwszego atrybutu" + onclick="showFirstAttr();"> + <input id="result" type="text" value=""></p> + </form> +</body> +</html> +</pre> +<p>Obiekt z atrybutami jest <em>kolekcją</em>, która podobna jest do tablicy, ponieważ ma właściwość <code>length</code>, a do atrybutów można odnosić się poprzez indeks liczbowy, ale kolekcja nie posiada specjalnych metod, jakie mają tablice, jak <code>join</code>, <code>split</code>, itd.</p> +<p>Kolejność w kolekcji atrybutów nie jest wiarygodna - dwie przeglądarki po otrzymaniu takiego samego kodu znaczników mogą zwracać różnie uporządkowane obiekty <code>attributes</code>.</p> +<p>By uzyskać dostęp do konkretnego atrybutu, użyj metody <a href="/pl/DOM/element.getAttribute" title="pl/DOM/element.getAttribute">getAttribute</a> lub zapisu z użyciem kropki:</p> +<pre> // pokaż id elementu, jeśli element go posiada + if(element.id) + { + alert("id elementu to " + element.id); + } + else + { + alert("element nie ma id"); + }; +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-84CF096">W3C DOM Level 2 Core: attributes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-84CF096">W3C DOM Level 3 Core: attributes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1780488922">W3C DOM Level 3 NamedNodeMap interface</a></li> +</ul> +<p>{{ languages( { "en": "en/DOM/element.attributes", "fr": "fr/DOM/element.attributes", "ja": "ja/DOM/element.attributes", "zh-cn": "cn/DOM/element.attributes" } ) }}</p> diff --git a/files/pl/web/api/element/blur/index.html b/files/pl/web/api/element/blur/index.html new file mode 100644 index 0000000000..1febd21617 --- /dev/null +++ b/files/pl/web/api/element/blur/index.html @@ -0,0 +1,21 @@ +--- +title: element.blur +slug: Web/API/Element/blur +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLOrForeignElement/blur +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <b>blur</b> dezaktywuje bieżący element (usuwa focus).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">element.blur() +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-28216144">blur</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.blur", "fr": "fr/DOM/element.blur" } ) }}</p> diff --git a/files/pl/web/api/element/childnodes/index.html b/files/pl/web/api/element/childnodes/index.html new file mode 100644 index 0000000000..2f15d119e2 --- /dev/null +++ b/files/pl/web/api/element/childnodes/index.html @@ -0,0 +1,49 @@ +--- +title: element.childNodes +slug: Web/API/Element/childNodes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/childNodes +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>childNodes </b> zwraca kolekcję węzłów-dzieci elementu.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">var <var>listaWęzłów</var> = referencjaDoWęzłaElementu.childNodes; +</pre> +<p><var>listaWęzłów</var> to uporządkowana kolekcja obiektów węzłów, będącymi dziećmi bieżącego elementu. Jeśli element nie ma dzieci, <var>listaWęzłów</var> jest pusta.</p> +<p><var>listaWęzłów</var> to zmienna przechowująca listę węzłów. Lista taka ma typ <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">NodeList</a>. Właściwość <code>childNodes</code> jest tylko do odczytu.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// parg to referencja do obiektu elementu <p> +if (parg.hasChildNodes()) +// sprawdzamy czy obiekt nie jest pusty - czy ma dzieci + { + var children = parg.childNodes; + for (var i = 0; i < children.length; i++) + { + // zrob cos z kazdym dzieckiem jako children[i] + // uwaga: lista "żyje", dodawanie bądź usuwanie dzieci ją zmieni + }; + }; +</pre> +<pre>// sposób na usunięcie wszystkich dzieci węzła +// box to referencja do obiektu elementu, który ma dzieci +while (box.firstChild) + { + //lista jest "żywa", więc będzie przeindeksowana po każdym wywołaniu + box.removeChild(box.firstChild); + }; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Elementy kolekcji węzłów są obiektami, a nie łańcuchami. By pobrać dane z tych obiektów, musisz użyć ich atrybutów (np. <code>referencjaDoWęzłaElementu.childNodes{{ mediawiki.external(1) }}.nodeName</code> by pobrać nazwę).</p> +<p>Obiekt <code>document</code> ma dwoje dzieci: deklarację DOCTYPE i element <code>HTML</code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</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></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></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></li> +</ul> +<p>{{ languages( { "en": "en/DOM/element.childNodes", "fr": "fr/DOM/element.childNodes", "ja": "ja/DOM/element.childNodes", "zh-cn": "cn/DOM/element.childNodes" } ) }}</p> diff --git a/files/pl/web/api/element/classlist/index.html b/files/pl/web/api/element/classlist/index.html new file mode 100644 index 0000000000..5e7112b8d5 --- /dev/null +++ b/files/pl/web/api/element/classlist/index.html @@ -0,0 +1,264 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +translation_of: Web/API/Element/classList +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Element.classList</strong></code> jest właściwością tylko do odczytu, która zwraca zbiór live {{domxref("DOMTokenList")}} atrybutów klasy danego elementu.</p> + +<p>Używanie <code>classList</code> stanowi wygodną alternatywę uzyskiwania dostępu do listy klas danego elementu w formie skompresowanego stringa poprzez {{domxref("element.className")}}.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList; +</pre> + +<p><em>elementClasses</em> to <a href="/en-US/docs/DOM/DOMTokenList">DOMTokenList</a> reprezentujący atrybuty klasy <em>elementNodeReference</em>. Jeśli atrybut klasy nie został określony lub jest pusty, <em>elementClasses.length</em> zwraca 0. Sam w sobie <code>element.classList</code> jest tylko do odczytu, ale można go mimo to modyfikować poprzez stosowanie metod <code>add()</code> i <code>remove()</code>.</p> + +<h2 id="Metody">Metody</h2> + +<dl> + <dt>add( String [, String] )</dt> + <dd>Nadaje określone wartości klasy. Jeśli wartości te już istnieją w atrybucie elementu, wówczas zostają zignorowane.</dd> + <dt>remove( String [,String] )</dt> + <dd>Usuwa określone wartości klasy.</dd> + <dt><strong>item</strong> ( Number )</dt> + <dd>Zwraca wartosć klasy wg indeksu w zbiorze.</dd> + <dt><strong>toggle</strong> ( String [, force] )</dt> + <dd>Jeśli występuje tylko jeden argument: Przełącza wartość klasy, tzn. jeśli klasa istnieje, wówczas <u>zostaje usunięta</u> i zwraca <code>false</code>, jeśli nie, wówczas <u>dodaje ją</u> i zwraca <code>true</code>.<br> + Jeśli występuje również drugi argument: Jeśli drugi argument uznawany jest za true, dodaje określoną wartość klasy, natomiast jeśli zostaje uznany za false, wówczas zostaje usunięty.</dd> + <dt>contains( String )</dt> + <dd>Sprawdza, czy określona wartość klasy istnieje w atrybucie klasy danego elementu.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: js">// div jest obiektem odwołującym się do elementu <div> o klasie ="foo bar" +div.classList.remove("foo"); +div.classList.add("anotherclass"); + +// jeśli ustawiona jest widoczność usuwa ją, w przeciwnym wypadku dodaje +div.classList.toggle("visible"); + +// dodaj/usuń (add/remove) jest widoczne, w zależności od warunku testowego, <code>i</code> mniejsze od 10 +div.classList.toggle("visible", i < 10 ); + +alert(div.classList.contains("foo")); + +// dodaj lub usuń złożone klasy +div.classList.add("foo", "bar"); +div.classList.remove("foo", "bar");</pre> + +<div class="note"> +<p>Wersje Firefoxa wcześniejsze niż 26 nie implementują użycia niektórych argumentów metod dodaj/usuń/przełącz (add/remove/toggle). Zobacz <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">// Źródło: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca +;(function() { + // pomocnicy + var regExp = function(name) { + return new RegExp('(^| )'+ name +'( |$)'); + }; + var forEach = function(list, fn, scope) { + for (var i = 0; i < list.length; i++) { + fn.call(scope, list[i]); + } + }; + + // obiekt listy klasy z podstawowymi metodami + function ClassList(element) { + this.element = element; + } + + ClassList.prototype = { + add: function() { + forEach(arguments, function(name) { + if (!this.contains(name)) { + this.element.className += this.element.className.length > 0 ? ' ' + name : name; + } + }, this); + }, + remove: function() { + forEach(arguments, function(name) { + this.element.className = + 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); + }, + // bonus.. + replace: function(oldName, newName) { + this.remove(oldName), this.add(newName); + } + }; + + // IE8/9, Safari + if (!('classList' in Element.prototype)) { + Object.defineProperty(Element.prototype, 'classList', { + get: function() { + return new ClassList(this); + } + }); + } + + // replace() wspierane przez pozostałe przeglądarki + if (window.DOMTokenList && DOMTokenList.prototype.replace == null) { + DOMTokenList.prototype.replace = ClassList.prototype.replace; + } +})(); +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</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="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</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>Zgodność podstawowa</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>Cecha</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>Wsparcie podstawowe</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] Brak wsparcia dla elementów SVG. Zobacz <a href="https://connect.microsoft.com/IE/feedback/details/1046039/classlist-not-working-on-svg-elements">raport w tej kwestii na stronie Microsoftu</a>.<br> + [2] Internet Explorer nigdy tego nie zimplementował. Zobacz <a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">raport w tej kwestii na stronie Microsoftu</a>.</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{domxref("element.className")}}</li> + <li>{{domxref("DOMTokenList")}}</li> +</ul> diff --git a/files/pl/web/api/element/classname/index.html b/files/pl/web/api/element/classname/index.html new file mode 100644 index 0000000000..31f21befb2 --- /dev/null +++ b/files/pl/web/api/element/classname/index.html @@ -0,0 +1,37 @@ +--- +title: element.className +slug: Web/API/Element/className +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/className +--- +<div> + {{APIRef}}</div> +<div> + </div> +<div> + <span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Podsumowanie</span></div> +<p><strong>className </strong> pobiera/ustawia wartość atrybutu <code>class</code> bieżącego elementu.</p> +<h2 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h2> +<pre class="syntaxbox">var <var>nazwaKlasy</var> = referencjaDoWęzłaElementu.className; +referencjaDoWęzłaElementu.className = <var>nazwaKlasy</var>; +</pre> +<ul> + <li><var>nazwaKlasy</var> to łańcuch znaków reprezentujący klasę lub rozdzieloną spacjami listę klas bieżącego elementu.</li> +</ul> +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="brush:js">var elementNodeReference = document.getElementById("div1"); + +if (elementNodeReference.className == "fixed") { + // pomiń elementy określonej klasy + goNextElement(); +};</pre> +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> +<p>Dla tej właściwości użyto nazwy <code>className</code>, a nie <code>class</code>, ponieważ "class" jest w wielu językach korzystających z DOM słowem kluczowym.</p> +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176">DOM Level 2 HTML: className</a></li> +</ul> diff --git a/files/pl/web/api/element/click/index.html b/files/pl/web/api/element/click/index.html new file mode 100644 index 0000000000..5c0fe512d5 --- /dev/null +++ b/files/pl/web/api/element/click/index.html @@ -0,0 +1,23 @@ +--- +title: element.click +slug: Web/API/Element/click +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/click +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <code>click</code> wywołuje kliknięcie na bieżącym elemencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">element.click() +</pre> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>Metoda <code>click</code> symuluje zdarzenie kliknięcia na bieżącym elemencie. Zwykle używa się tego by wywołać obsługę zdarzenia przypisaną do elementu bieżącego bądź leżącego wyżej w "łańcuchu zdarzeń".</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-2651361">click</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.click", "fr": "fr/DOM/element.click" } ) }}</p> diff --git a/files/pl/web/api/element/clientheight/index.html b/files/pl/web/api/element/clientheight/index.html new file mode 100644 index 0000000000..7014fd35f5 --- /dev/null +++ b/files/pl/web/api/element/clientheight/index.html @@ -0,0 +1,47 @@ +--- +title: element.clientHeight +slug: Web/API/Element/clientHeight +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/clientHeight +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca wewnętrzną wysokość elementu w pikselach, włączając marginesy wewnętrzne ( + <i> + padding</i> + ), ale bez poziomego paska przewijania, obramowań i marginesów zewnętrznych ( + <i> + margin</i> + ).</p> +<p><code>clientHeight</code> można wyliczyć jako (właśność <code>height</code> CSS) + (<code>padding</code> w CSS) - (wysokość poziomego paska przewijania (jeśli jest)).</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">var <var>h</var> = <var>element</var>.clientHeight; +</pre> +<p><var>h</var> to liczba całkowita reprezentująca <code>clientHeight</code> <var>element</var>u w pikselach.</p> +<p><code>clientHeight</code> jest tylko do odczytu.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> + <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> + <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/" rel="freelink">http://www.best-cat-art.com/</a></p> + <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> + </div> + <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -20px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span></div> +<p style="margin-top: 270px;"><img alt="Grafika:clientHeight.png"></p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Nie należy do żadnej ze specyfikacji W3C.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>clientHeight</code> jest niestandardową właściwością, wprowadzoną w modelu obiektowym przeglądarki Internet Explorer.</p> +<h3 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h3> +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientheight.asp?frame=true">MSDN clientHeight definition</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN Measuring Element Dimension and Location</a></li> + <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/clientHeight.html">Gecko DOM Reference on clientHeight</a></li> +</ul> +<p>{{ languages( { "en": "en/DOM/element.clientHeight", "fr": "fr/DOM/element.clientHeight", "ja": "ja/DOM/element.clientHeight", "zh-cn": "cn/DOM/element.clientHeight" } ) }}</p> diff --git a/files/pl/web/api/element/clientnode/index.html b/files/pl/web/api/element/clientnode/index.html new file mode 100644 index 0000000000..eb0550678b --- /dev/null +++ b/files/pl/web/api/element/clientnode/index.html @@ -0,0 +1,32 @@ +--- +title: element.cloneNode +slug: Web/API/Element/clientNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/cloneNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <b>cloneNode</b> zwraca kopię bieżącego węzła.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">kopiaWęzła = element.cloneNode(<i>głębokość</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>głębokość</code> jest wartością logiczną, oznaczającą, czy kopiowanie ma być głębokie czy nie (zob. uwagi poniżej)</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>p = document.getElementById("para1"); +p_prime = p.cloneNode(true); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Kopia węzła zwrócona przez <b>cloneNode()</b> nie ma rodzica. Podczas klonowania węzła skopiowane zostają wszystkie jego atrybuty i ich wartości, ale nie zostaje skopiowana treść zawarta w węźle, ponieważ treść ta przechowywana jest w węźle potomnym typu <code>Text</code>.</p> +<p>Głębokie klonowanie kopiuje i zwraca węzeł wraz z całym drzewem pod nim się znajdującym (w tym treścią z potomnych węzłów <code>Text</code>) .</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4">DOM Level 2 Core: cloneNode</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.cloneNode", "fr": "fr/DOM/element.cloneNode", "ja": "ja/DOM/element.cloneNode", "pt": "pt/DOM/element.cloneNode", "zh-cn": "cn/DOM/element.cloneNode" } ) }}</p> diff --git a/files/pl/web/api/element/clientwidth/index.html b/files/pl/web/api/element/clientwidth/index.html new file mode 100644 index 0000000000..5cf48d16ad --- /dev/null +++ b/files/pl/web/api/element/clientwidth/index.html @@ -0,0 +1,47 @@ +--- +title: element.clientWidth +slug: Web/API/Element/clientWidth +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/clientWidth +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>clientWidth</b> to wewnętrzna szerokość elementu w pikselach. Zawiera margines wewnętrzny ( + <i> + padding</i> + ), ale pomija pionowy pasek przewijania (jeśli jest obecny lub renderowany), obramowania i margines zewnętrzny ( + <i> + margin</i> + ).</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">var <var>w</var> = <var>element</var>.clientWidth; +</pre> +<p><var>w</var> to liczba całkowita odpowiadająca <b>clientWidth</b> <var>element</var>u w pikselach. <b>clientWidth</b> jest tylko do odczytu.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> + <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> + <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> + </div> + <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> +<p style="margin-top: 270px;"><img alt="Image:clientWidth.png"></p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Nie należy do żadnej ze specyfikacji W3C.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><b>clientWidth</b> został wprowadzony w modelu obiektowym DHTML przeglądarki Internet Explorer.</p> +<h3 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h3> +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientwidth.asp?frame=true">MSDN clientWidth definition</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN Measuring Element Dimension and Location</a></li> + <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/clientWidth.html">Gecko DOM Reference on clientWidth</a></li> +</ul> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.clientWidth", "fr": "fr/DOM/element.clientWidth" } ) }}</p> diff --git a/files/pl/web/api/element/dir/index.html b/files/pl/web/api/element/dir/index.html new file mode 100644 index 0000000000..5e20e1e6ad --- /dev/null +++ b/files/pl/web/api/element/dir/index.html @@ -0,0 +1,34 @@ +--- +title: element.dir +slug: Web/API/Element/dir +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/dir +--- +<div> + {{ApiRef}}</div> +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> +<p>Atrybut <strong>dir</strong> ustawia lub pobiera kierunek pisania tekstu dla zawartości bieżącego elementu.</p> +<h2 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h2> +<pre class="syntaxbox">var <var>bieżącyKierunekPisania</var> = elementNodeReference.dir; +elementNodeReference.dir = <var>nowyKierunekPisania</var>; +</pre> +<p><var>bieżącyKierunekPisania</var> jest łańcuchem reprezentującym kierunek pisania tekstu bieżącego elementu. <var>nowyKierunekPisania</var> to zmienna łańcuchowa, której wartość reprezentuje kierunek pisania tekstu.</p> +<p>Możliwe wartości <strong>dir</strong> to <code>ltr</code> dla "od lewej do prawej" i <code>rtl</code> dla "od prawej do lewej".</p> +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="brush:js">var parg = document.getElementById("para1"); + +parg.dir = "rtl"; +// zmienia kierunek tekstu w paragrafie "para1" +</pre> +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> +<p>Kierunek pisania tekstu elementu oznacza kierunek, w którym idzie tekst (do obsługi różnych języków). Języki arabski i hebrajski to typowe przykłady użycia kierunku <em>rtl</em>.</p> +<p>Obrazek może mieć atrybut <em>dir</em> ustawiony na <em>rtl</em>. W takim wypadku atrybuty <em>title</em> i <em>alt</em> będą sformatowane i wyświetlona jako <em>rtl</em>.</p> +<p>Jeśli tabela ma kierunek <em>rtl</em>, kolumny porządkowane są od prawej do lewej.</p> +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52460740">W3C DOM Level 2 HTML: dir</a></li> +</ul> diff --git a/files/pl/web/api/element/dispatchevent/index.html b/files/pl/web/api/element/dispatchevent/index.html new file mode 100644 index 0000000000..266c570cfe --- /dev/null +++ b/files/pl/web/api/element/dispatchevent/index.html @@ -0,0 +1,43 @@ +--- +title: element.dispatchEvent +slug: Web/API/Element/dispatchEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/EventTarget/dispatchEvent +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Wywołuje zdarzenie w bieżącym elemencie.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>bool</em> = <em>element</em>.dispatchEvent(<em>event</em>) +</pre> + +<ul> + <li><code>event</code> to <a href="pl/DOM/event">obiekt zdarzenia</a>, które ma zostać wywołane.</li> + <li>Jeśli któraś z funkcji obsługujących to zdarzenie wywoła <a href="pl/DOM/event.preventDefault">preventDefault</a>, zwracana wartość to <code>false</code>. W przeciwnym przypadku zwracane jest <code>true</code>.</li> +</ul> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Jak pokazuje powyższy przykład, <code>dispatchEvent</code> to ostatni krok w procesie utwórz-zainicjuj-wywołaj, którego używa się by ręcznie wywołać zdarzenia w modelu zdarzeń implementacji.</p> + +<p>Zdarzenie może zostać utworzone przy użyciu metody <a href="pl/DOM/document.createEvent">document.createEvent</a> i zainicjowane za pomocą <a href="pl/DOM/event.initEvent">initEvent</a> lub innej, bardziej wyspecjalizowanej metody, jak <a href="pl/DOM/event.initMouseEvent">initMouseEvent</a> albo <a href="pl/DOM/event.initUIEvent">initUIEvent</a>.</p> + +<p>Zobacz też dokumentację <a href="pl/DOM/event">obiektu event</a>.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-dispatchEvent">DOM Level 2 Events: dispatchEvent</a></p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/element.dispatchEvent", "es": "es/DOM/element.dispatchEvent", "fr": "fr/DOM/element.dispatchEvent", "ja": "ja/DOM/element.dispatchEvent" } ) }}</p> diff --git a/files/pl/web/api/element/firstchild/index.html b/files/pl/web/api/element/firstchild/index.html new file mode 100644 index 0000000000..20189ce803 --- /dev/null +++ b/files/pl/web/api/element/firstchild/index.html @@ -0,0 +1,101 @@ +--- +title: element.firstChild +slug: Web/API/Element/firstChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/firstChild +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><strong>firstChild</strong> jest właściwością tylko do odczytu, która zwraca pierwszego potomka węzła lub wartość null, jeżeli węzeł nie ma potomków. Jeżeli węzeł jest elementem Document, wtedy zwraca pierwszy węzeł z listy swoich bezpośrednich dzieci.</p> + +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> + +<pre class="notranslate">var elt = element.firstChild; +</pre> + +<p><var>elt</var> to referencja do pierwszego dziecka elementu, jeśli jest takie - w przeciwnym razie jest to null.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<p>Przeglądarki oparte o Gecko wstawiają do dokumentu węzły tekstowe reprezentujące białe znaki w kodzie. Dlatego pierwsze dziecko elementu może odnosić się do wstawionego węzła tekstowego, a nie elementu określonego przez następny znacznik w źródle strony.</p> + +<pre class="notranslate"><p id="para-01"> + <span>Pierwszy span</span> +</p> + +<script type="text/javascript"> + var p01 = document.getElementById('para-01'); + alert(p01.firstChild.nodeName) +</script> +</pre> + +<p>W powyższym przykładzie alert wyświetli '#text', ponieważ wstawiony jest węzeł tekstowy oznaczający przerwę między otwierającymi znacznikami <p> i <span> . Dowolny biały znak spowoduje wstawienie węzła tekstowego - zarówno pojedyncza spacja, jak i dowolna ilość spacji, nowych linii, znaków tabulacji itd.</p> + +<p>Kolejny węzeł #text jest wstawiany między zamykającymi znacznikami </span> i </p></p> + +<p>Jeśli usunie się białe znaki ze źródła, nie zostaną wstawione węzły tekstowe, a element <code>span</code> stanie się pierwszym dzieckiem paragrafu.</p> + +<pre class="notranslate"><p id="para-01"><span>Pierwszy span</span></p> + +<script type="text/javascript"> + var p01 = document.getElementById('para-01'); + alert(p01.firstChild.nodeName) +</script> +</pre> + +<p>Teraz alert wyświetli 'SPAN'.</p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Więcej o problemach z węzłami-zjawami znajdziesz w {{ Bug(26179) }} (nie komentuj tego błędu!). Oto jeden ze sposobów na ominięcie problemu:</p> + +<pre class="notranslate"><!-- konwencjonalne formatowanie prowadzi do + zaśmiecenia drzewa dokumentu w Gecko + --> +<div> + <ul> + <li>Pozycja 1</li> + <li>Pozycja 2</li> + <li>Pozycja 3</li> + </ul> +</div> + +<!-- Formatowanie ustawione, by ominąć + problem węzłów-zjaw + --> +<div + ><ul + ><li>Pozycja 1</li + ><li>Pozycja 2</li + ><li>Pozycja 3</li + ></ul +></div> +</pre> + +<h4 id="W.C4.99z.C5.82y_bezdzietne" name="W.C4.99z.C5.82y_bezdzietne">Węzły bezdzietne</h4> + +<p>Własność zwraca <code>null</code>, jeśli bieżący węzeł jest bezdzietny.</p> + +<h4 id="Bia.C5.82e_znaki_i_w.C4.99z.C5.82y_dzieci" name="Bia.C5.82e_znaki_i_w.C4.99z.C5.82y_dzieci">Białe znaki i węzły dzieci</h4> + +<p>Węzły #text mogą być wstawione jako dzieci elementów takich jak TR pomimo że specyfikacja HTML pozwala tylko na TD jako ich dzieci. Z uwagi na XML białe znaki muszą zostać zachowane i gdzieś wstawione.</p> + +<p>Ponieważ węzły #text nie są elementami HTML, białe znaki są tam wstawiane.</p> + +<p><a class="external" href="http://www.w3.org/DOM/faq.html#emptytext">W3C DOM 3 FAQ: Why are some Text nodes empty?</a></p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><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></p> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></p> + +<div class="noinclude"></div> + +<p>{{ languages( { "en": "en/DOM/element.firstChild", "fr": "fr/DOM/element.firstChild", "ja": "ja/DOM/element.firstChild", "zh-cn": "cn/DOM/element.firstChild" } ) }}</p> diff --git a/files/pl/web/api/element/focus/index.html b/files/pl/web/api/element/focus/index.html new file mode 100644 index 0000000000..7f3eef32fa --- /dev/null +++ b/files/pl/web/api/element/focus/index.html @@ -0,0 +1,23 @@ +--- +title: element.focus +slug: Web/API/Element/focus +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLOrForeignElement/focus +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>focus</b> aktywuje bieżący element (ustawia focus).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">element.focus() +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Wywołanie metody <b>focus()</b> jest równoważne z zaznaczeniem elementu przez użytkownika.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-32130014">focus </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.focus", "fr": "fr/DOM/element.focus" } ) }}</p> diff --git a/files/pl/web/api/element/getattribute/index.html b/files/pl/web/api/element/getattribute/index.html new file mode 100644 index 0000000000..da509fb349 --- /dev/null +++ b/files/pl/web/api/element/getattribute/index.html @@ -0,0 +1,43 @@ +--- +title: element.getAttribute +slug: Web/API/Element/getAttribute +translation_of: Web/API/Element/getAttribute +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>getAttribute zwraca wartość atrybutu o podanej nazwie.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>atrybut</em> = element.getAttribute(<em>nazwaAtrybutu</em>) +</pre> + +<ul> + <li><code><em>atrybut</em></code> to ciąg zawierający wartość atrybutu o nazwie <code><em>nazwaAtrybutu</em> </code></li> + <li><code><em>nazwaAtrybutu</em></code> jest nazwą atrybutu, który chcesz pobrać</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>var div1 = document.getElementById("div1"); +var a = div1.getAttribute("align"); +alert(a); // pokaże wartość atrybutu "align" dla elementu o id="div1" +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>W zasadzie wszystkie przeglądarki (Firefox, Internet Explorer, nowsze wersje Opery, Safari, Konqueror oraz iCab) zwracają <code>null</code>, jeśli bieżący element nie posiada atrybutu o podanej nazwie. Specyfikacja DOM mówi, że w takiej sytuacji powinien być zwracany pusty ciąg znaków i niektórze implementacje DOM tak się zachowują. Zatem jeśli jest możliwe, że element nie posiada żądanego atrybutu, powinieneś użyć metody <a href="/DOM/element.hasAttribute">hasAttribute</a> aby sprawdzić istnienie atrybutu zanim wywołasz <code>getAttribute</code>.</p> + +<p><code>nazwaAtrybutu</code> jest zazwyczaj zależna od wielkości liter, jednak nie w przypadku elementów HTML - wtedy wielkość liter nie ma znaczenia.</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-666EE0F9">DOM Level 2 Core: getAttribute</a> (wprowadzono w <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">DOM Level 1 Core</a>)</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/element.getAttribute", "fr": "fr/DOM/element.getAttribute", "ja": "ja/DOM/element.getAttribute" } ) }}</p> diff --git a/files/pl/web/api/element/getattributenode/index.html b/files/pl/web/api/element/getattributenode/index.html new file mode 100644 index 0000000000..0bdf977063 --- /dev/null +++ b/files/pl/web/api/element/getattributenode/index.html @@ -0,0 +1,36 @@ +--- +title: element.getAttributeNode +slug: Web/API/Element/getAttributeNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/getAttributeNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca określony atrybut elementu jako węzeł typu <code>Attr</code>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>węzełAtrybutu</i> = element.getAttributeNode(<i>nazwaAtrybutu</i>) +</pre> +<ul> + <li><code>nazwaAtrybutu</code> jest ciągiem zawierającym nazwę atrybutu</li> + <li><code>węzełAtrybutu</code> jest osobnym węzłem typu <code>Attr</code></li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// html: <div id="top" /> +t = document.getElementById("top"); +iNode = t.getAttributeNode("id"); +// iNode.value = "top" +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Interfejs węzła <code>Attr</code> dziedziczy ze wspólnego interfejsu węzłów <code>Node</code>, ale węzły atrybutów nie stanowią części drzewa dokumentu. Wpólne atrybuty wszystkich węzłów, takie jak <a href="pl/DOM/element.parentNode">parentNode</a>, <a href="pl/DOM/element.previousSibling">previousSibling</a> i <a href="pl/DOM/element.nextSibling">nextSibling</a> mają w przypadku węzłów <code>Attr</code> wartość <code>null</code>.</p> +<p>Do elementu, do którego należy atrybut, możesz odnosić się wykorzystując właściwość <code>ownerElement</code>.</p> +<p>Do pobrania wartości atrybutu używa się raczej metody <a href="pl/DOM/element.getAttribute">getAttribute</a> niż <code>getAttributeNode</code>.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-217A91B8">getAttributeNode </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.getAttributeNode", "fr": "fr/DOM/element.getAttributeNode", "ja": "ja/DOM/element.getAttributeNode" } ) }}</p> diff --git a/files/pl/web/api/element/getattributenodens/index.html b/files/pl/web/api/element/getattributenodens/index.html new file mode 100644 index 0000000000..b1ec0f2281 --- /dev/null +++ b/files/pl/web/api/element/getattributenodens/index.html @@ -0,0 +1,39 @@ +--- +title: element.getAttributeNodeNS +slug: Web/API/Element/getAttributeNodeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Element/getAttributeNodeNS +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca węzeł <code>Attr</code> dla atrybutu z daną przestrzenią nazw i nazwą.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>attributeNode</em> = element.getAttributeNodeNS(<em>namespace</em>,<em>nodeName</em>) +</pre> + +<ul> + <li><code>attributeNode</code> jest węzłem określonego atrybutu.</li> + <li><code>namespace</code> jest łańcuchem znaków określającym przestrzeń nazw atrybutu.</li> + <li><code>nodeName</code> jest łańcuchem znaków określającym nazwę atrybutu.</li> +</ul> + +<p><span class="comment">== Przykład == TBD The example needs to be fixed pre> // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "<a class="external" href="http://www.mozilla.org/ns/specialspace" rel="freelink">http://www.mozilla.org/ns/specialspace</a>", "id"); // iNode.value = "full-top" </pre</span></p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><code>getAttributeNodeNS</code> is more specific than <a href="pl/DOM/element.getAttributeNode">getAttributeNode</a> in that it allows you to specify attributes that are part of a particular namespace. The corresponding setter method is <a href="pl/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>.</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">DOM Level 2 Core: getAttributeNodeNS</a></p> diff --git a/files/pl/web/api/element/getattributens/index.html b/files/pl/web/api/element/getattributens/index.html new file mode 100644 index 0000000000..1ece5594ec --- /dev/null +++ b/files/pl/web/api/element/getattributens/index.html @@ -0,0 +1,47 @@ +--- +title: element.getAttributeNS +slug: Web/API/Element/getAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/getAttributeNS +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>getAttributeNS</code> zwraca ciąg z wartością atrybutu o podanej nazwie i przestrzeni nazw. Jeśli nie ma atrybutu o takiego atrybutu, zwrócone zostanie <code>null</code> bądź <code>""</code> (pust ciąg) - zob. {{ Anch("Uwagi") }}.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>wartośćAtr</i> =<i>element</i>.getAttributeNS(<i>przestrzeńNazw</i>,<i>nazwa</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code> + <i> + wartośćAtr</i> + </code> to ciąg z wartością podanego atrybutu</li> + <li><code> + <i> + przestrzeńNazw</i> + </code> to przestrzeń nazw atrybutu</li> + <li><code> + <i> + nazwa</i> + </code> to nazwa atrybutu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var div1 = document.getElementById("div1"); +var a = div1.getAttributeNS("www.mozilla.org/ns/specialspace/", + "special-align"); +alert(a); // wyświetli zawartość special-align elementu div +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>getAttributeNS</code> różni się od <a href="pl/DOM/element.getAttribute">getAttribute</a> tym, że pozwala Ci określić do jakiej przestrzeni nazw należy atrybut, tak jak w powyższym przykładzie, gdzie atrybut należał do fikcyjnej przestrzeni "specialspace".</p> +<p>W zasadzie wszystkie przeglądarki (Firefox, Internet Explorer, nowsze wersje Opery, Safari, Konqueror oraz iCab) zwracają <code>null</code>, jeśli bieżący element nie posiada atrybutu o podanej nazwie. Specyfikacja DOM mówi, że w takiej sytuacji powinien być zwracany pusty ciąg znaków i niektórze implementacje DOM tak się zachowują. Zatem jeśli jest możliwe, że element nie posiada żądanego atrybutu, powinieneś użyć metody <a href="pl/DOM/element.hasAttributeNS">hasAttributeNS</a> aby sprawdzić istnienie atrybutu zanim wywołasz <code>getAttributeNS</code>.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAttrNS">DOM Level 2 Core: getAttributeNS</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.getAttributeNS", "fr": "fr/DOM/element.getAttributeNS", "ja": "ja/DOM/element.getAttributeNS" } ) }}</p> diff --git a/files/pl/web/api/element/getboundingclientrect/index.html b/files/pl/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..dc189b37af --- /dev/null +++ b/files/pl/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,146 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +tags: + - API + - Metoda(2) + - Pudełko + - Widok CSSOM +translation_of: Web/API/Element/getBoundingClientRect +--- +<div>{{APIRef("DOM")}}</div> + +<p>Metoda <code><strong>Element.getBoundingClientRect()</strong></code> zwraca rozmiar oraz położenie elementu względem okna widoku (viewport).</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><var>rectObject</var> = <var>object</var>.getBoundingClientRect(); +</pre> + +<h3 id="Wynik">Wynik</h3> + +<p>Zwrócony jest obiekt <a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMClientRect">DOMRect</a>, wyznaczony z tablicy prostokątów zwróconych przez metodę <code><a href="/en-US/docs/DOM/element.getClientRects">getClientRects()</a></code>, zastosowaną do danego elementu, czyli wyznaczony ze wszystkich pudełek CSS związanych z danym elementem.</p> + +<p>Zwrócony obiekt <code>DOMRect</code> posiada następujące (tylko do odczytu) właściwości: <code>left</code>, <code>top</code>, <code>right</code> and <code>bottom,</code> opisujące parametry otaczającego element pudełka w pikselach. Właściwości <code>top</code> and <code>left</code> oznaczają odległość od górnego-lewego rogu aktualnego okna widoku.</p> + +<div class="note"> +<p><strong>Uwaga:</strong> {{Gecko("1.9.1")}} dodało właściwości <code>width</code> and <code>height</code> do obiektu <code>DOMRect</code>.</p> +</div> + +<p>Puste pudełka są całkowicie ignorowane. Jeśli wszystkie elementy pudełka są puste, to zwrócony prostokąt ma wysokość i szerokość równą zero zaś własności <code>top</code> oraz <code>left </code>dotyczą pierwszego pudełka CSS (w porządku kontekstowym) który zawiera dany element<code>.</code></p> + +<p>Efekt przewijania (scrolling) okna widoku (lub dowolnego innego przewijalnego elementu) jest uwzględniany podczas wyznaczania otaczającego pudełka. Zatem, właściwości <code>top</code> oraz <code>left</code> zmieniają się natychmiast po dowolnym przewinięciu (są więc względne w stosunku do widoku, a więc nie są absolutne). W celu wyznaczenia absolutnego położenie elementu należy do właściwości <code>top </code>oraz <code>left </code>dodać aktualne pozycje przesuwania (scrolling position) (można je uzyskać za pomocą <code>window.scrollX</code> and <code>window.scrollY</code>).</p> + +<p>Skrypty wymagające zgodności z różnymi przeglądarkami mogą korzystać z metod <code>window.pageXOffset</code> oraz <code>window.pageYOffset</code> zamiast <code>window.scrollX</code> oraz <code>window.scrollY.</code> Skrypty które nie mają dostępu do <code>window.pageXOffset</code>, <code>window.pageYOffset</code>, <code>window.scrollX</code> ani <code>window.scrollY</code> mogą stosować następujący kod :</p> + +<pre class="brush:js">// Zamiast scrollX +(((t = document.documentElement) || (t = document.body.parentNode)) + && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft +// Zamiast scrollY +(((t = document.documentElement) || (t = document.body.parentNode)) + && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop +</pre> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush:js">// rect jest obiektem DOMRect z sześcioma własnościami: left, top, right, bottom, width, height +var rect = obj.getBoundingClientRect(); +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSSOM View", "#the-getclientrects()-and-getboundingclientrect()-methods", "Element.getBoundingClientRect()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>definicja początkowa</td> + </tr> + </tbody> +</table> + +<h3 id="Uwagi">Uwagi</h3> + +<p><code>Metoda getBoundingClientRect()</code> została wprowadzona po raz pierwszy w modelu MS IE DHTML.</p> + +<p>Wynik metody <code>getBoundingClientRect()</code> jest obiektem <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze">zamrożonym</a>.</p> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Właściwość</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Postawowe wsparcie</td> + <td>1.0<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop(1.9)}}</td> + <td>4.0<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0</td> + </tr> + <tr> + <td>width/height</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.9.1)}}</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>Właściwość</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>Postawowe wsparcie</td> + <td>2.0</td> + <td>1.0</td> + <td>{{CompatGeckoMobile(1.9)}}</td> + <td>6.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <a href="http://www.w3.org/TR/SVG11/struct.html#UseElement">specyfikacja CSS dla elementu 'use' </a> wskazującego na element 'symbol' wymaga aby domyślne wartości atrybutów width oraz height elementu 'use' ustawione były na 100%. Również, <a href="http://www.w3.org/TR/SVG11/struct.html#SVGElementWidthAttribute">specyfikacja CSS dla atrybutów width oraz height elementu 'svg'</a> wymaga 100% jako wartości domyślne. Google Chrome nie przestrzega tych wymagań dla elementów 'use'. Chrome nie uwzględnia również 'stroke-width'. Zatem metoda <code>getBoundingClientRect()</code> może zwrócić inny prostokąt w Chrome niż w Firefox.</p> + +<p>[2] W IE8, oraz we wcześniejszych wersjach, obiekt <code>DOMRect</code> zwrócony przez <code>getBoundingClientRect()</code> nie zawiera właściwości <code>height</code> ani <code>width</code>. Żadne dodatkowe właściwości (w tym <code>height</code> oraz <code>width</code>) nie mogą być dodane do tych obiektów <code>DOMRect</code>.</p> + +<p>Począwszy od Gecko 12.0 {{geckoRelease("12.0")}}, efekt <a href="/en-US/docs/CSS/Using_CSS_transforms">transformacji CSS</a> jest uwzględniany w algorytmie wyznaczania otaczającego pudełka (bounding rectangle).</p> + +<h2 id="Patrz_również">Patrz również</h2> + +<ul> + <li><a href="https://msdn.microsoft.com/en-us/library/ms536433%28VS.85%29.aspx?f=255&MSPPError=-2147217396">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/pl/web/api/element/getelementsbytagnamens/index.html b/files/pl/web/api/element/getelementsbytagnamens/index.html new file mode 100644 index 0000000000..81b82173d2 --- /dev/null +++ b/files/pl/web/api/element/getelementsbytagnamens/index.html @@ -0,0 +1,49 @@ +--- +title: element.getElementsByTagNameNS +slug: Web/API/Element/getElementsByTagNameNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Element/getElementsByTagNameNS +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca listę elementów o danej nazwie znacznika należącej do danej przestrzeni nazw.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>elements</em> =<em>element</em>.getElementsByTagNameNS(<em>namespace</em>,<em>localName</em>) +</pre> + +<ul> + <li><code>elements</code> jest <code>NodeList</code> znalezionych elementów w kolejności ich występowania w drzewie.</li> + <li><code>element</code> jest elementem startowym. Zauważ, że tylko potomkowie tegoż elementu zawarci są w przeszukiwaniu, ale nie on sam węzeł.</li> + <li><code>namespace</code> jest przestrzenią nazw URI elementów do przeszukania (zobacz <code><a href="pl/DOM/element.namespaceURI">element.namespaceURI</a></code>).</li> + <li><code>name</code> is either the local name of elements to look for or the special value <code>"*"</code>, which matches all elements (see <code><a href="pl/DOM/element.localName">element.localName</a></code>).</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>// check the alignment on a number of cells in a table. +var table = document.getElementById("forecast-table"); +var cells = table.getElementsByTagNameNS("www.mozilla.org/ns/specialspace/", "td"); +for (var i = 0; i < cells.length; i++) { + status = cells[i].getAttribute("status"); + if ( status == "open") { + // grab the data + } +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><code>element.getElementsByTagNameNS</code> is similar to <a href="pl/DOM/document.getElementsByTagNameNS">document.getElementsByTagNameNS</a>, except that its search is restricted to those elements which are descendants of the specified element.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C90942">DOM Level 2 Core: Element.getElementsByTagNameNS</a></p> diff --git a/files/pl/web/api/element/hasattribute/index.html b/files/pl/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..e06d1f1fa2 --- /dev/null +++ b/files/pl/web/api/element/hasattribute/index.html @@ -0,0 +1,34 @@ +--- +title: element.hasAttribute +slug: Web/API/Element/hasAttribute +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/hasAttribute +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>hasAttribute</code> zwraca wartość logiczną oznaczającą, czy element posiada określony atrybut czy nie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>wynik</i> = element.hasAttribute(<i>nazwaAtrybutu</i>) +</pre> +<ul> + <li><code>wynik</code> to rezultat sprawdzenia - <code>true</code> lub <code>false</code></li> + <li><code>nazwaAtrybutu</code> jest ciągiem znaków określającym nazwę atrybutu</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// przed ustawieniem wartości sprawdź, czy atrybut istnieje +d = document.getElementById("div1"); +if(d.hasAttribute("align")){ + d.setAttribute("align", "center"); +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttr">DOM Level 2 Core: hasAttribute</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.hasAttribute", "fr": "fr/DOM/element.hasAttribute", "ja": "ja/DOM/element.hasAttribute" } ) }}</p> diff --git a/files/pl/web/api/element/hasattributens/index.html b/files/pl/web/api/element/hasattributens/index.html new file mode 100644 index 0000000000..13cc715dac --- /dev/null +++ b/files/pl/web/api/element/hasattributens/index.html @@ -0,0 +1,39 @@ +--- +title: element.hasAttributeNS +slug: Web/API/Element/hasAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/hasAttributeNS +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>hasAttributeNS</code> zwraca wartość logiczną oznaczającą, czy bieżący element ma określony atrybut.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>wynik</i> =<i>element</i>.hasAttributeNS(<i>przestrzeńNazw</i>,<i>nazwaLokalna</i>) +</pre> +<ul> + <li><code>wynik</code> to wartość logiczna - <code>true</code> lub <code>false</code>.</li> + <li><code>przestrzeńNazw</code> to ciąg znaków określający przestrzeń nazw atrybutu.</li> + <li><code>nazwaLokalna</code> to nazwa atrybutu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// sprawdza czy jest taki atrybut +// przed nadaniem mu wartości +var d = document.getElementById("div1"); +if (d.hasAttributeNS( + "http://www.mozilla.org/ns/specialspace/", + "special-align")) { + d.setAttribute("align", "center"); +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">DOM Level 2 Core: hasAttributeNS</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.hasAttributeNS", "fr": "fr/DOM/element.hasAttributeNS", "ja": "ja/DOM/element.hasAttributeNS" } ) }}</p> diff --git a/files/pl/web/api/element/hasattributes/index.html b/files/pl/web/api/element/hasattributes/index.html new file mode 100644 index 0000000000..2e1c7aea73 --- /dev/null +++ b/files/pl/web/api/element/hasattributes/index.html @@ -0,0 +1,28 @@ +--- +title: element.hasAttributes +slug: Web/API/Element/hasAttributes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/hasAttributes +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>hasAttributes</b> zwraca wartość logiczną zależnie od tego, czy element posiada jakiekolwiek atrybuty.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">[ true | false ] = element.hasAttributes +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>t1 = document.getElementById("table-data"); +if ( t1.hasAttributes ) { + // zrób coś z + // t1.attributes +} +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeHasAttrs">hasAttributes</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.hasAttributes", "fr": "fr/DOM/element.hasAttributes", "it": "it/DOM/element.hasAttributes" } ) }}</p> diff --git a/files/pl/web/api/element/haschildnodes/index.html b/files/pl/web/api/element/haschildnodes/index.html new file mode 100644 index 0000000000..e21f22dedf --- /dev/null +++ b/files/pl/web/api/element/haschildnodes/index.html @@ -0,0 +1,28 @@ +--- +title: element.hasChildNodes +slug: Web/API/Element/hasChildNodes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/hasChildNodes +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>hasChildNodes</b> zwraca wartość logiczną określającą, czy element posiada dzieci czy nie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">[ true | false ] = element.hasChildNodes() +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>t1 = document.getElementById("table-data"); +if ( t1.hasChildNodes() ) { + // tabela ma dzieci } +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zauważ, że składnia <code>element.hasChildNodes</code> - bez nawiasów <code>()</code> - jest nieprawidłowa. Takie użycie zawsze zwraca <code>true</code>, oznaczające, że metoda o tej nazwie jest dostępna w obiekcie. Nie daj się nabrać.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.hasChildNodes", "fr": "fr/DOM/element.hasChildNodes", "ja": "ja/DOM/element.hasChildNodes" } ) }}</p> diff --git a/files/pl/web/api/element/id/index.html b/files/pl/web/api/element/id/index.html new file mode 100644 index 0000000000..53ba49d3b0 --- /dev/null +++ b/files/pl/web/api/element/id/index.html @@ -0,0 +1,38 @@ +--- +title: element.id +slug: Web/API/Element/id +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/id +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność <b>id</b> jednoznacznie identyfikuje bieżący element.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval"><i>id_str</i> = element.id +element.id =<i>id_str</i> +</pre> +<ul> + <li><code>id_str</code> to ciąg znaków reprezentujący <code>id</code> bieżącego elementu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>if (element.id != "main_loop") + goBack(); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Nie ma ważniejszej własności w dziedzinie konstruowania stron niż + <i> + id</i> + . ID elementu jest tym, czego najczęściej używa się by go wydobyć (np. za pomocą <b><a href="pl/DOM/document.getElementById">getElementById</a></b>) i pozwala ono manipulować węzłami niezależnie od innych węzłów. W HTML-u i w XUL-u <b>id</b> definiowane jest jako atrybut tak:</p> +<pre class="eval"><td id="table-cell2" /> +</pre> +<p>Jeśli zamierzasz używać DOM na swoich stronach dobrze jest przypisać tyle atrybutów <b>id</b> ile tylko będzie potrzebne. Zauważ też, że + <i> + id</i> + używa się również by powiązać reguły stylów CSS z poszczególnymi elementami.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-63534901">id </a></p> +<p>{{ languages( { "en": "en/DOM/element.id", "fr": "fr/DOM/element.id", "ja": "ja/DOM/element.id", "zh-cn": "cn/DOM/element.id" } ) }}</p> diff --git a/files/pl/web/api/element/index.html b/files/pl/web/api/element/index.html new file mode 100644 index 0000000000..5a7c6be166 --- /dev/null +++ b/files/pl/web/api/element/index.html @@ -0,0 +1,677 @@ +--- +title: Element +slug: Web/API/Element +tags: + - DOM + - Gecko +translation_of: Web/API/Element +--- +<p>{{ ApiRef}}</p> + +<p>Ten rozdział dostarcza zwięzłych informacji dla wszystkich metod, własności i zdarzeń dostępnych dla większości elementów HTML i XML w Gecko DOM.</p> + +<p>Różne specyfikacje W3C mają zastosowanie do elementów:</p> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/">DOM Core Specification</a>—opisuje główne interfejsy współdzielone przez większość obiektów DOM w dokumentach HTML i XML</li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/">DOM HTML Specification</a>—opisuje interfejsy dla obiektów w dokumentach HTML i XHTML tworzonych na głównej specyfikacji</li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/">DOM Events Specification</a>—opisuje zdarzenia współdzielone przez większość obiektów DOM, tworzone na głównej specyfikacji DOM i specyfikacji <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/">Views</a></li> +</ul> + +<p>Niniejsze interfejsy DOM łączą różne specyfikacje, jednak staramy się skoncentrować na rekomendacji DOM Level 2 HTML. Każda podstrona zawiera odnośnik do odpowiedniego fragmentu specyfikacji W3C DOM.</p> + +<p>W tym miejscu "elementy" oznaczają ten interfejs, jaki mają wszystkie elementy HTML i XML. Istnieją również bardziej specjalizowane interfejsy dla poszczególnych elementów - np. <code>BODY</code> posiada dodatkowe funkcje i własności, podobnie tabele. W tym rozdziale omówiony jest tylko ten interfejs, jak współdzielą wszystkie elementy.</p> + +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Nazwa</th> + <th>Opis</th> + <th>Typ</th> + <th>Dostępność</th> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.attributes" title="pl/DOM/element.attributes">attributes</a></code></td> + <td>Zwraca tablicę atrybutów elementu.</td> + <td><code><a href="/pl/DOM/NamedNodeMap" title="pl/DOM/NamedNodeMap">NamedNodeMap</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.childNodes" title="pl/DOM/element.childNodes">childNodes</a></code></td> + <td>Zwraca tablicę węzłów potomnych elementu.</td> + <td><code><a href="/pl/DOM/NodeList" title="pl/DOM/NodeList">NodeList</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.className" title="pl/DOM/element.className">className</a></code></td> + <td>Pobiera/ustawia klasę elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a>, <a href="/pl/XUL" title="pl/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.clientHeight" title="pl/DOM/element.clientHeight">clientHeight</a></code></td> + <td>Zwraca wewnętrzną wysokość elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.clientWidth" title="pl/DOM/element.clientWidth">clientWidth</a></code></td> + <td>Zwraca wewnętrzną szerokość elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.dir" title="pl/DOM/element.dir">dir</a></code></td> + <td>Ustawia lub pobiera kierunek elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a>, <a href="/pl/XUL" title="pl/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.firstChild" title="pl/DOM/element.firstChild">firstChild</a></code></td> + <td>Zwraca pierwsze dziecko bieżącego węzła lub <code>null</code>, jeśli ten element nie posiada węzła potomnego.</td> + <td><code><a href="/pl/DOM/Node" title="pl/DOM/Node">Node</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.id" title="pl/DOM/element.id">id</a></code></td> + <td>Pobiera/ustawia id elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a>, <a href="/pl/XUL" title="pl/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.innerHTML" title="pl/DOM/element.innerHTML">innerHTML</a></code></td> + <td>Pobiera/ustawia znacznik zawartości elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.lang" title="pl/DOM/element.lang">lang</a></code></td> + <td>Określa język bazowy dla wartość atrybutów i tekstowej zawartości elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.lastChild" title="pl/DOM/element.lastChild">lastChild</a></code></td> + <td>Zwraca ostatnie dziecko bieżącego węzła elementu lub <code>null</code> jeśli ten element nie posiada węzłów potomnych.</td> + <td><code><a href="/pl/DOM/Node" title="pl/DOM/Node">Node</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.localName" title="pl/DOM/element.localName">localName</a></code></td> + <td>Zwraca lokalną część uściślonej nazwy węzła.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <th>Nazwa</th> + <th>Opis</th> + <th>Typ</th> + <th>Dostępność</th> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.name" title="pl/DOM/element.name">name</a></code></td> + <td>Pobiera lub ustawia atrybut <code>name</code> - dostępne nie dla wszystkich elementów.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.namespaceURI" title="pl/DOM/element.namespaceURI">namespaceURI</a></code></td> + <td>URI przestrzeni nazw węzła lub <code>null</code>, jeśli jest bliżej nieokreślony.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.nextSibling" title="pl/DOM/element.nextSibling">nextSibling</a></code></td> + <td>Węzeł bezpośrednio następny w drzewie dokumentu lub <code>null</code> jeżeli takiego nie ma.</td> + <td><code><a href="/pl/DOM/Node" title="pl/DOM/Node">Node</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.nodeName" title="pl/DOM/element.nodeName">nodeName</a></code></td> + <td>Nazwa węzła.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.nodeType" title="pl/DOM/element.nodeType">nodeType</a></code></td> + <td>Cyfra reprezentująca typ węzła. <code>1</code> oznacza element DOM.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.nodeValue" title="pl/DOM/element.nodeValue">nodeValue</a></code></td> + <td>Wartość węzła atrybutu, zawartość węzła tekstowego lub <code>null</code> dla elementu DOM.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.offsetHeight" title="pl/DOM/element.offsetHeight">offsetHeight</a></code></td> + <td>Wysokość elementu, odnosząca się do układu strony.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.offsetLeft" title="pl/DOM/element.offsetLeft">offsetLeft</a></code></td> + <td>Odległość pomiędzy lewą krawędzią elementu, a jego <code>offsetParent</code> lewej krawędzi.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.offsetParent" title="pl/DOM/element.offsetParent">offsetParent</a></code></td> + <td>Element, od którego obliczane są wszystkie przesunięcia.</td> + <td><code><a href="/pl/DOM/element" title="pl/DOM/element">Element</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.offsetTop" title="pl/DOM/element.offsetTop">offsetTop</a></code></td> + <td>Odległość pomiędzy górną krawędzią elementu, a jego <code>offsetParent</code> górnej krawędzi.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.offsetWidth" title="pl/DOM/element.offsetWidth">offsetWidth</a></code></td> + <td>Szerokość elementu, odnosząca się do układu strony.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.ownerDocument" title="pl/DOM/element.ownerDocument">ownerDocument</a></code></td> + <td>Dokument, którego węzeł jest w lub <code>null</code> jeśli węzeł nie znajduje się wewnątrz.</td> + <td><code><a href="/pl/DOM/document" title="pl/DOM/document">Document</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <th>Nazwa</th> + <th>Opis</th> + <th>Typ</th> + <th>Dostępność</th> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.parentNode" title="pl/DOM/element.parentNode">parentNode</a></code></td> + <td>Element nadrzędny bieżącego węzła lub <code>null</code> jeżeli węzeł nie znajduje się wewnątrz dokumentu DOM.</td> + <td><code><a href="/pl/DOM/Node" title="pl/DOM/Node">Node</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.prefix" title="pl/DOM/element.prefix">prefix</a></code></td> + <td>Prefiks przestrzeni nazw węzła lub <code>null</code> jeżeli nie określono prefiksa.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.previousSibling" title="pl/DOM/element.previousSibling">previousSibling</a></code></td> + <td>Węzeł bezpośrednio poprzedni w drzewie dokumentu lub <code>null</code> jeżeli takiego nie ma.</td> + <td><code><a href="/pl/DOM/Node" title="pl/DOM/Node">Node</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.scrollHeight" title="pl/DOM/element.scrollHeight">scrollHeight</a></code></td> + <td>The scroll view height of an element.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.scrollLeft" title="pl/DOM/element.scrollLeft">scrollLeft</a></code></td> + <td>Pobiera/Ustawia liczbę pikseli, o którą zostanie przewinięta zawartość dokumentu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.scrollTop" title="pl/DOM/element.scrollTop">scrollTop</a></code></td> + <td>Pobiera/Ustawia liczbę pikseli, o którą ma zostać przewinięta w górę zawartość elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.scrollWidth" title="pl/DOM/element.scrollWidth">scrollWidth</a></code></td> + <td>Zwraca szerokość zawartości elementu w pikselach lub szerokość samego elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.style" title="pl/DOM/element.style">style</a></code></td> + <td>Obiekt reprezentujący deklaracje stylów elementu.</td> + <td><code><a href="/pl/DOM/CSSStyleDeclaration" title="pl/DOM/CSSStyleDeclaration">CSSStyle</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a>, <a href="/pl/XUL" title="pl/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.tabIndex" title="pl/DOM/element.tabIndex">tabIndex</a></code></td> + <td>Pobiera lub ustawia pozycję elementu w kolejności przechodzenia tabulatorem.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.tagName" title="pl/DOM/element.tagName">tagName</a></code></td> + <td>Nazwa znacznika HTML danego elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.textContent" title="pl/DOM/element.textContent">textContent</a></code></td> + <td>Pobiera bądź ustawia tekstową treść elementu i jego potomków.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + </tbody> +</table> + +<p> </p> + +<dl> + <dt><a href="/pl/DOM/element.attributes" title="pl/DOM/element.attributes">attributes</a></dt> + <dd>Zwraca tablicę atrybutów elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.childNodes" title="pl/DOM/element.childNodes">childNodes</a></dt> + <dd>Zwraca tablicę węzłów potomnych elementu</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.className" title="pl/DOM/element.className">className</a></dt> + <dd>Pobiera/ustawia klasę elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.clientHeight" title="pl/DOM/element.clientHeight">clientHeight</a></dt> + <dd>Własność DHTML-a, reprezentuje wewnętrzną wysokość elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.clientLeft" title="pl/DOM/element.clientLeft">clientLeft</a></dt> + <dd>Długość od lewego obramowania elementu wyrażona w pikselach. <em>Aktualnie nie obsługiwana.</em></dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.clientTop" title="pl/DOM/element.clientTop">clientTop</a></dt> + <dd>Długość od górnego obramowania elementu wyrażona w pikselach. <em>Aktualnie nie obsługiwana.</em></dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.clientWidth" title="pl/DOM/element.clientWidth">clientWidth</a></dt> + <dd>Własność DHTML-a, reprezentuje wewnętrzną szerokość elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.dir" title="pl/DOM/element.dir">dir</a></dt> + <dd>Pobiera/ustawia kierunkowość (ang. <em>directionality</em>) elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.firstChild" title="pl/DOM/element.firstChild">firstChild</a></dt> + <dd>Zwraca pierwsze dziecko bieżącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.id" title="pl/DOM/element.id">id</a></dt> + <dd>Pobiera/ustawia id elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.innerHTML" title="pl/DOM/element.innerHTML">innerHTML</a></dt> + <dd>innerHTML zwraca całą zawartość elementu wraz ze znacznikami.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.lang" title="pl/DOM/element.lang">lang</a></dt> + <dd>Określa język bazowy dla wartość atrybutów i tekstowej zawartości elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.lastChild" title="pl/DOM/element.lastChild">lastChild</a></dt> + <dd>Zwraca ostatnie dziecko bieżącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.length" title="pl/DOM/element.length">length</a></dt> + <dd>Zwraca ilość elementów listy (np. childNodes).</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.localName" title="pl/DOM/element.localName">localName</a></dt> + <dd>Zwraca lokalną część uściślonej nazwy węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.name" title="pl/DOM/element.name">name</a></dt> + <dd>Pobiera lub ustawia atrybut <code>name</code> - dostępne nie dla wszystkich elementów.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.namespaceURI" title="pl/DOM/element.namespaceURI">namespaceURI</a></dt> + <dd>URI przestrzeni nazw węzła lub NULL, jeśli nie określono przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.nextSibling" title="pl/DOM/element.nextSibling">nextSibling</a></dt> + <dd>Zwraca węzeł bezpośrednio następny w drzewie dokumentu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.nodeName" title="pl/DOM/element.nodeName">nodeName</a></dt> + <dd>Zwraca nazwę biężącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.nodeType" title="pl/DOM/element.nodeType">nodeType</a></dt> + <dd>Zwraca typ bieżącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.nodeValue" title="pl/DOM/element.nodeValue">nodeValue</a></dt> + <dd>Zwraca wartość bieżącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.offsetHeight" title="pl/DOM/element.offsetHeight">offsetHeight</a></dt> + <dd>offsetHeight jest własnością DHTML-a, zwracającą wysokość elementu względem układu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.offsetLeft" title="pl/DOM/element.offsetLeft">offsetLeft</a></dt> + <dd>offsetLeft pobiera/ustawia ilość pikseli, jaka dzieli element od lewej strony wewnątrz węzła offsetParent.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.offsetParent" title="pl/DOM/element.offsetParent">offsetParent</a></dt> + <dd>offsetParent zwraca referencję do obiektu, w którym obecny element się znajduje (tj. rodzica).</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.offsetTop" title="pl/DOM/element.offsetTop">offsetTop</a></dt> + <dd>offsetTop zwraca pozycję obecnego elementu względem góry węzła offsetParent.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.offsetWidth" title="pl/DOM/element.offsetWidth">offsetWidth</a></dt> + <dd>offsetWidth jest własnością DHTML-a, zwracającą szerokość elementu względem układu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.ownerDocument" title="pl/DOM/element.ownerDocument">ownerDocument</a></dt> + <dd>Zwraca dokument, w którym znajduje się bieżący węzeł.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.parentNode" title="pl/DOM/element.parentNode">parentNode</a></dt> + <dd>Zwraca rodzica bieżącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.prefix" title="pl/DOM/element.prefix">prefix</a></dt> + <dd>Zwraca prefiks przestrzeni nazw obecnego węzła bądź NULL, jeśli nie określono przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.previousSibling" title="pl/DOM/element.previousSibling">previousSibling</a></dt> + <dd>Zwraca węzeł bezpośrednio poprzedni w drzewie dokumentu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.scrollHeight" title="pl/DOM/element.scrollHeight">scrollHeight</a></dt> + <dd>Własność DHTML-a, zwraca wysokość zawartości elementu z paskiem przewijania.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.scrollLeft" title="pl/DOM/element.scrollLeft">scrollLeft</a></dt> + <dd>pobiera bądź ustawia liczbę pikseli, o którą zostanie przewinięta zawartość dokumentu. Kierunek przewijania odbywa się w lewo.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.scrollTop" title="pl/DOM/element.scrollTop">scrollTop</a></dt> + <dd>Własność DHTML-a, która ustawia bądź pobiera odległość między górą elementu a najwyższym punktem zawartości elementu z paskiem przewijania.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.scrollWidth" title="pl/DOM/element.scrollWidth">scrollWidth</a></dt> + <dd>Zwraca the width of the scroll view of an element.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.style" title="pl/DOM/element.style">style</a></dt> + <dd>Zwraca blok reguł stylów dla elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.tabIndex" title="pl/DOM/element.tabIndex">tabIndex</a></dt> + <dd>Pobiera/ustawia pozycję elementu w porządku tabulacji.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.tagName" title="pl/DOM/element.tagName">tagName</a></dt> + <dd>Zwraca nazwę elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.textContent" title="pl/DOM/element.textContent">textContent</a></dt> + <dd>Pobiera/ustawia zawartość tekstu elementu włączając jego potomków.</dd> +</dl> + +<h3 id="Metody" name="Metody">Metody</h3> + +<dl> + <dt><a href="/pl/DOM/element.addEventListener" title="pl/DOM/element.addEventListener">addEventListener</a></dt> + <dd>Pozwala zarejestrować obserwatora zdarzeń dla celu zdarzenia.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.appendChild" title="pl/DOM/element.appendChild">appendChild</a></dt> + <dd>Wstawia określony węzeł do listy węzłów dokumentu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.blur" title="pl/DOM/element.blur">blur</a></dt> + <dd>Dezaktywuje bieżący element.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.click" title="pl/DOM/element.click">click</a></dt> + <dd>Wywołuje kliknięcie na elemencie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.cloneNode" title="pl/DOM/element.cloneNode">cloneNode</a></dt> + <dd>Zwraca kopię bieżącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.dispatchEvent" title="pl/DOM/element.dispatchEvent">dispatchEvent</a></dt> + <dd>Pozwala przekazać wywołania zdarzeń do modelu zdarzeń w implementacji DOM.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.focus" title="pl/DOM/element.focus">focus</a></dt> + <dd>Aktywuje bieżący element.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.getAttribute" title="pl/DOM/element.getAttribute">getAttribute</a></dt> + <dd>Zwraca wartość atrybutu o podanej nazwie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.getAttributeNS" title="pl/DOM/element.getAttributeNS">getAttributeNS</a></dt> + <dd>Zwraca wartość atrybutu o podanej nazwie i przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.getAttributeNode" title="pl/DOM/element.getAttributeNode">getAttributeNode</a></dt> + <dd>Zwraca atrybut elementu jako osobny węzeł.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.getElementsByTagName" title="pl/DOM/element.getElementsByTagName">getElementsByTagName</a></dt> + <dd>Zwraca elementy o podanej nazwie będące potomkami bieżącego elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.hasAttribute" title="pl/DOM/element.hasAttribute">hasAttribute</a></dt> + <dd>Zwraca wartość logiczną zależnie od tego, czy element posiada atrybut o podanej nazwie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.hasAttributeNS" title="pl/DOM/element.hasAttributeNS">hasAttributeNS</a></dt> + <dd>Zwraca wartość logiczną zależnie od tego, czy element posiada atrybut o podanej nazwie i przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.hasAttributes" title="pl/DOM/element.hasAttributes">hasAttributes</a></dt> + <dd>Zwraca wartość logiczną zależnie od tego, czy element posiada jakiekolwiek atrybuty.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.hasChildNodes" title="pl/DOM/element.hasChildNodes">hasChildNodes</a></dt> + <dd>Zwraca wartość logiczną zależnie od tego, czy element posiada dzieci.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.insertBefore" title="pl/DOM/element.insertBefore">insertBefore</a></dt> + <dd>Metoda pozwala wstawić węzeł przed bieżącym elementem w DOM.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.item" title="pl/DOM/element.item">item</a></dt> + <dd>Zwraca węzeł z drzewa wg podanego indeksu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.normalize" title="pl/DOM/element.normalize">normalize</a></dt> + <dd>Metoda zapisuje bieżący węzeł i całe drzewo znajdujące się wewnątrz w "znormalizowanej" formie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.removeAttribute" title="pl/DOM/element.removeAttribute">removeAttribute</a></dt> + <dd>Usuwa atrybut elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.removeAttributeNode" title="pl/DOM/element.removeAttributeNode">removeAttributeNode</a></dt> + <dd>Usuwa określony atrybut elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.removeChild" title="pl/DOM/element.removeChild">removeChild</a></dt> + <dd>Usuwa węzeł potomny bieżącego elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.removeEventListener" title="pl/DOM/element.removeEventListener">removeEventListener</a></dt> + <dd>Pozwala usunąć obserwatora zdarzeń z celu zdarzenia.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.replaceChild" title="pl/DOM/element.replaceChild">replaceChild</a></dt> + <dd>Metoda replaceChild() zastępuje węzeł potomny bieżącego elementu innym węzłem.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.setAttribute" title="pl/DOM/element.setAttribute">setAttribute</a></dt> + <dd>Dodaje nowy atrybut bądź zmienia wartość atrybutu bieżącego elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.setAttributeNS" title="pl/DOM/element.setAttributeNS">setAttributeNS</a></dt> + <dd>Dodaje nowy atrybut bądź zmienia wartość atrybutu bieżącego elementu, wg podanej nazwy i przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.setAttributeNode" title="pl/DOM/element.setAttributeNode">setAttributeNode</a></dt> + <dd>Dodaje nowy węzeł atrybutu do bieżącego elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.setAttributeNodeNS" title="pl/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a></dt> + <dd>Dodaje nowy węzeł atrybutu do bieżącego elementu wg podanej nazwy i przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.supports" title="pl/DOM/element.supports">supports</a></dt> + <dd>Sprawdza, czy implementacja DOM pozwala na wykorzystanie konkretnej możliwości.</dd> +</dl> + +<h3 id="Uchwyty_zdarze.C5.84" name="Uchwyty_zdarze.C5.84">Uchwyty zdarzeń</h3> + +<p>Poniższe właściwości nie mogą być przypisane, tak jak uchwyty zdarzeń obiektów document czy window. Wszystkie poniższe własności służą tylko do odczytu - zwracają kod obsługi zdarzeń, jeżeli został on nadany elementowi w samym HTML-u bądź XML-u.</p> + +<p><strong>Są to właściwości odnoszące się do HTML dla atrybutów zdarzeń 'on'.</strong></p> + +<p><strong>W przeciwieństwie do odpowiadających atrybutów, wartości tych właściwość są funkcjami lub jakimkolwiek innym obiektem implementowanym przez <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener">EventListener</a> interfejs. Przypisanie atrybutu zdarzenia w HTML powoduje utworzenie funkcji opakowującej funkcji dla określonego kodu. Np. podając następujący HTML:</strong></p> + +<pre><div onclick="foo();">click me!</div> +</pre> + +<p><strong>Jeżeli <code>element</code> jest referencją do <code><div></code>, wartość <code>element.onclick</code> wynosi faktycznie:</strong></p> + +<pre>function onclick(event) { + foo(); +} +</pre> + +<p><strong>Note how the <a href="/pl/DOM/event" title="pl/DOM/event">event</a> object is passed as parameter <code>event</code> to this wrapper function.</strong></p> + +<dl> + <dt><a href="/pl/DOM/element.onblur" title="pl/DOM/element.onblur">onblur</a></dt> + <dd>Zwraca kod obsługi zdarzenia blur.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onclick" title="pl/DOM/element.onclick">onclick</a></dt> + <dd>Zwraca kod obsługi zdarzenia onclick.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.ondblclick" title="pl/DOM/element.ondblclick">ondblclick</a></dt> + <dd>Zwraca kod obsługi zdarzenia dblclick.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onfocus" title="pl/DOM/element.onfocus">onfocus</a></dt> + <dd>Zwraca kod obsługi zdarzenia focus.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onkeydown" title="pl/DOM/element.onkeydown">onkeydown</a></dt> + <dd>Zwraca kod obsługi zdarzenia keydown.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onkeypress" title="pl/DOM/element.onkeypress">onkeypress</a></dt> + <dd>Zwraca kod obsługi zdarzenia keypress.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onkeyup" title="pl/DOM/element.onkeyup">onkeyup</a></dt> + <dd>Zwraca kod obsługi zdarzenia keyup.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onmousedown" title="pl/DOM/element.onmousedown">onmousedown</a></dt> + <dd>Zwraca kod obsługi zdarzenia mousedown.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onmousemove" title="pl/DOM/element.onmousemove">onmousemove</a></dt> + <dd>Zwraca kod obsługi zdarzenia mousemove.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onmouseout" title="pl/DOM/element.onmouseout">onmouseout</a></dt> + <dd>Zwraca kod obsługi zdarzenia mouseout.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onmouseover" title="pl/DOM/element.onmouseover">onmouseover</a></dt> + <dd>Zwraca kod obsługi zdarzenia mouseover.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onmouseup" title="pl/DOM/element.onmouseup">onmouseup</a></dt> + <dd>Zwraca kod obsługi zdarzenia mouseup.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onresize" title="pl/DOM/element.onresize">onresize</a></dt> + <dd>Zwraca kod obsługi zdarzenia resize.</dd> +</dl> diff --git a/files/pl/web/api/element/innerhtml/index.html b/files/pl/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..dafe31adf1 --- /dev/null +++ b/files/pl/web/api/element/innerhtml/index.html @@ -0,0 +1,67 @@ +--- +title: element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/innerHTML +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><strong>innerHTML</strong> ustawia lub pobiera zbiór zawartych w danym elemencie znaczników razem z ich treścią.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">var <em>markup</em> = element.innerHTML; +element.innerHTML = <em>markup</em>; +</pre> + +<ul> + <li><code>markup</code> to ciąg znaków z zawartością elementu (w tym elementami potomnymi) jako zwykły HTML. Na przykład: <code>"<p>Jakiś tekst</p>"</code>.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>// HTML: +// <div id="d"><p>Treść</p> +// <p>Bardziej skomplikowane</p> +// </div> + +d = document.getElementById("d"); +dump(d.innerHTML); + +// ciąg "<p>Treść</p><p>Bardziej skomplikowane</p>" +// zostanie wyświetlony w oknie konsoli +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Własność ta, nie będąca częścią specyfikacji W3C DOM, zapewnia możliwość łatwego zastąpienia całej zawartości elementu. Na przykład można wyczyścić wszystko co jest w body:</p> + +<pre class="eval">document.body.innerHTML = ""; // Zawartość body zostaje zastąpiona pustym ciągiem +</pre> + +<p>Własność innerHTML różnych elementów, w tym <code>BODY</code> i <code>HTML</code> może zostać pobrana czy zastąpiona. Można jej użyć, by wyświetlić źródło zmodyfikowanej dynamicznie strony:</p> + +<pre>// Skopiuj jako pojedynczą linię i wklej do paska adresu +javascript:x=document.body.innerHTML.replace(/</g,'&lt;').replace(/\n/g,'<br>'); document.body.innerHTML = x; +</pre> + +<p>Ponieważ nie ma publicznej specyfikacji dla tej własności, jej implementacje różnią się. Na przykład po wprowadzeniu tekstu do pola tekstowego, IE zmieni zawartość atrybutu <code>value</code> elementu <code>INPUT</code> w <code>innerHTML</code>, a przeglądarki oparte o Gecko - nie.</p> + +<p>Własności tej nigdy nie powinno się używać do zapisu części tabeli - zamiast niej należy skorzystać z metod W3C DOM. <code>innerHTML</code> można jednak użyć, by zapisać całą tabelę lub zmodyfikować zawartość pojedynczych komórek.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>{{ DOM0() }}</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp">MSDN innerHTML</a></p> + +<p>{{ languages( { "en": "en/DOM/element.innerHTML", "fr": "fr/DOM/element.innerHTML", "ja": "ja/DOM/element.innerHTML" } ) }}</p> diff --git a/files/pl/web/api/element/insertadjacenthtml/index.html b/files/pl/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..c3332ed337 --- /dev/null +++ b/files/pl/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,91 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +translation_of: Web/API/Element/insertAdjacentHTML +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>insertAdjacentHTML()</code></strong> metoda z {{domxref("Element")}} interfejsu analizuje specyficzny tekst jak HTML albo XML, wstawia wynik w drzewo DOM w określonej pozycji. to nie naprawia elementu jest użyty na a zatem nie jest zepsuty istniejący element w środku elementu. To unika ekstra kroków z serializacją, zrobienie tego jest wiele szybsze niż bezpośredni {{domxref("Element.innerHTML", "innerHTML")}} manipulation.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>position</code></dt> + <dd>A {{domxref("DOMString")}} reprezentuje pozycję relatywną <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">element</span></font>-u musi być must be jeden z następujących ciągów: + <ul> + <li><code style="color: red;">'beforebegin'</code>: przed <code>element</code> -em.</li> + <li><code style="color: green;">'afterbegin'</code>: W środku <code>element</code>-u przed jego pierwszym dzieckiem.</li> + <li><code style="color: blue;">'beforeend'</code>: W środku elementu po jego ostatnim dziecku.</li> + <li><code style="color: magenta;">'afterend'</code>: Po <code>element</code>-cie </li> + </ul> + </dd> + <dt><code>text</code></dt> + <dd>string analizuje HTML albo XML i włącza w drzewo.</dd> +</dl> + +<h3 id="Visualization_of_position_names">Visualization of position names</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>Note: </strong><code>beforebegin</code> i <code>afterend</code> pozycja działa tylko jeśli node jest w drzewie DOM i ma rodzica elementu.</div> + +<h2 id="Przykład">Przykład:</h2> + +<pre class="brush: js">// <div id="one">one</div> +var d1 = document.getElementById('one'); +d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); + +// At this point, the new structure is: +// <div id="one">one</div><div id="two">two</div></pre> + +<h2 id="Notes">Notes</h2> + +<h3 id="Security_considerations">Security considerations</h3> + +<p>When inserting HTML into a page by using <code>insertAdjacentHTML()</code>, be careful not to use user input that hasn't been escaped.</p> + +<p>It is not recommended you use <code>insertAdjacentHTML()</code> when inserting plain text; instead, use the {{domxref("Node.textContent")}} property or the {{domxref("Element.insertAdjacentText()")}} method. This doesn't interpret the passed content as HTML, but instead inserts it as raw text.</p> + +<h2 id="Specification">Specification</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', '#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">Browser compatibility</h2> + + + +<p>{{Compat("api.Element.insertAdjacentHTML")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("Element.insertAdjacentText()")}}</li> + <li>{{domxref("XMLSerializer")}}: Construct a DOM representation of XML text</li> + <li><a class="external" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.</span></li> +</ul> diff --git a/files/pl/web/api/element/insertbefore/index.html b/files/pl/web/api/element/insertbefore/index.html new file mode 100644 index 0000000000..27c40ad945 --- /dev/null +++ b/files/pl/web/api/element/insertbefore/index.html @@ -0,0 +1,86 @@ +--- +title: element.insertBefore +slug: Web/API/Element/insertBefore +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/insertBefore +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Wstawia określony węzeł przed danym elementem jako dziecko aktualnego węzła.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">var <em>wstawionyElement</em> =<em>elementRodzic</em>.insertBefore(<em>nowyElement</em>,<em>danyElement</em>) +</pre> + +<p>Jeżeli <var>danyElement</var> ma wartość <code>null</code>, <var>nowyElement</var> jest wstawiany na końcu listy węzłów potomnych.</p> + +<ul> + <li><code>nowyElement</code> Węzeł do wstawienia.</li> + <li><code>danyElement</code> Węzeł przed którym <code>nowyElement</code> ma zostać wstawiony.</li> + <li><code>elementRodzic</code> Rodzic nowo wstawianego elementu.</li> + <li><code>wstawionyElement</code> Węzeł, który jest wstawiany, czyli <code>nowyElement</code>.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre> <html> + + <head> + <title>Gecko DOM insertBefore test</title> + </head> + + <body> + <div> + <span id="childSpan">foo bar</span> + </div> + + <script type="text/javascript"> + // tworzy pusty węzeł elementu + // bez ID, jakichkolwiek atrybutów lub jakiejkolwiek zawartości + var sp1 = document.createElement("span"); + + // daje to atrybut id nazwany 'newSpan' + sp1.setAttribute("id", "newSpan"); + + // tworzy jakąś zawartość dla nowo powstałego elementu. + var sp1_content = document.createTextNode("Jest to nowy element span. "); + + // zwraca się, która treść ma być do nowego elementu. + sp1.appendChild(sp1_content); + + var sp2 = document.getElementById("childSpan"); + var parentDiv = sp2.parentNode; + + // wstawia nowy element do DOM przed sp2 + parentDiv.insertBefore(sp1, sp2); + </script> + + </body> + </html> +</pre> + +<p>Nie istnieje metoda <code>insertAfter</code>, jednak można ją emulować poprzez kombinację <code>insertBefore</code> oraz <code><a href="pl/DOM/element.nextSibling">nextSibling</a></code>.</p> + +<p>W powyższym przykładzie, <code>sp1</code> może zostać wstawiona za <code>sp2</code> przy użyciu:</p> + +<pre class="eval">parentDiv.insertBefore(sp1, sp2.nextSibling); +</pre> + +<p>Jeżeli <code>sp2</code> nie posiada następnego rodzeństwa i musi być ostatnim potomnym —<code>sp2.nextSibling</code> to zwróci <code>null</code> więc <code>sp1</code> będzie wstawione na końcu listy węzłów potomnych (np. natychmiast po <code>sp2</code>).</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-952280727">insertBefore</a></p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/element.insertBefore", "fr": "fr/DOM/element.insertBefore", "ja": "ja/DOM/element.insertBefore", "pt": "pt/DOM/element.insertBefore" } ) }}</p> diff --git a/files/pl/web/api/element/lang/index.html b/files/pl/web/api/element/lang/index.html new file mode 100644 index 0000000000..446c0817b9 --- /dev/null +++ b/files/pl/web/api/element/lang/index.html @@ -0,0 +1,40 @@ +--- +title: element.lang +slug: Web/API/Element/lang +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/lang +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność ta pozwala pobrać lub ustawić język bazowy wartości atrybutów i treści elementu.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">var <var>languageUsed</var> = elementNodeReference.lang; +elementNodeReference.lang = <var>NewLanguage</var>; +</pre> +<ul> + <li><var>languageUsed</var> to zmienna (ciąg znaków) do której przypisany zostanie aktualny język elementu.</li> + <li><var>NewLanguage</var> to zmienna której wartość będzie użyta jako nowy język elementu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// poniższy fragment kodu porównuje język bazowy i odsyła +// do innych URL na podstawie odczytanego kodu języka +if (document.documentElement.lang == "en") + { + window.location.href = "Some_document.html.en"; + } +else if(document.documentElement.lang == "ru") + { + window.location.href = "Some_document.html.ru"; + }; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Kod języka zwracany przez w/w właściwość zgodny jest z kodami zdefiniowanymi w dokumencie <a class="external" href="http://tools.ietf.org/html/rfc1766" title="http://tools.ietf.org/html/rfc1766">RFC 1766</a>. Przykładowo: "en" dla języka angielskiego, "ja" dla japońskiego, "es" dla hiszpańskiego itd. Domyślna wartość atrybutu to <code>unknown</code>. Wartość tego atrybutu ustawiana jest zwykle dla podstawowego (najwyższego) elementu dokumentu.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59132807">W3C DOM Level 2 HTML: lang</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.lang", "fr": "fr/DOM/element.lang", "ja": "ja/DOM/element.lang" } ) }}</p> diff --git a/files/pl/web/api/element/lastchild/index.html b/files/pl/web/api/element/lastchild/index.html new file mode 100644 index 0000000000..34475c02d7 --- /dev/null +++ b/files/pl/web/api/element/lastchild/index.html @@ -0,0 +1,28 @@ +--- +title: element.lastChild +slug: Web/API/Element/lastChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/lastChild +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>lastChild</b> zwraca ostatnie dziecko węzła.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval"><i>ostatnieDziecko</i> = element.lastChild +</pre> +<p><code>ostatnieDziecko</code> to węzeł. Jeśli jego rodzicem jest element, dzieckiem jest na ogół węzeł elementu, komentarza lub węzeł tekstowy.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>tr = document.getElementById("row1"); +td_róg = tr.lastChild; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jeżeli nie ma węzłów potomnych, zwracane jest <code>null</code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB">lastChild </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.lastChild", "fr": "fr/DOM/element.lastChild", "ja": "ja/DOM/element.lastChild" } ) }}</p> diff --git a/files/pl/web/api/element/length/index.html b/files/pl/web/api/element/length/index.html new file mode 100644 index 0000000000..ce5e1345ef --- /dev/null +++ b/files/pl/web/api/element/length/index.html @@ -0,0 +1,37 @@ +--- +title: element.length +slug: Web/API/Element/length +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NodeList/length +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>length</b> zwraca liczbę elementów listy.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>liczbaElementów</i> = nodeList.length +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>liczbaElementów</code> to liczba całkowita reprezentująca liczbę elementów listy.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// wszystkie paragrafy z dokumentu +items = document.getElementsByTagName("p"); +// są jakieś? +if ( items.length ) { + // dodaj HTML z każdego elemntu listy + for (var i = 0; i < items.length; i++) { + gross += items[0].innerHTML; + // gross zawiera teraz cały HTML z paragrafów + } +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Właściwość <b>length</b> jest bardzo częsta w programowaniu z użyciem DOM. Używa się jej by sprawdzić, czy lista zawiera elementy oraz w pętli for, jak w powyższym przykładzie.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-203510337">length </a></p> +<p>{{ languages( { "en": "en/DOM/element.length", "ja": "ja/DOM/element.length" } ) }}</p> diff --git a/files/pl/web/api/element/localname/index.html b/files/pl/web/api/element/localname/index.html new file mode 100644 index 0000000000..55b5649e31 --- /dev/null +++ b/files/pl/web/api/element/localname/index.html @@ -0,0 +1,64 @@ +--- +title: element.localName +slug: Web/API/Element/localName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/localName +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>localName</b> zwraca lokalną część uściślonej nazwy węzła.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>nazwa</i> = element.localName +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>nazwa</code> to ciąg z lokalną nazwą węzła (zobacz {{ Anch("Uwagi") }} poniżej, aby dowiedzieć się więcej)</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p>(Musi obsługiwać treść XML typu, jak <tt>text/xml</tt> lub <tt>application/xhtml+xml</tt>.)</p> +<pre class="eval"><html xmlns="<span class="nowiki">http://www.w3.org/1999/xhtml</span>" + xmlns:svg="<span class="nowiki">http://www.w3.org/2000/svg</span>"> +<head> + <script><![CDATA[ + function test() { + var text = document.getElementById('text'); + var circle = document.getElementById('circle'); + + text.value = "<svg:circle> has:\n" + + "localName = '" + circle.localName + "'\n" + + "namespaceURI = '" + circle.namespaceURI + "'"; + } + ]]></script> +</head> +<body onload="test()"> + <textarea id="text" rows="4" cols="55"/> + <svg:svg version="1.1" + style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:0;" + viewBox="0 0 100 100"> + <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/> + </svg:svg> +</body> +</html> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Dla węzłów typu innego niż <code>ELEMENT_NODE</code> i <code>ATTRIBUTE_NODE</code> oraz dla węzłów utworzonych za pomocą metod DOM Level 1, jak na przykład <code><a href="pl/DOM/document.createElement">document.createElement</a></code>, własność ta ma zawsze wartość <code>NULL</code>.</p> +<p><b>localname</b> węzła to ta część uściślonej nazwy węzła, która znajduje się po dwukropku. Uściślone nazwy są zwykle używane w XML jako część przestrzeni nazw w poszczególnych dokumentach XML. Na przykład w uściślonej nazwie "ecomm:partners" nazwa lokalna to "partners", a "ecomm" to prefiks.</p> +<pre><ecomm:business id="soda_shop" type="brick_n_mortar"> + <ecomm:partners> + <ecomm:partner id="1001">Tony's Syrup Warehouse + </ecomm:partner> + </ecomm:partner> +</ecomm:business> +</pre> +<p>Prefiks - w tym wypadku "ecomm" - określa przestrzeń nazw, w której można użyć nazwy lokalnej.</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<p><a href="pl/DOM/element.namespaceURI">element.namespaceURI</a></p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeNSLocalN">localName </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.localName", "fr": "fr/DOM/element.localName", "ja": "ja/DOM/element.localName" } ) }}</p> diff --git a/files/pl/web/api/element/name/index.html b/files/pl/web/api/element/name/index.html new file mode 100644 index 0000000000..e1a9fa7f41 --- /dev/null +++ b/files/pl/web/api/element/name/index.html @@ -0,0 +1,60 @@ +--- +title: element.name +slug: Web/API/Element/name +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><strong>name</strong> pobiera lub ustawia atrybut <code>name</code> obiektu DOM. Ma zastosowanie tylko dla poniższych elementów: anchor, applet, form, frame, iframe, image, input, map, meta, object, option, param, select i textarea.</p> +<p><strong>name</strong> można wykorzystać w metodzie <a href="/pl/DOM/document.getElementsByName" title="pl/DOM/document.getElementsByName">getElementsByName</a>, w obiekcie <a href="/pl/DOM/form" title="pl/DOM/form">form</a> i w kolekcji <a href="/pl/DOM/form.elements" title="pl/DOM/form.elements">elements</a>. Jeśli zostanie użyta dla formularza lub kolekcji elementów, właściwość tak może zwrócić jeden element lub ich kolekcję.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; +var elName = <em>HTMLElement</em>.name; + +var kontrolka = <em>HTMLFormElement</em>.<em>nazwaElementu</em>; +var kolekcjaKontrolek = <em>HTMLFormElement</em>.elements.<em>nazwaElementu</em>; +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval"><form action="" name="formA"> + <input type="text" value="foo"> +</form> + +<script type="text/javascript"> + + // pobierz referncję do pierwszego elementu formularza + var formElement = document.forms['formA'].elements[0]; + + // nadaj mu nazwę + formElement.name = 'inputA'; + + // i wyświetl jego wartość + alert(document.forms['formA'].elements['inputA'].value); + +</script> +</pre> +<h3 id="uwagi" name="uwagi">uwagi</h3> +<p>W przeglądarce Internet Explorer (IE) nie można modyfikować właściwości <code>name</code> obiektów DOM utworzonych za pomocą <code><a href="/pl/DOM/document.createElement" title="pl/DOM/document.createElement">createElement</a></code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Specyfikacja W3C DOM 2 HTML:</p> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Option</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> +</ul> +<p>{{ languages( { "en": "en/DOM/element.name", "ja": "ja/DOM/element.name", "fr": "fr/DOM/element.name" } ) }}</p> diff --git a/files/pl/web/api/element/namespaceuri/index.html b/files/pl/web/api/element/namespaceuri/index.html new file mode 100644 index 0000000000..9f252ba570 --- /dev/null +++ b/files/pl/web/api/element/namespaceuri/index.html @@ -0,0 +1,39 @@ +--- +title: element.namespaceURI +slug: Web/API/Element/namespaceURI +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/namespaceURI +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca URI przestrzeni nazw tego węzła lub NULL, jeśli jej nie określono.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>przestrzeńNazw</i> = element.namespaceURI +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>przestrzeńNazw</code> to ciąg znaków reprezentujący URI przestrzeni nazw bieżącego węzła.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p>W poniższym wycinku kodu sprawdzane są <code>localName</code> i <code>namespaceURI</code> węzła. Jeśli <code>namespaceURI</code> jest zgodny ze zmienną zawierającą przestrzeń nazw dla XUL, węzeł jest uznawany za widget <browser /> w języku XUL.</p> +<pre>if (node.localName == "browser" + && node.namespaceURI == kXULNSURI) { +// xul browser +this.viewee = node.webNavigation.document; +//... +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Nie jest to wyznaczona wartość, będąca rezultatem przeszukiwania w oparciu o deklaracje przestrzeni nazw w zakresie, w jakim znajduje się element. Jest to jedynie URI takiej przestrzeni nazw, jaką nadano w momencie tworzenia elementu.</p> +<p>Dla węzłow typów innych niż <code>ELEMENT_NODE</code> i <code>ATTRIBUTE_NODE</code> oraz węzłów utworzonych metodami DOM Level 1, jak <a href="pl/DOM/document.createElement">document.createElement</a>, wartość tej właściwości to zawsze NULL.</p> +<p>Zgodnie ze specyfikacją <a class="external" href="http://www.w3.org/TR/REC-xml-names">Namespaces in XML</a> atrybut nie dziedziczy przestrzeni nazw po elemencie, do którego jest przypisany. Jeśli atrybut nie ma bezpośrednio nadanej przestrzeni nazw, po prostu nie należy do żadnej przestrzeni.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeNSname">namespaceURI</a></p> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#Namespaces-Considerations">Przestrzenie nazw XML</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.namespaceURI", "fr": "fr/DOM/element.namespaceURI", "ja": "ja/DOM/element.namespaceURI" } ) }}</p> diff --git a/files/pl/web/api/element/nextsibling/index.html b/files/pl/web/api/element/nextsibling/index.html new file mode 100644 index 0000000000..17f1822a56 --- /dev/null +++ b/files/pl/web/api/element/nextsibling/index.html @@ -0,0 +1,63 @@ +--- +title: element.nextSibling +slug: Web/API/Element/nextSibling +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/nextSibling +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca węzeł znajdujący się w drzewie bezpośrednio za węzłem bieżącym.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval"><i>następnyElement</i> = element.nextSibling +</pre> +<p><code>następnyElement</code> to węzeł bezpośrednio następny w liście rodzeństwa (np. liście dzieci węzła <code>parentNode</code>). Następnym węzłem jest na ogół węzeł elementu, komentarza lub węzeł tekstowy.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><div id="div-01">Here is div-01</div> +<div id="div-02">Here is div-02</div> + +<script type="text/javascript"> + var el = document.getElementById('div-01').nextSibling; + document.write('<p>Rodzeństwo div-01</p><ol>'); + while (el) { + document.write('<li>' + el.nodeName + '</li>'); + el = el.nextSibling; + } + document.write('</ol>'); +</script> + +/************************************************** + Po załadowaniu zostanie dopisane do strony: + + Rodzeństwo div-01 + + 1. #text + 2. DIV + 3. #text + 4. SCRIPT + 5. P + 6. OL +**************************************************/ +</pre> +<p>Węzły tekstowe - <code>#text</code> - są w powyższym przykładzie wstawiane do modelu dokumentu w miejsce białych znaków między elementami (np. po znaczniku zamykającym jeden element, ale przed znacznikiem otwierającym następny element). Białe znaki nie są wstawiane przy wywołaniu <code>document.write</code>.</p> +<p>Poniższy przykład pokazuje, jak białe znaki wpływają na sąsiednie węzły komórek tabeli:</p> +<pre><table> + <tr> + <td id="cell1">cell1</td> + <td id="cell2">cell2</td> + </tr> + <tr> + <td id="cell3">cell3</td><td id="cell4">cell4</td></tr> +</table> +</pre> +<p><code>nextSibling</code> <code>cell1</code> to węzeł tekstowy. Między komórkami drugiego rzędu tabeli nie ma białych znaków, dlatego rodzeństwo <code>cell3</code> to tylko <code>cell4</code>. Podczas przechodzenia przez model dokumentu za pomocą <code>nextSibling</code> należy liczyć się z możliwością wystąpienia węzłów tekstowych.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zwraca <code>null</code>, kiedy nie ma już więcej węzłów.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-6AC54C2F">nextSibling </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.nextSibling", "fr": "fr/DOM/element.nextSibling", "ja": "ja/DOM/element.nextSibling" } ) }}</p> diff --git a/files/pl/web/api/element/nodename/index.html b/files/pl/web/api/element/nodename/index.html new file mode 100644 index 0000000000..93a54424a6 --- /dev/null +++ b/files/pl/web/api/element/nodename/index.html @@ -0,0 +1,98 @@ +--- +title: element.nodeName +slug: Web/API/Element/nodeName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/nodeName +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca nazwę węzła jako ciąg znaków.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>nazwa</i> = element.nodeName +</pre> +<p> + <i> + nazwa</i> + to ciąg znaków reprezentujący nazwę bieżącego elementu. <code>nodeName</code> to atrybut tylko do odczytu.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Poniżej przedstawione są wartości zwracane dla różnych typów węzłów:</p> +<table class="standard-table"> + <tbody> + <tr> + <th class="header" style="text-align: center;">Interfejs</th> + <th class="header" style="text-align: center;">nodeName</th> + </tr> + <tr> + <td><a href="pl/DOM/Attr">Attr</a></td> + <td>tak samo jak <code><a href="pl/DOM/Attr.name">Attr.name</a></code></td> + </tr> + <tr> + <td><a href="pl/DOM/CDATASection">CDATASection</a></td> + <td>"#cdata-section"</td> + </tr> + <tr> + <td><a href="pl/DOM/Comment">Comment</a></td> + <td>"#comment"</td> + </tr> + <tr> + <td><a href="pl/DOM/Document">Document</a></td> + <td>"#document"</td> + </tr> + <tr> + <td><a href="pl/DOM/DocumentFragment">DocumentFragment</a></td> + <td>"#document-fragment"</td> + </tr> + <tr> + <td><a href="pl/DOM/DocumentType">DocumentType</a></td> + <td>tak samo jak <code><a href="pl/DOM/DocumentType.name">DocumentType.name</a></code></td> + </tr> + <tr> + <td><a href="pl/DOM/Element">Element</a></td> + <td>tak samo jak <code><a href="pl/DOM/element.tagName">Element.tagName</a></code></td> + </tr> + <tr> + <td><a href="pl/DOM/Entity">Entity</a></td> + <td>nazwa encji</td> + </tr> + <tr> + <td><a href="pl/DOM/EntityReference">EntityReference</a></td> + <td>nazwa refernecji do encji</td> + </tr> + <tr> + <td><a href="pl/DOM/Notation">Notation</a></td> + <td>nazwa notacji</td> + </tr> + <tr> + <td><a href="pl/DOM/ProcessingInstruction">ProcessingInstruction</a></td> + <td>tak samo jak <code><a href="pl/DOM/ProcessingInstruction.target">ProcessingInstruction.target</a></code></td> + </tr> + <tr> + <td>Text</td> + <td>"#text"</td> + </tr> + </tbody> +</table> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p>Dane są poniższe znaczniki</p> +<pre><div id="d1">hello world</div> +<input type="text" id="t"/> +</pre> +<p>i taki skrypt:</p> +<pre>var div1 = document.getElementById("d1"); +var poleTekstowe = document.getElementById("t"); +poleTekstowe.value = div1.nodeName; +</pre> +<p>W XHTML-u (lub innym formacie XML) wartość pola tekstowego to "div". W HTML wartość ta to "DIV".</p> +<p>Zauważ, że można było użyć właściwości <code><a href="pl/DOM/element.tagName">tagName</a></code>, ponieważ dla elementów <code>nodeName</code> ma taką samą wartość jak <code>tagName</code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">W3C DOM Level 2 Core: nodeName</a></p> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">W3C DOM Level 3 Core: nodeName</a></p> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.nodeName", "es": "es/DOM/element.nodeName", "fr": "fr/DOM/element.nodeName", "it": "it/DOM/element.nodeName", "ja": "ja/DOM/element.nodeName" } ) }}</p> diff --git a/files/pl/web/api/element/nodetype/index.html b/files/pl/web/api/element/nodetype/index.html new file mode 100644 index 0000000000..8f3825ea86 --- /dev/null +++ b/files/pl/web/api/element/nodetype/index.html @@ -0,0 +1,44 @@ +--- +title: element.nodeType +slug: Web/API/Element/nodeType +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/nodeType +--- +<div> + {{ApiRef}}</div> +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> +<p>Zwraca kod reprezentujący typ węzła.</p> +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> +<pre class="syntaxbox"><var>typ</var> = document.nodeType +</pre> +<p><code>typ</code> jest zmienną liczbową typu <code>unsigned short</code> o jednej z poniższych wartości:</p> +<ul> + <li>Node.ELEMENT_NODE == 1</li> + <li>Node.ATTRIBUTE_NODE == 2</li> + <li>Node.TEXT_NODE == 3</li> + <li>Node.CDATA_SECTION_NODE == 4</li> + <li>Node.ENTITY_REFERENCE_NODE == 5</li> + <li>Node.ENTITY_NODE == 6</li> + <li>Node.PROCESSING_INSTRUCTION_NODE == 7</li> + <li>Node.COMMENT_NODE == 8</li> + <li>Node.DOCUMENT_NODE == 9</li> + <li>Node.DOCUMENT_TYPE_NODE == 10</li> + <li>Node.DOCUMENT_FRAGMENT_NODE == 11</li> + <li>Node.NOTATION_NODE == 12</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p>Ten przykład sprawdza czy pierwszy węzeł wewnątrz elementu document jest comment node, i jeśli nie jest, wyświetli wiadomość.</p> +<pre class="brush:js">var node = document.documentElement.firstChild; + +if(node.nodeType != Node.COMMENT_NODE) + alert("You should comment your code well!"); +</pre> +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-111237558">DOM Level 2 Core: nodeType</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-111237558">DOM Level 3 Core: nodeType</a></li> +</ul> diff --git a/files/pl/web/api/element/nodevalue/index.html b/files/pl/web/api/element/nodevalue/index.html new file mode 100644 index 0000000000..205871bba3 --- /dev/null +++ b/files/pl/web/api/element/nodevalue/index.html @@ -0,0 +1,85 @@ +--- +title: Node.nodeValue +slug: Web/API/Element/nodeValue +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/nodeValue +--- +<div> + {{APIRef}}</div> +<div> + </div> +<div> + <span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Podsumowanie</span></div> +<p>Zwraca wartość bieżącego węzła.</p> +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> +<pre class="syntaxbox"><var>wartość</var> = document.nodeValue +</pre> +<p><code>wartość</code> to ciąg znaków reprezentujący wartość elementu, jeśli taka istnieje.</p> +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> +<p>Dla dokumentu <code>nodeValue</code> zwraca <code>null</code>. Dla węzłów tekstowych, komentarzy i CDATA <code>nodeValue</code> zwraca zawartość węzła. Dla węzłów atrybutów, zwracana jest wartość atrybutu.</p> +<p>Poniższa tabela przedstawia wartości zwracane dla różnych interfejsów:</p> +<table class="standard-table"> + <tbody> + <tr> + <th class="header" style="text-align: center;">Interfejs</th> + <th class="header" style="text-align: center;">nodeValue</th> + </tr> + <tr> + <td>Attr</td> + <td>wartość atrybutu</td> + </tr> + <tr> + <td>CDATASection</td> + <td>treść sekcji CDATA</td> + </tr> + <tr> + <td>Comment</td> + <td>treść komentarza</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>cała treść, wyłączając cel</td> + </tr> + <tr> + <td>Text</td> + <td>treść węzła tekstowego</td> + </tr> + </tbody> +</table> +<p>Jeśli <code>nodeValue</code> z definicji ma wartość <code>null</code>, ustawianie tej właściwości nie będzie mieć efektu.</p> +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-F68D080">nodeValue </a></li> +</ul> diff --git a/files/pl/web/api/element/normalize/index.html b/files/pl/web/api/element/normalize/index.html new file mode 100644 index 0000000000..4dac3822cc --- /dev/null +++ b/files/pl/web/api/element/normalize/index.html @@ -0,0 +1,22 @@ +--- +title: element.normalize +slug: Web/API/Element/normalize +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/normalize +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda zapisuje określony węzeł i całe jego poddrzewo w "znormalizowanej" formie. W znormalizowanym poddrzewie żaden węzeł tekstowy nie jest pusty, nie ma również sąsiednich węzłów tekstowych.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">element.normalize() +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.normalize", "fr": "fr/DOM/element.normalize" } ) }}</p> diff --git a/files/pl/web/api/element/offsetheight/index.html b/files/pl/web/api/element/offsetheight/index.html new file mode 100644 index 0000000000..ce5fc2254e --- /dev/null +++ b/files/pl/web/api/element/offsetheight/index.html @@ -0,0 +1,61 @@ +--- +title: element.offsetHeight +slug: Web/API/Element/offsetHeight +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetHeight +--- +<p>{{ ApiRef() }}</p> + +<h3 id="offsetHeight" name="offsetHeight">offsetHeight</h3> + +<p>Własność DHTML (Dynamic HyperText Markup Language), która daje wysokość relatywnego elementu do układu strony.</p> + +<h2 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h2> + +<pre class="eval">var<em>intElemOffsetHeight</em> = document.getElementById(<em>id_attribute_value</em>).offsetHeight; +</pre> + +<p><em>intElemOffsetHeight</em>is a variable storing an integer corresponding to the offsetHeight pixel value of the element. offsetHeight is a read-only property.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Typically, an element's <strong>offsetHeight</strong> is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.</p> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + +<p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + +<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> + +<p style="margin-top: 270px;"><img alt="grafika:offsetHeight.png"></p> + +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> + +<p>offsetHeight is part of the MSIE's DHTML object model. offsetHeight is not part of any W3C specification or technical recommendation.</p> + +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> + +<p>offsetHeight is a property of the DHTML object model which was first introduced by MSIE. It is sometimes referred as an element physical/graphical dimensions or an element's box height.</p> + +<h2 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h2> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetheight.asp?frame=true">MSDN's Definicja offsetHeight</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li> + <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/dom_el_ref18.html">Gecko DOM Reference on offsetHeight</a></li> +</ul> diff --git a/files/pl/web/api/element/offsetleft/index.html b/files/pl/web/api/element/offsetleft/index.html new file mode 100644 index 0000000000..b0252f3363 --- /dev/null +++ b/files/pl/web/api/element/offsetleft/index.html @@ -0,0 +1,73 @@ +--- +title: element.offsetLeft +slug: Web/API/Element/offsetLeft +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetLeft +--- +<p>{{ ApiRef("HTML DOM") }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca ilość pikseli, jaką dzieli<em>górny lewy róg</em> bieżącego elementu od lewej strony wewnątrz węzła <code><a href="pl/DOM/element.offsetParent">offsetParent</a></code>.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>left</em> =<em>element</em>.offsetLeft; +</pre> + +<p><code>left</code> jest liczbą całkowitą reprezentująca przesunięcie od lewej strony podane w pikselach.</p> + +<h3 id="Uwaga" name="Uwaga">Uwaga</h3> + +<p><code>offsetLeft</code> returns the position the upper left edge of the element; not necessarily the 'real' left edge of the element. This is important for inline elements (such as <strong>span</strong>) in flowed text that wraps from one line to the next. The span may start in the middle of the line and wrap around to the beginning of the next line. The <code>offsetLeft</code> will refer to the left edge of the start of the span, not the left edge of text at the start of the second line. Therefore, a box with the left, top, width and height of <code>offsetLeft, offsetTop, offsetWidth</code> and <code>offsetHeight</code> will not be a bounding box for a span with wrapped text. (And, I can't figure out how to find the leftmost edge of such a span, sigh.)</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>var colorTable = document.getElementById("t1"); +var tOLeft = colorTable.offsetLeft; + +if (tOLeft > 5) { + // duże lewe przesunięcie: zrób coś tutaj +} +</pre> + +<h3 id="Przyk.C5.82ad_2" name="Przyk.C5.82ad_2">Przykład</h3> + +<p>Per the note above, this example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.</p> + +<p><img alt="Image:offsetLeft.jpg"></p> + +<p><small><font color="gray">Note: This is an image of the example, not a live rendering in the browser. This was done because script elements can't be included in the wiki page.</font></small></p> + +<pre><div style="width: 300px; border-color:blue; + border-style:solid; border-width:1;"> + <span>Short span. </span> + <span id="long">Long span that wraps withing this div.</span> +</div> + +<div id="box" style="position: absolute; border-color: red; + border-width: 1; border-style: solid; z-index: 10"> +</div> + +<script> + var box = document.getElementById("box"); + var long = document.getElementById("long"); + box.style.left = long.offsetLeft + document.body.scrollLeft; + box.style.top = long.offsetTop + document.body.scrollTop; + box.style.width = long.offsetWidth; + box.style.height = long.offsetHeight; +</script> +</pre> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p><code><a href="pl/DOM/element.offsetParent">offsetParent</a></code>, <code><a href="pl/DOM/element.offsetTop">offsetTop</a></code>, <code><a href="pl/DOM/element.offsetWidth">offsetWidth</a></code>, <code><a href="pl/DOM/element.offsetHeight">offsetHeight</a></code></p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>Niestandardowa własność.</p> diff --git a/files/pl/web/api/element/offsetparent/index.html b/files/pl/web/api/element/offsetparent/index.html new file mode 100644 index 0000000000..c33d32b38c --- /dev/null +++ b/files/pl/web/api/element/offsetparent/index.html @@ -0,0 +1,28 @@ +--- +title: element.offsetParent +slug: Web/API/Element/offsetParent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetParent +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>offsetParent</b> zwraca referencję do obiektu, który jest najbliższym (w hierarchii zawierania się elementów) pozycjonowanym elementem. Jeżeli element nie jest pozycjonowany, <b>offsetParent</b> jest wówczas korzeń dokumentu (html w trybie zgodności ze standardami; body w trybie przybliżonym).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>parentObj</i> = element.offsetParent +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>parentObj</code> jest referencją do obiektu, względem którego przesunięty jest bieżący element.</li> +</ul> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. + <i> + Nie jest częścią specyfikacji.</i> +</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.offsetParent", "fr": "fr/DOM/element.offsetParent" } ) }}</p> diff --git a/files/pl/web/api/element/offsetwidth/index.html b/files/pl/web/api/element/offsetwidth/index.html new file mode 100644 index 0000000000..b78d7b4136 --- /dev/null +++ b/files/pl/web/api/element/offsetwidth/index.html @@ -0,0 +1,70 @@ +--- +title: element.offsetWidth +slug: Web/API/Element/offsetWidth +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetWidth +--- +<p>{{ APIRef("HTML DOM") }}</p> + +<h3 id="offsetWidth" name="offsetWidth">offsetWidth</h3> + +<p>właściwość <abbr title="Dynamic HyperText Markup Language">DHTML</abbr>, która podaje szerokość elementu, odnosząca się do układu strony.</p> + +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> + +<pre class="eval">var <em>intElemOffsetWidth</em> = document.getElementById(<em>id_attribute_value</em>).offsetWidth; +</pre> + +<p><code>intElemOffsetWidth</code> jest zmienną przechowującą liczbę całkowitą odpowiadającą wartości <strong><code>offsetWidth</code></strong> elementu i wyrażoną w pikselach. <strong><code>offsetWidth</code></strong> jest właściwością tylko do odczytu.</p> + +<h3 id="Opis" name="Opis">Opis</h3> + +<p>Zazwyczaj <strong><code>offsetWidth</code></strong> elementu obejmuje jego obramowanie, wewnętrzny margines (padding), pionowy pasek przewijania (jeśli jest obecny lub renderowany) i szerokość CSS elementu.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + +<p><span style="float: right;"><img alt="Image:BirmanCat.jpg" class="internal" src="/@api/deki/files/2210/=BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + +<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> + +<p style="margin-top: 270px;"><img alt="Image:offsetWidth.png" class="internal" src="/@api/deki/files/2468/=OffsetWidth.png"></p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><span id="result_box" lang="pl"><strong><code>offsetWidth</code></strong> jest częścią modelu obiektowego MSIE <abbr title="Dynamic HyperText Markup Language">DHTML</abbr>. <strong><code>offsetWidth</code></strong> nie jest częścią żadnej specyfikacji W3C ani rekomendacji technicznej.</span></p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><strong><code>offsetWidth</code></strong> jest własnością modelu obiektowego <span id="result_box" lang="pl"><abbr title="Dynamic HyperText Markup Language">DHTML</abbr></span>, który został wprowadzony przez MSIE. Czasem określany jest jako fizyczny/graficzny wymiar elementu lub jako szerokość pudełka elementu.</p> + +<h3 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h3> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetwidth.asp?frame=true">MSDN's offsetWidth definition</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li> +</ul> + +<div class="noinclude"> +<h3 id="Dokumentacja" name="Dokumentacja">Zobacz również</h3> +</div> + +<ul> + <li><a href="/fr/DOM/element.offsetHeight" title="element.offsetHeight">element.offsetHeight</a></li> + <li><a href="/pl/DOM/element.clientWidth" title="element.clientWidth">element.clientWidth</a></li> + <li><a href="/cn/DOM/element.clientHeight" title="element.clientHeight">element.clientHeight</a></li> +</ul> diff --git a/files/pl/web/api/element/onclick/index.html b/files/pl/web/api/element/onclick/index.html new file mode 100644 index 0000000000..b6215b4c00 --- /dev/null +++ b/files/pl/web/api/element/onclick/index.html @@ -0,0 +1,66 @@ +--- +title: element.onclick +slug: Web/API/Element/onclick +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onclick +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Właściwość <strong>onclick</strong> zwraca kod obsługi zdarzenia <em>onClick</em> w bieżącym elemencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><em>element</em>.onclick = <em>refDoFunkcji</em>; +</pre> +<p>gdzie <em>refDoFunkcji</em> to nazwa funkcji zadeklarowanej gdzie indziej bądź <em>wyrażenie funkcyjne</em>. <span class="comment">Zob. <a href="/pl/Dokumentacja_języka_JavaScript_1.5/Funkcje">Funkcje</a>. - tego rodzialu jeszcze nie ma, a pod nazwa Funkcje jest cos innego</span></p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><html> + +<head> +<title>przykład zdarzenia onclick</title> + +<script type="text/javascript"> + +function initElement() + { + var p = document.getElementById("foo"); + + // Uwaga: ani showAlert();, ani showAlert(param); tu NIE zadziałają + // potrzebna jest referencja do funkcji, a nie wywołanie funkcji + p.onclick = showAlert; + }; + +function showAlert() + { + alert("wykryto zdarzenie onclick!") + } +</script> + +<style type="text/css"> +<!-- +#foo { +border: solid blue 2px; +} +--> +</style> +</head> + +<body onload="initElement()";> +<span id="foo">Mój Element</span> +<p>Kliknij na powyższy element.</p> +</body> +</html> +</pre> +<p>Można również użyć funkcji bezimiennej jak poniżej:</p> +<pre>p.onclick = function() { alert("moot!"); }; +</pre> +<p><span class="comment">Not going to confuse poor readers with this. You could also use a the Function constructor: <pre> p.onclick = Function( "alert('moot!')" ); </pre></span></p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zdarzenie <em>click</em> jest wywoływane, kiedy użytkownik kliknie na element. Zdarzenie to występuje po <em>mousedown</em> i <em>mouseup</em>.</p> +<p>Tylko jedna funkcja obsługi zdarzenia może zostać przypisana za jednym razem za pomocą tej właściwości. Możesz zamiast niej użyć metody <a href="/pl/DOM/element.addEventListener" title="pl/DOM/element.addEventListener"> addEventListener</a> - jest bardziej elastyczna i stanowi część specyfikacji DOM Events.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<p>{{ languages( { "en": "en/DOM/element.onclick", "fr": "fr/DOM/element.onclick" } ) }}</p> diff --git a/files/pl/web/api/element/onkeypress/index.html b/files/pl/web/api/element/onkeypress/index.html new file mode 100644 index 0000000000..eb57c1936c --- /dev/null +++ b/files/pl/web/api/element/onkeypress/index.html @@ -0,0 +1,21 @@ +--- +title: element.onkeypress +slug: Web/API/Element/onkeypress +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onkeypress +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Właściwość <b>onkeypress</b> zawiera kod obsługi zdarzenia onKeyPress dla bieżącego elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">element.onkeypress = kod obsługi zdarzenia +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zdarzenie keydown wywoływane jest, gdy użytkownik naciska klawisz na klawiaturze.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> diff --git a/files/pl/web/api/element/onkeyup/index.html b/files/pl/web/api/element/onkeyup/index.html new file mode 100644 index 0000000000..ad411b0e1a --- /dev/null +++ b/files/pl/web/api/element/onkeyup/index.html @@ -0,0 +1,24 @@ +--- +title: element.onkeyup +slug: Web/API/Element/onkeyup +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onkeyup +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Właściwość <b>onkeyup</b> zawiera kod obsługi zdarzenia <code>keyup</code> dla bieżącego elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">kod obsługi zdarzenia = element.onkeyup +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zdarzenie <code>keyup</code> wywoływane jest, gdy użytkownik zwalnia naciśnięty klawisz na klawiaturze.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.onkeyup", "fr": "fr/DOM/element.onkeyup" } ) }}</p> diff --git a/files/pl/web/api/element/onmousedown/index.html b/files/pl/web/api/element/onmousedown/index.html new file mode 100644 index 0000000000..e616906126 --- /dev/null +++ b/files/pl/web/api/element/onmousedown/index.html @@ -0,0 +1,23 @@ +--- +title: element.onmousedown +slug: Web/API/Element/onmousedown +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onmousedown +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność <b>onmousedown</b> zwraca kod obsługi zdarzenia onMouseDown w bieżącym elemencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">event handling code = element.onMouseDown +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zdarzenie <code>mousedown</code> jest wywołane kiedy użytkownik naciśnie lewy przycisk.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.onmousedown", "fr": "fr/DOM/element.onmousedown" } ) }}</p> diff --git a/files/pl/web/api/element/onmousemove/index.html b/files/pl/web/api/element/onmousemove/index.html new file mode 100644 index 0000000000..f54256c9f7 --- /dev/null +++ b/files/pl/web/api/element/onmousemove/index.html @@ -0,0 +1,29 @@ +--- +title: element.onmousemove +slug: Web/API/Element/onmousemove +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onmousemove +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Właściwość <strong>onmousemove</strong> zwraca kod obsługi zdarzenia <code>mousemove</code> w bieżącym elemencie.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">event handling code = element.onMouseMove +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Zdarzenie <code>mousemove</code> jest wywoływane, kiedy użytkownik przesunie kursor myszy.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> diff --git a/files/pl/web/api/element/ownerdocument/index.html b/files/pl/web/api/element/ownerdocument/index.html new file mode 100644 index 0000000000..0ecbed4869 --- /dev/null +++ b/files/pl/web/api/element/ownerdocument/index.html @@ -0,0 +1,30 @@ +--- +title: element.ownerDocument +slug: Web/API/Element/ownerDocument +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/ownerDocument +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność <b>ownerDocument</b> zwraca obiekt najwyższego poziomu - dokument, w którym znajduje się bieżący węzeł.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>dokument</i> = element.ownerDocument +</pre> +<p><code>dokument</code> to obiekt <code>document</code>, będący rodzicem bieżącego elementu.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// dla danego elementu "p" znajdź element HTML najwyższego poziomu +d = p.ownerDocument; +html = d.documentElement; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Obiekt <code>document</code> zwracany przez tę własność jest głównym obiektem, w którym tworzone są wszystkie węzły-dzieci właściwego dokumentu HTML. Własność ta użyta na węźle, który sam jest dokumentem, zwraca <code>NULL</code></p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#node-ownerDoc">ownerDocument </a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.ownerDocument", "fr": "fr/DOM/element.ownerDocument", "ja": "ja/DOM/element.ownerDocument" } ) }}</p> diff --git a/files/pl/web/api/element/parentnode/index.html b/files/pl/web/api/element/parentnode/index.html new file mode 100644 index 0000000000..ec9bbceda0 --- /dev/null +++ b/files/pl/web/api/element/parentnode/index.html @@ -0,0 +1,34 @@ +--- +title: element.parentNode +slug: Web/API/Element/parentNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/parentNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność <b>parentNode</b> zwraca rodzica bieżącego elementu.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval"><i>rodzic</i> = element.parentNode +</pre> +<p><code>rodzic</code> jest rodzicem bieżącego węzła. Rodzicem elementu jest węzeł typu <code>Element</code>, <code>Document</code> lub <code>DocumentFragment</code>.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>text_field = document.getElementById("t"); +if ( div1.parentNode == document ){ + text_field.setAttribute("value", "top-level"); + // pole tekstowe wyświetli tekst "top-level" } +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>parentNode</code> zwraca <code>null</code> dla poniższych typów węzłów: <code>Attr</code>, <code>Document</code>, <code>DocumentFragment</code>, <code>Entity</code> i <code>Notation</code>.</p> +<p><code>null</code> zwracane jest także, gdy węzeł został utworzony, ale nie przypisano go jeszcze do drzewa.</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<p>{{ Domxref("element.firstChild") }}, {{ Domxref("element.lastChild") }}, {{ Domxref("element.childNodes") }}, {{ Domxref("element.nextSibling") }}, {{ Domxref("element.previousSibling") }}.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<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></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.parentNode", "fr": "fr/DOM/element.parentNode", "it": "it/DOM/element.parentNode", "ja": "ja/DOM/element.parentNode" } ) }}</p> diff --git a/files/pl/web/api/element/prefix/index.html b/files/pl/web/api/element/prefix/index.html new file mode 100644 index 0000000000..c5ecdac392 --- /dev/null +++ b/files/pl/web/api/element/prefix/index.html @@ -0,0 +1,28 @@ +--- +title: element.prefix +slug: Web/API/Element/prefix +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/prefix +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>prefix</code> zwraca prefiks przestrzeni nazw węzła lub <code>null</code>, jeśli nie określono prefiksu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>string</i> = element.prefix +element.prefix =<i>string</i> +</pre> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval"><x:div onclick="alert(this.prefix)"/> +</pre> +<p>Wyświetlone zostanie "x".</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Własność ta działa tylko wtedy, gdy używany jest parser przetwarzający przestrzenie nazw, tj. gdy dokument serwowany jest z typem MIME XML. Własność nie działa dla dokumentów HTML.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeNSPrefix">Node.prefix</a> (wprowadzona w DOM2)</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.prefix", "fr": "fr/DOM/element.prefix", "it": "it/DOM/element.prefix", "ja": "ja/DOM/element.prefix" } ) }}</p> diff --git a/files/pl/web/api/element/previoussibling/index.html b/files/pl/web/api/element/previoussibling/index.html new file mode 100644 index 0000000000..0199cfb1a7 --- /dev/null +++ b/files/pl/web/api/element/previoussibling/index.html @@ -0,0 +1,28 @@ +--- +title: element.previousSibling +slug: Web/API/Element/previousSibling +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/previousSibling +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca węzeł bezpośrednio poprzedzający bieżący węzeł w drzewie.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval"><i>pNode</i> = elementNode.previousSibling +</pre> +<p><code>pNode</code> to węzeł przed bieżącym na liście rodzeństwa (czyli liście dzieci rodzica). Węzeł poprzedzający element jest zwykle węzłem elementu, komentarza lub tekstowym.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>var n1 = n2.previousSibling; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zwraca <code>null</code>, jeśli nie ma poprzedzających węzłów.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><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></p> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.previousSibling", "fr": "fr/DOM/element.previousSibling", "ja": "ja/DOM/element.previousSibling" } ) }}</p> diff --git a/files/pl/web/api/element/queryselector/index.html b/files/pl/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..62c6fe2561 --- /dev/null +++ b/files/pl/web/api/element/queryselector/index.html @@ -0,0 +1,180 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +<div>{{APIRef("DOM")}}</div> + +<p>Returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>element</var> = <em>baseElement</em>.querySelector(<em>selector</em>s); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>selectors</code></dt> + <dd>A group of <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a> to match the descendant elements of the {{domxref("Element")}} <code>baseElement</code> against; this must be valid CSS syntax, or a <code>SyntaxError</code> exception will occur. The first element found which matches this group of selectors is returned.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>The first descendant element of <code>baseElement</code> which matches the specified group of <code>selectors</code>. The entire hierarchy of elements is considered when matching, including those outside the set of elements including <code>baseElement</code> and its descendants; in other words, <code>selectors</code> is first applied to the whole document, not the <code>baseElement</code>, to generate an initial list of potential elements. The resulting elements are then examined to see if they are descendants of <code>baseElement</code>. The first match of those remaining elements is returned by the <code>querySelector()</code> method.</p> + +<p>If no matches are found, the returned value is <code>null</code>.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>The specified <code>selectors</code> are invalid.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>Let's consider a few examples.</p> + +<h3 id="Find_a_specific_element_with_specific_values_of_an_attribute">Find a specific element with specific values of an attribute</h3> + +<p>In this first example, the first {{HTMLElement("style")}} element which either has no type or has type "text/css" in the HTML document body is returned:</p> + +<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])"); +</pre> + +<h3 id="The_entire_hierarchy_counts">The entire hierarchy counts</h3> + +<p>The next example, below, demonstrates that the hierarchy of the entire document is considered when applying <code>selectors</code>, so that levels which are outside the specified <code>baseElement</code> are still considered when locating matches.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <h5>Original content</h5> + <p> + inside paragraph + <span>inside span</span> + inside paragraph + </p> +</div> +<div> + <h5>Output</h5> + <div id="output"></div> +</div></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var baseElement = document.querySelector("p"); +document.getElementById("output").innerHTML = + (baseElement.querySelector("div span").innerHTML);</pre> + +<h4 id="Result">Result</h4> + +<p>The result looks like this:</p> + +<p>{{ EmbedLiveSample('The_entire_hierarchy_counts', 600, 160) }}</p> + +<p>Notice how the <code>"div span"</code> selector still matches the {{HTMLElement("span")}} element, even though the <code>baseElement</code> excludes the {{domxref("div")}} element which is part of the specified selector.</p> + +<p>The :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the baseElement.</p> + +<h3 id="More_examples">More examples</h3> + +<p>See {{domxref("Document.querySelector()")}} for additional examples of the proper format for the <code>selectors</code>.</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('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> + +<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>{{CompatChrome(1)}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop(1.9.1)}}</td> + <td>9<sup>[1][2]</sup></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>Firefox OS (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>{{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] <code>querySelector()</code> is supported in IE8, but only for CSS 2.1 selectors.<br> + [2] in IE8 and iE9 document must be in HTML5 mode (HTML5 doctype declaration present)</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("element.querySelectorAll()")}}</li> + <li>{{domxref("document.querySelector()")}}</li> + <li>{{domxref("document.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li> +</ul> diff --git a/files/pl/web/api/element/removeattribute/index.html b/files/pl/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..9f3c2c4892 --- /dev/null +++ b/files/pl/web/api/element/removeattribute/index.html @@ -0,0 +1,36 @@ +--- +title: element.removeAttribute +slug: Web/API/Element/removeAttribute +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/removeAttribute +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>removeAttribute</code> usuwa atrybut bieżącego elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>element</i>.removeAttribute(<i>nazwaAtrybutu</i>) +</pre> +<ul> + <li><code>nazwaAtrybutu</code> to ciąg znaków określający nazwę atrybutu elementu + <i> + element</i> + , który to atrybut ma zostać usunięty</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <div align="left" width="200px"> +document.getElementById("div1").removeAttribute("align"); +// teraz: <div width="200px"> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Aby usunąć atrybut, powinieneś używać metody <code>removeAttribute</code>, a nie ustawiać wartość atrybutu na <code>null</code> za pomocą <a href="pl/DOM/element.setAttribute">setAttribute</a>.</p> +<p>Próba usunięcia nieistniejącego atrybutu elementu nie wyrzuca wyjątku.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core: removeAttribute</a> (wprowadzono w <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> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.removeAttribute", "fr": "fr/DOM/element.removeAttribute", "ja": "ja/DOM/element.removeAttribute" } ) }}</p> diff --git a/files/pl/web/api/element/removeattributenode/index.html b/files/pl/web/api/element/removeattributenode/index.html new file mode 100644 index 0000000000..82872fa822 --- /dev/null +++ b/files/pl/web/api/element/removeattributenode/index.html @@ -0,0 +1,37 @@ +--- +title: element.removeAttributeNode +slug: Web/API/Element/removeAttributeNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/removeAttributeNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>removeAttributeNode</code> usuwa określony atrybut z bieżącego elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>usuniętyAtr</i> =<i>element</i>.removeAttributeNode(<i>węzełAtrybutu</i>) +</pre> +<ul> + <li><code>węzełAtrybutu</code> to węzeł typu <code>Attr</code>, który ma zostać usunięty</li> + <li><code>removedAttr</code> to usunięty węzeł <code>Attr</code>.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <div id="top" align="center" /> +var d = document.getElementById("top"); +var d_align = d.getAttributeNode("align"); +d.removeAttributeNode(d_align); +// align ma wartość domyślną - center, +// więc usunięty atrybut jest od razu zastępowany: +// <div id="top" align="center" /> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jeśli usuwany atrybut ma wartość domyślną, od razu zostanie nią zastąpiony. Zastępujący atrybut ma - jeśli mają tu one zastosowanie - taki sam URI przestrzeni nazw, nazwę lokalną oraz prefiks jak oryginalny węzeł.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-D589198">DOM Level 2 Core: removeAttributeNode</a> (wprowadzono w <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttributeNode">DOM Level 1 Core</a>)</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.removeAttributeNode", "fr": "fr/DOM/element.removeAttributeNode", "ja": "ja/DOM/element.removeAttributeNode" } ) }}</p> diff --git a/files/pl/web/api/element/removeattributens/index.html b/files/pl/web/api/element/removeattributens/index.html new file mode 100644 index 0000000000..88df27e6ca --- /dev/null +++ b/files/pl/web/api/element/removeattributens/index.html @@ -0,0 +1,35 @@ +--- +title: element.removeAttributeNS +slug: Web/API/Element/removeAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/removeAttributeNS +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>removeAttributeNS</code> usuwa określony atrybut elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>element</i>.removeAttributeNS(<i>przestrzeńNazw</i>,<i>nazwaAtrybutu</i>); +</pre> +<ul> + <li><code>przestrzeńNazw</code> to ciąg znaków określający przestrzeń nazw atrybutu.</li> + <li><code>nazwaAtrybutu</code> to ciąg znaków z nazwą atrybutu do usunięcia.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace" +// special:specialAlign="utterleft" width="200px" /> +d = document.getElementById("div1"); +d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign"); +// teraz: <div id="div1" width="200px" /> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">DOM Level 2 Core: removeAttributeNS</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.removeAttributeNS", "fr": "fr/DOM/element.removeAttributeNS", "ja": "ja/DOM/element.removeAttributeNS" } ) }}</p> diff --git a/files/pl/web/api/element/removechild/index.html b/files/pl/web/api/element/removechild/index.html new file mode 100644 index 0000000000..c07c36ab3b --- /dev/null +++ b/files/pl/web/api/element/removechild/index.html @@ -0,0 +1,36 @@ +--- +title: element.removeChild +slug: Web/API/Element/removeChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/removeChild +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <b>removeChild</b> usuwa węzeł potomny elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>stareDziecko</i> =<i>element</i>.removeChild(<i>dziecko</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>dziecko</code> jest usuwanym węzłem potomnym.</li> + <li><code>element</code> jest węzłem nadrzędnym węzła <code>dziecko</code>.</li> + <li><code>stareDziecko</code> jest referencją do usuwanego węzła <code>dziecko</code>. <code>stareDziecko == dziecko.</code></li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <div id="nadrzedny" align="center"> +// <div id="zagniezdzony"></div> +// </div> +d = document.getElementById("nadrzedny"); +d_zagniezdzony = document.getElementById("zagniezdzony"); +usuwany_wezel = d.removeChild(d_zagniezdzony); +</pre> +<p> </p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1734834066">removeChild </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.removeChild", "fr": "fr/DOM/element.removeChild", "ja": "ja/DOM/element.removeChild" } ) }}</p> diff --git a/files/pl/web/api/element/replacechild/index.html b/files/pl/web/api/element/replacechild/index.html new file mode 100644 index 0000000000..dcb5686d44 --- /dev/null +++ b/files/pl/web/api/element/replacechild/index.html @@ -0,0 +1,53 @@ +--- +title: element.replaceChild +slug: Web/API/Element/replaceChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/replaceChild +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zastępuje dziecko węzła innym węzłem.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>węzełZastąpiony</i> =<i>węzełRodzic</i>.replaceChild(<i>noweDziecko</i>,<i>stareDziecko</i>); +</pre> +<ul> + <li><code>noweDziecko</code> to nowy węzeł, który ma zastąpić <code>stareDziecko</code>. Jeśli węzeł ten istnieje już gdzieś indziej w DOM, najpierw jest stamtąd usuwany.</li> + <li><code>stareDziecko</code> to istniejące dziecko, które ma zostać zastąpione.</li> + <li><code>węzełZastąpiony</code> to węzeł, który został zastąpiony. Jest to ten sam węzeł, co <code>stareDziecko</code>.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <div> +// <span id="childSpan">foo bar</span> +// </div> + +// utwórz węzeł pustego elementu +// bez ID, atrybutów i zawartości +var sp1 = document.createElement("span"); + +// nadaj mu ID 'newSpan' +sp1.setAttribute("id", "newSpan"); + +// utwórz jakąś zawartość dla nowego elementu +var sp1_content = document.createTextNode("Nowy element span."); + +// wstaw tę zawartość +sp1.appendChild(sp1_content); + +// stwórz referencję do istniejącego węzła, który ma zostać zastąpiony +var sp2 = document.getElementById("childSpan"); +var parentDiv = sp2.parentNode; + +// zastąp istniejący węzeł sp2 elementem span sp1 +parentDiv.replaceChild(sp1, sp2); + +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</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> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.replaceChild", "fr": "fr/DOM/element.replaceChild", "ja": "ja/DOM/element.replaceChild" } ) }}</p> diff --git a/files/pl/web/api/element/scrollleft/index.html b/files/pl/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..e6c526c23b --- /dev/null +++ b/files/pl/web/api/element/scrollleft/index.html @@ -0,0 +1,58 @@ +--- +title: element.scrollLeft +slug: Web/API/Element/scrollLeft +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/scrollLeft +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>scrollLeft </b> pobiera bądź ustawia liczbę pikseli, o którą zostanie przewinięta zawartość dokumentu. Kierunek przewijania odbywa się w lewo.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">// Pobierz wartość przewinięcia w pikselach +var <var>sLeft</var> = <var>element</var>.scrollLeft; +</pre> +<p><var>sLeft</var> jest wartością liczbową reprezentującą ilość pikseli, o które <var>element</var> został przewinięty w lewo.</p> +<pre class="eval">// Ustaw wartość przewinięcia w pikselach +<var>element</var>.scrollLeft = 10; +</pre> +<p><b>scrollLeft</b> może przyjąć dowolną wartość liczbową, jednakże:</p> +<ul> + <li>Jeżeli element nie może być przewijany (nie posiada atrybutu overflow), scrollLeft jest równe 0.</li> + <li>Jeżeli ustawiana wartość jest mniejsza niż 0, scrollLeft jest równe 0.</li> + <li>Jeżeli ustawiana wartość jest większa od wartości maksymalnej, o którą zawartość dokumentu może być przewijana, scrollLeft jest równe wartości maksymalnej.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><script type="text/javascript"> + +function doScrollLeft(el, p) +{ + el.scrollLeft = p; +} + +</script> + +<div id="aDiv" + style="width: 100px; height: 200px; overflow: auto;" +> +<script type="text/javascript"> +for (var i=0; i<100; ++i){ + document.write(i + '-FooBar-FooBar-FooBar<br>'); +} +</script> +</div> +<br> +<input type="button" value="Scroll left 50" + onclick="doScrollLeft(document.getElementById('aDiv'), 50);" +> +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>To nie jest żadna część specyfikacji W3C.</p> +<h3 id="Powi.C4.85zania" name="Powi.C4.85zania">Powiązania</h3> +<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollleft.asp">MSDN scrollLeft</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.scrollLeft", "fr": "fr/DOM/element.scrollLeft" } ) }}</p> diff --git a/files/pl/web/api/element/scrolltop/index.html b/files/pl/web/api/element/scrolltop/index.html new file mode 100644 index 0000000000..a79c23d9ff --- /dev/null +++ b/files/pl/web/api/element/scrolltop/index.html @@ -0,0 +1,70 @@ +--- +title: element.scrollTop +slug: Web/API/Element/scrollTop +translation_of: Web/API/Element/scrollTop +--- +<p>{{APIRef}}</p> + +<p><strong><code>scrollTop</code></strong> pobiera bądź ustawia liczbę pikseli, o którą ma zostać przewinięta w górę zawartość elementu.</p> + +<h2 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h2> + +<pre class="eval">// Pobierz wartość przewinięcia w pikselach +var <var> intElemScrollTop</var> = <var>element</var>.scrollTop; +</pre> + +<p><var>intElemScrollTop</var> jest liczbą całkowitą reprezentującą ilość pikseli, o które <var>element</var> został przewinięty w górę.</p> + +<pre class="eval">// Ustaw wartość przewinięcia w pikselach +<var>element</var>.scrollTop = <var>intValue</var>; +</pre> + +<p><strong><code>scrollTop</code></strong> może przyjąć dowolną wartość liczbową, jednakże:</p> + +<ul> + <li>Jeżeli element nie może być przewijany (gdy np. nie posiada własności overflow), scrollTop jest równe 0.</li> + <li>Jeżeli ustawiona wartość jest mniejsza niż 0, <code>scrollTop</code> jest równe 0.</li> + <li>Jeżeli ustawiona wartość jest większa od wartości maksymalnej, o którą zawartość elementu może być przewinięta, <code>scrollTop</code> jest równe wartości maksymalnej.</li> +</ul> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Element <strong><code>scrollTop</code></strong> jest miarą odległości od góry elementu do najwyższej krawędzi jego widzialnej zawartości.</p> + +<p>Kiedy zawartość elementu nie powoduje powstania pionowego paska przewijania, wartość <code>scrollTop</code> jest domyślnie ustawiona na 0.</p> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + +<p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + +<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> + +<p style="margin-top: 270px;"><img alt="Image:scrollTop.png"></p> + +<p>Nie mamy interaktywnej demonstracji jak ma to miejsce w dokumentacji Gecko DOM.</p> + +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> + +<p><code>scrollTop</code> jest częścią obiektowego modelu MSIE. <code>scrollTop</code> nie jest częścią żadnej specyfikacji W3C lub rekomendacji technicznej.</p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>scrollTop jest własnością obiektowego modelu DHTML (Dynamic HyperText Markup Language), który po raz pierwszy został wprowadzony przez MSIE. Własność ta jest zdefiniowana jako odległość do górnej krawędzi widoku elementu przewijanego.</p> + +<h2 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h2> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrolltop.asp?frame=true">MSDN's scrollTop definition</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li> + <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/scrollTop.html">Gecko DOM Reference on scrollTop</a></li> +</ul> diff --git a/files/pl/web/api/element/scrollwidth/index.html b/files/pl/web/api/element/scrollwidth/index.html new file mode 100644 index 0000000000..42cb1a96f1 --- /dev/null +++ b/files/pl/web/api/element/scrollwidth/index.html @@ -0,0 +1,32 @@ +--- +title: element.scrollWidth +slug: Web/API/Element/scrollWidth +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/scrollWidth +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>scrollWidth</b> jest własnością tylko do odczytu, która zwraca szerokość zawartości elementu w pikselach lub szerokość samego elementu - w zależności od tego, która z tych wartości jest większa.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth; +</pre> +<p><var>xScrollWidth</var> jest szerokością zawartości elementu <var>element</var> w pikselach.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><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> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Nie ma specyfikacji W3C dla <b>scrollWidth</b>.</p> +<h3 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h3> +<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollwidth.asp">MSDN scrollWidth reference</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.scrollWidth", "fr": "fr/DOM/element.scrollWidth" } ) }}</p> diff --git a/files/pl/web/api/element/setattribute/index.html b/files/pl/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..79f649526e --- /dev/null +++ b/files/pl/web/api/element/setattribute/index.html @@ -0,0 +1,34 @@ +--- +title: element.setAttribute +slug: Web/API/Element/setAttribute +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttribute +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>setAttribute</code> dodaje nowy lub zmienia wartość atrybutu w bieżącym elemencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">element.setAttribute(<i>nazwa</i>,<i>wartość</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>nazwa</code> to łańcuch znaków z nazwą nowego atrybutu,</li> + <li><code>wartość</code> to żądana wartość nowego atrybutu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>d = document.getElementById("d1"); +d.setAttribute("align", "center"); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jeśli istnieje już atrybut o danej nazwie, jego wartość zostaje zmieniona na wartość podaną w wywołaniu <b>setAttribute</b>. Jeśli nie istnieje taki atrybut, zostanie on utworzony.</p> +<p>Pomimo, że <a href="pl/DOM/element.getAttribute">getAttribute</a> zwraca <code>null</code> jeśli atrybut nie istnieje, do usuwania atrybutów powinieneś używać metody <a href="pl/DOM/element.removeAttribute">removeAttribute</a>, a nie <code>element.setAttribute(attr, null)</code>.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (wprowadzono w <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.setAttribute", "fr": "fr/DOM/element.setAttribute", "ja": "ja/DOM/element.setAttribute" } ) }}</p> diff --git a/files/pl/web/api/element/setattributenode/index.html b/files/pl/web/api/element/setattributenode/index.html new file mode 100644 index 0000000000..dbf836f80c --- /dev/null +++ b/files/pl/web/api/element/setattributenode/index.html @@ -0,0 +1,40 @@ +--- +title: element.setAttributeNode +slug: Web/API/Element/setAttributeNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttributeNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>setAttributeNode</code> dodaje do elementu nowy węzeł typu <code>Attr</code>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>zastąpionyAtr</i> = element.setAttributeNode(<i>atrybut</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>atrybut</code> jest węzłem typu <code>Attr</code></li> + <li><code>zastąpionyAtr</code> jest węzłem zastąpionego atrybutu - jeśli był taki - zwróconym przez tę metodę</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <div id="raz" align="left">raz</div> +// <div id="dwa">dwa</div> +d1 = document.getElementById("raz"); +d2 = document.getElementById("dwa"); +a = d1.getAttributeNode("align"); +d2.setAttributeNode(a); +alert(d2.attributes[1].value) +// wypisze: "left" +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jeżeli istnieje już atrybut o danej nazwie, zostanie on zastąpiony nowym atrybutem i zwrócony jako wynik funkcji.</p> +<p>Tej metody używa się rzadko - do zmiany atrybutów elementu zwykle wykorzystywana jest metoda <a href="pl/DOM/element.setAttribute">setAttribute</a>.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-887236154">DOM Level 2 Core: setAttributeNode</a> (wprowadzono w <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode">DOM Level 1 Core</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.setAttributeNode", "fr": "fr/DOM/element.setAttributeNode", "ja": "ja/DOM/element.setAttributeNode" } ) }}</p> diff --git a/files/pl/web/api/element/setattributenodens/index.html b/files/pl/web/api/element/setattributenodens/index.html new file mode 100644 index 0000000000..5633d0367e --- /dev/null +++ b/files/pl/web/api/element/setattributenodens/index.html @@ -0,0 +1,41 @@ +--- +title: element.setAttributeNodeNS +slug: Web/API/Element/setAttributeNodeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttributeNodeNS +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>setAttributeNodeNS</code> dodaje nowy węzeł atrybutu z określoną nazwą i przestrzenią nazw.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>replacedAttr</i> = element.setAttributeNodeNS(<i>namespace</i>,<i>attributeNode</i>) +</pre> +<ul> + <li><code>replacedAttr</code> jest zastąpionym węzłem atrybutu (jeśli istnieje), zwracanym przez tę funkcję.</li> + <li><code>attributeNode</code> jest węzłem <code>Attr</code>.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <div id="one" special-align="utterleft">one</div> +// <div id="two">two</div> + +var myns = "http://www.mozilla.org/ns/specialspace"; +var d1 = document.getElementById("one"); +var d2 = document.getElementById("two"); +var a = d1.getAttributeNodeNS(myns, "special-align"); +var d2.setAttributeNodeNS(myns, a); + +alert(d2.attributes[1].value) // zwraca: `utterleft' +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jeśli określony atrybut istnieje dla elementu, to jest on zastępowany nowym i zwracany.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">DOM Level 2 Core: setAttributeNodeNS</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.setAttributeNodeNS", "fr": "fr/DOM/element.setAttributeNodeNS", "ja": "ja/DOM/element.setAttributeNodeNS" } ) }}</p> diff --git a/files/pl/web/api/element/setattributens/index.html b/files/pl/web/api/element/setattributens/index.html new file mode 100644 index 0000000000..c721111e36 --- /dev/null +++ b/files/pl/web/api/element/setattributens/index.html @@ -0,0 +1,33 @@ +--- +title: element.setAttributeNS +slug: Web/API/Element/setAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttributeNS +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>setAttributeNS</code> dodaje nowy lub zmienia wartość istniejącego atrybutu o podanej nazwie i przestrzeni nazw.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>element</i>.setAttributeNS(<i>przestrzeńNazw</i>,<i>nazwa</i>,<i>wartość</i>) +</pre> +<ul> + <li><code>przestrzeńNazw</code> to ciąg znaków określajacy przestrzeń nazw atrybutu.</li> + <li><code>nazwa</code> to ciąg znaków określający nazwę atrybutu do ustawienia.</li> + <li><code>wartość</code> to żądana wartość atrybutu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var d = document.getElementById("d1"); +d.setAttributeNS("<span class="nowiki">http://www.mozilla.org/ns/specialspace</span>", "align", "center"); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">DOM Level 2 Core: setAttributeNS</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.setAttributeNS", "fr": "fr/DOM/element.setAttributeNS", "ja": "ja/DOM/element.setAttributeNS" } ) }}</p> diff --git a/files/pl/web/api/element/style/index.html b/files/pl/web/api/element/style/index.html new file mode 100644 index 0000000000..4736774e83 --- /dev/null +++ b/files/pl/web/api/element/style/index.html @@ -0,0 +1,52 @@ +--- +title: element.style +slug: Web/API/Element/style +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/ElementCSSInlineStyle/style +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca obiekt reprezentujący atrybut <code>style</code> elementu.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">var div = document.getElementById("div1"); +div.style.marginTop = ".25in"; +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Ponieważ własność <code>style</code> reprezentuje atrybut <code>style</code>, który ma najwyższy priorytet w kaskadzie CSS, własność ta jest użyteczna by ustawić styl określonego elementu. Nie przyda się jednak do sprawdzania stylu elementu, ponieważ zależy ona tylko od atrybutu <code>style</code>, a nie od reguł stylów określonych gdziekolwiek indziej. Możesz użyć <code><a href="/pl/DOM/window.getComputedStyle" title="pl/DOM/window.getComputedStyle">window.getComputedStyle</a></code>, by sprawdzić styl elementu.</p> + +<p>Zobacz listę <a href="/pl/DOM/CSS" title="pl/DOM/CSS">własności CSS dostępnych w DOM</a>, gdzie znajdziesz też dodatkowe uwagi o zastosowaniu własności <code>style</code>.</p> + +<p>Ogólnie rzecz biorąc, lepiej jest użyć własność <code>style </code>zamiast <code>elt.setAttribute('style', '...')</code>, ponieważ użycie <code>style</code> nie nadpisze innych własności CSS, które mogły być wcześniej określone atrybutem <code>style</code>.</p> + +<p>Styli nie można ustawiać poprzez przekazywania łańcucha znaków do atrybutu <code>style</code> (tylko odczyt), np. <code>elt.style = "color: blue;"</code>. Jest to niemożliwe ponieważ atrybut stylu zwraca obiekt <code>CSSStyleDeclaration</code> . Zamiast tego, możesz ustawić poszczególne własności atrybutu <code>style</code> w ten sposób:</p> + +<pre class="eval">elt.style.color = "blue"; // Directly + +var st = elt.style; +st.color = "blue"; // Indirectly +</pre> + +<p>Poniższy kod wyświetli nazwy wszystkich własności stylu, wartości ustawione dla elementu <code>elt</code> oraz dziedziczone 'przeliczone'' wartości:</p> + +<pre class="eval">var elt = document.getElementById("elementIdHere"); +var out = ""; +var st = elt.style; +var cs = window.getComputedStyle(z, null); +for (x in st) + out += " " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n"; +</pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p> diff --git a/files/pl/web/api/element/tabindex/index.html b/files/pl/web/api/element/tabindex/index.html new file mode 100644 index 0000000000..d8fdd6ce7d --- /dev/null +++ b/files/pl/web/api/element/tabindex/index.html @@ -0,0 +1,31 @@ +--- +title: element.tabIndex +slug: Web/API/Element/tabIndex +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLOrForeignElement/tabIndex +--- +<div> + {{APIRef}}</div> +<div> + </div> +<div> + <span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Podsumowanie</span></div> +<p>Pobiera/ustawia kolejność tabulacji dla bieżącego elementu.</p> +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> +<pre class="syntaxbox">element.tabIndex = <em>indeks</em> +</pre> +<ul> + <li><code>indeks</code> to liczba</li> +</ul> +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="brush:js">var b1 = document.getElementById("button1"); + +b1.tabIndex = 1;</pre> +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-40676705">tabIndex </a></li> +</ul> diff --git a/files/pl/web/api/element/tagname/index.html b/files/pl/web/api/element/tagname/index.html new file mode 100644 index 0000000000..61972df98c --- /dev/null +++ b/files/pl/web/api/element/tagname/index.html @@ -0,0 +1,37 @@ +--- +title: element.tagName +slug: Web/API/Element/tagName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/tagName +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>tagName</b> zwraca nazwę elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>nazwaElementu</i> = element.tagName +</pre> +<ul> + <li><code>nazwaElementu</code> to ciąg zawierający nazwę bieżącego elementu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p>Dane są takie znaczniki:</p> +<pre class="eval"><span id="born">Kiedy przyszedłem na świat...</span> +</pre> +<p>i taki skrypt:</p> +<pre class="eval">var span = document.getElementById("born"); +alert(span.tagName); +</pre> +<p>W XHTML-u (lub innym formacie XML) wyświetlone zostanie "span", a w HTML - "SPAN".</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>W XML-u <code>tagName</code> zachowuje wielkość liter. W HTML-u <code>tagName</code> zwraca nazwę elementu w formie kanonicznej - wielkimi literami. Wartość <code>tagName</code> jest taka sama jak wartość <a href="pl/DOM/element.nodeName">nodeName</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-104682815">tagName </a></p> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.tagName", "es": "es/DOM/element.tagName", "fr": "fr/DOM/element.tagName", "ja": "ja/DOM/element.tagName" } ) }}</p> diff --git a/files/pl/web/api/element/textcontent/index.html b/files/pl/web/api/element/textcontent/index.html new file mode 100644 index 0000000000..f667ea2889 --- /dev/null +++ b/files/pl/web/api/element/textcontent/index.html @@ -0,0 +1,41 @@ +--- +title: element.textContent +slug: Web/API/Element/textContent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/textContent +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Pobiera lub ustawia zawartość tekstową węzła i jego potomków.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>tekst</i> = element.textContent +element.textContent = "przykładowy tekst" +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">// Dany jest taki fragment w HTML: +// <div id="divA">To jest <span>jakiś</span> tekst</div> + +// Pobierz zawartość tekstową: +var tekst = document.getElementById("divA").textContent; +// |tekst| zawiera: "To jest jakiś tekst". + +// Ustaw zawartość: +document.getElementById("divA").textContent = "To jest jakiś tekst"; +// teraz HTML elementu divA to <div id="divA">To jest jakiś tekst</div> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<ul> + <li><code>textContent</code> zwraca <code>null</code> jeśli węzeł to dokument, węzeł <code>DocumentType</code> lub <code>Notation</code></li> + <li>Jeśli węzeł to sekcja CDATA, komentarz, instrukcja przetwarzania lub węzeł tekstowy, <code>textContent</code> zwraca tekst wewnątrz tego węzła (<a href="pl/DOM/element.nodeValue">nodeValue</a>).</li> + <li>Dla innych typów węzłow <code>textContent</code> zwraca połączenie wartości <code>textContent</code> każdego dziecka, wyłączając węzły komentarzy i instrukcji przetwarzania. Jeśli element nie ma dzieci, jest to pusty ciąg.</li> + <li>Ustawianie tej właściwości dla węzła usuwa wszystkie jego dzieci i zastępuje je jednym węzłem tekstowym o zadanej wartości.</li> +</ul> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent">textContent</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.textContent", "fr": "fr/DOM/element.textContent", "it": "it/DOM/element.textContent" } ) }}</p> diff --git a/files/pl/web/api/event/altkey/index.html b/files/pl/web/api/event/altkey/index.html new file mode 100644 index 0000000000..2c8c2f6d9f --- /dev/null +++ b/files/pl/web/api/event/altkey/index.html @@ -0,0 +1,31 @@ +--- +title: event.altKey +slug: Web/API/Event/altKey +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/altKey +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wskazuje, czy klawisz <alt> był wciśnięty przy wywołaniu zdarzenia.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>bool</i> = event.altKey +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> function goInput(e) { + // sprawdza przycisk <alt> + if e.altKey { + // przekazuje zdarzenie dalej + superSizeOutput(e); + } + else { + doOutput(e); + } + } +</pre> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/event.altKey", "ja": "ja/DOM/event.altKey" } ) }}</p> diff --git a/files/pl/web/api/event/bubbles/index.html b/files/pl/web/api/event/bubbles/index.html new file mode 100644 index 0000000000..2372296028 --- /dev/null +++ b/files/pl/web/api/event/bubbles/index.html @@ -0,0 +1,31 @@ +--- +title: event.bubbles +slug: Web/API/Event/bubbles +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/bubbles +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wskazuje, czy zdarzenie bąbelkuje przez model dokumentu czy nie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">bool = event.bubbles +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> function goInput(e) { + // sprawdza czy zdarzenie bąbelkuje + if not e.bubbles { + // i jeśli nie - przekazuje je dalej + passItOn(e); + } + // jeśli bąbelkuje: + doOutput(e) +} +</pre> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/event.bubbles", "es": "es/DOM/event.bubbles", "ja": "ja/DOM/event.bubbles" } ) }}</p> diff --git a/files/pl/web/api/event/button/index.html b/files/pl/web/api/event/button/index.html new file mode 100644 index 0000000000..5f796093fb --- /dev/null +++ b/files/pl/web/api/event/button/index.html @@ -0,0 +1,66 @@ +--- +title: event.button +slug: Web/API/Event/button +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/button +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wskazuje, który przycisk myszy wywołał zdarzenie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre>var kodPrzycisku = event.button; +</pre> +<p>Zwraca całkowitą wartość liczbową oznaczającą przycisk, który zmienił stan:</p> +<ul> + <li>0 - zwykłe + <i> + kliknięcie</i> + , zazwyczaj lewy przycisk</li> + <li>1 - środkowy przycisk, zazwyczaj kliknięcie rolką</li> + <li>2 - prawy przycisk</li> +</ul> +<p>Faktyczna kolejność przycisków może być różna, zależnie od konfiguracji urządzenia wskazującego.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><script type="text/javascript"> + +function whichButton(e) +{ + // obsłuż różne modele obsługi zdarzeń + var e = e || window.event; + var btnCode; + + if ('object' == typeof e){ + btnCode = e.button; + + switch (btnCode){ + case 0 : alert('Kliknięto lewym przyciskiem'); + break; + case 1 : alert('Kliknięto środkowym przyciskiem'); + break; + case 2 : alert('Kliknięto prawym przyciskiem'); + break; + default : alert('Nieoczekiwany kod: ' + btnCode); + } + } +} + +</script> + +<p onclick="whichButton(event);">Kliknij tu myszą...</p> + +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Ponieważ kliknięcia myszy są często przechwytywane przez interfejs uzytkownika, w niektórych okolicznościach może być trudno wykryć przyciski inne niż ten dla standardowego kliknięcia (tj. zazwyczaj lewy).</p> +<p>Użytkownicy mogą zmienić konfigurację przycisków swoich urządzeń wskazujących, tak że nawet jeśli własność + <i> + button</i> + wynosi zero, niekoniecznie musiał być naciśnięty przycisk znajdujący się fizycznie po lewej stronie. Jednak zachowanie w takiej sytuacji powinno być takie, jak gdyby kliknięto lewy przycisk w standardowym układzie.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent-button">DOM Level 2 Events: button</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/event.button", "ja": "ja/DOM/event.button" } ) }}</p> diff --git a/files/pl/web/api/event/cancelable/index.html b/files/pl/web/api/event/cancelable/index.html new file mode 100644 index 0000000000..4a6ed741bb --- /dev/null +++ b/files/pl/web/api/event/cancelable/index.html @@ -0,0 +1,34 @@ +--- +title: event.cancelable +slug: Web/API/Event/cancelable +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/cancelable +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Wskazuje, czy zdarzenie można anulować.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">bool = event.cancelable +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>To, czy zdarzenie może być anulowane czy nie jest określane w momencie, kiedy zdarzenie jest tworzone. Aby anulować zdarzenie, użyj metody <a href="pl/DOM/event.preventDefault">preventDefault</a> na tym zdarzeniu, dzięki czemu nie zostanie wykonana akcja - domyślny rezultat tego zdarzenia.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-canCancel">cancelable </a></p> + + + +<div class="noinclude"></div> + +<p>{{ languages( { "en": "en/DOM/event.cancelable", "es": "es/DOM/event.cancelable", "ja": "ja/DOM/event.cancelable" } ) }}</p> diff --git a/files/pl/web/api/event/cancelbubble/index.html b/files/pl/web/api/event/cancelbubble/index.html new file mode 100644 index 0000000000..64b0a32f88 --- /dev/null +++ b/files/pl/web/api/event/cancelbubble/index.html @@ -0,0 +1,15 @@ +--- +title: event.cancelBubble +slug: Web/API/Event/cancelBubble +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/cancelBubble +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wskazuje, czy zostało anulowane bąbelkowanie tego zdarzenia.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">bool = event.cancelBubble +</pre> +<p>{{ languages( { "en": "en/DOM/event.cancelBubble" } ) }}</p> diff --git a/files/pl/web/api/event/charcode/index.html b/files/pl/web/api/event/charcode/index.html new file mode 100644 index 0000000000..6600e6c1dd --- /dev/null +++ b/files/pl/web/api/event/charcode/index.html @@ -0,0 +1,27 @@ +--- +title: event.charCode +slug: Web/API/Event/charCode +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/KeyboardEvent/charCode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca kod Unicode dla klawisza znaku, który został wciśnięty, w zdarzeniu <a href="pl/DOM/element.onkeypress">keypress</a>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">znak = event.charCode +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>znak</code> to wartość kodu Unicode klawisza, który został wciśnięty.</li> +</ul> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>W zdarzeniu <a href="pl/DOM/element.onkeypress">keypress</a> kod Unicode wciśniętego klawisza jest przechowywany albo we własności <code><a href="pl/DOM/event.keyCode">keyCode</a></code> albo w <code>charCode</code>, nigdy w obydwu. Jeśli wciśnięcie klawisza skutkowałoby wprowadzeniem znaku (np. 'a'), <code>charCode</code> ustawiany jest dla kodu tego znaku, z uwzględnieniem wielkości (małe lub duże litery) znaku (np. bierze pod uwagę, czy wciśnięto klawisz shift). W przeciwnym przypadku, naciśnięty klawisz przechowywany jest w <code>keyCode</code>.</p> +<p><code>charCode</code> nigdy nie jest ustawiany w zdarzeniach <a href="pl/DOM/element.onkeydown">keydown</a> i <a href="pl/DOM/element.onkeyup">keyup</a>. W tych przypadkach ustawiany jest <code>keyCode</code>.</p> +<p>Aby pobrać kod klawisza niezależnie, czy jest przechowywany w <code>keyCode</code> czy w <code>charCode</code>, sprawdź właściwość <a href="pl/DOM/event.which">which</a>.</p> +<p>Znaki wprowadzane poprzez IME nie są rejestrowane poprzez <code>keyCode</code> ani <code>charCode</code>. (IME - program pozwalający wprowadzać skomplikowane znaki, np. japońskie bądź chińskie - przyp. tłum.)</p> +<p>Listę wartości <code>charCode</code> związanych z poszczególnymi klawiszami możesz znaleźć uruchamiając <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM">Przykład 7: Wyświetlanie stałych obiektu event</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Nie należy do specyfikacji. Zobacz <a href="pl/NsIDOMKeyEvent">nsIDOMKeyEvent</a>.</p> +<p>{{ languages( { "en": "en/DOM/event.charCode" } ) }}</p> diff --git a/files/pl/web/api/event/clientx/index.html b/files/pl/web/api/event/clientx/index.html new file mode 100644 index 0000000000..dd0dcb3e09 --- /dev/null +++ b/files/pl/web/api/event/clientx/index.html @@ -0,0 +1,25 @@ +--- +title: event.clientX +slug: Web/API/Event/clientX +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/clientX +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca poziomą współrzędną zdarzenia w obszarze klienta.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> function checkClientClickMap(e) { + if e.clientX < 50 { + doRedButton(); } + if 50 <= e.clientX < 100 { + doYellowButton(); } + if e.clientX >= 100 { + doRedButton(); } } +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zobacz też <a href="pl/DOM/event.clientY">clientY</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-clientX">clientX </a></p> +<p>{{ languages( { "en": "en/DOM/event.clientX" } ) }}</p> diff --git a/files/pl/web/api/event/clienty/index.html b/files/pl/web/api/event/clienty/index.html new file mode 100644 index 0000000000..1ad6315f89 --- /dev/null +++ b/files/pl/web/api/event/clienty/index.html @@ -0,0 +1,16 @@ +--- +title: event.clientY +slug: Web/API/Event/clientY +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/clientY +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca pionową współrzędną zdarzenia w obszarze klienta.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zobacz też <a href="pl/DOM/event.clientX">clientX</a>, wraz z przykładem wykorzystania.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-clientY">clientY</a></p> +<p>{{ languages( { "en": "en/DOM/event.clientY" } ) }}</p> diff --git a/files/pl/web/api/event/ctrlkey/index.html b/files/pl/web/api/event/ctrlkey/index.html new file mode 100644 index 0000000000..53bda61a1e --- /dev/null +++ b/files/pl/web/api/event/ctrlkey/index.html @@ -0,0 +1,26 @@ +--- +title: event.ctrlKey +slug: Web/API/Event/ctrlKey +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/ctrlKey +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wskazuje, czy klawisz <ctrl> był wciśnięty podczas wywołania zdarzenia.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">bool = event.ctrlKey +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> function goInput(e) { + // sprawdza ctrlKey + if e.ctrlKey + // i przekazuje zdarzenie dalej + superSizeOutput(e); + else + doOutput(e) +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-ctrlKey">ctrlKey</a></p> +<p>{{ languages( { "en": "en/DOM/event.ctrlKey" } ) }}</p> diff --git a/files/pl/web/api/event/currenttarget/index.html b/files/pl/web/api/event/currenttarget/index.html new file mode 100644 index 0000000000..f6c5c3c752 --- /dev/null +++ b/files/pl/web/api/event/currenttarget/index.html @@ -0,0 +1,25 @@ +--- +title: event.currentTarget +slug: Web/API/Event/currentTarget +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Event/currentTarget +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Pozwala zidentyfikować obecnie zarejestrowany element docelowy zdarzenia.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">referencjaDoWęzła = event.currentTarget +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>referencjaDoWęzła</code> to referencja do obiektu węzła DOM</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> if e.currentTarget != t_el + resetEventEngine(); +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-currentTarget">currentTarget</a></p> +<p>{{ languages( { "en": "en/DOM/event.currentTarget" } ) }}</p> diff --git a/files/pl/web/api/event/eventphase/index.html b/files/pl/web/api/event/eventphase/index.html new file mode 100644 index 0000000000..c7f0deb5fb --- /dev/null +++ b/files/pl/web/api/event/eventphase/index.html @@ -0,0 +1,40 @@ +--- +title: event.eventPhase +slug: Web/API/Event/eventPhase +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Event/eventPhase +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wskazuje która faza przepływu zdarzenia jest aktualnie przetwarzana.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>faza</i> = event.eventPhase +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>faza</code> to liczba o jednej z poniższych wartości:</li> +</ul> +<table class="standard-table"> + <tbody> + <tr> + <td>1</td> + <td><a href="pl/DOM/Event.CAPTURING_PHASE">CAPTURING_PHASE</a></td> + <td>faza przechwytywania</td> + </tr> + <tr> + <td>2</td> + <td><a href="pl/DOM/Event.AT_TARGET">AT_TARGET</a></td> + <td>zdarzenie przy elemencie docelowym</td> + </tr> + <tr> + <td>3</td> + <td><a href="pl/DOM/Event.BUBBLING_PHASE">BUBBLING_PHASE</a></td> + <td>faza bąbelkowania</td> + </tr> + </tbody> +</table> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-eventPhase">eventPhase </a></p> +<p>{{ languages( { "en": "en/DOM/event.eventPhase" } ) }}</p> diff --git a/files/pl/web/api/event/index.html b/files/pl/web/api/event/index.html new file mode 100644 index 0000000000..8b5dd22105 --- /dev/null +++ b/files/pl/web/api/event/index.html @@ -0,0 +1,179 @@ +--- +title: Event +slug: Web/API/Event +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Wprowadzenie" name="Wprowadzenie">Wprowadzenie</h3> + +<p>W tym rozdziale opiszemy model zdarzeń DOM Level 2 jaki implementuje Gecko. Opisany zostanie obiekt <code>event</code>, a także interfejsy do rejestrowania zdarzeń dla węzłów DOM, uchwyty i obserwatorzy zdarzeń; przedstawione zostanie też kilka dłuższych przykładów pokazujących relacje między różnymi interfejsami.</p> + +<p>Dostępny jest też doskonały <a class="external" href="https://www.w3.org/TR/DOM-Level-3-Events/#event-flow">diagram</a>, który jasno przedstawia trzy fazy przepływu zdarzeń w DOM.</p> + +<h4 id="Interfejs_DOM_event" name="Interfejs_DOM_event">Interfejs DOM event</h4> + +<p>Interfejs DOM <code>event</code> reprezentowany jest przez obiekty <code>event</code> przekazywane do uchwytów zdarzeń różnych elementów DOM. Poniższy, prosty przykład pokazuje, jak przekazać i manipulować obiektem <code>event</code> w funkcji obsługi zdarzenia.</p> + +<pre>function foo(e) { + //funkcje obsługi zdarzeń - takie jak ta + //otrzymują referencję do zdarzenia, jakie + //obsługują (w tym przypadku "e") + alert(e); +} +table_el.onclick = foo; +</pre> + +<p>Powyższy przykład jest skrajnie prosty, przedstawia jednak ważną cechę obsługi zdarzeń w Gecko DOM - obiekty <code>event</code> wykorzystywane są zwykle w funkcjach obsługi zdarzeń. Kiedy masz już referencję do obiektu <code>event</code>, możesz korzystać z wszystkich metod i własności opisanych w tym rozdziale.</p> + +<p>Zob. także <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM">Przykład 5: Propagowanie zdarzeń</a> w rozdziale <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM">Przykłady użycia DOM</a>, by zobaczyć bardziej szczegółowo, jak zdarzenia przechodzą przez DOM.</p> + +<h4 id="Uchwyty_zdarze.C5.84" name="Uchwyty_zdarze.C5.84">Uchwyty zdarzeń</h4> + +<p>Oprócz opisanego tutaj obiektu <code>event</code>, Gecko DOM dostarcza również metod do rejestrowania obserwatorów zdarzeń (ang.<em>event listener</em> ) na węzłach DOM, usuwania zdarzeń z obserwatorów oraz wywoływania zdarzeń z poziomu DOM. Te trzy metody opisano w rozdziale <a href="pl/DOM/element">Elementy w DOM</a>. Razem z <a href="pl/DOM/element#Uchwyty_zdarze.C5.84">uchwytami zdarzeń</a> elementów HTML i XML stanowią one główny punkt wyjścia dla zdarzeń w DOM.</p> + +<p>Możesz także przekazać do funkcji obsługi zdarzenia referencję do obiektu <code>event</code> poprzez predefiniowany parametr o nazwie <code>event</code>. Jest to bardzo podobne do sposobu, w jaki działa <code>this</code>, ale tyczy się obiektów zdarzeń, a nie elementów.</p> + +<pre><html> +<head> +<title>Przykład użycia parametru z obiektem event</title> + +<script type="text/javascript"> + +function showCoords(evt){ + alert( + "clientX value: " + evt.clientX + "\n" + + "clientY value: " + evt.clientY + "\n" + ); +} + +</script> +</head> + +<body onmousedown="showCoords(event)"> +<p>Kliknij gdziekolwiek na tej stronie, aby wyświetlić współrzędne położenia myszy.</p> +</body> +</html> +</pre> + +<p>Używanie predefiniowanego parametru <code>event</code> pozostawia dalej możliwość przekazywania innych parametrów do funkcji obsługującej zdarzenie, jeśli jest taka potrzeba.</p> + +<pre><html> +<head> +<title>Przykład użycia parametru z obiektem event wraz z dodatkowymi parametrami</title> + +<script type="text/javascript"> + +var par2 = 'hello'; +var par3 = 'world!'; + +function showCoords(evt, p2, p3){ + alert( + "clientX value: " + evt.clientX + "\n" + + "clientY value: " + evt.clientY + "\n" + + "p2: " + p2 + "\n" + + "p3: " + p3 + "\n" + ); +} + +</script> +</head> + +<body onmousedown="showCoords(event, par2, par3)"> +<p>Kliknij gdziekolwiek na tej stronie, aby wyświetlić współrzędne położenia myszy.</p> +</body> +</html> +</pre> + +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3> + +<dl> + <dt><a href="pl/DOM/event.altKey">event.altKey</a></dt> + <dd>Zwraca wartość logiczną wskazującą, czy klawisz <code><alt></code> był wciśnięty podczas zdarzenia.</dd> + <dt><a href="pl/DOM/event.bubbles">event.bubbles</a></dt> + <dd>Zwraca wartość logiczną wskazującą, czy zdarzenie bąbelkuje przez model dokumentu czy nie.</dd> + <dt><a href="pl/DOM/event.button">event.button</a></dt> + <dd>Zwraca przycisk myszy.</dd> + <dt><a href="pl/DOM/event.cancelBubble">event.cancelBubble</a></dt> + <dd>{{ Deprecated_inline() }} Zwraca wartość logiczną wskazującą, czy bąbelkowanie zdarzenia zostało anulowane czy nie.</dd> + <dt><a href="pl/DOM/event.cancelable">event.cancelable</a></dt> + <dd>Zwraca wartość logiczną wskazującą, czy zdarzenie można anulować.</dd> + <dt><a href="pl/DOM/event.charCode">event.charCode</a></dt> + <dd>Zwraca kod Unicode klawisza znaku, który został wciśnięty podczas zdarzenia <a href="pl/DOM/element.onkeypress">keypress</a>.</dd> + <dt><a href="pl/DOM/event.clientX">event.clientX</a></dt> + <dd>Zwraca poziomą pozycję zdarzenia w obszarze klienta.</dd> + <dt><a href="pl/DOM/event.clientY">event.clientY</a></dt> + <dd>Zwraca pionową pozycję zdarzenia w obszarze klienta.</dd> + <dt><a href="pl/DOM/event.ctrlKey">event.ctrlKey</a></dt> + <dd>Zwraca wartość logiczną wskazującą, czy klawisz <code><ctrl></code> był wciśnięty podczas zdarzenia.</dd> + <dt><a href="pl/DOM/event.currentTarget">event.currentTarget</a></dt> + <dd>Zwraca referencję do obecnie zarejestrowanego celu zdarzenia.</dd> + <dt><a href="pl/DOM/event.detail">event.detail</a></dt> + <dd>Zwraca szczegółową informację o zdarzeniu zależnie od jego typu.</dd> + <dt><a href="pl/DOM/event.eventPhase">event.eventPhase</a></dt> + <dd>Wskazuje która faza przepływu zdarzenia jest aktualnie przetwarzana.</dd> + <dt><a href="pl/DOM/event.isChar">event.isChar</a></dt> + <dd>Zwraca wartość logiczną oznaczającą, czy w zdarzeniu pojawił się klawisz znaku czy nie.</dd> + <dt><a href="pl/DOM/event.keyCode">event.keyCode</a></dt> + <dd>Zwraca kod Unicode dla klawisza nie będącego znakiem w zdarzeniu keypress lub dowolnego klawisza w każdym innym zdarzeniu związanym z klawiaturą.</dd> + <dt><a href="pl/DOM/event.layerX">event.layerX</a></dt> + <dd>Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.</dd> + <dt><a href="pl/DOM/event.layerY">event.layerY</a></dt> + <dd>Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.</dd> + <dt><a href="pl/DOM/event.metaKey">event.metaKey</a></dt> + <dd>Zwraca wartość logiczną wskazującą, czy klawisz <code>meta</code> był wciśnięty podczas zdarzenia.</dd> + <dt><a href="pl/DOM/event.pageX">event.pageX</a></dt> + <dd>Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.</dd> + <dt><a href="pl/DOM/event.pageY">event.pageY</a></dt> + <dd>Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.</dd> + <dt><a href="pl/DOM/event.relatedTarget">event.relatedTarget</a></dt> + <dd>Wskazuje na drugi cel zdarzenia.</dd> + <dt><a href="pl/DOM/event.screenX">event.screenX</a></dt> + <dd>Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem ekranu.</dd> + <dt><a href="pl/DOM/event.screenY">event.screenY</a></dt> + <dd>Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całego ekranu.</dd> + <dt><a href="pl/DOM/event.shiftKey">event.shiftKey</a></dt> + <dd>Zwraca wartość logiczną wskazującą, czy klawisz <code><shift></code> był wciśnięty podczas zdarzenia.</dd> + <dt><a href="pl/DOM/event.target">event.target</a></dt> + <dd>Zwraca referencję do elementu, do którego zdarzenie zostało pierwotnie wysłane.</dd> + <dt><a href="pl/DOM/event.timeStamp">event.timeStamp</a></dt> + <dd>Zwraca czas, kiedy o którym zdarzenie zostało utworzone.</dd> + <dt><a href="pl/DOM/event.type">event.type</a></dt> + <dd>Zwraca nazwę zdarzenia.</dd> + <dt><a href="pl/DOM/event.view">event.view</a></dt> + <dd>Wskazuje widok (<code>AbstractView</code>), w którym wygenerowane zostało zdarzenie.</dd> + <dt><a href="pl/DOM/event.which">event.which</a></dt> + <dd>Zwraca kod Unicode klawisza w zdarzeniu związanym z klawiaturą, niezależnie od tego, czy klawisz jest znakiem.</dd> +</dl> + +<h3 id="Metody" name="Metody">Metody</h3> + +<dl> + <dt><a href="pl/DOM/event.initEvent">event.initEvent</a></dt> + <dd>Metoda używana do zainicjalizowania wartości dla zdarzenia utworzonego przez interfejs <code>DocumentEvent</code>.</dd> + <dt><a href="pl/DOM/event.initKeyEvent">event.initKeyEvent</a></dt> + <dd>Inicjalizuje zdarzenie klawiatury. Gecko-specific.</dd> + <dt><a href="pl/DOM/event.initMouseEvent">event.initMouseEvent</a></dt> + <dd>Inicjalizuje zdarzenie myszy po jego utworzeniu.</dd> + <dt><a href="pl/DOM/event.initUIEvent">event.initUIEvent</a></dt> + <dd>Inicjalizuje zdarzenie interfejsu użytkownika po jego utworzeniu.</dd> + <dt><a href="pl/DOM/event.preventBubble">event.preventBubble</a></dt> + <dd>{{ Obsolete_inline() }} Zabezpiecza zdarzenie przed bąbelkowaniem. Ta metoda jest przestarzała ze względu na standard <a href="pl/DOM/event.stopPropagation">stopPropagation</a> i jest <a href="pl/Zmiany_w_Gecko_1.9_wp%c5%82ywaj%c4%85ce_na_wy%c5%9bwietlanie_stron">usunięta w Gecko 1.9</a>.</dd> + <dt><a href="pl/DOM/event.preventCapture">event.preventCapture</a></dt> + <dd>{{ Obsolete_inline() }} Ta metoda jest przestarzała ze względu na standard <a href="pl/DOM/event.stopPropagation">stopPropagation</a> i jest <a href="pl/Zmiany_w_Gecko_1.9_wp%c5%82ywaj%c4%85ce_na_wy%c5%9bwietlanie_stron">usunięta w Gecko 1.9</a>.</dd> + <dt><a href="pl/DOM/event.preventDefault">event.preventDefault</a></dt> + <dd>Anuluje zdarzenie (jeśli można je anulować).</dd> + <dt><a href="pl/DOM/event.stopPropagation">event.stopPropagation</a></dt> + <dd>Zatrzymuje dalsze propagowanie bieżącego zdarzenia w DOM.</dd> +</dl> + + + +<div class="noinclude"></div> + +<p>{{ languages( { "en": "en/DOM/event", "es": "es/DOM/event", "fr": "fr/DOM/event", "ja": "ja/DOM/event" } ) }}</p> diff --git a/files/pl/web/api/event/initevent/index.html b/files/pl/web/api/event/initevent/index.html new file mode 100644 index 0000000000..47af034ed8 --- /dev/null +++ b/files/pl/web/api/event/initevent/index.html @@ -0,0 +1,45 @@ +--- +title: event.initEvent +slug: Web/API/Event/initEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/initEvent +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda służy do zainicjalizowania zdarzenia utworzonego za pomocą <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">interfejsu DocumentEvent</a></p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">event.initKeyEvent(<i>type</i>,<i>bubbles</i>,<i>cancelable</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <code>type</code></dt> + <dd> + Typ zdarzenia.</dd> + <dt> + <code>bubbles</code></dt> + <dd> + Wartość logiczna wskazująca, czy zdarzenie ma bąbelkować czy nie (zob. <a href="pl/DOM/event.bubbles">bubbles</a>).</dd> + <dt> + <code>cancelable</code></dt> + <dd> + Wartość logiczna wskazująca, czy zdarzenie może zostać anulowane (zob. <a href="pl/DOM/event.cancelable">cancelable</a>).</dd> +</dl> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// utwórz zdarzenie kliknięcia, które bąbelkuje +// i nie może być anulowane +event.initEvent("click", true, false); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zdarzenia inicjalizowane w ten sposób muszą zostać utworzone za pomocą metody <a href="pl/DOM/document.createEvent">createEvent</a> interfejsu DocumentEvent. Metoda <b>initEvent</b> musi być wywołana by ustawić zdarzenie przed jego wywołaniem (za pomocą <a href="pl/DOM/element.dispatchEvent">dispatchEvent</a>).</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2001/WD-DOM-Level-3-Events-20010823/events.html#Events-Event-initEvent">initEvent</a></p> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/event.initEvent", "es": "es/DOM/event.initEvent", "fr": "fr/DOM/event.initEvent", "ja": "ja/DOM/event.initEvent" } ) }}</p> diff --git a/files/pl/web/api/event/initmouseevent/index.html b/files/pl/web/api/event/initmouseevent/index.html new file mode 100644 index 0000000000..e9de804697 --- /dev/null +++ b/files/pl/web/api/event/initmouseevent/index.html @@ -0,0 +1,86 @@ +--- +title: event.initMouseEvent +slug: Web/API/Event/initMouseEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/initMouseEvent +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Inicjuje zdarzenie myszy po jego utworzeniu (za pomocą metody <a href="pl/DOM/document.createEvent">createEvent</a> interfejsu <code>DocumentEvent</code>).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>event</i>.initMouseEvent(<i>type</i>,<i>canBubble</i>,<i>cancelable</i>,<i>view</i>,<i>detail</i>,<i>screenX</i>,<i>screenY</i>,<i>clientX</i>,<i>clientY</i>,<i>ctrlKey</i>,<i>altKey</i>,<i>shiftKey</i>,<i>metaKey</i>,<i>button</i>,<i>relatedTarget</i>); +</pre> +<dl> + <dt> + <code>type</code></dt> + <dd> + łańcuch znaków do ustawienia <a href="pl/DOM/event.type">typu</a> zdarzeń. Możliwe typy dla zdarzeń myszy: <code>click</code>, <code>mousedown</code>, <code>mouseup</code>, <code>mouseover</code>, <code>mousemove</code>, <code>mouseout</code>.</dd> + <dt> + <code>canBubble</code></dt> + <dd> + czy zdarzenie bąbelkuje. Ustawia wartość <a href="pl/DOM/event.bubbles">event.bubbles</a>.</dd> + <dt> + <code>cancelable</code></dt> + <dd> + czy domyślna akcja zdarzenia może być anulowana. Ustawia Ustawia wartość <a href="pl/DOM/event.cancelable">event.cancelable</a>.</dd> + <dt> + <code>view</code></dt> + <dd> + AbstractView zdarzenia. You should pass the <a href="pl/DOM/window">window</a> object here. Ustawia wartość <a href="pl/DOM/event.view">event.view</a>.</dd> + <dt> + <code>detail</code></dt> + <dd> + wartość licznika kliknięć myszą. Ustawia wartość <a href="pl/DOM/event.detail">event.detail</a>.</dd> + <dt> + <code>screenX</code></dt> + <dd> + współrzędna x względem ekranu. Ustawia wartość <a href="pl/DOM/event.screenX">event.screenX</a>.</dd> + <dt> + <code>screenY</code></dt> + <dd> + współrzędna y względem ekranu. Ustawia wartość <a href="pl/DOM/event.screenY">event.screenY</a>.</dd> + <dt> + <code>clientX</code></dt> + <dd> + współrzędna x w obszarze klienta. Ustawia wartość <a href="pl/DOM/event.clientX">event.clientX</a>.</dd> + <dt> + <code>clientY</code></dt> + <dd> + współrzędna y w obszarze klienta. Ustawia wartość <a href="pl/DOM/event.clientY">event.clientY</a>.</dd> + <dt> + <code>ctrlKey</code></dt> + <dd> + czy klawisz control był wciśnięty podczas zdarzenia. Ustawia wartość <a href="pl/DOM/event.ctrlKey">event.ctrlKey</a>.</dd> + <dt> + <code>altKey</code></dt> + <dd> + czy klawisz alt był wciśnięty podczas zdarzenia. Ustawia wartość <a href="pl/DOM/event.altKey">event.altKey</a>.</dd> + <dt> + <code>shiftKey</code></dt> + <dd> + czy klawisz shift był wciśnięty podczas zdarzenia. Ustawia wartość <a href="pl/DOM/event.shiftKey">event.shiftKey</a>.</dd> + <dt> + <code>metaKey</code></dt> + <dd> + czy klawisz meta był wciśnięty podczas zdarzenia. Ustawia wartość <a href="pl/DOM/event.metaKey">event.metaKey</a>.</dd> + <dt> + <code>button</code></dt> + <dd> + zdarzenie myszy <a href="pl/DOM/event.button">event.button</a>.</dd> + <dt> + <code>relatedTarget</code></dt> + <dd> + zdarzenie <a href="pl/DOM/event.relatedTarget">related EventTarget</a>. Stosowane tylko z kilkoma typami zdarzeń (np. <code>mouseover</code> i <code>mouseout</code>). W innych przypadkach, zwraca <code>null</code>.</dd> +</dl> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p> </p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-initMouseEvent">DOM Level 2 Events: initMouseEvent</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/event.initMouseEvent", "es": "es/DOM/event.initMouseEvent" } ) }}</p> diff --git a/files/pl/web/api/event/inituievent/index.html b/files/pl/web/api/event/inituievent/index.html new file mode 100644 index 0000000000..3a20fef39d --- /dev/null +++ b/files/pl/web/api/event/inituievent/index.html @@ -0,0 +1,49 @@ +--- +title: event.initUIEvent +slug: Web/API/Event/initUIEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/initUIEvent +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Inicjalizuje utworzone wcześniej zdarzenie interfejsu użytkownika.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">event.initUIEvent(<i>type</i>,<i>canBubble</i>,<i>cancelable</i>,<i>view</i>,<i>detail</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <code>type</code></dt> + <dd> + typ zdarzenia</dd> + <dt> + <code>canBubble</code></dt> + <dd> + Wartość logiczna wskazująca, czy zdarzenie ma bąbelkować czy nie (zob. <a href="pl/DOM/event.bubbles">bubbles</a>).</dd> + <dt> + <code>cancelable</code></dt> + <dd> + Wartość logiczna wskazująca, czy zdarzenie może zostać anulowane (zob. <a href="pl/DOM/event.cancelable">cancelable</a>).</dd> + <dt> + <code>view</code></dt> + <dd> + widok (<a href="pl/DOM/AbstractView">AbstractView</a>) powiązany z tym zdarzeniem</dd> + <dt> + <code>detail</code></dt> + <dd> + liczba określająca szczegółową informację dla tego zdarzenia; dla zdarzeń myszy jest to liczba kliknięć w danym miejscu ekranu (zwykle 1).</dd> +</dl> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">e = document.createEvent("UIEvents"); +// tworzy zdarzenie kliknięcia, które bąbelkuje, może być +// anulowane i którego widok i szczegółowa informacja +// to odpowiednio window i 1 +e.initUIEvent("click", true, true, window, 1); +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2001/WD-DOM-Level-3-Events-20010823/events.html#Events-Event-initUIEvent">initUIEvent </a></p> +<p>{{ languages( { "en": "en/DOM/event.initUIEvent" } ) }}</p> diff --git a/files/pl/web/api/event/ischar/index.html b/files/pl/web/api/event/ischar/index.html new file mode 100644 index 0000000000..fc7a7dfec9 --- /dev/null +++ b/files/pl/web/api/event/ischar/index.html @@ -0,0 +1,24 @@ +--- +title: event.isChar +slug: Web/API/Event/isChar +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/isChar +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca wartość logiczną oznaczającą, czy w zdarzeniu pojawił się klawisz znaku czy nie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">bool = event.isChar +</pre> +<h3 id="Example" name="Example">Example</h3> +<pre> if e.isChar + echoInput(e.type); + } +</pre> +<h3 id="Notes" name="Notes">Notes</h3> +<p>Niektórze kombinacje klawiszy mogą wywyoływać zdarzenia bez wystąpienia znaku (np. ctrl + alt). Wtedy <b>isChar</b> zwraca fałsz. <b>isChar</b> może być użyty, kiedy funkcje obsługujące zdarzenie potrzebują np. wyświetlić wprowadzony znak na ekranie.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Nie należy do specyfikacji.</p> +<p>{{ languages( { "en": "en/DOM/event.isChar" } ) }}</p> diff --git a/files/pl/web/api/event/keycode/index.html b/files/pl/web/api/event/keycode/index.html new file mode 100644 index 0000000000..a11c37d4b0 --- /dev/null +++ b/files/pl/web/api/event/keycode/index.html @@ -0,0 +1,23 @@ +--- +title: event.keyCode +slug: Web/API/Event/keyCode +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/KeyboardEvent/keyCode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca kod Unicode dla klawisza nie będącego znakiem w zdarzeniu <a href="pl/DOM/element.onkeypress">keypress</a> lub dowolnego klawisza w każdym innym zdarzeniu związanym z klawiaturą.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">klawisz = event.keyCode +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>klawisz</code> jest wartością kodu Unicode klawisza, który został wciśnięty w tym zdarzeniu.</li> +</ul> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zobacz opis właściwości <a href="pl/DOM/event.charCode">charCode</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Nie należy do specyfikacji. Zobacz <a href="pl/NsIDOMKeyEvent">nsIDOMKeyEvent</a>.</p> +<p>{{ languages( { "en": "en/DOM/event.keyCode" } ) }}</p> diff --git a/files/pl/web/api/event/layerx/index.html b/files/pl/web/api/event/layerx/index.html new file mode 100644 index 0000000000..5a69b4c864 --- /dev/null +++ b/files/pl/web/api/event/layerx/index.html @@ -0,0 +1,15 @@ +--- +title: event.layerX +slug: Web/API/Event/layerX +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/layerX +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>liczba</i> = event.layerX +</pre> +<p>{{ languages( { "en": "en/DOM/event.layerX" } ) }}</p> diff --git a/files/pl/web/api/event/layery/index.html b/files/pl/web/api/event/layery/index.html new file mode 100644 index 0000000000..f610d08357 --- /dev/null +++ b/files/pl/web/api/event/layery/index.html @@ -0,0 +1,17 @@ +--- +title: event.layerY +slug: Web/API/Event/layerY +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/layerY +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>liczba</i> = event.layerY +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Nie należy do specyfikacji.</p> +<p>{{ languages( { "en": "en/DOM/event.layerY" } ) }}</p> diff --git a/files/pl/web/api/event/metakey/index.html b/files/pl/web/api/event/metakey/index.html new file mode 100644 index 0000000000..a2c2758fb3 --- /dev/null +++ b/files/pl/web/api/event/metakey/index.html @@ -0,0 +1,30 @@ +--- +title: event.metaKey +slug: Web/API/Event/metaKey +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/metaKey +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca wartość logiczną wskazującą, czy klawisz <meta> był wciśnięty podczas wywołania zdarzenia.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> function goInput(e) { + // sprawdza metaKey + if (e.metaKey) { + // i przekazuje zdarzenie dalej + superSizeOutput(e); + + } else { + doOutput(e); + } + } +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Na niekótrych platformach metaKey może obsługiwać klawisz o innej nazwie.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-metaKey">metaKey</a></p> +<p>{{ languages( { "en": "en/DOM/event.metaKey" } ) }}</p> diff --git a/files/pl/web/api/event/pagex/index.html b/files/pl/web/api/event/pagex/index.html new file mode 100644 index 0000000000..98c3c3e1ed --- /dev/null +++ b/files/pl/web/api/event/pagex/index.html @@ -0,0 +1,17 @@ +--- +title: event.pageX +slug: Web/API/Event/pageX +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/pageX +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>liczba</i> = event.pageX +</pre> +<p>{{ languages( { "en": "en/DOM/event.pageX", "es": "es/DOM/event.pageX" } ) }}</p> diff --git a/files/pl/web/api/event/pagey/index.html b/files/pl/web/api/event/pagey/index.html new file mode 100644 index 0000000000..d82e2237df --- /dev/null +++ b/files/pl/web/api/event/pagey/index.html @@ -0,0 +1,15 @@ +--- +title: event.pageY +slug: Web/API/Event/pageY +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/pageY +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>liczba</i> = event.pageY +</pre> +<p>{{ languages( { "en": "en/DOM/event.pageY" } ) }}</p> diff --git a/files/pl/web/api/event/relatedtarget/index.html b/files/pl/web/api/event/relatedtarget/index.html new file mode 100644 index 0000000000..c67389532a --- /dev/null +++ b/files/pl/web/api/event/relatedtarget/index.html @@ -0,0 +1,56 @@ +--- +title: event.relatedTarget +slug: Web/API/Event/relatedTarget +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/relatedTarget +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wskazuje na drugi cel zdarzenia.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">eventTarget = event.relatedTarget +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>eventTarget</code> to referencja do dodatkowego celu zdarzenia (obiektu <code>EventTarget</code>).</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>var rel = event.relatedTarget; +// dump("LEAVING " + (rel ? rel.localName : "null") + "\n"); +// relatedTarget is null when the titletip is first shown: +// a mouseout event fires because the mouse is exiting +// the main window and entering the titletip "window". +// relatedTarget is also null when the mouse exits the main +// window completely, so count how many times relatedTarget +// was null after titletip is first shown and hide popup +// the 2nd time +if (!rel) { + ++this._mouseOutCount; + if (this._mouseOutCount > 1) + this.hidePopup(); + return; +} +// find out if the node we are entering is one of our +// anonymous children +while (rel) { + if (rel == this) + break; + rel.parentNode; +} +// if the entered node is not a descendant of ours, hide +// the tooltip +if (rel != this && this._isMouseOver) { + this.hidePopup(); +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Za specyfikacją W3C: "Obecnie ten atrybuty używany jest przy zdarzeniu <a href="pl/DOM/element.onmouseover">mouseover</a>, gdzie kieruje do <code>EventTarget</code>, jaki opuściło urządzenie wskazujące oraz przy zdarzeniu <a href="pl/DOM/element.onmouseout">mouseout</a>, gdzie kieruje do EventTarget, w który weszło urządzenie wskazujące."</p> +<p>Powyzszy przykład jest typowy - właściwość <b>relatedTarget</b> używana jest by znaleźć, jeśli jest związany z tym zdarzeniem, kolejny element. Zdarzenia takie jak najechanie myszą ( + <i> + mouseover</i> + ) są powiązane z konkretnym elementem docelowym, ale mogą też angażować drugi cel, jak np. element opuszczany przez mysz w momencie, gdy najechania na główny cel.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-relatedTarget">relatedTarget </a></p> +<p>{{ languages( { "en": "en/DOM/event.relatedTarget" } ) }}</p> diff --git a/files/pl/web/api/event/screenx/index.html b/files/pl/web/api/event/screenx/index.html new file mode 100644 index 0000000000..5bafc490da --- /dev/null +++ b/files/pl/web/api/event/screenx/index.html @@ -0,0 +1,33 @@ +--- +title: event.screenX +slug: Web/API/Event/screenX +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/screenX +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całego ekranu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>liczbaPikseli</i> = event.screenX +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>liczbaPikseli</code> to odległość od lewej strony ekranu wyrażona w pikselach.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> function checkClickMap(e) { + if e.screenX < 50 + doRedButton(); + if 50 <= e.screenX < 100 + doYellowButton(); + if e.screenX >= 100 + doRedButton(); + } +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Kiedy złapiesz zdarzenie w oknie, dokumencie czy innym obszernym elemencie możesz pobrać współrzędne tego zdarzenia (np. kliknięcia) i obsłużyć je prawidłowo, tak jak pokazuje powyższy przykład.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-screenX">screenX </a></p> +<p>{{ languages( { "en": "en/DOM/event.screenX" } ) }}</p> diff --git a/files/pl/web/api/event/screeny/index.html b/files/pl/web/api/event/screeny/index.html new file mode 100644 index 0000000000..8b59c5a5e6 --- /dev/null +++ b/files/pl/web/api/event/screeny/index.html @@ -0,0 +1,23 @@ +--- +title: event.screenY +slug: Web/API/Event/screenY +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/screenY +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całego ekranu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>liczbaPikseli</i> = event.screenY +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>liczbaPikseli</code> to odległość od góry ekranu wyrażona w pikselach.</li> +</ul> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Kiedy złapiesz zdarzenie w oknie, dokumencie czy innym obszernym elemencie możesz pobrać współrzędne tego zdarzenia (np. kliknięcia) i obsłużyć je prawidłowo. Zobacz przykład do <a href="pl/DOM/event.screenX">screenX</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-screenY">screenY </a></p> +<p>{{ languages( { "en": "en/DOM/event.screenY" } ) }}</p> diff --git a/files/pl/web/api/event/shiftkey/index.html b/files/pl/web/api/event/shiftkey/index.html new file mode 100644 index 0000000000..1c09a012ce --- /dev/null +++ b/files/pl/web/api/event/shiftkey/index.html @@ -0,0 +1,26 @@ +--- +title: event.shiftKey +slug: Web/API/Event/shiftKey +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/shiftKey +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wskazuje, czy klawisz <shift> był wciśnięty przy wywołaniu zdarzenia.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">bool = event.shiftKey +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> function goInput(e) { + // sprawdza shiftKey + if e.shiftKey + // i przekazuje zdarzenie dalej + superSizeOutput(e); + else + doOutput(e) +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-shiftKey">shiftKey </a></p> +<p>{{ languages( { "en": "en/DOM/event.shiftKey" } ) }}</p> diff --git a/files/pl/web/api/event/stoppropagation/index.html b/files/pl/web/api/event/stoppropagation/index.html new file mode 100644 index 0000000000..3026d761b3 --- /dev/null +++ b/files/pl/web/api/event/stoppropagation/index.html @@ -0,0 +1,26 @@ +--- +title: event.stopPropagation +slug: Web/API/Event/stopPropagation +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/stopPropagation +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Przerywa dalsze propagowanie bieżącego zdarzenia.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>event</i>.stopPropagation() +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>e.stopPropagation(); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM">Przykład 5: Propagowanie zdarzeń</a> w rozdziale <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM">Przykłady użycia DOM</a> dokładniej obrazuje użycie tej metody i propagowanie zdarzeń w DOM.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-stopPropagation">DOM Level 2 Events: stopPropagation</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/event.stopPropagation", "ja": "ja/DOM/event.stopPropagation" } ) }}</p> diff --git a/files/pl/web/api/event/target/index.html b/files/pl/web/api/event/target/index.html new file mode 100644 index 0000000000..b9df9f7b4f --- /dev/null +++ b/files/pl/web/api/event/target/index.html @@ -0,0 +1,27 @@ +--- +title: event.target +slug: Web/API/Event/target +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Event/target +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca referencję do elementu, do którego zdarzenie zostało pierwotnie wysłane.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>referencjaDoEventTarget</i> = event.target +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>referencjaDoEventTarget</code> to referencja do obiektu EventTarget</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> d = document.getElementById("d1"); + if e.target != d + resetGame(); + // nie nasze zdarzenie +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-target">target</a></p> +<p>{{ languages( { "en": "en/DOM/event.target" } ) }}</p> diff --git a/files/pl/web/api/event/timestamp/index.html b/files/pl/web/api/event/timestamp/index.html new file mode 100644 index 0000000000..daead28251 --- /dev/null +++ b/files/pl/web/api/event/timestamp/index.html @@ -0,0 +1,47 @@ +--- +title: event.timeStamp +slug: Web/API/Event/timeStamp +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/timeStamp +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca czas (w milisekundach od momentu Epoch), kiedy zdarzenie zostało utworzone.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>number</i> = event.timeStamp +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><html> +<head> + +<title>Przykład timeStamp</title> + +<script type="text/javascript"> +var curr_time = null; + +function getTime(evt) { + curr_time = evt.timeStamp; + document.getElementById("time").firstChild.nodeValue = curr_time; +} +</script> +</head> + +<body onkeypress="getTime(event)"> + +<p>Naciśnij jakikolwiek klawisz, aby pobrać aktualny timestamp +dla zdarzenia onkeypress.</p> +<p>timeStamp: <span id="time">-</span></p> + +</body> +</html> +</pre> +<p> </p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Ta własność działa tylko wtedy, gdy system obsługuje ją dla danego zdarzenia.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-timeStamp">timestamp</a></p> +<p>{{ languages( { "en": "en/DOM/event.timeStamp" } ) }}</p> diff --git a/files/pl/web/api/event/type/index.html b/files/pl/web/api/event/type/index.html new file mode 100644 index 0000000000..dfc2875af1 --- /dev/null +++ b/files/pl/web/api/event/type/index.html @@ -0,0 +1,19 @@ +--- +title: event.type +slug: Web/API/Event/type +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Event/type +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca nazwę zdarzenia (niewrażliwe na wielkość znaków).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>string</i> = event.type +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>type</code> jest <a class="external" href="http://www.w3.org/TR/1998/REC-xml-19980210#NT-Name">nazwą XML-ową</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-type">type</a></p> +<p>{{ languages( { "en": "en/DOM/event.type" } ) }}</p> diff --git a/files/pl/web/api/event/view/index.html b/files/pl/web/api/event/view/index.html new file mode 100644 index 0000000000..57af70a587 --- /dev/null +++ b/files/pl/web/api/event/view/index.html @@ -0,0 +1,23 @@ +--- +title: event.view +slug: Web/API/Event/view +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/view +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Atrybut <b>view</b> identyfikuje widok (interfejs AbstractView), w którym wygenerowane zostało zdarzenie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>referencjaDoAbstractView</i> = event.view +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>referencjaDoAbstractView</code> to rerefencja do obiektu AbstractView.</li> +</ul> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-UIEvent-view">view</a></p> +<p>{{ languages( { "en": "en/DOM/event.view" } ) }}</p> diff --git a/files/pl/web/api/file/file/index.html b/files/pl/web/api/file/file/index.html new file mode 100644 index 0000000000..0a1525bdc8 --- /dev/null +++ b/files/pl/web/api/file/file/index.html @@ -0,0 +1,68 @@ +--- +title: File.File() +slug: Web/API/File/File +tags: + - API +translation_of: Web/API/File/File +--- +<p>{{APIRef("File")}}</p> + +<p>Konstruktor <code><strong>File()</strong></code> tworzy nową instancję obiektu {{domxref("File")}}.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">File(bity, nazwa [, opcje]);</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><em>bity</em></dt> + <dd>{{jsxref("Array")}} (Tablica) obiektów {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}} lub {{domxref("DOMString")}} — albo miks takich obiektów. Zawartość pliku jest zakodowana w UTF-8.</dd> + <dt><em>nazwa</em></dt> + <dd>Obiekt {domxref("USVString")}} reprezentujący nazwę pliku albo ścieżkę do niego.</dd> + <dt><em>opcje</em> {{optional_inline}}</dt> + <dd>Obiekt opcji, który zawiera opcjonalne atrybuty pliku. Dostępne są następujące możliwości: + <ul> + <li><code>type</code>: (typ) - Obiekt {{domxref("DOMString")}} reprezentujący typ MIME zawartości pliku. Domyślnie <code>"".</code></li> + <li><code>lastModified</code>: (ostatnio modyfikowany) Liczba reprezentująca liczbę milisekund pomiędzy Unix time epoch i datą ostatniej modyfikacji pliku. Domyślnie - wartość {{jsxref("Date.now()")}}.</li> + </ul> + </dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: js">var plik = new File(["foo"], "foo.txt", { + type: "text/plain", +});</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('File API')}}</td> + <td>{{Spec2('File API')}}</td> + <td>Podstawowa definicja</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_między_przeglądarkami">Kompatybilność między przeglądarkami</h2> + +<div> + + +<p>{{Compat("api.File.File")}}</p> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{domxref("FileReader")}}</li> + <li>{{domxref("Blob")}}</li> +</ul> diff --git a/files/pl/web/api/file/index.html b/files/pl/web/api/file/index.html new file mode 100644 index 0000000000..50caf5366b --- /dev/null +++ b/files/pl/web/api/file/index.html @@ -0,0 +1,112 @@ +--- +title: File +slug: Web/API/File +tags: + - API + - File API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/API/File +--- +<div>{{APIRef}}</div> + +<p>The <strong><code>File</code></strong> interface provides information about files and allows JavaScript in a web page to access their content.</p> + +<p><code>File</code> objects are generally retrieved from a {{domxref("FileList")}} object returned as a result of a user selecting files using the {{HTMLElement("input")}} element, from a drag and drop operation's {{domxref("DataTransfer")}} object, or from the <code>mozGetAsFile()</code> API on an {{domxref("HTMLCanvasElement")}}. In Gecko, privileged code can create <code>File</code> objects representing any local file without user interaction (see {{anch("Implementation notes")}} for more information.)</p> + +<p>A <code>File</code> object is a specific kind of a {{domxref("Blob")}}, and can be used in any context that a Blob can. In particular, {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, and {{domxref("XMLHttpRequest", "", "send()")}} accept both <code>Blob</code>s and <code>File</code>s.</p> + +<p>See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for more information and examples.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("File.File", "File()")}}</dt> + <dd>Returns a newly constructed <code>File</code>.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("File.lastModified")}} {{readonlyinline}}</dt> + <dd>Returns the last modified time of the file, in millisecond since the UNIX epoch (January 1st, 1970 at Midnight).</dd> + <dt>{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{deprecated_inline}} {{gecko_minversion_inline("15.0")}}</dt> + <dd>Returns the last modified <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code> of the file referenced by the <code>File</code> object.</dd> + <dt>{{domxref("File.name")}} {{readonlyinline}}</dt> + <dd>Returns the name of the file referenced by the <code>File</code> object.</dd> + <dt>{{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}</dt> + <dd>Returns the path the URL of the {{domxref("File")}} is relative to.</dd> +</dl> + +<p><code>File</code> implements {{domxref("Blob")}}, so it also has the following properties available to it:</p> + +<dl> + <dt>{{domxref("File.size")}} {{readonlyinline}}</dt> + <dd>Returns the size of the file in bytes.</dd> + <dt>{{domxref("File.type")}} {{readonlyinline}}</dt> + <dd>Returns the <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME </a>type of the file.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>The <code>File</code> interface doesn't define any methods, but inherits methods from the {{domxref("Blob")}} interface:</em></p> + +<dl> + <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt> + <dd>Returns a new <code>Blob</code> object containing the data in the specified range of bytes of the source <code>Blob</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('File API')}}</td> + <td>{{Spec2('File API')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.File")}}</p> +</div> + +<p> </p> + +<h3 id="Implementation_notes">Implementation notes</h3> + +<ul> + <li>In Gecko, you can use this API from within chrome code. See <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> for details. To use it from chrome code, JSM, and Bootstrap scope, you have to import it using <code><a href="/en-US/docs/Components.utils.importGlobalProperties">Cu.importGlobalProperties</a>(['File']);</code></li> + <li>Starting from 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 from 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 {{domxref("Blob")}}, as second argument the filename. The filename can be any String. + <pre class="syntaxbox">new File( + Array parts, + String filename, + BlobPropertyBag properties +);</pre> + </li> + <li>The following non-standard properties and methods were removed in Gecko 7 {{geckoRelease("7.0")}}: {{domxref("File.fileName")}}, {{domxref("File.fileSize")}}, {{domxref("File.getAsBinary()")}}, {{domxref("File.getAsDataURL()")}}, {{domxref("File.getAsText()","File.getAsText(string encoding)")}} ({{bug("661876")}}). Standard properties {{domxref("File.name")}}, {{domxref("Blob.size")}}, and methods on {{domxref("FileReader")}} should be used instead.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></li> + <li>{{domxref("FileReader")}}</li> + <li><a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> (for privileged code running in Gecko, such as Firefox add-ons)</li> +</ul> diff --git a/files/pl/web/api/geolocation_api/index.html b/files/pl/web/api/geolocation_api/index.html new file mode 100644 index 0000000000..5b53252074 --- /dev/null +++ b/files/pl/web/api/geolocation_api/index.html @@ -0,0 +1,92 @@ +--- +title: Geolocation API +slug: Web/API/Geolocation_API +translation_of: Web/API/Geolocation_API +--- +<div>{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}</div> + +<p><strong>Geolokalizacja API</strong> umożliwia użytkownikowi zapewnić ich lokalizację do aplikacji internetowych, jeśli zechcą. Ze względów prywatności użytkownik jest proszony o zgodę na zgłoszenie informacji o lokalizacji.</p> + +<p>Rozszerzenia Web, które chcą korzystać z obiektu Geolokalizacja, muszą dodać <code>"geolocation"</code>uprawnienie do swojego manifestu. System operacyjny użytkownika poprosi użytkownika o zezwolenie na dostęp do lokalizacji przy pierwszym żądaniu.</p> + +<h2 id="Pojęcia_i_użycie">Pojęcia i użycie</h2> + +<p>Często będziesz chciał odzyskać informacje o lokalizacji użytkownika w swojej aplikacji internetowej, na przykład wykreślić jego lokalizację na mapie lub wyświetlić spersonalizowane informacje dotyczące ich lokalizacji.</p> + +<p>The Geolocation API is accessed via a call to {{domxref("Navigator.geolocation", "navigator.geolocation")}}; this will cause the user's browser to ask them for permission to access their location data. If they accept, then the browser will use the best available functionality on the device to access this information (for example, GPS).</p> + +<p>The developer can now access this location information in a couple of different ways:</p> + +<ul> + <li>{{domxref("Geolocation.getCurrentPosition()")}}: Retrieves the device's current location.</li> + <li>{{domxref("Geolocation.watchPosition()")}}: Registers a handler function that will be called automatically each time the position of the device changes, returning the updated location.</li> +</ul> + +<p>In both cases, the method call takes up to three arguments:</p> + +<ul> + <li>A mandatory success callback: If the location retrieval is successful, the callback executes with a {{domxref("GeolocationPosition")}} object as its only parameter, providing access to the location data.</li> + <li>An optional error callback: If the location retrieval is unsuccessful, the callback executes with a {{domxref("GeolocationPositionError")}} object as its only parameter, providing access information on what went wrong.</li> + <li>An optional {{domxref("PositionOptions")}} object, which provides options for retrieval of the position data.</li> +</ul> + +<p>For further information on Geolocation usage, read <a href="/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API">Using the Geolocation API</a>.</p> + +<h2 id="Interfaces">Interfaces</h2> + +<dl> + <dt>{{domxref("Geolocation")}}</dt> + <dd>The main class of this API — contains methods to retrieve the user's current position, watch for changes in their position, and clear a previously-set watch.</dd> + <dt>{{domxref("GeolocationPosition")}}</dt> + <dd>Represents the position of a user. A <code>GeolocationPosition</code> instance is returned by a successful call to one of the methods contained inside {{domxref("Geolocation")}}, inside a success callback, and contains a timestamp plus a {{domxref("GeolocationCoordinates")}} object instance.</dd> + <dt>{{domxref("GeolocationCoordinates")}}</dt> + <dd>Represents the coordinates of a user's position; a <code>GeolocationCoordinates</code> instance contains latitude, longitude, and other important related information.</dd> + <dt>{{domxref("GeolocationPositionError")}}</dt> + <dd>A <code>GeolocationPositionError</code> is returned by an unsuccessful call to one of the methods contained inside {{domxref("Geolocation")}}, inside an error callback, and contains an error code and message.</dd> + <dt>{{domxref("Navigator.geolocation")}}</dt> + <dd>The entry point into the API. Returns a {{domxref("Geolocation")}} object instance, from which all other functionality can be accessed.</dd> +</dl> + +<h2 id="Dictionaries">Dictionaries</h2> + +<dl> + <dt>{{domxref("PositionOptions")}}</dt> + <dd>Represents an object containing options to pass in as a parameter of {{domxref("Geolocation.getCurrentPosition()")}} and {{domxref("Geolocation.watchPosition()")}}.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>{{page("/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API","Examples")}}</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("Geolocation")}}</td> + <td>{{Spec2("Geolocation")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<p>{{Compat("api.Geolocation")}}</p> + +<h3 id="Dostępność">Dostępność</h3> + +<p>Ponieważ Google często zapewnia lokalizację w oparciu o Wi-Fi, waniliowy interfejs API geolokalizacji może być niedostępny w Chinach. Możesz korzystać z usług lokalnych dostawców zewnętrznych, takich jak <a href="http://lbsyun.baidu.com/index.php?title=jspopular/guide/geolocation">Baidu</a> , <a href="https://lbs.amap.com/api/javascript-api/guide/services/geolocation#geolocation">Autonavi</a> lub <a href="http://lbs.qq.com/tool/component-geolocation.html">Tencent</a> . Usługi te wykorzystują adres IP użytkownika i / lub lokalną aplikację do zapewnienia lepszego pozycjonowania.</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API">Korzystanie z interfejsu API geolokalizacji</a></li> + <li><a href="https://www.w3.org/TR/geolocation-API/" rel="external">Interfejs API geolokalizacji na w3.org</a></li> + <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">Kto przeniósł moją geolokalizację? </a>(Hacks blog)</li> +</ul> diff --git a/files/pl/web/api/globaleventhandlers/index.html b/files/pl/web/api/globaleventhandlers/index.html new file mode 100644 index 0000000000..9238474923 --- /dev/null +++ b/files/pl/web/api/globaleventhandlers/index.html @@ -0,0 +1,714 @@ +--- +title: GlobalEventHandlers +slug: Web/API/GlobalEventHandlers +tags: + - API + - DOM + - GlobalEventHandlers + - HTML DOM + - Mixin + - NeedsTranslation + - Reference + - TopicStub + - events +translation_of: Web/API/GlobalEventHandlers +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>The <strong><code>GlobalEventHandlers</code></strong> mixin describes the event handlers common to several interfaces like {{domxref("HTMLElement")}}, {{domxref("Document")}}, or {{domxref("Window")}}. Each of these interfaces can, of course, add more event handlers in addition to the ones listed below.</p> + +<div class="note"> +<p><strong>Note</strong>: <code>GlobalEventHandlers</code> is a mixin and not an interface; you can't actually create an object of type <code>GlobalEventHandlers</code>.</p> +</div> + +<h2 id="Properties_2">Properties</h2> + +<p><em>This interface doesn't include any properties except for the event handlers listed below.</em></p> + +<h3 id="Event_handlers">Event handlers</h3> + +<p>These event handlers are defined on the {{domxref("GlobalEventHandlers")}} mixin, and implemented by {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, as well as by {{domxref("WorkerGlobalScope")}} for Web Workers.</p> + +<div id="Properties"> +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("abort")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}</dt> + <dd>An {{domxref("EventHandler")}} called when an {{event("animationcancel")}} event is sent, indicating that a running <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has been canceled.</dd> + <dt>{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}</dt> + <dd>An {{domxref("EventHandler")}} called when an {{event("animationend")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has stopped playing.</dd> + <dt>{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}</dt> + <dd>An {{domxref("EventHandler")}} called when an {{event("animationiteration")}} event has been sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has begun playing a new iteration of the animation sequence.</dd> + <dt>{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}</dt> + <dd>An {{domxref("EventHandler")}} called when an {{event("animationstart")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has started playing.</dd> + <dt>{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}</dt> + <dd>An {{domxref("EventHandler")}} called when an {{event("auxclick")}} event is sent, indicating that a non-primary button has been pressed on an input device (e.g. a middle mouse button).</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("blur")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncanplay")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncuechange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.</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.ongotpointercapture")}}</dt> + <dd> + <p>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("gotpointercapture")}} event type is raised.</p> + </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.onloadend")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadend")}} event is raised (when progress has stopped on the loading of a resource.)</dd> + <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised (when progress has begun on the loading of a resource.)</dd> + <dt>{{domxref("GlobalEventHandlers.onlostpointercapture")}}</dt> + <dd> + <p>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("lostpointercapture")}} event type is raised.</p> + </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("GlobalEventHandlers.onwheel") }}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("wheel")}} 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.onselectstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the user starts to make a new text selection on a web page.</dd> + <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the text selected on a web page changes.</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.ontransitioncancel")}}</dt> + <dd>An {{domxref("EventHandler")}} called when a {{event("transitioncancel")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has been cancelled.</dd> + <dt>{{domxref("GlobalEventHandlers.ontransitionend")}}</dt> + <dd>An {{domxref("EventHandler")}} called when a {{event("transitionend")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has finished playing.</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> +</div> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface defines no methods.</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>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>{{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>{{CompatVersionUnknown}}</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>{{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>{{CompatGeckoDesktop(1.9.1)}}</td> + <td>{{CompatVersionUnknown}}</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>{{CompatChrome(30.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>5.5</td> + <td>17</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ondragexit</code></td> + <td>{{CompatNo}}</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>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onclose</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncuechange</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmousewheel</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</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>{{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>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</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>{{property_prefix("-webkit")}}</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>{{CompatChrome(55.0)}}</td> + <td>{{CompatVersionUnknown}}</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>{{CompatNo}}</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>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>animationstart</code>, <code>animationend</code>, <code>animationcancel</code>, <code>animationiteration</code></td> + <td>{{CompatGeckoDesktop(51)}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(57.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onauxclick</code></td> + <td>{{CompatGeckoDesktop(53)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onwheel</code></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 Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</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}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(1.9.1)}}</td> + <td>{{CompatUnknown}}</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>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(1.9.1)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onmouseenter</code>, <code>onmouseleave</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(10)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onsuspend</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(1.9.2)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>ondragexit</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>oncancel</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onclose</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>oncuechange</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onmousewheel</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onsort</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onmozfullscreenchange</code>, <code>onmozfullscreenerror</code> {{non-standard_inline}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + </tr> + <tr> + <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(10)}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</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>{{CompatChrome(55.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(55.0)}}</td> + </tr> + <tr> + <td><code>onselectionchange</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(43)}}<sup>[4]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>ontouchend</code>, <code>ontouchcancel</code>, <code>ontouchmove</code>, <code>ontouchstart</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>animationstart</code>, <code>animationend</code>, <code>animationcancel</code>, <code>animationiteration</code></td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(51)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + </tr> + <tr> + <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code></td> + <td>{{CompatChrome(57.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(57.0)}}</td> + </tr> + <tr> + <td><code>onauxclick</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(53)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onwheel</code></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] 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> + <li>{{domxref("EventHandler")}}</li> + <li>{{domxref("Event")}}</li> +</ul> diff --git a/files/pl/web/api/globaleventhandlers/onblur/index.html b/files/pl/web/api/globaleventhandlers/onblur/index.html new file mode 100644 index 0000000000..1a1779b37f --- /dev/null +++ b/files/pl/web/api/globaleventhandlers/onblur/index.html @@ -0,0 +1,85 @@ +--- +title: GlobalEventHandlers.onblur +slug: Web/API/GlobalEventHandlers/onblur +translation_of: Web/API/GlobalEventHandlers/onblur +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>Właściwość <code><strong>onblur</strong></code> należy do Globalnych Uchwytów Zdarzeń ({{domxref("GlobalEventHandlers")}}) i jest Uchwytem Zdarzenia ({{domxref("EventHandler")}}), który służy do obsługi zdarzenia {{event("blur")}}. Jest on dostępny dla następujących elementów: {{domxref("Element")}}, {{domxref("Document")}}, oraz {{domxref("Window")}}.</p> + +<p>Zdarzenie <code>blur</code> zachodzi, gdy dany element traci "focus" (np. podczas opuszczenia inputa tekstowego).</p> + +<div class="blockIndicator note"> +<p><strong>Notatka:</strong> Przeciwieństwem <code>onblur</code> jest {{domxref("GlobalEventHandlers.onfocus", "onfocus")}}.</p> +</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><em>cel</em>.onblur = <em>jakasFunkcja</em>(); +</pre> + +<h3 id="Wartość">Wartość</h3> + +<p><code>jakasFunkcja</code> jest nazwą funkcji albo <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">wyrażeniem funkcji</a>. Jeżeli nie podano argumentu, celowi zostanie przypisana odpowiednia wartość obiektu {{domxref("FocusEvent")}}.</p> + +<h2 id="Przykład">Przykład</h2> + +<p>Przykład użycia <code>onblur</code> oraz {{domxref("GlobalEventHandlers.onfocus", "onfocus")}} do zmiany tekstu w elemencie {{HtmlElement("input")}}.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="text" value="CLICK HERE"> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">let input = document.querySelector('input'); + +input.onblur = inputBlur; +input.onfocus = inputFocus; + +function inputBlur() { + input.value = 'Focus has been lost'; +} + +function inputFocus() { + input.value = 'Focus is here'; +}</pre> + +<h3 id="Rezultat">Rezultat</h3> + +<p>Kliknij na pole, a następnie obok niego i obserwuj jak zmienia się jego zawartość.</p> + +<p id="Result">{{EmbedLiveSample('Przykład')}}</p> + +<h2 id="Specyfikacje">Specyfikacje</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','webappapis.html#handler-onblur','onblur')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<div class="hidden">Tablica kompatybilności jest na tej stronie generowana z danych strukturalnych. Jeżeli chcesz przyczynić się do rozwoju danych wejdź na <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam zapytanie.</div> + +<p>{{Compat("api.GlobalEventHandlers.onblur")}}</p> + +<p>W przeciwieństwie do IE, w którym prawie każdy element może otrzymać efekt zdarzenia <code>blur</code>, tylko kilka elementów z tym zdarzeniem, działa na przeglądarkach opartych o silnik Gecko.</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>Zdarzenie {{event("blur")}}</li> + <li>Odwrotny uchwyt zdarzenia: {{domxref("GlobalEventHandlers.onfocus")}}</li> +</ul> diff --git a/files/pl/web/api/globaleventhandlers/onfocus/index.html b/files/pl/web/api/globaleventhandlers/onfocus/index.html new file mode 100644 index 0000000000..bd4a30d6b5 --- /dev/null +++ b/files/pl/web/api/globaleventhandlers/onfocus/index.html @@ -0,0 +1,87 @@ +--- +title: GlobalEventHandlers.onfocus +slug: Web/API/GlobalEventHandlers/onfocus +translation_of: Web/API/GlobalEventHandlers/onfocus +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>Właściwość <code><strong>onfocus</strong></code> należy do Globalnych Uchwytów Zdarzeń ({{domxref("GlobalEventHandlers")}}) i jest Uchwytem Zdarzenia ({{domxref("EventHandler")}}), który służy do obsługi zdarzenia {{event("focus")}}.</p> + +<p>Zdarzenie <code>focus</code> zachodzi, gdy użytkownik aktywuje element (np. wejdzie w pole tekstowe {{HtmlElement("input")}}).</p> + +<p>Dla elementów <code>onfocus</code>, które nie są inputem, należy dodać atrybut {{htmlattrxref("tabindex")}} (przeczytaj <a href="/en-US/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Tworzenie dostępności klawiatury z powrotem</a> po więcej informacji).</p> + +<div class="blockIndicator note"> +<p><strong>Notatka:</strong> Przeciwieństwem <code>onfocus</code> jest {{domxref("GlobalEventHandlers.onblur", "onblur")}}.</p> +</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><em>cel</em>.onfocus = <em>jakasFunkcja</em>; +</pre> + +<h3 id="Wartość">Wartość</h3> + +<p><code>jakasFunkcja</code> jest nazwą funkcji lub <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">wyrażeniem funkcji</a>. Jeżeli nie podano argumentu, celowi zostanie przypisana odpowiednia wartość obiektu {{domxref("FocusEvent")}}.</p> + +<h2 id="Przykład">Przykład</h2> + +<p>Przykład użycia {{domxref("GlobalEventHandlers.onblur", "onblur")}} oraz <code>onfocus</code> do zmiany tekstu w elemencie {{HtmlElement("input")}}.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="text" value="CLICK HERE"> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">let input = document.querySelector('input'); + +input.onblur = inputBlur; +input.onfocus = inputFocus; + +function inputBlur() { + input.value = 'Focus has been lost'; +} + +function inputFocus() { + input.value = 'Focus is here'; +}</pre> + +<h3 id="Result_2">Result</h3> + +<p>Kliknij na pole, a następnie obok niego i obserwuj jak zmienia się jego zawartość.</p> + +<p id="Result">{{EmbedLiveSample('Example')}}</p> + +<h2 id="Specyfikacje">Specyfikacje</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','webappapis.html#handler-onfocus','onfocus')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<div class="hidden">Tablica kompatybilności jest na tej stronie generowana z danych strukturalnych. Jeżeli chcesz przyczynić się do rozwoju danych wejdź na <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam zapytanie.</div> + +<p>{{Compat("api.GlobalEventHandlers.onfocus")}}</p> + +<p>W przeciwieństwie do IE, w którym prawie każdy element może otrzymać efekt zdarzenia <code>focus</code> , prawie wszystkie elementy z tym zdarzeniem nie działają na przeglądarkach opartych o silnik Gecko.</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>Zdarzenie {{event("focus")}}</li> + <li>Odwrotny uchwyt zdarzenia: {{domxref("GlobalEventHandlers.onblur")}}</li> +</ul> diff --git a/files/pl/web/api/htmlcanvaselement/capturestream/index.html b/files/pl/web/api/htmlcanvaselement/capturestream/index.html new file mode 100644 index 0000000000..19b796017e --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/capturestream/index.html @@ -0,0 +1,73 @@ +--- +title: HTMLCanvasElement.captureStream() +slug: Web/API/HTMLCanvasElement/captureStream +translation_of: Web/API/HTMLCanvasElement/captureStream +--- +<div>{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}</div> + +<div> </div> + +<div>Metoda <code><strong>HTMLCanvasElement</strong></code><strong><code>.captureStream()</code></strong> zwraca {{domxref("CanvasCaptureMediaStream")}} który jest wideo w czasie rzeczywistym z powierzchni elementu <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Element/canvas" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><canvas></code></a>.</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><var>MediaStream</var> = <var>canvas</var>.captureStream(<var>frameRate</var>); +</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>frameRate</code> {{optional_inline}}</dt> + <dd>Liczba zmiennoprzecinkowa podójnej precyzji wskazuje na częstotliwość przechwytywania każdej klatki. W przypadku braku parametru nowa klatka będzie przechwytywana przy każdej zmianie {{HTMLElement("canvas")}}; jeśli ustawiona na <code>0</code>, przechwycona zostanie pojedyńcza klatka.</dd> +</dl> + +<h3 id="Wartość_zwrtona">Wartość zwrtona</h3> + +<p>Odniesienie do obiektu {{domxref("MediaStream")}}. </p> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: js">// Zlokalizuj element canvas do przechwycenia +var canvasElt = document.querySelector('canvas'); + +// Rozpocznij stream +var stream = canvasElt.captureStream(25); // 25 FPS + +// Wykonuj na nim czynności +// Np. Prześlij stream na inny komputer używając RTCPeerConnection +innyKomputer.addStream(stream); +</pre> + +<h2 id="Specyfikacja">Specyfikacja</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('Media Capture DOM Elements', '#widl-HTMLCanvasElement-captureStream-CanvasCaptureMediaStream-double-frameRate', 'HTMLCanvasElement.captureStream()')}}</td> + <td>{{Spec2('Media Capture DOM Elements')}}</td> + <td>Definicja początkowa</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_przeglądarek">Zgodność przeglądarek</h2> + + + +<p>{{Compat("api.HTMLCanvasElement.captureStream")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{domxref("CanvasCaptureMediaStream")}}, interfejs do którego należy.</li> + <li>{{domxref("HTMLMediaElement.captureStream()")}}, pozwala na przechwytywanie stream-u z elementu HTML.</li> + <li>{{domxref("MediaStream")}}</li> + <li>{{domxref("Media Capture and Streams API")}}</li> +</ul> diff --git a/files/pl/web/api/htmlcanvaselement/getcontext/index.html b/files/pl/web/api/htmlcanvaselement/getcontext/index.html new file mode 100644 index 0000000000..e60fddc51e --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/getcontext/index.html @@ -0,0 +1,129 @@ +--- +title: HTMLCanvasElement.getContext() +slug: Web/API/HTMLCanvasElement/getContext +translation_of: Web/API/HTMLCanvasElement/getContext +--- +<div>{{APIRef("Canvas API")}}</div> + +<p class="summary">Metoda <strong><code>HTMLCanvasElement.getContext()</code></strong> zwraca kontekst pola roboczego {{HTMLElement("canvas")}}, lub {{jsxref("null")}} jeśli identyfikator kontekstu nie jest wspierany.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">var <em>ctx</em> = <em>canvas</em>.getContext(<em>contextType</em>); +var <em>ctx</em> = <em>canvas</em>.getContext(<em>contextType</em>, <em>contextAttributes</em>); +</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code><em>contextType</em></code></dt> + <dd>Jest nim {{domxref("DOMString")}} zawierający identyfikator kontekstu pola roboczego powiązanego z {{HTMLElement("canvas")}}. Możliwe wartości to: + <ul> + <li><code>"2d"</code>, tworzy obiekt {{domxref("CanvasRenderingContext2D")}} reprezentujący dwuwymiarowy kontekst renderowania.</li> + <li><code>"webgl"</code> (lub <code>"experimental-webgl"</code>), tworzy obiekt {{domxref("WebGLRenderingContext")}} reprezentujący trójwymiarowy kontekst renderowania. Ten kontekst dostępny jest tylko w przeglądarkach w których zaimplementowana jest wersja 1 WebGL (OpenGL ES 2.0).</li> + <li><code>"webgl2"</code> tworzy obiekt {{domxref("WebGL2RenderingContext")}} reprezentujący trójwymiarowy kontekst renderowania. Ten kontekst dostępny jest tylko w przeglądarkach w których zaimplementowana jest wersja 2 WebGL (OpenGL ES 3.0). {{experimental_inline}}</li> + <li><code>"bitmaprenderer"</code> tworzy {{domxref("ImageBitmapRenderingContext")}}, który zapewnia możliwość zastąpenia treści {{HTMLElement("canvas")}} na podaną {{domxref("ImageBitmap")}}.</li> + </ul> + + <div class="note"> + <p><strong>Nota</strong>: Identyfikator "<code>experimental-webgl</code>" jest używany przy nowych wdrożeniach WebGL. Wdrożenia te nie uzyskały zgodności z pakietem testowym lub sterowniki graficzne platformy nie są jeszcze stabilne. <a href="https://www.khronos.org/">Grupa Khronos </a>certyfikuje wdrożenia WebGL zgodnie z <a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">regułami zgodności</a>.</p> + </div> + </dd> + <dt><code><em>contextAttributes</em></code></dt> + <dd> + <p>Można użyć kilku własności kontekstu przy tworzeniu kontekstu renderowania, dla przykładu: </p> + + <pre class="brush: js">const gl = canvas.getContext('webgl', { + antialias: false, + depth: false +});</pre> + </dd> + <dd>Własności kontekstu 2d: + <ul> + <li><strong><code>alpha</code></strong>: Boolean wskazujacy czy canvas zawiera kanał alpha. Jeśli ustawione na <code>false</code>, przeglądarka wie, że tło zawsze jest nieprzeźroczyste, co może przyspieszyć rysowanie przeźroczystych treści i obrazków. </li> + <li>{{non-standard_inline}} (Gecko only) <strong><code>willReadFrequently</code></strong>: Boolean wskazujący czy wiele operacji <code>read-back</code> zostało zaplanowanych. Spowoduje wymuszenie użycia oprogramowania (zamiast przyśpieszenia sprzętowego) 2D canvas i może pomóc w oszczędności pamięci przy częstym wywoływaniu {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Opcja ta jest dostepna tylko jeśli flaga <code>gfx.canvas.willReadFrequently.enable</code> jest ustawiona na <code>true</code> (która, domyślnie, dotyczy tylko B2G/Firefox OS).</li> + <li>{{non-standard_inline}} (Blink only) <strong><code>storage</code></strong>: String wskazujacy jaka pamięć jest używana (domyślnie jest to "stała" ).</li> + </ul> + Własności kontekstu WebGL: + + <ul> + <li><strong><code>alpha</code></strong>: Boolean wskazujacy czy canvas zawiera bufor alpha.</li> + <li><strong><code>depth</code></strong>: Boolean wskazujący czy bufor rysunku posiada bufor głębi o wartości co przynajmniej 16 bitów.</li> + <li><strong><code>stencil</code></strong>: Boolean wskazujący czy bufor rysunku posiada bufor matrycy o wartości przynajmniej 8 bitów. </li> + <li><strong><code>antialias</code></strong>: Boolean wskazujący czy używany ma być <code>anti-aliasing.</code></li> + <li><strong><code>premultipliedAlpha</code></strong>: Boolean wskazujący czy projektant strony założył, że bufor rysunku zawiera kolory ze wstepnie pomnożoną alfą.</li> + <li><strong><code>preserveDrawingBuffer</code></strong>: Jeśli ustawiona na <code>true</code>, bufory nie zostaną wyczyszczone i zachowają swoje wartości, dopóki nie zostaną wyczyszczone lub nadpisane przez autora.</li> + <li><code><strong>failIfMajorPerformanceCaveat</strong></code>: Boolean wskazujący czy kontekst będzie tworzony, jeśli wydajność systemu jest niska.</li> + </ul> + </dd> +</dl> + +<h3 id="Wartości_zwrotne">Wartości zwrotne</h3> + +<p>{{domxref("RenderingContext")}} jest też</p> + +<ul> + <li>{{domxref("CanvasRenderingContext2D")}} dla <code>"2d"</code>,</li> + <li>{{domxref("WebGLRenderingContext")}} dla <code>"webgl"</code> i <code>"experimental-webgl"</code>,</li> + <li>{{domxref("WebGL2RenderingContext")}} dla <code>"webgl2"</code> lub</li> + <li>{{domxref("ImageBitmapRenderingContext")}} dla <code>"bitmaprenderer"</code>.</li> +</ul> + +<p>Jeśli <em><code>contextType</code></em> nie może dopasować możliwych kontekstów rysowania, <code><em>null</em></code> zostanie zwrócony.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Wykorzystując element {{HTMLElement("canvas")}}:</p> + +<pre class="brush: html"><canvas id="canvas" width="300" height="300"></canvas> +</pre> + +<p>Kontekst <code>2d</code> uzyskać można za pomocą kodu: </p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +console.log(ctx); // CanvasRenderingContext2D { ... } +</pre> + +<p>Tworzy to <a href="/en-US/docs/Web/API/CanvasRenderingContext2D">kontekst renderowania 2D</a>, po którym można rysować.</p> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Brak zmian od ostatniego snapshota, {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot {{SpecName('HTML WHATWG')}} zawiera początkową definicje.</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_przeglądarek">Zgodność przeglądarek</h2> + + + +<p>{{Compat("api.HTMLCanvasElement.getContext")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>Interfejs definiujacy element, {{domxref("HTMLCanvasElement")}}.</li> + <li>{{domxref("OffscreenCanvas.getContext()")}}</li> + <li>Dostępne konteksty renderowania: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}}, {{domxref("WebGL2RenderingContext")}} i {{domxref("ImageBitmapRenderingContext")}}.</li> +</ul> diff --git a/files/pl/web/api/htmlcanvaselement/height/index.html b/files/pl/web/api/htmlcanvaselement/height/index.html new file mode 100644 index 0000000000..0ff266ff84 --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/height/index.html @@ -0,0 +1,79 @@ +--- +title: HTMLCanvasElement.height +slug: Web/API/HTMLCanvasElement/height +translation_of: Web/API/HTMLCanvasElement/height +--- +<div> +<div> +<div>{{APIRef("Canvas API")}}</div> + +<div> </div> + +<div><span>Własność </span><strong><code><span>HTMLCanvasElement.height</span></code><span> </span></strong><span>wyrażana jest w </span>dodatniej <code>liczbie całkowitej </code>odpowiada za atrybut <code><a href="https://developer.mozilla.org/pl/docs/Web/HTML/Element/canvas#attr-height" rel="nofollow">height</a></code> elemetu HTML <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Element/canvas" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><canvas></code></a> i jest interpretowany w pikselach CSS. Jeśli atrybut nie został określony, lub została przypisana do niego nieprawidłowa wartość, np. negatywna, zostanie użyta domyślna wartość <code>150</code>.</div> + +<div> </div> + +<div>To jedna z dwóch własności kontrolujących wielkość {{HTMLElement("canvas")}}, druga z nich to {{domxref("HTMLCanvasElement.width")}}.</div> +</div> +</div> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox"><var>var <em>pxl</em> = <em>canvas</em></var>.height; +<em>canvas</em>.height = <em>pxl</em>; +</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Biorąc pod uwagę element {{HTMLElement("canvas")}}:</p> + +<pre class="brush: html"><canvas id="canvas" width="300" height="300"></canvas> +</pre> + +<p>Można sprawdzić jego wysokość za pomocą kodu:</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +console.log(canvas.height); // 300 +</pre> + +<h2 id="Specyfikacja">Specyfikacja</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#attr-canvas-height", "HTMLCanvasElement.height")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> + <p>Brak zmian od ostatniego snapshota, {{SpecName('HTML5 W3C')}}</p> + </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot {{SpecName('HTML WHATWG')}} zawierający początkową definicje.</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_przeglądarek">Zgodność przeglądarek</h2> + + + +<p>{{Compat("api.HTMLCanvasElement.height")}}</p> + +<h2 id="See_Also" name="See_Also">Zobacz też</h2> + +<ul> + <li>Interfejs definiujący tą własność, {{domxref("HTMLCanvasElement")}}.</li> + <li>Inna własność kontrolujaca wielkość {{HTMLElement("canvas")}}, {{domxref("HTMLCanvasElement.width")}}.</li> +</ul> diff --git a/files/pl/web/api/htmlcanvaselement/index.html b/files/pl/web/api/htmlcanvaselement/index.html new file mode 100644 index 0000000000..21deee3bf0 --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/index.html @@ -0,0 +1,97 @@ +--- +title: HTMLCanvasElement +slug: Web/API/HTMLCanvasElement +translation_of: Web/API/HTMLCanvasElement +--- +<div> +<div>{{APIRef("Canvas API")}}</div> +</div> + +<p>Interfejs HTMLCanvasElement zapewnia własności i metody pozwalające na manipulację wygladem i prezentacją elementów canvas. Dodatkowo HTMLCanvasElement dziedziczy własności i metody interfejsu HTMLElement.</p> + +<p>{{InheritanceDiagram(600, 120)}}</p> + +<h2 id="Własności">Własności</h2> + +<p><em>Własności dziedziczone są od rodzica, {{domxref("HTMLElement")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLCanvasElement.height")}}</dt> + <dd>Wyrażany w dodatniej <code>liczbie całkowitej </code>odpowiada za atrybut {{htmlattrxref("height", "canvas")}} elemetu HTML {{HTMLElement("canvas")}} i jest interpretowany w pikselach CSS. Jeśli atrybut nie został określony, lub została przypisana do niego nieprawidłowa wartość, np. negatywna, zostanie użyta domyślna wartość <code>150</code>.</dd> + <dt>{{domxref("HTMLCanvasElement.width")}}</dt> + <dd>Wyrażany w dodatniej <code>liczbie całkowitej </code>odpowiada za atrybut {{htmlattrxref("width", "canvas")}} elemetu HTML {{HTMLElement("canvas")}} i jest interpretowany w pikselach CSS. Jeśli atrybut nie został określony, lub została przypisana do niego nieprawidłowa wartość, np. negatywna, zostanie użyta domyślna wartość <code>300</code>.</dd> +</dl> + +<h2 id="Metody">Metody</h2> + +<p><em>Metody dziedziczone są od rodzica, <em>{{domxref("HTMLElement")}}.</em></em></p> + +<dl> + <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt> + <dd>Zwraca {{domxref("CanvasCaptureMediaStream")}}, który jest wideo w czasie rzeczywistym z powierzchni elementu {{HTMLElement("canvas")}}.</dd> + <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt> + <dd>Zwraca pole robocze elementu {{HTMLElement("canvas")}}, lub null jeśli kontekst nie jest wspierany. Pole robocze pozwala na rysowanie na {{HTMLElement("canvas")}}. Wywołanie getContext z atrybutem <code>"2d"</code> zwraca obiekt {{domxref("CanvasRenderingContext2D")}}, natomiast wywołanie z <code>"webgl"</code> (lub <code>"experimental-webgl"</code>) zwróci obiekt {{domxref("WebGLRenderingContext")}}. Ten kontekst jest dostepny tylko w przeglądarkach obsługujących WebGL.</dd> +</dl> + +<dl> + <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt> + <dd>Zwraca data-URL reprezentujacy obraz w formacie określonym przez parametr <code>type</code> (domyślnie <code>png</code>). Zwracany obraz jest w rozdzielczości 96dpi.</dd> + <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt> + <dd>Tworzy obiekt {{domxref("Blob")}} reprezentujący obraz zawierający się w {{HTMLElement("canvas")}}; ten plik może być buforowany z dysku lub przechowywany w pamięci wedle uznania <code>user agent</code>.</dd> + <dt>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}</dt> + <dd>Przenosi kontrolę do obiektu {{domxref ("OffscreenCanvas")}}, w głównym wątku lub w module roboczym.</dd> + <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Zwraca obiekt {{domxref("File")}} reprezentujący obraz zawarty w {{HTMLElement("canvas")}}; plik oparty jest na pamięci, posiada określoną <code>nazwę</code>. Jeśli <code>typ</code> nie został okreslony, domyslnie jest to <code>image/png</code>.</dd> +</dl> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</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> + <p>Dodano metodę <code>captureStream()</code>.</p> + </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> + <p>Metoda <code>getContext()</code> zwraca teraz {{domxref("RenderingContext")}} zamiast obiektu nieprzeźroczystego</p> + + <p>Dodano metodę <code>transferControlToOffscreen()</code></p> + </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>Definicja początkowa.</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_przegladarek">Zgodność przegladarek</h2> + +<div> + + +<p>{{Compat("api.HTMLCanvasElement")}}</p> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>HTML element implementing this interface: {{HTMLElement("canvas")}}.</li> +</ul> diff --git a/files/pl/web/api/htmlcanvaselement/width/index.html b/files/pl/web/api/htmlcanvaselement/width/index.html new file mode 100644 index 0000000000..3be0eabbf8 --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/width/index.html @@ -0,0 +1,79 @@ +--- +title: HTMLCanvasElement.width +slug: Web/API/HTMLCanvasElement/width +translation_of: Web/API/HTMLCanvasElement/width +--- +<div> +<div> +<div>{{APIRef("Canvas API")}}</div> + +<div> </div> + +<div> +<p>Własność <strong><code>HTMLCanvasElement.width </code></strong>wyrażana jest w dodatniej <code>liczbie całkowitej </code>odpowiada za atrybut {{htmlattrxref("width", "canvas")}} elemetu HTML {{HTMLElement("canvas")}} i jest interpretowana w pikselach CSS. Jeśli atrybut nie został określony, lub została przypisana do niego nieprawidłowa wartość, np. negatywna, zostanie użyta domyślna wartość <code>300</code>.</p> + +<p>To jedna z dwóch własności kontrolujących wielkość {{HTMLElement("canvas")}}, druga z nich to {{domxref("HTMLCanvasElement.height")}}.</p> +</div> +</div> +</div> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox"><var>var <em>pxl</em> = <em>canvas</em></var>.width; +<em>canvas</em>.width = <em>pxl</em>; +</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Wykorzystując element {{HTMLElement("canvas")}}:</p> + +<pre class="brush: html"><canvas id="canvas" width="300" height="300"></canvas> +</pre> + +<p>You can get the width of the canvas with the following code:</p> + +<p>Informacje o szerokości {{HTMLElement("canvas")}} można uzyskać za pomocą kodu:</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +console.log(canvas.width); // 300 +</pre> + +<h2 id="Specyfikacja">Specyfikacja</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#attr-canvas-width", "HTMLCanvasElement.width")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Brak zmian od ostatniego snapshota, {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot {{SpecName('HTML WHATWG')}} zawierający początkową definicje.</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_przegladarek">Zgodność przegladarek</h2> + + + +<p>{{Compat("api.HTMLCanvasElement.width")}}</p> + +<h2 id="See_Also" name="See_Also">Zobacz też</h2> + +<ul> + <li>Interfejs definiujący tą własność, {{domxref("HTMLCanvasElement")}}.</li> + <li>Inna własność kontrolujaca wielkość {{HTMLElement("canvas")}}, {{domxref("HTMLCanvasElement.height")}}.</li> +</ul> diff --git a/files/pl/web/api/htmlelement/dataset/index.html b/files/pl/web/api/htmlelement/dataset/index.html new file mode 100644 index 0000000000..fac7ec119f --- /dev/null +++ b/files/pl/web/api/htmlelement/dataset/index.html @@ -0,0 +1,134 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +translation_of: Web/API/HTMLOrForeignElement/dataset +--- +<div>{{ APIRef("HTML DOM") }}</div> + +<p><span class="seoSummary">Właściwość <code><strong>dataset</strong></code> interfejsu {{domxref("HTMLElement")}} pozwala na odczyt/zapis <a href="/en/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">niestandardowcyh atrybutów</a> (<code>data-*</code>) elementu.</span> Dostęp ten jest możliwy w HTMLu jak i w DOMie. It is a <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">map of DOMString</a>, one entry for each custom data attribute. Zauważ że właściwość<strong> </strong><code>dataset</code><strong> </strong>można odczytać, ale nie zmieniać bezpośrednio. Zamiast tego, wszystkie zapisy muszą być wykonywane na pojedynczych polach <code>dataset</code>, które odpowiadają atrybutom danych. Note also that an HTML <code><strong>data-</strong></code><em>attribute</em> and its corresponding DOM<strong> </strong><code>dataset.</code><em>property</em> do not share the same name, but they are always similar:</p> + +<ul> + <li>The name of a custom data attribute in HTML begins with <code>data-</code>. It must contain only letters, numbers and the following characters: dash (<code>-</code>), dot (<code>.</code>), colon (<code>:</code>), underscore (<code>_</code>) -- but NOT any ASCII capital letters (<code>A</code> to <code>Z</code>).</li> + <li>The name of a custom data attribute in JavaScript is the name of the same HTML attribute but in camelCase and with no dashes, dots, etc.</li> +</ul> + +<p>In addition to the information below, you'll find a how-to guide for using HTML data attributes in our article <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes.</a></p> + +<h3 id="Zmiana_nazw">Zmiana nazw</h3> + +<p>dash-style to camelCase: A custom data attribute name is transformed to a key for the {{ domxref("DOMStringMap") }} entry with the following rules</p> + +<ul> + <li>the prefix <code>data-</code> is removed (including the dash);</li> + <li>for any dash (<code>U+002D</code>) followed by an<span style="line-height: 1.5;"> ASCII lowercase letter </span><code>a</code><span style="line-height: 1.5;"> to </span><code>z</code><span style="line-height: 1.5;">, the dash is removed and the letter is transformed into its uppercase counterpart;</span></li> + <li>other characters (including other dashes) are left unchanged.</li> +</ul> + +<p>camelCase to dash-style: The opposite transformation, that maps a key to an attribute name, uses the following rules:</p> + +<ul> + <li>Restriction: A dash must not be immediately followed by an ASCII lowercase letter <code>a</code> to <code>z</code> (before the transformation);</li> + <li>a prefix <code>data-</code> is added;</li> + <li>any ASCII uppercase letter <code>A</code> to <code>Z</code> is transformed into a dash followed by its lowercase counterpart;</li> + <li>other characters are left unchanged.</li> +</ul> + +<p>The restriction in the rules above ensures that the two transformations are the inverse one of the other.</p> + +<p>For example, the attribute named <code>data-abc-def</code> corresponds to the key <code>abcDef</code>.</p> + +<ul> +</ul> + +<h3 id="Dostęp_do_wartości">Dostęp do wartości</h3> + +<ul> + <li>Attributes can be set and read by using the camelCase name (the key) like an object property of the dataset, as in <em>element.</em>dataset.<em>keyname</em></li> + <li>Attributes can also be set and read using the object-properties bracket-syntax, as in <em>element.</em>dataset[<em>keyname</em>]</li> + <li>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">in operator</a> can be used to check whether a given atttribute exists.</li> +</ul> + + + +<h3 id="Ustawianie_wartości">Ustawianie wartości</h3> + +<ul> + <li>Podawana podczas ustawiania atrybutu wartość jest zawsze zapisywana jako łańcuch znaków, np. <code>null</code> jest zapisywane jako "null".</li> + <li>Usunięcie atrybutu jest możliwe przy pomocy <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">operatora delete</a>.</li> +</ul> + +<h2 id="Składnia">Składnia</h2> + +<ul> + <li><em>string</em> = <em>element</em>.<strong>dataset</strong>.<em>camelCasedName</em>;</li> + <li><em>element.</em><strong>dataset</strong>.<em>camelCasedName</em> = <em>string</em>;</li> + <br> + <li><em>string</em> = <em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>];</li> + <li><em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>] = <em>string</em>;</li> + <br> + <li><em>Custom data attributes can also be set directly on HTML elements, but attribute names must use the data- syntax above. </em></li> +</ul> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: html"><div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div></pre> + +<pre class="brush: js">const el = document.querySelector('#user'); + +// el.id == 'user' +// el.dataset.id === '1234567890' +// el.dataset.user === 'johndoe' +// el.dataset.dateOfBirth === '' + +// set the data attribute +el.dataset.dateOfBirth = '1960-10-03'; +// Result: el.dataset.dateOfBirth === 1960-10-03 + +delete el.dataset.dateOfBirth; +// Result: el.dataset.dateOfBirth === undefined + +// 'someDataAttr' in el.dataset === false +el.dataset.someDataAttr = 'mydata'; +// Result: 'someDataAttr' in el.dataset === true +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLElement.dataset")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>The HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a></code> class of global attributes.</li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Używanie atrybutów danych</a></li> + <li>{{domxref("Element.getAttribute()")}} and {{domxref("Element.setAttribute()")}}</li> +</ul> diff --git a/files/pl/web/api/htmlelement/index.html b/files/pl/web/api/htmlelement/index.html new file mode 100644 index 0000000000..d27d11fd7b --- /dev/null +++ b/files/pl/web/api/htmlelement/index.html @@ -0,0 +1,409 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +tags: + - API + - HTML DOM + - Interface + - NeedsMobileBrowserCompatibility + - NeedsNewLayout + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLElement +--- +<div> +<div>{{ APIRef("HTML DOM") }}</div> +</div> + +<div> </div> + +<p>The <strong><code>HTMLElement</code></strong> interface represents any <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a> element. Some elements directly implement this interface, others implement it via an interface that inherits it.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parent, {{domxref("Element")}}, and implements those from {{domxref("GlobalEventHandlers")}} and {{domxref("TouchEventHandlers")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLElement.accessKey")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the access key assigned to the element.</dd> + <dt>{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the element's assigned access key.</dd> + <dt>{{domxref("HTMLElement.contentEditable")}}</dt> + <dd>Is a {{domxref("DOMString")}}, where a value of <code>"true"</code> means the element is editable and a value of <code>"false"</code> means it isn't.</dd> + <dt>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Boolean")}} that indicates whether or not the content of the element can be edited.</dd> + <dt>{{domxref("HTMLElement.contextMenu")}}</dt> + <dd>Is an {{domxref("HTMLMenuElement")}} representing the contextual menu associated with the element. It may be null</dd> + <dt>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMStringMap")}} that allows access to read and write the element custom data attributes (<code>data-*</code>) .</dd> + <dt>{{domxref("HTMLElement.dir")}}</dt> + <dd>Is a {{domxref("DOMString")}}, reflecting the <code>dir</code> global attribute, representing the directionality of the element. Possible values are <code>"ltr"</code>, <code>"rtl"</code>, and <code>"auto"</code>.</dd> + <dt>{{domxref("HTMLElement.draggable")}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element can be dragged.</dd> + <dt>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMSettableTokenList")}} reflecting the <code>dropzone</code> global attribute and describing the behavior of the element regarding a drop operation.</dd> + <dt>{{domxref("HTMLElement.hidden")}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.</dd> + <dt>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</dt> + <dd>Is a {{jsxref("Boolean")}}…</dd> + <dt>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd> + <dt>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</dt> + <dd>Is a {{domxref("DOMString")}}…</dd> + <dt>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd> + <dt>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd> + <dt>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</dt> + <dd>Returns an {{jsxref("Object")}}…</dd> + <dt>{{domxref("HTMLElement.lang")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.</dd> + <dt>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a <code>double</code> containing the height of an element, relative to the layout.</dd> + <dt>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a <code>double</code>, the distance from this element's left border to its <code>offsetParent</code>'s left border.</dd> + <dt>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns an {{domxref("Element")}} that is the element from which all offset calculations are currently computed.</dd> + <dt>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a <code>double</code>, the distance from this element's top border to its <code>offsetParent</code>'s top border.</dd> + <dt>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a <code>double</code> containing the width of an element, relative to the layout.</dd> + <dt>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns an {{domxref("HTMLPropertiesCollection")}}…</dd> + <dt>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</dt> + <dd>Is a {{jsxref("Boolean")}} that controls <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling_spell_checking_in_HTML_forms">spell-checking</a>. It is present on all HTML elements, though it hasn't an effect on all of them.</dd> + <dt>{{domxref("HTMLElement.style")}}</dt> + <dd>Is {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.</dd> + <dt>{{domxref("HTMLElement.tabIndex")}}</dt> + <dd>Is a <code>long</code> representing the position of the element in the tabbing order.</dd> + <dt>{{domxref("HTMLElement.title")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.</dd> + <dt>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</dt> + <dd>Is a {{jsxref("Boolean")}}</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<p>Most events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}}, implemented by <code>HTMLElement</code>. A few more are specific to <code>HTMLElement</code>.</p> + +<dl> + <dt>{{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }}</dt> + <dd>Returns the event handling code for the <code>copy</code> event ({{bug("280959")}}).</dd> + <dt>{{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }}</dt> + <dd>Returns the event handling code for the <code>cut</code> event ({{bug("280959")}}).</dd> + <dt>{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}</dt> + <dd>Returns the event handling code for the <code>paste</code> event ({{bug("280959")}}).</dd> + <dt>{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchstart")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchend")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchmove")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchenter")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchleave")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchcancel")}} event.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parent, {{domxref("Element")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLElement.blur()")}}</dt> + <dd>Removes keyboard focus from the currently focused element.</dd> + <dt>{{domxref("HTMLElement.click()")}}</dt> + <dd>Sends a mouse click event to the element.</dd> + <dt>{{domxref("HTMLElement.focus()")}}</dt> + <dd>Makes the element the current keyboard focus.</dd> + <dt>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</dt> + <dd>Makes the spell checker runs on the element.</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('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Added the following properties: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, and <code>offsetHeight</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Added the following properties: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, and <code>itemValue</code>.<br> + Added the following method: <code>forceSpellcheck()</code>.<br> + Moved the <code>onXYZ</code> attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Added the following properties: <code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style</code>, and all the <code>onXYZ</code> properties.<br> + Moved the <code>id</code> and <code>className</code> properties to the {{domxref("Element")}} interface.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>No change from {{SpecName('DOM2 HTML')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</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>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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>17.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.10</a>)</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td> + <td>{{CompatGeckoDesktop("8.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}{{WebkitBug(72715)}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.blur()", "blur()")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.click()", "click()")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.24</a>)</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dataset", "dataset")}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>9.0</td> + <td>{{CompatUnknown}}</td> + <td>11.10</td> + <td>5.1</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.focus()", "focus()")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.contentEditable", "contentEditable")}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.5</td> + <td>9</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.spellcheck", "spellcheck")}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.style", "style")}}</td> + <td>{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}})</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dataset", "dataset")}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>8.0</td> + <td>11</td> + <td>11.10</td> + <td>6</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.draggable", "draggable")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>12.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dropzone", "dropzone")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>12.0</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>11.60<br> + (Removed in Opera 15)</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</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> + <p>{{CompatGeckoMobile("1.0")}}</p> + </td> + <td rowspan="7">{{CompatUnknown}}</td> + <td rowspan="7">{{CompatUnknown}}</td> + <td rowspan="7">{{CompatUnknown}}</td> + <td rowspan="7">{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td> + <td>{{CompatGeckoMobile("8.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.blur()", "blur()")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.click()", "click()")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dataset", "dataset")}}</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.focus()", "focus()")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td> + <td>{{CompatGeckoMobile("1.9")}}</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>{{domxref("Element")}}</li> +</ul> diff --git a/files/pl/web/api/htmlformelement/acceptcharset/index.html b/files/pl/web/api/htmlformelement/acceptcharset/index.html new file mode 100644 index 0000000000..c71b52269f --- /dev/null +++ b/files/pl/web/api/htmlformelement/acceptcharset/index.html @@ -0,0 +1,33 @@ +--- +title: HTMLFormElement.acceptCharset +slug: Web/API/HTMLFormElement/acceptCharset +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/acceptCharset +--- +<p> </p> + +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>acceptCharset</b> Zwraca listę obsługiwanych przez formularz zestawów znaków dla danego elementu FORM. Lista ta będzie oddzielona przecinkiem lub spacją.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>string</i> = form.acceptCharset; +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">inputs = document.forms["myform"].acceptCharset +</pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-19661795">DOM Level 2 HTML: acceptCharset</a></p> + +<p>{{ languages( { "en": "en/DOM/form.acceptCharset" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/action/index.html b/files/pl/web/api/htmlformelement/action/index.html new file mode 100644 index 0000000000..ba03220cd0 --- /dev/null +++ b/files/pl/web/api/htmlformelement/action/index.html @@ -0,0 +1,36 @@ +--- +title: HTMLFormElement.action +slug: Web/API/HTMLFormElement/action +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/action +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>action</b> pobiera/ustawia akcję dla elementu FORM.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>string</i> = form.action +form.action = +<i>string</i> +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<p>form.action = "/cgi-bin/publish";</p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Akcja w formularzu jest programem, który jest wykonywany na serwerze kiedy formularz zostanie wysłany. Ta własność może być odzyskiwana lub ustawiana.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-74049184">DOM Level 2 HTML: action</a></p> + +<p>{{ languages( { "ja": "ja/DOM/form.action", "en": "en/DOM/form.action" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/elements/index.html b/files/pl/web/api/htmlformelement/elements/index.html new file mode 100644 index 0000000000..929f7c7640 --- /dev/null +++ b/files/pl/web/api/htmlformelement/elements/index.html @@ -0,0 +1,36 @@ +--- +title: HTMLFormElement.elements +slug: Web/API/HTMLFormElement/elements +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/elements +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>elements</b> zwraca kolekcję <code><a class="external" href="http://www.w3.org/TR/2001/WD-DOM-Level-2-HTML-20011025/html.html#ID-75708506">HTMLCollection</a></code> wszystkich kontrolek zawartych w elemencie FORM.</p> + +<p>Do konkretnego elementu możesz odnosić się poprzez indeks lub za pomocą nazwy (<a href="pl/DOM/element.name">name</a>) bądź <a href="pl/DOM/element.id">id</a> tego elementu.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>listaWęzłów</i> = +<i>HTMLFormElement</i>.elements +</pre> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<pre class="eval">var inputs = document.getElementById("form1").elements; +var inputByIndex = inputs[2]; +var inputByName = inputs["login"]; +</pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>Specyfikacja W3C DOM 2 HTML: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76728479">elements</a></p> + +<p>{{ languages( { "en": "en/DOM/form.elements", "ja": "ja/DOM/form.elements" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/encoding/index.html b/files/pl/web/api/htmlformelement/encoding/index.html new file mode 100644 index 0000000000..aabd43e66f --- /dev/null +++ b/files/pl/web/api/htmlformelement/encoding/index.html @@ -0,0 +1,15 @@ +--- +title: HTMLFormElement.encoding +slug: Web/API/HTMLFormElement/encoding +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/encoding +--- +<p> </p> + +<p>{{ ApiRef() }} <b>encoding</b> jest alternatywną nazwą dla elementu <a href="pl/DOM/form.enctype">enctype</a> w obiekcie DOM FormElement.</p> + +<p>{{ languages( { "en": "en/DOM/form.encoding" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/enctype/index.html b/files/pl/web/api/htmlformelement/enctype/index.html new file mode 100644 index 0000000000..2a90fe13a9 --- /dev/null +++ b/files/pl/web/api/htmlformelement/enctype/index.html @@ -0,0 +1,39 @@ +--- +title: HTMLFormElement.enctype +slug: Web/API/HTMLFormElement/enctype +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/enctype +--- +<p> </p> + +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>enctype</b> pobiera/ustawia typ zawartości elementu FORM.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>string</i> = form.enctype +form.enctype = +<i>string</i> +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">form.enctype = "application/x-www-form-urlencoded"; +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Typem kodowania jest ogólnie "application/x-www-form-urlencoded".</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-84227810">DOM Level 2 HTML: enctype</a></p> + +<p>{{ languages( { "en": "en/DOM/form.enctype" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/index.html b/files/pl/web/api/htmlformelement/index.html new file mode 100644 index 0000000000..3c0d1ade95 --- /dev/null +++ b/files/pl/web/api/htmlformelement/index.html @@ -0,0 +1,143 @@ +--- +title: HTMLFormElement +slug: Web/API/HTMLFormElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Interfejs_elementu_HTML_FORM" name="Interfejs_elementu_HTML_FORM">Interfejs elementu HTML FORM</h3> + +<p>Elementy <code>FORM</code> mają wszystkie właściwości i metody innych elementów HTML, tak jak opisano w rozdziale o <a href="pl/DOM/element">elementach</a>. Jednocześnie mają one bardziej wyspecjalizowany interfejs <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357">HTMLFormElement</a>.</p> + +<p>Interfejs ten dostarcza metod do tworzenia i modyfikacji elementów <code>FORM</code> przy użyciu DOM. Poniższy przykład przedstawia, jak utworzyć nowy formularz, zmienić jego atrybuty i wysłać go.</p> + +<pre>// Utwórz formularz +var f = document.createElement("form"); + +// Dodaj do zawartości dokumentu +document.body.appendChild(f); + +// Ustaw atrybuty oznaczające akcję i metodę wysyłania +f.action = "/cgi-bin/some.cgi"; +f.method = "POST" + +// Wyślij formularz +f.submit(); +</pre> + +<p>Z kolei poniższy dokument HTML przedstawia jak wydobyć informacje z formularza i nadać mu pewne atrybuty.</p> + +<pre><title>Przykład formularza</title> +<script type="text/javascript"> + function getFormInfo() { + var info; + + // Znajdź referencję do formularza poprzez kolekcję forms + var f = document.forms["formA"]; + info = "f.elements: " + f.elements + "\n" + + "f.length: " + f.length + "\n" + + "f.name: " + f.elements + "\n" + + "f.acceptCharset: " + f.acceptCharset + "\n" + + "f.action: " + f.action + "\n" + + "f.enctype: " + f.enctype + "\n" + + "f.encoding: " + f.encoding + "\n" + + "f.method: " + f.method + "\n" + + "f.target: " + f.target; + document.forms["formA"].elements['tex'].value = info; + } + + // Referencja do formularza jest przekazywana z atrybutu + // onclick przycisku za pomocą 'this.form' + function setFormInfo(f) { + f.method = "GET"; + f.action = "/cgi-bin/evil_executable.cgi"; + f.name = "totally_new"; + } +</script> + +<h1>Przykład formularza</h1> + +<form name="formA" id="formA" + action="/cgi-bin/test" method="POST"> + <p>Kliknij "info" by zobaczyć informację o formularzu, + "zmień" by zmienić ustawienia, a następnie ponownie "info" + by zobaczyć efekt zmian.</p> + <p> + <input type="button" value="info" + onclick="getFormInfo();"> + <input type="button" value="zmień" + onclick="setFormInfo(this.form);"> + <input type="reset" value="zresetuj"> + <br> + <textarea id="tex" style="height:15em; width:20em"> + </p> +</form> +</pre> + +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3> + +<dl> + <dt><a href="pl/DOM/form.elements">form.elements</a></dt> + <dd>Zwraca kolekcję wszystkich kontrolek zawartych w elemencie <code>FORM</code>.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/form.length">form.length</a></dt> + <dd>Zwraca ilość kontrolek w elemencie <code>FORM</code>.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/form.name">form.name</a></dt> + <dd>Zwraca ciąg z nazwą bieżącego elementu <code>FORM</code>.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/form.acceptCharset">form.acceptCharset</a></dt> + <dd>Zwraca listę obsługiwanych przez formularz zestawów znaków.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/form.action">form.action</a></dt> + <dd>Pobiera/ustawia akcję dla elementu <code>FORM</code>.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/form.enctype">form.enctype</a></dt> + <dd>Pobiera/ustawia typ zawartości wysyłanej przez formularz.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/form.encoding">form.encoding</a></dt> + <dd>Pobiera/ustawia typ zawartości wysyłanej przez formularz.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/form.method">form.method</a></dt> + <dd>Pobiera/ustawia metodę HTTP używaną do wysłania formularza.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/form.target">form.target</a></dt> + <dd>Pobiera/ustawia okno docelowe akcji formularza (np. ramka, w której zostanie wyrenderowana zwrócona strona).</dd> +</dl> + +<h3 id="Metody" name="Metody">Metody</h3> + +<dl> + <dt><a href="pl/DOM/form.submit">form.submit</a></dt> + <dd>Wysyła formularz</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/form.reset">form.reset</a></dt> + <dd>Przywraca formularz do jego stanu początkowego</dd> +</dl> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/form", "es": "es/DOM/form", "fr": "fr/DOM/form", "ja": "ja/DOM/form" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/length/index.html b/files/pl/web/api/htmlformelement/length/index.html new file mode 100644 index 0000000000..36c5c63349 --- /dev/null +++ b/files/pl/web/api/htmlformelement/length/index.html @@ -0,0 +1,33 @@ +--- +title: HTMLFormElement.length +slug: Web/API/HTMLFormElement/length +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/length +--- +<p>{{ ApiRef() }}</p> + +<h4 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h4> + +<p>length zwraca liczbę kontrolek w elemencie FORM.</p> + +<h4 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h4> + +<pre class="eval"><i>integer</i> = form.length +</pre> + +<h4 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h4> + +<pre class="eval">if (document.getElementById("form1").length > 1) { + // więcej niż jedena kontrolka formularza jest tu +} +</pre> + +<h4 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h4> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTML-HTMLFormElement-length">DOM Level 2: length</a></p> + +<p>{{ languages( { "ja": "ja/DOM/form.length", "en": "en/DOM/form.length" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/method/index.html b/files/pl/web/api/htmlformelement/method/index.html new file mode 100644 index 0000000000..d1829b02c6 --- /dev/null +++ b/files/pl/web/api/htmlformelement/method/index.html @@ -0,0 +1,35 @@ +--- +title: HTMLFormElement.method +slug: Web/API/HTMLFormElement/method +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/method +--- +<p> </p> + +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>method</b> pobiera/ustawia metodę HTTP używaną do wysłania formularza.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>string</i> = form.method +form.method = +<i>string</i> +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">document.forms["myform"].method = "post"; +</pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-82545539">DOM Level 2 HTML: method</a></p> + +<p>{{ languages( { "ja": "ja/DOM/form.method", "en": "en/DOM/form.method" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/name/index.html b/files/pl/web/api/htmlformelement/name/index.html new file mode 100644 index 0000000000..673ab8f847 --- /dev/null +++ b/files/pl/web/api/htmlformelement/name/index.html @@ -0,0 +1,44 @@ +--- +title: HTMLFormElement.name +slug: Web/API/HTMLFormElement/name +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/name +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><code>name</code> zwraca nazwą bieżącego elementu <code>FORM</code> jako łańcuch znaków.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>string</i> = form.name +form.name = +<i>string</i> +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">form1 = document.getElementById("form1").name; +if (form1 != document.form.form1) { + // przeglądarka nie obsługuje tego odniesienia do formularza +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Uwaga, ta własność jest do odczytu/zapisu, która znaczy, że możemy zmienić lub ustawić nazwę formularza.</p> + +<p>Jeśli Twój <code>FORM</code> zawiera element nazwany "nazwany_element", następnie ten element przesłania własność <code>form.name</code>, więc nie możesz uzyskać do niego dostępu.</p> + +<p>Internet Explorer (IE) nie pozwala nazwie tworzonego elementu używać <code>createElement()</code> będącej ustawieniem lub modyfikacją używającą własność <code>name</code> property.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">DOM Level 2 HTML: name</a></p> + +<p>{{ languages( { "en": "en/DOM/form.name" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/reset/index.html b/files/pl/web/api/htmlformelement/reset/index.html new file mode 100644 index 0000000000..919b982cae --- /dev/null +++ b/files/pl/web/api/htmlformelement/reset/index.html @@ -0,0 +1,37 @@ +--- +title: HTMLFormElement.reset +slug: Web/API/HTMLFormElement/reset +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/reset +--- +<p>{{ APIRef }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><code>reset</code> przywraca formularz do jego stanu początkowego.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>HTMLFormElement</i>.reset() +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">document.forms["myform"].reset(); +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Metoda ta robi to samo, co kliknięcie przycisku Wyczyść w formularzu.</p> + +<p>Jeśli kontrolka formularza (jak np. przycisk Wyczyść) posiada nazwę lub id to przycisk <var>Wyczyść</var> będzie krył czyszczenie formularza.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76767677">DOM Level 2 HTML: reset</a></p> + +<p>{{ languages( { "en": "en/DOM/form.reset" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/submit/index.html b/files/pl/web/api/htmlformelement/submit/index.html new file mode 100644 index 0000000000..078d02d4f5 --- /dev/null +++ b/files/pl/web/api/htmlformelement/submit/index.html @@ -0,0 +1,37 @@ +--- +title: HTMLFormElement.submit +slug: Web/API/HTMLFormElement/submit +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/submit +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><code>submit</code> wysyła formularz.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>HTMLFormElement</i>.submit() +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">document.forms["myform"].submit() +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Ta metoda działa tak samo jak naciśnięcie przycisku 'Wyślij' w formularzu.</p> + +<p>Jeśli kontrolka formularza (taka jak przycisk Wyślij) posiada nazwę lub id zmiennej <var>submit</var> to będzie ona maskowała metodę submit formularza.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76767676">DOM Level 2 HTML: submit</a></p> + +<p>{{ languages( { "ja": "ja/DOM/form.submit", "en": "en/DOM/form.submit" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/target/index.html b/files/pl/web/api/htmlformelement/target/index.html new file mode 100644 index 0000000000..f52fbe974b --- /dev/null +++ b/files/pl/web/api/htmlformelement/target/index.html @@ -0,0 +1,35 @@ +--- +title: HTMLFormElement.target +slug: Web/API/HTMLFormElement/target +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/target +--- +<p> </p> + +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>target</b> pobiera/ustawia element docelowy działania (np., w której ramce ma być wczytana zawartość strony).</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>string</i> = form.target +form.target = +<i>string</i> +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">myForm.target = document.frames[1].name; +</pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6512890">DOM Level 2 HTML: target</a></p> + +<p>{{ languages( { "en": "en/DOM/form.target" } ) }}</p> diff --git a/files/pl/web/api/htmliframeelement/index.html b/files/pl/web/api/htmliframeelement/index.html new file mode 100644 index 0000000000..eaf5bb4fcb --- /dev/null +++ b/files/pl/web/api/htmliframeelement/index.html @@ -0,0 +1,288 @@ +--- +title: HTMLIFrameElement +slug: Web/API/HTMLIFrameElement +tags: + - API + - HTML DOM + - Interfejs + - Potrzebny przegląd + - Referencja +translation_of: Web/API/HTMLIFrameElement +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>Interfejs <strong><code>HTMLIFrameElement</code></strong> dostarcza specjalne właściwości i metody (oprócz tych dziedziczonych po {{domxref("HTMLElement")}}) do manipulowania rozkładem i prezentacją wewnętrznych elementów ramki.</p> + +<h2 id="Właściwości">Właściwości</h2> + +<p><em>Dziedziczy właściwości od rodzica, {{domxref("HTMLElement")}}</em>.</p> + +<dl> + <dt>{{domxref("HTMLIFrameElement.align")}} {{obsolete_inline}}</dt> + <dd>{{domxref("DOMString")}} określający zawijanie ramki w stosunku do otaczającego kontekstu.</dd> + <dt>{{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}</dt> + <dd>{{domxref("Boolean")}} określa, czy ramka ma zostać umieszczona w trybie pełnoekranowym. Zobacz <a href="/pl-PL/docs/DOM/Using_full-screen_mode">Używanie trybu pełnoekranowego</a> dla szczegółów.</dd> + <dt>{{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}</dt> + <dd>Zwraca obiekt {{domxref("Document")}}, reprezentujący aktualny kontekst przeglądania w ramce.</dd> + <dt>{{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}</dt> + <dd>Zwraca obiekt {{domxref("WindowProxy")}}, referencję do okna przeglądarki w ramce.</dd> + <dt>{{domxref("HTMLIFrameElement.frameBorder")}} {{obsolete_inline}}</dt> + <dd>{{domxref("DOMString")}} określający, czy tworzyć obramowania między ramkami.</dd> + <dt>{{domxref("HTMLIFrameElement.height")}}</dt> + <dd>{{domxref("DOMString")}} reprezentujący atrybut {{htmlattrxref("height", "iframe")}} oznaczający wysokość ramki.</dd> + <dt>{{domxref("HTMLIFrameElement.longDesc")}} {{obsolete_inline}}</dt> + <dd>{{domxref("DOMString")}} zawierający URI długiego opisu ramki.</dd> + <dt>{{domxref("HTMLIFrameElement.marginHeight")}} {{obsolete_inline}}</dt> + <dd>{{domxref("DOMString")}} oznaczający wysokość marginesu.</dd> + <dt>{{domxref("HTMLIFrameElement.marginWidth")}} {{obsolete_inline}}</dt> + <dd>{{domxref("DOMString")}} oznaczający szerokość marginesu.</dd> + <dt>{{domxref("HTMLIFrameElement.name")}}</dt> + <dd>{{domxref("DOMString")}} oznaczający atrybut {{htmlattrxref("name", "iframe")}}, zawierający nazwę ramki.</dd> + <dt>{{domxref("HTMLIFrameElement.sandbox")}}</dt> + <dd>{{domxref("DOMSettableTokenList")}} oznaczający atrybut {{htmlattrxref("sandbox", "iframe")}}, oznaczając dodatkowe ograniczenia na zachowanie zagnieżdżonej zawartości.</dd> + <dt>{{domxref("HTMLIFrameElement.scrolling")}} {{obsolete_inline}}</dt> + <dd>{{domxref("DOMString")}}, od którego zależy, czy przeglądarka ma dostarczyć paski przewijania.</dd> + <dt>{{domxref("HTMLIFrameElement.seamless")}} {{experimental_inline}}</dt> + <dd>{{domxref("Boolean")}}, odzwierciedlający atrybut {{htmlattrxref("seamless", "iframe")}} , oznaczający, że ramkę należy wyświetlać bezszwowo wewnątrz dokumentu rodzica.</dd> + <dt>{{domxref("HTMLIFrameElement.src")}}</dt> + <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "iframe")}} HTML attribute, containing the address of the content to be embedded.</dd> + <dt>{{domxref("HTMLIFrameElement.srcdoc")}}</dt> + <dd>Is a {{domxref("DOMString")}} that represents the content to display in the frame.</dd> + <dt>{{domxref("HTMLIFrameElement.width")}}</dt> + <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("width", "iframe")}} HTML attribute, indicating the width of the frame.</dd> +</dl> + +<h2 id="Metody">Metody</h2> + +<p><em>Dziedziczy właściwości od rodzica, {{domxref("HTMLElement")}}</em>.</p> + +<dl> + <dt>{{domxref("HTMLIFrameElement.setNfcFocus")}}</dt> + <dd>Część <a href="/en-US/docs/Web/API/Using_the_Browser_API">Browser API</a> systemu Firefox OS, ustala, czy element {{htmlelement("iframe")}} może otrzymać zdarzenie <a href="/en-US/docs/Web/API/NFC_API">NFC</a>.</dd> +</dl> + +<h2 id="Historia_specyfikacji">Historia specyfikacji</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Opis</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "the-iframe-element.html#the-iframe-element", "HTMLIFrameElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Dodano właściwość <code>allowFullscreen</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-iframe-element", "HTMLIFrameElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Następujące właściwości uznano za przestarzałe: <code>scrolling</code>, <code>marginWidth</code>, <code>marginHeight</code>, <code>longDesc</code>, <code>frameBorder</code>, and <code>align</code>.<br> + Te zostały dodane: <code>srcdoc</code>, <code>sandbox</code>, <code>seamless</code>, and <code>contentWindow</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-50708718', 'HTMLIFrameElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>Dodano właściwość <code>contentDocument.</code></td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-50708718', 'HTMLIFrameElement')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Początkowa definicja.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybliność_przeglądarek">Kompatybliność przeglądarek</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Właściwość</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>(Tak)</td> + <td>1.0 (1.7 lub wcześniejsza)</td> + <td>(Tak)</td> + <td>(Tak)</td> + <td>(Tak)</td> + </tr> + <tr> + <td><code>srcdoc</code></td> + <td>4</td> + <td>{{CompatGeckoDesktop(25)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>sandbox</code></td> + <td>4</td> + <td>{{CompatGeckoDesktop(17)}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>seamless</code> {{experimental_inline}}</td> + <td>4</td> + <td>Nieobsługiwane</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>contentDocument</code></td> + <td>(Tak)</td> + <td>(Tak)</td> + <td>8.0 (dla wcześniejszych wersji używaj <code>HTMLIFrameElement.contentWindow.document</code>)</td> + <td>(Tak)</td> + <td>(Tak)</td> + </tr> + <tr> + <td><code>contentWindow</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>(Tak)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>allowFullScreen</code> {{experimental_inline}}</td> + <td>17 {{property_prefix("-webkit")}}<br> + <em>Tylko codzienne wydania testowe</em></td> + <td>{{compatGeckoDesktop(9.0)}} {{property_prefix("-moz")}}<br> + {{compatGeckoDesktop(18.0)}}</td> + <td>Nieobsługiwane</td> + <td>Nieobsługiwane</td> + <td>Nieobsługiwane</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>(Tak)</td> + <td>{{CompatGeckoMobile(1.0)}}</td> + <td>(Tak)</td> + <td>(Tak)</td> + <td>(Tak)</td> + </tr> + <tr> + <td><code>srcdoc</code></td> + <td>4</td> + <td>{{CompatGeckoMobile(25)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>sandbox</code></td> + <td>4</td> + <td>{{CompatGeckoMobile(17)}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>seamless</code> {{experimental_inline}}</td> + <td>4</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>contentDocument</code></td> + <td>(Tak)</td> + <td>(Tak)</td> + <td>{{CompatUnknown}}</td> + <td>(Tak)</td> + <td>(Tak)</td> + </tr> + <tr> + <td><code>contentWindow</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>allowFullScreen</code> {{experimental_inline}}</td> + <td>17 {{property_prefix("-webkit")}}<br> + <em>Tylko codzienne wydania testowe</em></td> + <td>{{compatGeckoMobile(9.0)}} {{property_prefix("-moz")}}<br> + {{compatGeckoMobile(18.0)}}</td> + <td>Nieobsługiwane</td> + <td>Nieobsługiwane</td> + <td>Nieobsługiwane</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Wcześniej, <code>sandbox</code> był obiektem {{domxref("DOMString")}} a nie {{domxref("DOMSettableTokenList")}}. Naprawiono to w <a href="/en-US/Firefox/Releases/29/Site_Compatibility">Gecko 29.0</a> {{geckoRelease(29)}}) ({{bug(845067)}}). Inne przeglądarki mogą wciąż implementować to jako <code>DOMString</code> ponieważ to późna zmiana w speyfikacji.</p> + +<h3 id="Uwagi_do_Firefox_OS">Uwagi do Firefox OS</h3> + +<p>Firefox OS rozszerza <code>HTMLIFrameElement</code> o obsługę elementów iframe przeglądarki. Te metody stworzono dla <a href="/pl-PL/docs/Mozilla/Firefox_OS/Security/Application_security">uprzywilejowanych aplikacji</a> które chcą zaimplementować przeglądarkę jak aplikację na urządzenia z Firefox OS.Wtedy <code>HTMLIFrameElement</code> dziedziczy też od interfejsu {{domxref("EventTarget")}}. To learn how to implement such applications, see the <a href="/pl-PL/docs/WebAPI/Browser">Używanie API przeglądarki</a> article.</p> + +<dl> + <dt>{{domxref("HTMLIFrameElement.setVisible()","HTMLIFrameElement.setVisible(visible)")}}</dt> + <dd>Pozwala bezpośrednio zmienić widoczność ramek.</dd> + <dt>{{domxref("HTMLIFrameElement.getVisible()","HTMLIFrameElement.getVisible()")}}</dt> + <dd>Zwraca obecny stan widoczności ramki obiektem {{domxref("DOMRequest")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.sendMouseEvent()","HTMLIFrameElement.sendMouseEvent(type, x, y, button, clickCount, modifiers)")}}</dt> + <dd>Wysyła zdarzenie myszy do przeglądarki.</dd> + <dt>{{domxref("HTMLIFrameElement.sendTouchEvent()","HTMLIFrameElement.sendTouchEvent(type, identifiers, touchesX, touchesY,radiisX, radiisY, rotationAngles, forces,count, modifiers)")}}</dt> + <dd>Wysyła zdarzenie dotknięcia do przeglądarki.</dd> + <dt>{{domxref("HTMLIFrameElement.goBack()","HTMLIFrameElement.goBack()")}}</dt> + <dd>Cofa przeglądarkę o 1 stronę w historii.</dd> + <dt>{{domxref("HTMLIFrameElement.goForward()","HTMLIFrameElement.goForward()")}}</dt> + <dd>Przechodzi dalej o 1 stronę w historii.</dd> + <dt>{{domxref("HTMLIFrameElement.reload()","HTMLIFrameElement.reload()")}}</dt> + <dd>Odświeża (ładuje ponownie) stronę internetową w przeglądarce.</dd> + <dt>{{domxref("HTMLIFrameElement.stop()","HTMLIFrameElement.stop()")}}</dt> + <dd>Zatrzymuje ładowanie zawartości ramki.</dd> + <dt>{{domxref("HTMLIFrameElement.purgeHistory()","HTMLIFrameElement.purgeHistory()")}}</dt> + <dd>Pozwala wyczyścić historię przeglądania.</dd> + <dt>{{domxref("HTMLIFrameElement.getScreenshot()","HTMLIFrameElement.getScreenshot(maxWidth, maxHeight)")}}</dt> + <dd>Robi zrzut ekranu, skalując do go rozmiaru <code>maxWidth</code> na <code>maxHeight</code> pikseli. Zwraca obiekt {{domxref("DOMRequest")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.addNextPaintListener()","HTMLIFrameElement.addNextPaintListener()")}}</dt> + <dd>Dodaje odbiorcę zdarzenia powiadomianego, gdy ramka jest gotowa do odmalowania po raz pierwszy (Powiadamia się go, gdy pierwsze zdarzenie {{event("MozAfterPaint")}} jest odbierane z ramki.)</dd> + <dt>{{domxref("HTMLIFrameElement.removeNextPaintListener()","HTMLIFrameElement.removeNextPaintListener()")}}</dt> + <dd>Usuwa odbiorcę dodanego przez poprzednią funkcję.</dd> + <dt>{{domxref("HTMLIFrameElement.getCanGoBack()","HTMLIFrameElement.getCanGoBack()")}}</dt> + <dd>Zwraca obiekt {{domxref("DOMRequest")}} którego składowa <code>result</code> oznacza możliwość powrotu.</dd> + <dt>{{domxref("HTMLIFrameElement.getCanGoForward()","HTMLIFrameElement.getCanGoForward()")}}</dt> + <dd>Zwraca obiekt {{domxref("DOMRequest")}} którego składowa <code>result</code> oznacza możliwość powrotu.</dd> +</dl> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>Element HTML implementujący ten interfejs: {{HTMLElement("iframe")}}</li> +</ul> diff --git a/files/pl/web/api/htmlselectelement/index.html b/files/pl/web/api/htmlselectelement/index.html new file mode 100644 index 0000000000..967409aadc --- /dev/null +++ b/files/pl/web/api/htmlselectelement/index.html @@ -0,0 +1,166 @@ +--- +title: HTMLSelectElement +slug: Web/API/HTMLSelectElement +tags: + - API + - HTML DOM + - HTMLSelectElement + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLSelectElement +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>The <code><strong>HTMLSelectElement</strong></code> interface represents a {{HTMLElement("select")}} HTML Element. These elements also share all of the properties and methods of other HTML elements via the {{domxref("HTMLElement")}} interface.</p> + +<p>{{InheritanceDiagram(600, 120)}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface inherits the properties of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLSelectElement.autofocus")}}</dt> + <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("autofocus", "select")}} HTML attribute, which indicates whether the 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-associated element in a document can have this attribute specified. {{gecko_minversion_inline("2.0")}}</dd> + <dt>{{domxref("HTMLSelectElement.disabled")}}</dt> + <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("disabled", "select")}} HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.</dd> + <dt>{{domxref("HTMLSelectElement.form")}}{{ReadOnlyInline}}</dt> + <dd>An {{domxref("HTMLFormElement")}} referencing the form that this element is associated with. If the element is not associated with of a {{HTMLElement("form")}} element, then it returns <code>null</code>.</dd> + <dt>{{domxref("HTMLSelectElement.labels")}}{{ReadOnlyInline}}</dt> + <dd>A {{domxref("NodeList")}} of {{HTMLElement("label")}} elements associated with the element.</dd> + <dt>{{domxref("HTMLSelectElement.length")}}</dt> + <dd>An <code>unsigned long</code> The number of {{HTMLElement("option")}} elements in this <code>select</code> element.</dd> + <dt>{{domxref("HTMLSelectElement.multiple")}}</dt> + <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("multiple", "select")}} HTML attribute, which indicates whether multiple items can be selected.</dd> + <dt>{{domxref("HTMLSelectElement.name")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the {{htmlattrxref("name", "select")}} HTML attribute, containing the name of this control used by servers and DOM search functions.</dd> + <dt>{{domxref("HTMLSelectElement.options")}}{{ReadOnlyInline}}</dt> + <dd>An {{domxref("HTMLOptionsCollection")}} representing the set of {{HTMLElement("option")}} ({{domxref("HTMLOptionElement")}}) elements contained by this element.</dd> + <dt>{{domxref("HTMLSelectElement.required")}}</dt> + <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("required", "select")}} HTML attribute, which indicates whether the user is required to select a value before submitting the form. {{gecko_minversion_inline("2.0")}}</dd> + <dt>{{domxref("HTMLSelectElement.selectedIndex")}}</dt> + <dd>A <code>long</code> reflecting the index of the first selected {{HTMLElement("option")}} element. The value <code>-1</code> indicates no element is selected.</dd> + <dt>{{domxref("HTMLSelectElement.selectedOptions")}}{{ReadOnlyInline}}</dt> + <dd>An {{domxref("HTMLCollection")}} representing the set of {{HTMLElement("option")}} elements that are selected.</dd> + <dt>{{domxref("HTMLSelectElement.size")}}</dt> + <dd>A <code>long</code> reflecting the {{htmlattrxref("size", "select")}} HTML attribute, which contains the number of visible items in the control. The default is 1, unless <code>multiple</code> is <code>true</code>, in which case it is 4.</dd> + <dt>{{domxref("HTMLSelectElement.type")}}{{ReadOnlyInline}}</dt> + <dd>A {{domxref("DOMString")}} represeting the form control's type. When <code>multiple</code> is <code>true</code>, it returns <code>"select-multiple"</code>; otherwise, it returns <code>"select-one"</code>.</dd> + <dt>{{domxref("HTMLSelectElement.validationMessage")}}{{ReadOnlyInline}}</dt> + <dd>A {{domxref("DOMString")}} representing a localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is false), or it satisfies its constraints.</dd> + <dt>{{domxref("HTMLSelectElement.validity")}}{{ReadOnlyInline}}</dt> + <dd>A {{domxref("ValidityState")}} reflecting the validity state that this control is in.</dd> + <dt>{{domxref("HTMLSelectElement.value")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the value of the form control. Returns the <code>value</code> property of the first selected option element if there is one, otherwise the empty string.</dd> + <dt>{{domxref("HTMLSelectElement.willValidate")}}{{ReadOnlyInline}}</dt> + <dd>A {{jsxref("Boolean")}} that indicates whether the button is a candidate for constraint validation. It is <code>false</code> if any conditions bar it from constraint validation.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface inherits the methods of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLSelectElement.add()")}}</dt> + <dd>Adds an element to the collection of <code>option</code> elements for this <code>select</code> element.</dd> + <dt>{{domxref("HTMLSelectElement.blur()")}}{{obsolete_inline}}</dt> + <dd>Removes input focus from this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd> + <dt>{{domxref("HTMLSelectElement.checkValidity()")}}</dt> + <dd>Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable {{domxref("HTMLInputElement/invalid_event", "invalid")}} event at the element (and returns <code>false</code>).</dd> + <dt>{{domxref("HTMLSelectElement.focus()")}}{{obsolete_inline}}</dt> + <dd>Gives input focus to this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd> + <dt>{{domxref("HTMLSelectElement.item()")}}</dt> + <dd>Gets an item from the options collection for this {{HTMLElement("select")}} element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.</dd> + <dt>{{domxref("HTMLSelectElement.namedItem()")}}</dt> + <dd>Gets the item in the options collection with the specified name. The name string can match either the <code>id</code> or the <code>name</code> attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.</dd> + <dt>{{domxref("HTMLSelectElement.remove()")}}</dt> + <dd>Removes the element at the specified index from the options collection for this <code>select</code> element.</dd> + <dt>{{domxref("HTMLSelectElement.reportValidity()")}}</dt> + <dd>This method reports the problems with the constraints on the element, if any, to the user. If there are problems, it fires a cancelable {{domxref("HTMLInputElement/invalid_event", "invalid")}} event at the element, and returns <code>false</code>; if there are no problems, it returns <code>true</code>.</dd> + <dt>{{domxref("HTMLSelectElement.setCustomValidity()")}}</dt> + <dd>Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does <em>not</em> have a custom validity error.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<p>Listen to these events using {{domxref("EventTarget/addEventListener", "addEventListener()")}} or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface:</p> + +<dl> + <dt>{{domxref("HTMLElement/input_event", "input")}} event</dt> + <dd>Fires when the <code>value</code> of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<h3 id="Get_information_about_the_selected_option">Get information about the selected option</h3> + +<pre class="brush: js">/* assuming we have the following HTML +<select id='s'> + <option>First</option> + <option selected>Second</option> + <option>Third</option> +</select> +*/ + +var select = document.getElementById('s'); + +// return the index of the selected option +console.log(select.selectedIndex); // 1 + +// return the value of the selected option +console.log(select.options[select.selectedIndex].value) // Second +</pre> + +<p>A better way to track changes to the user's selection is to watch for the {{domxref("HTMLElement/change_event", "change")}} event to occur on the <code><select></code>. This will tell you when the value changes, and you can then update anything you need to. See <a href="/en-US/docs/Web/API/HTMLElement/change_event#<select>_element">the example provided</a> in the documentation for the <code>change</code> event for details.</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', '#htmlselectelement', 'HTMLSelectElement')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Since the latest snapshot, {{SpecName('HTML5 W3C')}}, it adds the <code>autocomplete</code> property and the <code>reportValidity()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Is a snapshot of {{SpecName("HTML WHATWG")}}.<br> + It adds the <code>autofocus</code>, <code>form</code>, <code>required</code>, <code>labels</code>, <code>selectedOptions</code>, <code>willValidate</code>, <code>validity</code> and <code>validationMessage</code> properties.<br> + The <code>tabindex</code> property and the <code>blur()</code> and <code>focus()</code> methods have been moved to {{domxref("HTMLElement")}}.<br> + The methods <code>item()</code>, <code>namedItem()</code>, <code>checkValidity()</code> and <code>setCustomValidity()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td><code>options</code> now returns an {{domxref("HTMLOptionsCollection")}}.<br> + <code>length</code> now returns an <code>unsigned long</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</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.HTMLSelectElement")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{HTMLElement("select")}} HTML element, which implements this interface.</li> +</ul> diff --git a/files/pl/web/api/htmltableelement/caption/index.html b/files/pl/web/api/htmltableelement/caption/index.html new file mode 100644 index 0000000000..971efe057b --- /dev/null +++ b/files/pl/web/api/htmltableelement/caption/index.html @@ -0,0 +1,39 @@ +--- +title: HTMLTableElement.caption +slug: Web/API/HTMLTableElement/caption +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLTableElement/caption +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>caption</b> zwraca podpis tabeli.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>string</i> = table.caption +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">if (table.caption) { + // zrób coś z podpisem +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Własność ta zwraca void dla tabel bez elementu caption.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-14594520">caption</a></p> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-12035137">Interface HTMLTableCaptionElement</a></p> + +<p>{{ languages( { "en": "en/DOM/table.caption", "fr": "fr/DOM/table.caption" } ) }}</p> diff --git a/files/pl/web/api/htmltableelement/index.html b/files/pl/web/api/htmltableelement/index.html new file mode 100644 index 0000000000..d5d5a838ca --- /dev/null +++ b/files/pl/web/api/htmltableelement/index.html @@ -0,0 +1,72 @@ +--- +title: HTMLTableElement +slug: Web/API/HTMLTableElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLTableElement +--- +<div>{{ ApiRef() }}</div> + +<h2 id="Interfejs_elementu_HTML_Table" name="Interfejs_elementu_HTML_Table">Interfejs elementu HTML Table</h2> + +<p>Obiekt <code>table</code> pozwala na dostęp do interfejsu <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425"><code>HTMLTableElement</code></a>, który udostępnia specjalne własności i metody (będące poza zwykłym interfejsem obiektu <a href="/pl/docs/DOM/element"><code>element</code></a>; własności i metody <a href="/pl/docs/DOM/element">elementu</a> dostępne są poprzez dziedziczenie) do ustawiania układu i wyglądu tabel w języku HTML.</p> + +<h2 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h2> + +<dl> + <dt>{{domxref("HTMLTableElement.caption")}}</dt> + <dd>opis tabeli.</dd> + <dt>{{domxref("HTMLTableElement.tHead")}}</dt> + <dd>nagłówek tabeli.</dd> + <dt>{{domxref("HTMLTableElement.tFoot")}}</dt> + <dd>stopka tabeli.</dd> + <dt>{{domxref("HTMLTableElement.rows")}} {{readonlyInline}}</dt> + <dd><b>rows</b> - liczba wierszy tabeli.</dd> + <dt>{{domxref("HTMLTableElement.tBodies")}} {{readonlyInline}}</dt> + <dd>'ciała' tabeli (tbody).</dd> +</dl> + +<dl> + <dt>{{domxref("HTMLTableElement.align")}} {{obsolete_inline}}</dt> + <dd>ustawia/pobiera wyrównanie tabeli.</dd> + <dt>{{domxref("HTMLTableElement.bgColor")}} {{obsolete_inline}}</dt> + <dd>ustawia/pobiera kolor tła tabeli.</dd> + <dt>{{domxref("HTMLTableElement.border")}} {{obsolete_inline}}</dt> + <dd>ustawia/pobiera obramowanie tabeli.</dd> + <dt>{{domxref("HTMLTableElement.cellPadding")}} {{obsolete_inline}}</dt> + <dd>ustawia/pobiera dopełnienie komórki.</dd> + <dt>{{domxref("HTMLTableElement.cellSpacing")}} {{obsolete_inline}}</dt> + <dd>ustawia/pobiera odstępy pomiędzy komórkami.</dd> + <dt>{{domxref("HTMLTableElement.frame")}} {{obsolete_inline}}</dt> + <dd>określa które krawędzie tabeli mają obramowanie.</dd> + <dt>{{domxref("HTMLTableElement.rules")}} {{obsolete_inline}}</dt> + <dd>określa które wewnętrzne krawędzie są widoczne.</dd> + <dt>{{domxref("HTMLTableElement.summary")}} {{obsolete_inline}}</dt> + <dd><b>u</b>stawia/pobiera podsumowanie tabeli.</dd> + <dt>{{domxref("HTMLTableElement.width")}} {{obsolete_inline}}</dt> + <dd>ustawia/pobiera szerokość tabeli.</dd> +</dl> + +<h2 id="Metody" name="Metody">Metody</h2> + +<dl> + <dt>{{domxref("HTMLTableElement.createTHead()")}}</dt> + <dd>tworzy nagłówek tabeli.</dd> + <dt>{{domxref("HTMLTableElement.deleteTHead()")}}</dt> + <dd>usuwa nagłówek tabeli.</dd> + <dt>{{domxref("HTMLTableElement.createTFoot()")}}</dt> + <dd>tworzy stopkę tabeli.</dd> + <dt>{{domxref("HTMLTableElement.deleteTFoot()")}}</dt> + <dd>usuwa stopkę tabeli.</dd> + <dt>{{domxref("HTMLTableElement.createCaption()")}}</dt> + <dd>tworzy nowy opis tabeli.</dd> + <dt>{{domxref("HTMLTableElement.deleteCaption()")}}</dt> + <dd>usuwa opis tabeli.</dd> + <dt>{{domxref("HTMLTableElement.insertRow()")}}</dt> + <dd>wstawia nowy wiersz.</dd> + <dt>{{domxref("HTMLTableElement.deleteRow()")}}</dt> + <dd>usuwa wiersz.</dd> +</dl> diff --git a/files/pl/web/api/htmltableelement/tfoot/index.html b/files/pl/web/api/htmltableelement/tfoot/index.html new file mode 100644 index 0000000000..2d7467db81 --- /dev/null +++ b/files/pl/web/api/htmltableelement/tfoot/index.html @@ -0,0 +1,39 @@ +--- +title: HTMLTableElement.tFoot +slug: Web/API/HTMLTableElement/tFoot +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLTableElement/tFoot +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>tFoot</b> zwraca element TFOOT tabeli.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>HTMLTableSectionElementObject</i> = table.tFoot +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">if (table.tFoot == my_foot) { + ... +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Ta własność zwraca VOID, jeśli nie istnieje element TFOOT.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64197097">tfoot</a></p> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-67417573">Interface HTMLTableSectionElement</a></p> + +<p>{{ languages( { "en": "en/DOM/table.tFoot" } ) }}</p> diff --git a/files/pl/web/api/htmltableelement/thead/index.html b/files/pl/web/api/htmltableelement/thead/index.html new file mode 100644 index 0000000000..413fe6fde1 --- /dev/null +++ b/files/pl/web/api/htmltableelement/thead/index.html @@ -0,0 +1,45 @@ +--- +title: HTMLTableElement.tHead +slug: Web/API/HTMLTableElement/tHead +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLTableElement/tHead +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>tHead</b> zwraca THEAD (nagłówek) tabeli.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>th_el</i> = table.tHead +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<ul> + <li><code>th_el</code> jest <a href="pl/HTMLTableSectionElement">HTMLTableSectionElement</a>.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">if (table.tHead == my_head_el) { + ... +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Ta własność zwraca VOID, jeśli nie istnieje element THEAD.</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-9530944">thead</a></p> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-67417573">Interface HTMLTableSectionElement</a></p> + +<p>{{ languages( { "en": "en/DOM/table.tHead" } ) }}</p> diff --git a/files/pl/web/api/index.html b/files/pl/web/api/index.html new file mode 100644 index 0000000000..2a13d2b016 --- /dev/null +++ b/files/pl/web/api/index.html @@ -0,0 +1,11 @@ +--- +title: Lista Web API +slug: Web/API +tags: + - NeedsTranslation + - TopicStub +translation_of: Web/API +--- +<p>Kiedy piszemy kod w JavaScript dla sieci Web, możemy użyć wielu przydatnych API. Poniżej znajduje się lista dostępnych interfejsów (dokładnie, typów obiektów), które możesz wykorzystać podczas budowy swojej strony czy aplikacji internetowej.</p> + +<div>{{APIListAlpha}}</div> diff --git a/files/pl/web/api/location/index.html b/files/pl/web/api/location/index.html new file mode 100644 index 0000000000..537d3bc90a --- /dev/null +++ b/files/pl/web/api/location/index.html @@ -0,0 +1,114 @@ +--- +title: Location +slug: Web/API/Location +tags: + - API + - HTML DOM + - Interface + - Location + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Location +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>The <strong><code>Location</code></strong> interface represents the location (URL) of the object it is linked to. Changes done on it are reflected on the object it relates to. Both the {{domxref("Document")}} and {{domxref("Window")}} interface have such a linked <code>Location</code>, accessible via {{domxref("Document.location")}} and {{domxref("Window.location")}} respectively.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>The <code>Location</code></em><em> interface doesn't inherit any property, but implements those from {{domxref("URLUtils")}}.</em></p> + +<dl> + <dt>{{domxref("Location.href")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the entire URL. If changed, the associated document navigates to the new page. It can be set from a different origin than the associated document.</dd> + <dt>{{domxref("Location.protocol")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final <code>':'</code>.</dd> + <dt>{{domxref("Location.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("Location.hostname")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the domain of the URL.</dd> + <dt>{{domxref("Location.port")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the port number of the URL.</dd> + <dt>{{domxref("Location.pathname")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing an initial <code>'/'</code> followed by the path of the URL.</dd> + <dt>{{domxref("Location.search")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing a <code>'?'</code> followed by the parameters or "querystring" of the URL. Modern browsers provide <a href="/en-US/docs/Web/API/URLSearchParams/get#Example">URLSearchParams</a> and <a href="/en-US/docs/Web/API/URL/searchParams#Example">URL.searchParams</a> to make it easy to parse out the parameters from the querystring.</dd> + <dt>{{domxref("Location.hash")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing a <code>'#'</code> followed by the fragment identifier of the URL.</dd> + <dt>{{domxref("Location.username")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the username specified before the domain name.</dd> + <dt>{{domxref("Location.password")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the password specified before the domain name.</dd> + <dt>{{domxref("Location.origin")}} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the canonical form of the origin of the specific location.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>The <code>Location</code></em><em> interface doesn't inherit any method<em>, but implements those from {{domxref("URLUtils")}}</em>.</em></p> + +<dl> + <dt>{{domxref("Location.assign()")}}</dt> + <dd>Loads the resource at the URL provided in parameter.</dd> + <dt>{{domxref("Location.reload()")}}</dt> + <dd>Reloads the resource from the current URL. Its optional unique parameter is a {{domxref("Boolean")}}, which, when it is <code>true</code>, causes the page to always be reloaded from the server. If it is <code>false</code> or not specified, the browser may reload the page from its cache.</dd> + <dt>{{domxref("Location.replace()")}}</dt> + <dd>Replaces the current resource with the one at the provided URL. The difference from the <code>assign()</code> method is that after using <code>replace()</code> the current page will not be saved in session {{domxref("History")}}, meaning the user won't be able to use the <em>back</em> button to navigate to it.</dd> + <dt>{{domxref("Location.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="Examples">Examples</h2> + +<pre class="brush: js">// Create anchor element and use href property for the purpose of this example +// A more correct alternative is to browse to the URL and use document.location or window.location +var url = document.createElement('a'); +url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container'; +console.log(url.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container +console.log(url.protocol); // https: +console.log(url.host); // developer.mozilla.org:8080 +console.log(url.hostname); // developer.mozilla.org +console.log(url.port); // 8080 +console.log(url.pathname); // /en-US/search +console.log(url.search); // ?q=URL +console.log(url.hash); // #search-results-close-container +console.log(url.origin); // https://developer.mozilla.org +</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('HTML WHATWG', "browsers.html#the-location-interface", "Location")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName("HTML5 W3C")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Location")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Two methods creating such an object: {{domxref("Window.location")}} and {{domxref("Document.location")}}.</li> + <li>URL related interfaces: {{domxref("URL")}}, {{domxref("URLSearchParams")}} and {{domxref("HTMLHyperlinkElementUtils")}}</li> +</ul> diff --git a/files/pl/web/api/location/reload/index.html b/files/pl/web/api/location/reload/index.html new file mode 100644 index 0000000000..fc859dbfd3 --- /dev/null +++ b/files/pl/web/api/location/reload/index.html @@ -0,0 +1,67 @@ +--- +title: Location.reload() +slug: Web/API/Location/reload +tags: + - API + - HTML-DOM + - Location + - Metodă +translation_of: Web/API/Location/reload +--- +<p>{{ APIRef("HTML DOM") }}</p> + +<p>Metoda <code><strong>Location.reload()</strong></code> ponownie ładuje zasób z bieżącego adresu URL. Jej opcjonalnym i jednocześnie unikalnym parametrem jest parametr {{domxref("Boolean")}}. Jeśli przyjmie on wartość <code>true</code>, powoduje zawsze ponownie ładowanie strony z serwera. Jeśli jego wartość wynosi <code>false</code> lub nie jest zdefiniowana, przeglądarka<span id="result_box" lang="pl"><span> może ponownie załadować stronę z pamięci podręcznej.</span></span> <span id="result_box" lang="pl"><span>Poza domyślnym zachowaniem pamięci cache, flaga </span></span><code>forcedReload</code><span lang="pl"><span> wpływa również na to, jak niektóre przeglądarki obsługują pozycję przewijania strony: zwykłe przeładowanie próbuje przywrócić pozycję przewijania po ponownym załadowaniu strony, natomiast w trybie wymuszonym (gdy parametr jest ustawiony na wartość </span></span><code>true</code><span lang="pl"><span>) nowy DOM zostaje wczytany ze </span></span><code>scrollTop == 0</code>.</p> + +<p>Jeśli przypisanie nie może się wydarzyć z powodu naruszenia bezpieczeństwa, zostanie zgłoszony wyjątek {{domxref("DOMException")}} typu <code>SECURITY_ERROR</code>. Dzieje się tak, gdy pochodzenie skryptu wywołującego metodę różni się od pochodzenia strony opisanej przez obiekt {{domxref("Location")}} (zazwyczaj kiedy skrypt jest hostowany na innej domenie).</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><em>object</em>.reload(<em>forcedReload</em>); +</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><em>forcedReload</em> {{optional_inline}}</dt> + <dd>Jest flagą {{domxref("Boolean")}}, która przyjmując wartość <code>true</code>, zawsze powoduje przeładowanie strony z serwera. Jeśli jej wartość to <code>false</code> lub nie została ona zdefiniowana, przeglądarka może wczytać stronę z pamięci podręczniej (pamięci cache).</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: js">// Przeładuj bieżącą stronę bez cache +window.location.reload(true);</pre> + +<h2 id="Lista_specyfikacji">Lista specyfikacji</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "history.html#dom-location-reload", "Location.reload()")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Bez zmian od {{SpecName("HTML5 W3C")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-reload", "Location.reload()")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Początkowa definicja.</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_przeglądarek">Zgodność przeglądarek</h2> + +<div class="hidden"><span id="result_box" lang="pl"><span>Tabela zgodności na tej stronie jest generowana na podstawie danych strukturalnych.</span> <span>Jeśli chcesz przyczynić się do współtworzenia danych, sprawdź </span></span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span id="result_box" lang="pl"><span>i wyślij nam pull requesta.</span></span></div> + +<p>{{Compat("api.Location.reload")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Interfejs {{domxref("Location")}}.</li> + <li>Podobne metody: {{domxref("Location.assign()")}} i {{domxref("Location.replace()")}}.</li> +</ul> diff --git a/files/pl/web/api/mediaelementaudiosourcenode/index.html b/files/pl/web/api/mediaelementaudiosourcenode/index.html new file mode 100644 index 0000000000..81bbce3c25 --- /dev/null +++ b/files/pl/web/api/mediaelementaudiosourcenode/index.html @@ -0,0 +1,84 @@ +--- +title: MediaElementAudioSourceNode +slug: Web/API/MediaElementAudioSourceNode +translation_of: Web/API/MediaElementAudioSourceNode +--- +<p>{{APIRef("Web Audio API")}}</p> + +<div> +<p>The <code>MediaElementAudioSourceNode</code> interface represents an audio source consisting of an HTML5 {{ htmlelement("audio") }} or {{ htmlelement("video") }} element. It is an {{domxref("AudioNode")}} that acts as an audio source.</p> +</div> + +<p>A <code>MediaElementSourceNode</code> has no inputs and exactly one output, and is created using the {{domxref("AudioContext.createMediaElementSource")}} method. The amount of channels in the output equals the number of channels of the audio referenced by the {{domxref("HTMLMediaElement")}} used in the creation of the node, or is 1 if the {{domxref("HTMLMediaElement")}} has no audio.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Number of inputs</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Number of outputs</th> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row">Channel count</th> + <td>defined by the media in the {{domxref("HTMLMediaElement")}} passed to the {{domxref("AudioContext.createMediaElementSource")}} method that created it.</td> + </tr> + </tbody> +</table> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("MediaElementAudioSourceNode.MediaElementAudioSourceNode", "MediaElementAudioSourceNode()")}}</dt> + <dd>Creates a new <code>MediaElementAudioSourceNode</code> object instance.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p> + +<dl> + <dt>{{domxref("MediaElementAudioSourceNode.mediaElement", "mediaElement")}} {{ReadOnlyInline}}</dt> + <dd>The {{domxref("HTMLMediaElement")}} used when constructing this <code>MediaStreamAudioSourceNode</code>.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p> + +<h2 id="Example">Example</h2> + +<p>{{page("/en-US/docs/Web/API/AudioContext.createMediaElementSource","Example")}}</p> + +<h2 id="Specification">Specification</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', '#mediaelementaudiosourcenode', 'MediaElementAudioSourceNode')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.MediaElementAudioSourceNode")}}</p> +</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/pl/web/api/midiaccess/index.html b/files/pl/web/api/midiaccess/index.html new file mode 100644 index 0000000000..6155b26b02 --- /dev/null +++ b/files/pl/web/api/midiaccess/index.html @@ -0,0 +1,70 @@ +--- +title: MIDIAccess +slug: Web/API/MIDIAccess +tags: + - API + - Interfejs +translation_of: Web/API/MIDIAccess +--- +<p>{{SeeCompatTable}}{{APIRef("Web MIDI API")}} </p> + +<p>Interfejs <strong><code>MIDIAccess</code></strong> pochodzący z <a href="/en-US/docs/Web/API/Web_MIDI_API">Web MIDI API</a>, dostarcza metod wyliczania urządzeń wejściowych i wyjściowych MIDI oraz dostępu do tych urządzeń.</p> + +<h2 id="Właściwości">Właściwości</h2> + +<dl> + <dt>{{domxref("MIDIAccess.inputs")}} {{readonlyinline}}</dt> + <dd>Zwraca instancję {{domxref("MIDIInputMap")}} dostarczając metod dostępu do wszystkich dostępnych portów wejśiowych MIDI.</dd> + <dt>{{domxref("MIDIAccess.outputs")}} {{readonlyinline}}</dt> + <dd>Zwraca instancję {{domxref("MIDIOutputMap")}} dostarczając metod dostępu do wszystkich dostępnych portów wyjśiowych MIDI.</dd> + <dt>{{domxref("MIDIAccess.sysexEnabled")}} {{readonlyinline}}</dt> + <dd>Parametr zerojedynkowy, wskazujący na wsparcie system exclusive dla obecnej instancji MIDIAccess.</dd> +</dl> + +<h3 id="Procedury_obsługi_zdarzeń">Procedury obsługi zdarzeń</h3> + +<dl> + <dt>{{domxref("MIDIAccess.onstatechange")}}</dt> + <dd>Jest wywoływana za każdym razem, gdy nowy port MIDI zostaniedodany lub nastąpi zmiana stanu istniejącego portu.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: js">navigator.requestMIDIAccess() + .then(function(access) { + + // Get lists of available MIDI controllers + const inputs = access.inputs.values(); + const outputs = access.outputs.values(); + + access.onstatechange = function(e) { + + // Print information about the (dis)connected MIDI controller + console.log(e.port.name, e.port.manufacturer, e.port.state); + }; + });</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('WebMIDI API','#midiaccess-interface')}}</td> + <td>{{Spec2('WebMIDI API')}}</td> + <td>Definicja wstępna.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<p>{{Compat("api.MIDIAccess")}}</p> + +<div></div> + +<div id="compat-mobile"></div> diff --git a/files/pl/web/api/mousescrollevent/index.html b/files/pl/web/api/mousescrollevent/index.html new file mode 100644 index 0000000000..ed0ab35316 --- /dev/null +++ b/files/pl/web/api/mousescrollevent/index.html @@ -0,0 +1,126 @@ +--- +title: MouseScrollEvent +slug: Web/API/MouseScrollEvent +translation_of: Web/API/MouseScrollEvent +--- +<p>{{APIRef("DOM Events")}}{{ non-standard_header() }}{{deprecated_header}}</p> + +<p>The DOM <code>MouseScrollEvent</code> represents events that occur due to the user moving a mouse wheel or similar input device.</p> + +<p>Use standardardized {{ domxref("WheelEvent") }} instead of this legacy event object if available.</p> + +<h2 id="Method_overview">Method overview</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>void <a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIDOMMouseScrollEvent#initMouseScrollEvent%28%29">initMouseScrollEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in nsIDOMAbstractView viewArg, in long detailArg, in long screenXArg, in long screenYArg, in long clientXArg, in long clientYArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in unsigned short buttonArg, in nsIDOMEventTarget relatedTargetArg, in long axis);</code></td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Attribute</td> + <td class="header">Type</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>axis</code></td> + <td><code>long</code></td> + <td>Indicates scroll direction. <strong>Read only.</strong></td> + </tr> + </tbody> +</table> + +<h2 id="Constants">Constants</h2> + +<h3 id="Delta_modes">Delta modes</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Constant</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>HORIZONTAL_AXIS</code></td> + <td><code>0x01</code></td> + <td>The event is caused by horizontal wheel operation.</td> + </tr> + <tr> + <td><code><code>VERTICAL_AXIS</code></code></td> + <td><code>0x02</code></td> + <td>The event is caused by vertical wheel operation.</td> + </tr> + </tbody> +</table> + +<h2 id="Methods">Methods</h2> + +<h3 id="initMouseScrollEvent()">initMouseScrollEvent()</h3> + +<p>See <a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIDOMMouseScrollEvent#initMouseScrollEvent%28%29" title="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIDOMMouseScrollEvent#initMouseScrollEvent%28%29">nsIDOMMouseScrollEvent::initMouseScrollEvent()</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>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoDesktop("1.9.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>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>{{ CompatGeckoMobile("1.9.1") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 class="note" id="See_also">See also</h2> + +<ul> + <li><code>DOMMouseScroll</code></li> + <li><code>MozMousePixelScroll</code></li> + <li>Non-gecko browsers' legacy mouse wheel event object: {{ domxref("MouseWheelEvent") }}</li> + <li>Standardized mouse wheel event object: {{ domxref("WheelEvent") }}</li> +</ul> diff --git a/files/pl/web/api/navigator/appcodename/index.html b/files/pl/web/api/navigator/appcodename/index.html new file mode 100644 index 0000000000..ec0da7157c --- /dev/null +++ b/files/pl/web/api/navigator/appcodename/index.html @@ -0,0 +1,30 @@ +--- +title: window.navigator.appCodeName +slug: Web/API/Navigator/appCodeName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/appCodeName +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca wewnętrzną nazwę "kodową" aktualnej przeglądarki.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">codeName = window.navigator.appCodeName +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>codeName</code> jest wewnętrzną nazwą przeglądarki, zwracaną jako łańcuch znaków.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>dump(window.navigator.appCodeName); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Mozilla, Netscape 6 i IE5 używają wewnętrznej nazwy "Mozilla".</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.navigator.appCodeName", "ja": "ja/DOM/window.navigator.appCodeName" } ) }}</p> diff --git a/files/pl/web/api/navigator/appname/index.html b/files/pl/web/api/navigator/appname/index.html new file mode 100644 index 0000000000..d651ac3682 --- /dev/null +++ b/files/pl/web/api/navigator/appname/index.html @@ -0,0 +1,29 @@ +--- +title: window.navigator.appName +slug: Web/API/Navigator/appName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/appName +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca oficjalną nazwę przeglądarki.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">appName = window.navigator.appName +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>appName</code> jest nazwą przeglądarki, zwracaną jako łańcuch znaków.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>dump(window.navigator.appName); +// dla NS6 wypisuje w konsoli "Navigator" +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.navigator.appName", "ja": "ja/DOM/window.navigator.appName" } ) }}</p> diff --git a/files/pl/web/api/navigator/appversion/index.html b/files/pl/web/api/navigator/appversion/index.html new file mode 100644 index 0000000000..3d08f23cee --- /dev/null +++ b/files/pl/web/api/navigator/appversion/index.html @@ -0,0 +1,32 @@ +--- +title: window.navigator.appVersion +slug: Web/API/Navigator/appVersion +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/appVersion +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca wersję przeglądarki jako łańcuch znaków.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">ver = window.navigator.appVersion +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>ver</code> jest numerem wersji przeglądarki, zwracanym jako łańcuch znaków.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>if ( navigator.appVersion.charAt(0) == "5" ) { + // prawdopodobnie jest to piąta wersja przeglądarki + } +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Własność window.navigator.userAgent również zawiera numer wersji przeglądarki (przykładowo: "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape 6/6.1"), lecz powinniśmy mieć świadomość jak łatwo jest zmienić ciąg user-agent i "naśladować" inne przeglądarki, platformy lub pośredników użytkownika oraz jak bezmyślni są sami producenci przeglądarek w ustawianiu tej wartości. Własności window.navigator.appVersion i window.navigator.userAgent są dość często stosowane w kodzie "szpiegującym przeglądarki": skryptach, które próbują dowiedzieć się jakiej używasz przeglądarki i wyświetlić stosowną do niej stronę.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.navigator.appVersion", "ja": "ja/DOM/window.navigator.appVersion" } ) }}</p> diff --git a/files/pl/web/api/navigator/buildid/index.html b/files/pl/web/api/navigator/buildid/index.html new file mode 100644 index 0000000000..2f35af6f92 --- /dev/null +++ b/files/pl/web/api/navigator/buildid/index.html @@ -0,0 +1,41 @@ +--- +title: Navigator.buildID +slug: Web/API/Navigator/buildID +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/buildID +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca identyfikator kompilacji przeglądarki.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>buildID</i> = +<i>navigator</i>.buildID; +</pre> + +<p><code>buildID</code> jest identyfikatorem kompilacji aplikacji, zwracanym jako łańcuch znakówi. ID kompilacji jest w formie <tt>YYYYMMDDHH</tt> (gdzie: Y - rok, M - miesiąc, D - dzień, H - godzina).</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">dump(window.navigator.buildID); +// wyświetla w konsoli "2006090803" +</pre> + +<h3 id="Uwaga" name="Uwaga">Uwaga</h3> + +<p>Dostępne w <a href="pl/Firefox_2">Firefoksie 2</a> (<a href="pl/Gecko">Gecko</a> 1.8.1) i późniejszych. Zaimplementowane w {{ Bug(345993) }}.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>Nie jest częścią żadnego publicznego standardu.</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.buildID", "ja": "ja/DOM/window.navigator.buildID" } ) }}</p> diff --git a/files/pl/web/api/navigator/cookieenabled/index.html b/files/pl/web/api/navigator/cookieenabled/index.html new file mode 100644 index 0000000000..43c12ee2de --- /dev/null +++ b/files/pl/web/api/navigator/cookieenabled/index.html @@ -0,0 +1,45 @@ +--- +title: Navigator.cookieEnabled +slug: Web/API/Navigator/cookieEnabled +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/cookieEnabled +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Posumowanie" name="Posumowanie">Posumowanie</h3> + +<p>Zwraca wartość logiczną tylko do odczytu, wskazującą czy obsługa ciasteczek jest włączona, czy nie.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">var cookieEnabled = navigator.cookieEnabled; +</pre> + +<ul> + <li><code>cookieEnabled</code> jest wartością logiczną <code>true</code> lub <code>false</code>.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">if (!navigator.cookieEnabled) { + // poinformuj użytkownika, że przy włączonych ciasteczkach + // strona jest bardziej użyteczna +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>W związku z {{ Bug(230350) }}, <code>cookieEnabled</code> może zwracać błędny wynik w aplikacjach opartych o Gecko.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>{{ DOM0() }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.cookieEnabled", "ja": "ja/DOM/window.navigator.cookieEnabled" } ) }}</p> diff --git a/files/pl/web/api/navigator/index.html b/files/pl/web/api/navigator/index.html new file mode 100644 index 0000000000..6ef2055b7a --- /dev/null +++ b/files/pl/web/api/navigator/index.html @@ -0,0 +1,119 @@ +--- +title: Navigator +slug: Web/API/Navigator +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/pl/web/api/navigator/javaenabled/index.html b/files/pl/web/api/navigator/javaenabled/index.html new file mode 100644 index 0000000000..291d27782e --- /dev/null +++ b/files/pl/web/api/navigator/javaenabled/index.html @@ -0,0 +1,39 @@ +--- +title: NavigatorPlugins.javaEnabled +slug: Web/API/Navigator/javaEnabled +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorPlugins/javaEnabled +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Ta metoda wskazuje czy w aktualnej przeglądarce została włączona obsługa Javy.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>result</i> = window.navigator.javaEnabled() +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">if (window.navigator.javaEnabled()) { + // przeglądarka posiada Javę +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Zwracana przez tę metodę wartość wskazuje czy Java jest włączona czy też nie - a nie czy przeglądarka w ogóle obsługuje Javę.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.javaEnabled", "ja": "ja/DOM/window.navigator.javaEnabled" } ) }}</p> diff --git a/files/pl/web/api/navigator/language/index.html b/files/pl/web/api/navigator/language/index.html new file mode 100644 index 0000000000..1dcc4daabc --- /dev/null +++ b/files/pl/web/api/navigator/language/index.html @@ -0,0 +1,45 @@ +--- +title: NavigatorLanguage.language +slug: Web/API/Navigator/language +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorLanguage/language +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca łańcuch znaków reprezentujący wersję językową przeglądarki.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>lang</i> = window.navigator.language +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<ul> + <li><code>lang</code> jest dwu znakowym łańcuchem znaków (na przykład "en" lub "ja") reprezentującym wersję języka.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>if ( window.navigator.language != "pl" ) { + doLangSelect(window.navigator.language); +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Ta własność pojawia się również jako część łańcucha znaków <a href="pl/DOM/window.navigator.userAgent">navigator.userAgent</a>.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.language", "ja": "ja/DOM/window.navigator.language" } ) }}</p> diff --git a/files/pl/web/api/navigator/mimetypes/index.html b/files/pl/web/api/navigator/mimetypes/index.html new file mode 100644 index 0000000000..371e75eff2 --- /dev/null +++ b/files/pl/web/api/navigator/mimetypes/index.html @@ -0,0 +1,40 @@ +--- +title: NavigatorPlugins.mimeTypes +slug: Web/API/Navigator/mimeTypes +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorPlugins/mimeTypes +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca obiekt <code><a class="external" href="http://www.xulplanet.com/references/objref/MimeTypeArray.html">MimeTypeArray</a></code>, który zawiera listę obiektów <code><a class="external" href="http://www.xulplanet.com/references/objref/MimeType.html">MimeType</a></code> reprezentujących typy MIME rozpoznawane przez przeglądarkę.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>mimeTypes</i> = navigator.mimeTypes; +</pre> + +<p><code>mimeTypes</code> jest obiektem <code><a class="external" href="http://www.xulplanet.com/references/objref/MimeTypeArray.html">MimeTypeArray</a></code>, który posiada zarówno własność <code>length</code> jak i metody <code>item(index)</code> oraz <code>namedItem(name)</code>.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre> alert(window.navigator.mimeTypes.item(0).description); // wyświetli ostrzeżenie "Mozilla Default Plug-in" +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Wartością własności <code>type</code> w zerowym elemencie (obiekt <code>MimeType</code> "Mozilla Default Plug-in") jest <code>*</code> zamiast typowego formatu MIME jak np. <code>"image/x-macpaint"</code></p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>{{ DOM0() }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.mimeTypes", "ja": "ja/DOM/window.navigator.mimeTypes" } ) }}</p> diff --git a/files/pl/web/api/navigator/mozpermissionsettings/index.html b/files/pl/web/api/navigator/mozpermissionsettings/index.html new file mode 100644 index 0000000000..df0966e04e --- /dev/null +++ b/files/pl/web/api/navigator/mozpermissionsettings/index.html @@ -0,0 +1,33 @@ +--- +title: Navigator.mozPermissionSettings +slug: Web/API/Navigator/mozPermissionSettings +translation_of: Archive/B2G_OS/API/Navigator/mozPermissionSettings +--- +<p>{{APIRef("Firefox OS")}}{{ non-standard_header() }}</p> + +<p>{{ B2GOnlyHeader2('certified') }}</p> + +<h2 id="Summary">Summary</h2> + +<p>Returns a {{ domxref("PermissionSettings") }} object you can use to get and set permissions of apps on the Firefox OS platform.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval">var permissions = window.navigator.mozPermissionSettings; +</pre> + +<h2 id="Value">Value</h2> + +<p><code>navigator.mozPermissionSettings</code> is a {{domxref("PermissionSettings")}} object.</p> + +<h2 id="Specification">Specification</h2> + +<p>Not part of any specification.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ domxref("PermissionSettings") }}</li> + <li>The <a href="/en-US/docs/Web/API/Permissions_API_(Firefox_OS)">Permissions API (Firefox OS)</a></li> + <li><a href="/en-US/Apps/Build/App_permissions">App permissions</a></li> +</ul> diff --git a/files/pl/web/api/navigator/online/index.html b/files/pl/web/api/navigator/online/index.html new file mode 100644 index 0000000000..20bbd73fb0 --- /dev/null +++ b/files/pl/web/api/navigator/online/index.html @@ -0,0 +1,47 @@ +--- +title: NavigatorOnLine.onLine +slug: Web/API/Navigator/onLine +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorOnLine/onLine +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca wartość logiczną wskazującą czy przeglądarka jest w trybie online, czy nie.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>online</i> = +<i>window</i>.navigator.onLine; +</pre> + +<ul> + <li><code>online</code> przyjmuje wartość logiczną <code>true</code> (prawda) lub <code>false</code> (fałsz).</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">alert(navigator.onLine ? "Jesteś online" : "Jesteś offline"); +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Zobacz <a href="pl/Zdarzenia_Online%2f%2fOffline">Zdarzenia Online/Offline</a>, aby uzyskać bardziej szczegółowy opis tej własności, jak również nowych funkcji związanych z trybem offline, wprowadzonych w Firefoksie 3.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>{{ DOM0() }}</p> + +<p>Opisana w <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#navigator.online">szkicu roboczym HTML 5</a></p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.onLine", "fr": "fr/DOM/window.navigator.onLine", "ja": "ja/DOM/window.navigator.onLine" } ) }}</p> diff --git a/files/pl/web/api/navigator/oscpu/index.html b/files/pl/web/api/navigator/oscpu/index.html new file mode 100644 index 0000000000..69a9f9deb4 --- /dev/null +++ b/files/pl/web/api/navigator/oscpu/index.html @@ -0,0 +1,41 @@ +--- +title: Navigator.oscpu +slug: Web/API/Navigator/oscpu +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/oscpu +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca łańcuch znaków reprezentujący bieżący system operacyjny.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>oscpuInfo</i> = window.navigator.oscpu +</pre> + +<ul> + <li><code>oscpu</code> jest łańcuchem znaków przyjmującym poniższą formę.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>function osInfo() { +alert(window.navigator.oscpu); +} +// zwraca: Windows NT 6.0 +</pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>{{ DOM0() }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.oscpu", "ja": "ja/DOM/window.navigator.oscpu" } ) }}</p> diff --git a/files/pl/web/api/navigator/platform/index.html b/files/pl/web/api/navigator/platform/index.html new file mode 100644 index 0000000000..3a73ee3c2e --- /dev/null +++ b/files/pl/web/api/navigator/platform/index.html @@ -0,0 +1,28 @@ +--- +title: window.navigator.platform +slug: Web/API/Navigator/platform +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/platform +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca łańcuch znaków reprezentujący platformę przeglądarki.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>platform</i> =<i>navigator</i>.platform +</pre> +<p><code>platform</code> jest łańcuchem znaków z jedną z następujących wartości: "Win32", "Linux i686", "MacPPC", "MacIntel" lub inną.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">alert(navigator.platform); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jeśli Twój kod nie jest uprzywilejowany (chrome lub przynajmniej kod z uprawnieniem UniversalBrowserRead), może on otrzymać wartość opcji <tt>general.platform.override</tt> zamiast prawdziwej platformy.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.navigator.platform", "ja": "ja/DOM/window.navigator.platform" } ) }}</p> diff --git a/files/pl/web/api/navigator/plugins/index.html b/files/pl/web/api/navigator/plugins/index.html new file mode 100644 index 0000000000..c60d9f6614 --- /dev/null +++ b/files/pl/web/api/navigator/plugins/index.html @@ -0,0 +1,58 @@ +--- +title: NavigatorPlugins.plugins +slug: Web/API/Navigator/plugins +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorPlugins/plugins +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca obiekt <code><a class="external" href="https://developer.mozilla.org/pl/docs/Web/API/PluginArray">PluginArray</a></code> będący listą wszystkich wtyczek zainstalowanych w aplikacji.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>plugins</em> = navigator.plugins; +</pre> + +<p><code>plugins</code> jest tabelą <code>PluginArray</code> zawierającą obiekty <code><a class="external" href="https://developer.mozilla.org/pl/docs/Web/API/Plugin">Plugin</a></code> reprezentujące zainstalowane wtyczki.</p> + +<p>Zwrócona wartość nie jest jest tablicą JavaScript, ale posiada własność <code>length</code> i obsługuje dostęp do poszczególnych elementów za pomocą notacji nawiasowej (<code>plugins{{ mediawiki.external(2) }}</code>) jak również poprzez metody <code>item(<em>index</em> )</code> i <code>namedItem(<em>"name"</em> )</code>.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<p>Poniższy przykład wyświetla wewnątrz zaawansowanego dokumentu informacje o zainstalowanych wtyczkach. Zauważ własności dostępne w obiekcie Plugin: name, filename i description.</p> + +<pre><script type="text/javascript"> + var L = navigator.plugins.length; + document.write(L.toString().bold() + " Plugin(s)".bold()); + document.write("<br>"); + document.write("Nazwa wtyczki | Nazwa pliku | Opis".bold()); + document.write("<br>"); + for(var i=0; i<L; i++) { + document.write(navigator.plugins[i].name); + document.write(" | "); + document.write(navigator.plugins[i].filename); + document.write(" | "); + document.write(navigator.plugins[i].description); + document.write("<br>"); + } +</script> +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Obiekt <code><a class="external" href="https://developer.mozilla.org/pl/docs/Web/API/Plugin">Plugin</a></code> wyświetla skromny interfejs w celu uzyskania informacji o różnych wtyczkach zainstalowanych w przeglądarce. Lista wtyczek jest również dostępna poprzez wprowadzenie <kbd>about:plugins</kbd> w pasku adresu.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>{{ DOM0() }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.plugins", "ja": "ja/DOM/window.navigator.plugins" } ) }}</p> diff --git a/files/pl/web/api/navigator/product/index.html b/files/pl/web/api/navigator/product/index.html new file mode 100644 index 0000000000..50d34a4a66 --- /dev/null +++ b/files/pl/web/api/navigator/product/index.html @@ -0,0 +1,38 @@ +--- +title: window.navigator.product +slug: Web/API/Navigator/product +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/product +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność ta zwraca nazwę produktu bieżącej przeglądarki.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>productName</i> = window.navigator.product +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>productName</code> jest łańcuchem znaków.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><script> +function prod() { + dt = document.getElementById("d"); + dt.innerHTML = window.navigator.product; +} +</script> +<button onclick="prod();">produkt</button> +<div id="d"> </div> +// zwraca "Gecko" +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Produkt jest tą częścią pełnego łańcucha identyfikatora przeglądarki, która następuje bezpośrednio po platformie. Na przykład, w identyfikatorze przeglądarki dla Netscape 6.1 produktem jest "Gecko", a pełny ciąg identyfikatora przeglądarki jest następujący: Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.navigator.product", "ja": "ja/DOM/window.navigator.product" } ) }}</p> diff --git a/files/pl/web/api/navigator/productsub/index.html b/files/pl/web/api/navigator/productsub/index.html new file mode 100644 index 0000000000..e5e580cbe9 --- /dev/null +++ b/files/pl/web/api/navigator/productsub/index.html @@ -0,0 +1,52 @@ +--- +title: Navigator.productSub +slug: Web/API/Navigator/productSub +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/productSub +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>productSub</b> zwraca numer kompilacji bieżącej przeglądarki.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>prodSub</i> = window.navigator.productSub +</pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<ul> + <li><code>prodSub</code> jest łańcuchem znaków.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre><script> +function prodsub() { + dt = document.getElementById("d").childNodes[0]; + dt.data = window.navigator.productSub; +} +</script> +<button onclick="prodsub();">productSub</button> +// zwraca: 20010725 +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>W IE własność ta zwraca wartość nieokreśloną.</p> + +<p>W Apple Safari własność zawsze zwraca <code>20030107</code>.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.productSub", "ja": "ja/DOM/window.navigator.productSub" } ) }}</p> diff --git a/files/pl/web/api/navigator/registercontenthandler/index.html b/files/pl/web/api/navigator/registercontenthandler/index.html new file mode 100644 index 0000000000..58f6f5dd39 --- /dev/null +++ b/files/pl/web/api/navigator/registercontenthandler/index.html @@ -0,0 +1,49 @@ +--- +title: Navigator.registerContentHandler +slug: Web/API/Navigator/registerContentHandler +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/registerContentHandler +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Pozwala stronom na zarejestrowanie się jako możliwe serwisy obsługujące zawartości konkretnego typu MIME.</p> + +<p>{{ Note("Strony internetowe mogą zarejestrować tylko siebie jako serwisy obsługujące zawartość. Ze względów bezpieczeństwa nie jest możliwe, aby rozszerzenie lub strona internetowa zarejestrowały inną stronę do obsługi zawartości.") }}</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">window.navigator.registerContentHandler(<i>mimeType</i>, +<i>uri</i>, +<i>title</i>); +</pre> + +<ul> + <li><code>mimeType</code> jest żądanym typem MIME zapisanym jako łańcuch znaków.</li> + <li><code>uri</code> jest adresem URI uchwytu, zapisanym jako łańcuch znaków.</li> + <li><code>title</code> jest tytułem uchwytu, przedstawionym użytkownikowi jako łańcuch znaków.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">navigator.registerContentHandler("application/vnd.mozilla.maybe.feed", + "<span class="nowiki">http://www.przyklad.tld/?foo=%s</span>", + "Mój Czytnik Kanałów"); +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>W <a href="pl/Firefox_2">Firefoksie 2</a> obsługiwane są tylko typy MIME <code>application/vnd.mozilla.maybe.feed</code>, <code>application/atom+xml</code> oraz <code>application/rss+xml</code>. Wszystkie wartości mają ten sam efekt, a zarejestrowane strony obsługujące otrzymają kanały we wszystkich wersjach Atom i RSS.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>Określona przez <a class="external" href="http://whatwg.org/specs/web-apps/current-work/#custom-handlers">szkic roboczy Web Applications 1.0</a> organizacji WHATWG.</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.registerContentHandler", "ja": "ja/DOM/window.navigator.registerContentHandler" } ) }}</p> diff --git a/files/pl/web/api/navigator/registerprotocolhandler/index.html b/files/pl/web/api/navigator/registerprotocolhandler/index.html new file mode 100644 index 0000000000..b5b040b91d --- /dev/null +++ b/files/pl/web/api/navigator/registerprotocolhandler/index.html @@ -0,0 +1,66 @@ +--- +title: Navigator.registerProtocolHandler +slug: Web/API/Navigator/registerProtocolHandler +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Firefox 3 + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/registerProtocolHandler +--- +<p>{{ ApiRef() }} {{ Fx_minversion_header(3) }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Umożliwia zarejestrowanie witryny internetowej jako mechanizmu obsługi danego protokołu.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">window.navigator.registerProtocolHandler(<i>protokół</i>, +<i>uri</i>, +<i>nazwa</i>); +</pre> + +<ul> + <li><code>protokół</code> to protokół, który dana witryna ma obsługiwać, określony jako łańcuch znaków.</li> + <li><code>uri</code> to identyfikator URI witryny, określony jako łańcuch znaków. Możliwe jest użycie zmiennej "%s" w celu określenia, w którym miejscu powinien zostać wstawiony identyfikator URI obsługiwanego dokumentu (znaki specjalne w ciągu identyfikatora muszą być zamienione na sekwencje sterujące — + <i>escape sequences</i> + ).</li> + <li><code>nazwa</code> to nazwa funkcji obsługi wyświetlana użytkownikowi, określona jako łańcuch znaków.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<p>Poniżej podano sposób rejestracji mechanizmu obsługi protokołu + <i>mailto</i> + przez przykładową aplikację internetową znajdującą się pod adresem <span class="nowiki">http://www.example.com</span>:</p> + +<pre class="eval">navigator.registerProtocolHandler("mailto", + "<a class="link-https" href="https://www.example.com/?uri=%s" rel="freelink">https://www.example.com/?uri=%s</a>", + "Poczta internetowa"); +</pre> + +<p>W powyższym kodzie tworzona jest funkcja obsługi odnośników + <i>mailto</i> + , która powoduje przejście do przykładowej strony. Adres e-mail określony w odnośniku jest wstawiany do adresu URL.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>Określone w specyfikacji WHATWG <a class="external" href="http://whatwg.org/specs/web-apps/current-work/#custom-handlers">Web Applications 1.0, wersja robocza</a>.</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<ul> + <li><a href="pl/Obs%c5%82ugi_protoko%c5%82%c3%b3w_przez_aplikacje_WWW">Obsługi protokołów przez aplikacje WWW</a></li> +</ul> + +<p> </p> + +<p> </p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.registerProtocolHandler", "es": "es/DOM/window.navigator.registerProtocolHandler", "fr": "fr/DOM/window.navigator.registerProtocolHandler", "ja": "ja/DOM/window.navigator.registerProtocolHandler", "ko": "ko/DOM/window.navigator.registerProtocolHandler" } ) }}</p> diff --git a/files/pl/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html b/files/pl/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html new file mode 100644 index 0000000000..2a9863088c --- /dev/null +++ b/files/pl/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html @@ -0,0 +1,107 @@ +--- +title: Obsługa protokołów przez aplikacje WWW +slug: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +--- +<p><span class="comment">UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU</span> {{ Fx_minversion_header(3) }} +</p> +<h3 id="Wprowadzenie" name="Wprowadzenie">Wprowadzenie</h3> +<p><span class="comment">UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU</span> +Często na stronach internetowych znaleźć można odnośniki do zasobów korzystających z protokołów innych niż <code>http</code>. Przykładem jednego z nich jest protokół <code>mailto</code>: +</p> +<pre><a href="mailto:webmaster@example.com">Napisz do webmastera</a> +</pre> +<p>Twórcy witryn internetowych używają odnośników <code>mailto:</code>, kiedy chcą zapewnić użytkownikom wygodny sposób na wysłanie wiadomości e-mail z poziomu strony WWW. Kiedy użytkownik aktywuje odnośnik, przeglądarka zwykle uruchamia domyślny program pocztowy określony w ustawieniach systemu operacyjnego. Można to określić jako <i>desktopowy</i> sposób obsługi protokołów. +</p><p>Aplikacje WWW również mogą zapewnić obsługę takich protokołów. Od kiedy coraz więcej rodzajów aplikacji przenoszonych jest do środowiska WWW, potrzeba takiej integracji jest coraz bardziej wyraźna. W istocie, istnieje szereg aplikacji WWW do obsługi poczty elektronicznej, które mogłyby przetwarzać odnośniki <code>mailto</code>. +</p> +<h3 id="Rejestracja" name="Rejestracja">Rejestracja</h3> +<p><span class="comment">UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU</span> +</p><p>Ustawienie aplikacji jako mechanizmu obsługującego protokół nie jest skomplikowane. W zasadzie wystarczy, by witryna skorzystała z metody <code><a href="pl/DOM/window.navigator.registerProtocolHandler">registerProtocolHandler()</a></code>, by zarejestrować się w przeglądarce jako potencjalny mechanizm obsługi danego protokołu. Na przykład: +</p> +<pre>navigator.registerProtocolHandler("mailto", + "https://www.example.com/?uri=%s", + "Przykładowa poczta"); +</pre> +<p>gdzie parametrami są: +</p> +<ul><li> protokół (uwaga, bez dwukropka - przyp. tłum.); +</li><li> szablon adresu URL mechanizmu obsługi protokołu. Znaki "%s" zostaną zastąpione pełną zawartością atrybutu <code>href</code> odnośnika; tak powstały adres URL wywołany zostanie metodą GET; +</li><li> przyjazna dla użytkownika nazwa mechanizmu obsługi protokołu +</li></ul> +<p>Przeglądarka wykonując tę metodę wyświetli okno, w którym użytkownik będzie mógł wyrazić zgodę na zarejestrowanie aplikacji WWW jako mechanizmu obsługi protokołu. Firefox wyświetla następujące pytanie w obszarze powiadomień: +</p><p><img alt="Image:wph-notification.png"> +</p><p>{{ Note() }} +</p> +<h4 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h4> +<p><span class="comment">UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU</span> +</p> +<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<html lang="pl"> +<head> + <title>Przykład rejestracji obsługi protokołów</title> + <script type="text/javascript"> + navigator.registerProtocolHandler("fikcyjny", "http://starkravingfinkle.org/projects/wph/handler.php?value=%s", "Fikcyjny protokół"); + </script> +</head> +<body> + <h1>Przykład rejestracji obsługi protokołów</h1> + <p>Strona ta zainstaluje mechanizm obsługi protokołów dla protokołu <code>fikcyjny:</code>.</p> +</body> +</html> +</pre> +<h3 id="Aktywacja" name="Aktywacja">Aktywacja</h3> +<p><span class="comment">UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU</span> +Od tej pory kiedykolwiek użytkownik aktywuje odnośnik do zasobu o zarejestrowanym protokole, przeglądarka przekieruje żądanie do adresu URL dostarczonego podczas rejestracji. Firefox domyślnie poprosi uprzednio użytkownika o potwierdzenie tej czynności. +</p><p><img alt="Image:wph-launch.png"> +</p> +<h4 id="Przyk.C5.82ad_2" name="Przyk.C5.82ad_2">Przykład</h4> +<p><span class="comment">UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU</span> +</p> +<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<html lang="pl"> +<head> + <title>Test obsługi protokołów</title> +</head> +<body> + <p>Widzieliście już kiedyś <a href="fikcyjny:to%20nie%20istnieje">coś takiego</a>?</p> +</body> +</html> +</pre> +<h3 id="Obs.C5.82uga_protoko.C5.82u" name="Obs.C5.82uga_protoko.C5.82u">Obsługa protokołu</h3> +<p><span class="comment">UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU</span> +Kolejnym etapem jest obsłużenie żądania. Przeglądarka pobiera atrybut <code>href</code> odnośnika, łączy go z szablonem adresów URL podanym podczas rejestracji mechanizmu obsługi i wysyła do serwera żądanie HTTP GET z wynikowym adresem. Dla powyższego przykładu przeglądarka wyśle żądanie GET o następującym adresie: +</p> +<pre>http://starkravingfinkle.org/projects/wph/handler.php?value=fikcyjny:to%20nie%20istnieje +</pre> +<p>Po stronie serwera można odebrać przekazany adres URL i wykonać żądane akcje. +</p><p>{{ Note("Kod po stronie serwera dostanie <b>całą</b> zawartość atrybutu <code>href</code>. Oznacza to, że serwer będzie musiał podczas przetworzyć otrzymany adres URL i oddzielić protokół od danych.") }} +</p> +<h4 id="Przyk.C5.82ad_3" name="Przyk.C5.82ad_3">Przykład</h4> +<p><span class="comment">UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU</span> +</p> +<pre><?php +$value = ""; +if ( isset ( $_GET["value"] ) ) { + $value = $_GET["value"]; +} +?> + +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<html lang="pl"> +<head> + <title>Obsługa protokołów - przykład</title> +</head> +<body> + <h1>Obsługa protokołów - przykład</h1> + <p>Strona ta otwierana jest po aktywowaniu odnośnika do zasobu o protokole <code>fikcyjny:</code>. Otrzymane dane:</p> + <textarea> +<?php echo(urldecode($value)) ?> + </textarea> +</body> +</html> +</pre> +<p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Web-based_protocol_handlers", "fr": "fr/Gestionnaires_de_protocoles_web", "ja": "ja/Web-based_protocol_handlers" } ) }} diff --git a/files/pl/web/api/navigatorlanguage/index.html b/files/pl/web/api/navigatorlanguage/index.html new file mode 100644 index 0000000000..7d6b0751e7 --- /dev/null +++ b/files/pl/web/api/navigatorlanguage/index.html @@ -0,0 +1,148 @@ +--- +title: NavigatorLanguage +slug: Web/API/NavigatorLanguage +tags: + - API + - HTML-DOM + - NeedsTranslation + - No Interface + - Reference + - TopicStub +translation_of: Web/API/NavigatorLanguage +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p><code><strong>NavigatorLanguage</strong></code> contains methods and properties related to the language of the navigator.</p> + +<p>There is no object of type <code>NavigatorLanguage</code>, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>The <code>NavigatorLanguage</code></em><em> interface doesn't inherit any property.</em></p> + +<dl> + <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> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>The </em><em><code>NavigatorLanguage</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', '#navigatorlanguage', 'NavigatorLanguage')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Since the {{SpecName('HTML5 W3C')}} snapshot, the <code>languages</code> property has been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#navigatorlanguage', 'NavigatorLanguage')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial specification; snapshot of an early version{{SpecName('HTML WHATWG')}}.</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>languages</code></td> + <td>37</td> + <td>{{CompatGeckoDesktop("32")}}</td> + <td>{{CompatNo}}</td> + <td>24</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>on {{domxref("WorkerNavigator")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("35")}}</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>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><code>languages</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}} </td> + <td>{{CompatGeckoMobile("32")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>on {{domxref("WorkerNavigator")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("35")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</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/pl/web/api/navigatoronline/index.html b/files/pl/web/api/navigatoronline/index.html new file mode 100644 index 0000000000..11f6707c43 --- /dev/null +++ b/files/pl/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/pl/web/api/navigatoronline/zdarzenia_online_i_offline/index.html b/files/pl/web/api/navigatoronline/zdarzenia_online_i_offline/index.html new file mode 100644 index 0000000000..d286acc4b0 --- /dev/null +++ b/files/pl/web/api/navigatoronline/zdarzenia_online_i_offline/index.html @@ -0,0 +1,84 @@ +--- +title: Zdarzenia online i offline +slug: Web/API/NavigatorOnLine/Zdarzenia_online_i_offline +tags: + - AJAX + - DOM + - Programowanie_WWW + - Wszystkie_kategorie +translation_of: Web/API/NavigatorOnLine/Online_and_offline_events +--- +<p>{{ Fx_minversion_header(3) }} W programie <a href="pl/Firefox_3_dla_programist%c3%b3w">Firefox 3</a> zaimplementowano obsługę <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">zdarzeń online i offline</a> zdefiniowanych w <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">specyfikacji WHATWG Web Applications 1.0</a>. +</p> +<h3 id="Om.C3.B3wienie" name="Om.C3.B3wienie"> Omówienie </h3> +<p>Do stworzenia dobrej aplikacji internetowej działającej w trybie offline konieczne jest istnienie sposobu na sprawdzenie, kiedy aplikacja faktycznie znajduje się w trybie offline. W niektórych przypadkach potrzebna jest także możliwość stwierdzenia, czy aplikacja powróciła do stanu „online”. W praktyce sprowadza się to do dwóch wymagań: +</p> +<ol><li> Konieczne jest stwierdzenie, kiedy użytkownik przełącza przeglądarkę w tryb online, aby można było przeprowadzić ponowną synchronizację z serwerem. </li><li> Konieczne jest stwierdzenie, kiedy użytkownik przełącza przeglądarkę w tryb offline, aby można było odłożyć wysłanie żądania do serwera na później. </li></ol> +<p>Zdarzenia online i offline pozwalają na uproszczenie powyższych procedur. </p><p>W aplikacji internetowej może także być konieczne wymuszenie przechowywania określonych dokumentów w pamięci podręcznej zasobów offline. W tym celu w kodzie sekcji <code>HEAD</code> należy wstawić znacznik <code>LINK</code> przedstawiony poniżej: +</p> +<pre class="eval"><span class="nowiki"><link rel="offline-resource" href="mój_zasób"></span> +</pre> +<p>Przy przetwarzaniu kodu HTML przez program Firefox w wersji 3 lub nowszej dokumenty wymienione w znaczniku zostaną zapisane w specjalnej pamięci podręcznej zasobów offline. +</p> +<h3 id="Interfejs_API" name="Interfejs_API"> Interfejs API </h3> +<h4 id="navigator.onLine" name="navigator.onLine"> <code>navigator.onLine</code> </h4> +<p><code><a href="pl/DOM/window.navigator.onLine">navigator.onLine</a></code> to własność, która zwraca wartość <code>true</code> lub <code>false</code> (<code>true</code> dla trybu online, <code>false</code> dla trybu offline). Własność ta jest aktualizowana za każdym razem, gdy użytkownik przełącza przeglądarkę w tryb offline, wybierając odpowiednie polecenie menu (w programie Firefox: Plik -> Pracuj w trybie offline). +</p><p>Ponadto ta własność powinna być aktualizowana zawsze, gdy w przeglądarce nie można nawiązać połączenia z siecią. Zgodnie ze specyfikacją: +</p> +<blockquote> +Atrybut <code>navigator.onLine</code> musi zwracać wartość false, jeżeli w programie po kliknięciu odsyłacza przez użytkownika lub po wysłaniu przez skrypt żądania do zdalnej witryny nie można połączyć się z siecią (lub wiadomo, że taka próba nie powiedzie się)... +</blockquote> +<p>W programie Firefox 2 ta własność jest aktualizowana przy przełączaniu przeglądarki między trybami online i offline oraz przy utracie lub ponownym nawiązaniu połączenia z siecią (dotyczy systemów Windows i Linux). +</p><p>Własność istnieje w starszych wersjach przeglądarek Firefox i Internet Explorer (obecna specyfikacja została oparta na tych właśnie wcześniejszych implementacjach), można zatem korzystać z niej już teraz. Automatyczne wykrywanie stanu połączenia sieciowego zostało wprowadzone w programie Firefox 2. </p> +<h4 id="Zdarzenia_.22online.22_i_.22offline.22" name="Zdarzenia_.22online.22_i_.22offline.22"> Zdarzenia "<code>online</code>" i "<code>offline</code>" </h4> +<p>W programie <a href="pl/Firefox_3">Firefox 3</a> wprowadzono dwa nowe zdarzenia: "<code>online</code>" i "<code>offline</code>". Są one wywoływane w elemencie <code><body></code> każdej otwartej strony, gdy przeglądarka jest przełączana między trybem online i offline. Ponadto zdarzenie bąbelkuje od elementu <code>document.body</code>, poprzez element <code>document</code>, aż do elementu <code>window</code>. Żadnego ze zdarzeń nie można anulować (niemożliwe jest zablokowanie możliwości przełączania przeglądarki między trybami online i offline). +</p><p>Obserwatory (ang. <i>event listeners</i>) tych zdarzeń można zarejestrować na kilka sposobów: +</p> +<ul><li> przy użyciu metody <code><a href="pl/DOM/element.addEventListener">addEventListener</a></code> dla elementu <code>window</code>, <code>document</code> lub <code>document.body</code>; +</li><li> za pomocą własności <code>.ononline</code> lub <code>.onoffline</code> dla elementu <code>document</code> lub <code>document.body</code> przez przypisanie do niej obiektu <code>Function</code> języka JavaScript. (<b>Uwaga:</b> własności <code>window.ononline</code> i <code>window.onoffline</code> nie działają ze względu na zgodność z poprzednimi wersjami); +</li><li> przez ustawienie atrybutów <code>ononline="..."</code> lub <code>onoffline="..."</code> znacznika <code><body></code> w kodzie HTML. +</li></ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<p>Dostępny jest <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">prosty przykład zastosowania</a>, który pozwala na sprawdzenie działania zdarzeń. +<span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span> +</p> +<pre class="eval"> <!doctype html> + <html> + <head> + <script> + function updateOnlineStatus(msg) { + var status = document.getElementById("status"); + var condition = navigator.onLine ? "ONLINE" : "OFFLINE"; + status.setAttribute("class", condition); + var state = document.getElementById("state"); + state.innerHTML = condition; + var log = document.getElementById("log"); + log.appendChild(document.createTextNode("Zdarzenie: " + msg + "; stan=" + condition + "\n")); + } + function loaded() { + updateOnlineStatus("load"); + document.body.addEventListener("offline", function () { + updateOnlineStatus("offline") + }, false); + document.body.addEventListener("online", function () { + updateOnlineStatus("online") + }, false); + } + </script> + <style>...</style> + </head> + <body onload="loaded()"> + <div id="status"><p id="state"></p></div> + <div id="log"></div> + </body> + </html> +</pre> +<h3 id="Odsy.C5.82acze" name="Odsy.C5.82acze"> Odsyłacze </h3> +<ul><li> <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">Sekcja „Zdarzenia online i offline” w specyfikacji WHATWG Web Applications 1.0</a> +</li><li> <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">Opis błędu dotyczącego implementacji zdarzeń online i offline w programie Firefox</a> oraz <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">kontynuacja dyskusji</a> +</li><li> <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">Prosty przykład zastosowania</a> +</li><li> <a class="external" href="http://ejohn.org/blog/offline-events/">Objaśnienie zdarzeń online i offline</a> +</li></ul> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Online_and_offline_events", "es": "es/Eventos_online_y_offline", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pt": "pt/Eventos_online_e_offline" } ) }} diff --git a/files/pl/web/api/navigatorplugins/index.html b/files/pl/web/api/navigatorplugins/index.html new file mode 100644 index 0000000000..c009a19a07 --- /dev/null +++ b/files/pl/web/api/navigatorplugins/index.html @@ -0,0 +1,111 @@ +--- +title: NavigatorPlugins +slug: Web/API/NavigatorPlugins +tags: + - API + - Experimental + - HTML-DOM + - NeedsTranslation + - TopicStub +translation_of: Web/API/NavigatorPlugins +--- +<p>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</p> + +<p>The <code><strong>NavigatorPlugins</strong></code> interface contains methods and properties related to the plugins installed in the browser.</p> + +<p>There is no object of type <code>NavigatorPlugins</code>, but other interfaces, like {{domxref("Navigator")}}, implement it.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.</dd> + <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>The <code>NavigatorPlugins</code></em><em> interface doesn't inherit any method.</em></p> + +<dl> + <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> +</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', '#navigatorplugins', 'NavigatorPlugins')}}</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{domxref("Navigator")}} interface that implements it.</li> +</ul> diff --git a/files/pl/web/api/parentnode/childelementcount/index.html b/files/pl/web/api/parentnode/childelementcount/index.html new file mode 100644 index 0000000000..f3bbff6554 --- /dev/null +++ b/files/pl/web/api/parentnode/childelementcount/index.html @@ -0,0 +1,93 @@ +--- +title: ParentNode.childElementCount +slug: Web/API/ParentNode/childElementCount +translation_of: Web/API/ParentNode/childElementCount +--- +<div>{{ APIRef("DOM") }}</div> + +<p><code><strong>ParentNode.childElementCount</strong></code> jest właściwością tylko do odczytu zwraca ona liczbę o typie <code>unsigned long</code>, która zwraca ilość elementów dzieci w elemencie rodzicu.</p> + +<div class="note"> +<p>Ta właściwość została początkowo zdefiniowana w interfejsie {{domxref("ElementTraversal")}}. Interfejs ten {{domxref("Node")}}, posiadał 2 różne zestawy właściwości - te, które mają elementy dzieci i te elementy, które są dziećmi. Dzieci zostały przeniesione do interfejsu {{domxref("ChildNode")}}, a rodzice do {{domxref("ParentNode")}}. Jest to zmiana techniczna, która nie powinna mieć wpływu na kompatybilność.</p> +</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">var <var>liczbaDzieci</var> = <em>node</em>.childElementCount; +</pre> + +<dl> + <dt><code>liczbaDzieci</code></dt> + <dd>Wartość która zostanie zwrócona o typie <code>unsigned long</code> (maksymalnie 64 bitowa liczba całkowita dodatnia).</dd> + <dt><code>node</code></dt> + <dd>Objekt reprezentowany przez {{domxref("Document")}}, {{domxref("DocumentFragment")}}, lub {{domxref("Element")}}.</dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush:js">var elementRodzic = document.getElementById('tata'); +if (elementRodzic.childElementCount > 0) { + // Zrób coś +} +</pre> + +<h2 id="Łatka_dla_IE8_IE9_Safari">Łatka dla IE8 & IE9 & Safari</h2> + +<p>Ta właściwość jest niewspierana na przeglądarkach IE9 i poniżej oraz Safari, jest niewspierana dla obiektów <code>Document</code> i <code>DocumentFragment</code>.</p> + +<pre class="brush:js">;(function(constructor) { + if (constructor && + constructor.prototype && + constructor.prototype.childElementCount == null) { + Object.defineProperty(constructor.prototype, 'childElementCount', { + get: function() { + var i = 0, dzieci = 0, wezel, iloscElementow = this.childNodes; + while (wezel = iloscElementow[i++]) { + if (wezel.nodeType === 1) dzieci++; + } + return dzieci; + } + }); + } +})(window.Node || window.Element); +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Dzieli interfejs <code>ElementTraversal</code> na {{domxref("ChildNode")}} i <code>ParentNode</code>. Obecna właściwość jest zdefinionawa w tym drugim.<br> + {{domxref("Document")}} i {{domxref("DocumentFragment")}} zaimlementowały już nowe interfejsy.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td> + <p>Na chwilę obecną dodano wstępną definicje do interfejsu <code>ElementTraversal</code> i wykorzystywana jest ona w klasie {{domxref("Element")}}.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + + + +<p>{{Compat("api.ParentNode.childElementCount")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Interfejs {{domxref("ParentNode")}} i {{domxref("ChildNode")}}.</li> + <li> + <div class="syntaxbox">Obiekty które wykorzystują powyższe interfejsy: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}}.</div> + </li> +</ul> diff --git a/files/pl/web/api/parentnode/children/index.html b/files/pl/web/api/parentnode/children/index.html new file mode 100644 index 0000000000..1d8576d64b --- /dev/null +++ b/files/pl/web/api/parentnode/children/index.html @@ -0,0 +1,96 @@ +--- +title: ParentNode.children +slug: Web/API/ParentNode/children +tags: + - API + - Dzieci + - Dziecko + - Kolekcja HTML + - Potomek + - Potomkowie + - Właściwość + - węzeł +translation_of: Web/API/ParentNode/children +--- +<div>{{ APIRef("DOM") }}</div> + +<p><span class="seoSummary">The {{domxref("ParentNode")}} właściwość <code><strong>children</strong></code> jest właściwością tylko do odczytu (read-only) która zwraca aktualną kolekcję {{domxref("HTMLCollection")}} zawierającą wszystkie elementy podrzędne {{domxref("Element", "elements")}} węzła, na którym został wywołany.</span></p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate">let <var>children</var> = <var>node</var>.children;</pre> + +<h3 id="Value">Value</h3> + +<p>{{ domxref("HTMLCollection") }} aktualna, uporządkowana kolekcja elementów DOM które są potomkami <code><var>node</var></code>. Możesz otrzymać pojedynczych potomków kolekcji używając albo {{domxref("HTMLCollection.item()", "item()")}} metody na kolekcji, albo używając notacji w stylu tablicowym języka JavaScript.</p> + +<p>Jeżeli element node nie ma potomków, wtedy <code>children</code> jest pustą listą o długości 0 (<code>length</code> of <code>0)</code>.</p> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: js notranslate">const foo = document.getElementById('foo'); +for (let i = 0; i < foo.children.length; i++) { + console.log(foo.children[i].tagName); +} +</pre> + +<h2 id="Uzupełnienie">Uzupełnienie</h2> + +<pre class="brush: js notranslate">// Nadpisuje natywny prototyp 'children'. +// Dodaje Document & DocumentFragment wsparcie dla IE9 & Safari. +// Zwraca tablicę zamiast HTMLCollection. +;(function(constructor) { + if (constructor && + constructor.prototype && + constructor.prototype.children == null) { + Object.defineProperty(constructor.prototype, 'children', { + get: function() { + let i = 0, node, nodes = this.childNodes, children = []; + while (node = nodes[i++]) { + if (node.nodeType === 1) { + children.push(node); + } + } + return children; + } + }); + } +})(window.Node || window.Element); +</pre> + +<h2 id="Specyfikacja">Specyfikacja</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-children', 'ParentNode.children')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Wstępna definicja</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<div class="hidden">Tablica zgodności na tej stronie jest generowana z danych strukturalnych. Jeśli chcesz przyczynić się do do tych danych, proszę sprawdź <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam swoją propozycję (a pull request).</div> + +<p>{{Compat("api.ParentNode.children")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Interfejsy {{domxref("ParentNode")}} {{domxref("ChildNode")}}.</li> + <li> + <div class="syntaxbox">Typy obiektów implementujące ten interfejs: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}}.</div> + </li> + <li> + <div class="syntaxbox">{{domxref("Node.childNodes")}}</div> + </li> +</ul> diff --git a/files/pl/web/api/parentnode/index.html b/files/pl/web/api/parentnode/index.html new file mode 100644 index 0000000000..2cbf79f11c --- /dev/null +++ b/files/pl/web/api/parentnode/index.html @@ -0,0 +1,90 @@ +--- +title: ParentNode +slug: Web/API/ParentNode +tags: + - API + - DOM + - Finding Elements + - Finding Nodes + - Interface + - Locating Elements + - Locating Nodes + - Managing Elements + - Managing Nodes + - Mixin + - NeedsTranslation + - Node + - ParentNode + - Reference + - Selectors + - TopicStub +translation_of: Web/API/ParentNode +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">The <code><strong>ParentNode</strong></code> mixin contains methods and properties that are common to all types of {{domxref("Node")}} objects that can have children.</span> It's implemented by {{domxref("Element")}}, {{domxref("Document")}}, and {{domxref("DocumentFragment")}} objects.</p> + +<p>See <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a> to learn how to use <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selectors</a> to find nodes or elements of interest.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}</dt> + <dd>Returns the number of children of this <code>ParentNode</code> which are elements.</dd> + <dt>{{domxref("ParentNode.children")}} {{readonlyInline}}</dt> + <dd>Returns a live {{domxref("HTMLCollection")}} containing all of the {{domxref("Element")}} objects that are children of this <code>ParentNode</code>, omitting all of its non-element nodes.</dd> + <dt>{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}</dt> + <dd>Returns the first node which is both a child of this <code>ParentNode</code> <em>and</em> is also an <code>Element</code>, or <code>null</code> if there is none.</dd> + <dt>{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}</dt> + <dd>Returns the last node which is both a child of this <code>ParentNode</code> <em>and</em> is an <code>Element</code>, or <code>null</code> if there is none.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt> + <dd>Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects after the last child of the <code>ParentNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> + <dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt> + <dd>Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects before the first child of the <code>ParentNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> + <dt>{{domxref("ParentNode.querySelector()")}}</dt> + <dd>Returns the first {{domxref("Element")}} with the current element as root that matches the specified group of selectors.</dd> + <dt>{{domxref("ParentNode.querySelectorAll()")}}</dt> + <dd>Returns a {{domxref("NodeList")}} representing a list of elements with the current element as root that matches the specified group of selectors.</dd> +</dl> + +<h2 id="Specification">Specification</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', '#parentnode', 'ParentNode')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Split the <code>ElementTraversal</code> interface into {{domxref("ChildNode")}} and {{domxref("ParentNode")}}. The {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, and {{domxref("ParentNode.childElementCount")}} properties are now defined on the latter. Added the {{domxref("ParentNode.children")}} property, and the {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, and {{domxref("ParentNode.prepend()")}} 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 used it on {{domxref("Element")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.ParentNode")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{domxref("ChildNode")}} pure interface.</li> + <li> + <div class="syntaxbox">Object types implementing this mixin: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div> + </li> +</ul> diff --git a/files/pl/web/api/powiadomienie/index.html b/files/pl/web/api/powiadomienie/index.html new file mode 100644 index 0000000000..e314c36a3a --- /dev/null +++ b/files/pl/web/api/powiadomienie/index.html @@ -0,0 +1,348 @@ +--- +title: Powiadomienie +slug: Web/API/powiadomienie +tags: + - API + - JS Powiadomienia + - Powiadomienia + - Powiadomienie +translation_of: Web/API/Notification +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p>Interfejs Powiadomień {{domxref('Notifications_API','Notifications API')}} jest używany do konfigurowania i wyświetlania powiadomień komputerowych do użytkownika .</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt>{{domxref("Notification.Notification()")}}</dt> + <dd>Tworzy nową instancję obiektu {{domxref('Notification')}} .</dd> +</dl> + +<h2 id="Cechy">Cechy</h2> + +<h3 id="Statyczne_Cechy">Statyczne Cechy</h3> + +<p>Te Cechy są dostępne tylko dla obiektu powiadomienia.</p> + +<dl> + <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt> + <dd>Linia reprezentująca obecne uprawnienia do wyświetlania powiadomień.Możliwe Wartośći to:denied(Użytkownik odmawia do wyświetlania powiadomień), granted(Użytkownik zaakceptował wyświetlanie powiadomień),albo default(Wybór użytkownika jest nieznany i dlatego przeglądarka zachowuje się jak przy odmowie).</dd> +</dl> + +<h3 id="Cechy_Instancji">Cechy Instancji</h3> + +<p>Te Cechy są dostępne tylko dla obiektu powiadomień.</p> + +<dl> + <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt> + <dd>Tytuł powiadomienia jak określone w opcjach parametru konstruktora.</dd> + <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt> + <dd>Kierunek tekstu powiadomienia jak określone w opcjach parametru konstruktora.</dd> + <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt> + <dd>Język kodu powiadomienia jak określone w opcjach parametru konstruktora.</dd> + <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt> + <dd>Tekst powiadomienia jak określone w opcjach parametru konstruktora.</dd> + <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt> + <dd>ID powiadomienia (jeżeli jakiekolwiek) jak określone w opcjach parametru konstruktora.</dd> + <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt> + <dd>Url obrazku użytego w powiadomieniu jak określone w opcjach parametru konstruktora.</dd> + <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt> + <dd>Zwraca klon struktury daty powiadomienia.</dd> + <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt> + <dd>Opisuje czy powiadomienie powinno być ciche,takie jak bez dźwięku czy wbiracji bez względu na ustawienia urządzenia.</dd> +</dl> + +<h4 id="Nie_wspierane_cechy">Nie wspierane cechy</h4> + +<p>Pokazane Cechy są najbardziej aktualną ze specyfikacją, ale nie są wspierane narazie przez żadną przeglądarkę.Wskazane jest aby sprawdzać regularnie czy status się zaktualizował , i daj nam znać jeżeli znajdziesz nie aktualne informacje.</p> + +<dl> + <dt>{{domxref("Notification.noscreen")}} {{readonlyinline}}</dt> + <dd>Określa, czy należy włączyć powiadomienia na ekranie urządzenia, czy też nie.</dd> + <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt> + <dd>Określa, czy użytkownik powinien być powiadamiany po nowym powiadomieniu i zastąpić stare powiadomienie.</dd> + <dt>{{domxref("Notification.sound")}} {{readonlyinline}}</dt> + <dd>Określa dźwięk do odtworzenia wraz z powiadomieniem,za miejscę podstawowego powiadomienia systemowego.</dd> + <dt>{{domxref("Notification.sticky")}} {{readonlyinline}}</dt> + <dd>Określa czy powiadomienie powinno być trudniejsze do usunięcia przez użytkownika, klejące 'sticky'.</dd> + <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt> + <dd>Określa wibrację urządzenia do emisji przez urządzenie.</dd> +</dl> + +<h4 id="Obsługa_zdarzeń">Obsługa zdarzeń</h4> + +<dl> + <dt>{{domxref("Notification.onclick")}}</dt> + <dd>Obsługa dla zdarzenia {{event("click")}}.Odpalane przy każdym kliknięciu powiadomienia.</dd> + <dt>{{domxref("Notification.onerror")}}</dt> + <dd>Obsługa dla zdarzenia {{event("error")}}.Odpalane przy każdym razie kiedy powiadomienie będzie napotykało błąd.</dd> +</dl> + +<h4 id="Przestarzała_obsługa">Przestarzała obsługa</h4> + +<p>Pokazana obsługa zdarzeń jest nadal wspierana w sekcji poniższej {{anch("browser compatibility")}},ale nie pokazane w obecnej specyfikacji. I w związku z tym, aby bezpiecznie założyć, że są przestarzałe mogą przestać działać w przyszłych wersjach przeglądarek.</p> + +<dl> + <dt>{{domxref("Notification.onclose")}}</dt> + <dd>Obsługa zdażenia {{event("close")}}. Zamyka powiadomienie.</dd> + <dt>{{domxref("Notification.onshow")}}</dt> + <dd>Obsługa zdażenia {{event("show")}}.Pokazuje gdy powiadomienie jest pokazywane.</dd> +</dl> + +<h2 id="Metoda">Metoda</h2> + +<h3 id="Statyczna_metoda">Statyczna metoda</h3> + +<p>Te metody są dostępne tylko dla obiektu powiadomień.</p> + +<dl> + <dt>{{domxref("Notification.requestPermission()")}}</dt> + <dd>Requests permission from the user to display notifications.</dd> +</dl> + +<h3 id="Metoda_instacji">Metoda instacji</h3> + +<p>Te cechy są dostępne tylko dla obiektu powiadomień albo to <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain" name="prototyp"><code>prototype</code></a>. Obiekt powiadomień pobiera to z interfejsu {{domxref("EventTarget")}}.</p> + +<dl> + <dt>{{domxref("Notification.close()")}}</dt> + <dd>Programowo zamyka powiadomienie.</dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<p>W podstawowtym HTMLu:</p> + +<pre class="brush: html"><button onclick="notifyMe()">Pokaż Powiadomienie!</button></pre> + +<p>Jest to możliwe aby wysłać powiadomienie - tutaj pokazujemy jak łatwo i w kompletnym składzie kodu zobaczyć czy powiadomienia są wspierane,potem sprawdzić uprawnienia czy zostały nadane dla obecnego dźwięku powiadomień, potem sprawdź uprawnienia jeżeli potrzebne,przed wysłaniem powiadomienia. </p> + +<pre class="brush: js">function notifyMe() { + // Sprawdzamy czy przeglądarka obsługuje powiadomienia. + if (!("Notification" in window)) { + alert("Ta przeglądarka nie obsługuje powiadomień"); + } + + // Sprawdźmy czy uprawnienia dla powiadomienia zostały nadane + else if (Notification.permission === "granted") { + // jeżeli są tworzymy powiadomienie + var notification = new Notification("Hi there!"); + } + + // W innym przypadku tworzymy zapytanie o uprawnienia + else if (Notification.permission !== 'denied') { + Notification.requestPermission(function (permission) { + //Jeżeli użytkownik zaakceptuje tworzymy powiadomienie + if (permission === "granted") { + var notification = new Notification("Hi there!"); + } + }); + } + + // Na koniec, jeżeli użytkownik odmówił powiadomień i chcesz szanować go + // nie ma potrzeby dręczyć go zapytaniami +}</pre> + +<p>{{EmbedLiveSample('Przyk%C5%82ad', '100%', 30)}}</p> + +<p>W wielu przypadkach, nie potrzebujesz tworzyć nowych form. Dla przykładu, w naszym <a href="http://mdn.github.io/emogotchi/">Emogotchi demo</a> (<a href="https://github.com/mdn/emogotchi" name="Zobacz kod źródłowy">see source code</a>), Prosto odpalamy {{domxref("Notification.requestPermission")}} aby sprawdzać czy możemy dostać uprawnienia do wysyłania powiadomień: </p> + +<pre class="brush: js">Notification.requestPermission();</pre> + +<p>Potem odpalamy funkcje <code>spawnNotification()</code> kiedy chcemy odpalić powiadomienie — to jest przekazywane do argumentu opisanego tekstu,ikony i tytułu który chcemy, potem tworzy konieczne opcje obiektu i odpala powiadomienie używając konstruktora {{domxref("Notification.Notification","Notification()")}}.</p> + +<pre class="brush: js">function spawnNotification(theBody,theIcon,theTitle) { + var options = { + body: theBody, + icon: theIcon + } + var n = new Notification(theTitle,options); +}</pre> + +<h2 id="Specifikacja">Specifikacja</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 Notifications')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_Przeglądarek">Kompatybilność Przeglądarek</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>Podstawowa usługa</td> + <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br> + 22</td> + <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br> + 22</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>6<sup>[3]</sup></td> + </tr> + <tr> + <td><code>ikona</code></td> + <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br> + 22</td> + <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br> + 22</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("41.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>silent</code></td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>noscreen</code>, <code>renotify</code>, <code>sound</code>, <code>sticky</code></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>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> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br> + 22</td> + <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br> + 1.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + </tr> + <tr> + <td><code>icon</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br> + 22</td> + <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br> + 1.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Available in workers</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> + <tr> + <td><code>silent</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + <tr> + <td><code>noscreen</code>, <code>renotify</code>, <code>sound</code>, <code>sticky</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Before Chrome 22, the support for notification followed an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.</p> + +<p>Before Chrome 32, {{domxref("Notification.permission")}} was not supported.</p> + +<p>Before Chrome 42, service worker additions were not supported.</p> + +<p>[2] 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.</p> + +<p>Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the <code>show</code> method and supported only the <code>click</code> and <code>close</code> events.</p> + +<p>Nick Desaulniers wrote a <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> to cover both newer and older implementations.</p> + +<p>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 without the icon, then the icon is fetched, but it works on all versions of Firefox OS.</p> + +<p>When using notifications in a Firefox OS app, be sure to add the <code>desktop-notification</code> permission in your manifest file. Notifications can be used at any permission level, hosted or above: <code>"permissions": { "desktop-notification": {} }</code></p> + +<p>[3] Safari zaczeło wspierać powiadomienia z wersją Safari 6,ale tylko od Mac OSX 10.8+(Mountain Lion).</p> + +<h2 id="Zobacz_Także">Zobacz Także</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API" lang="PL" name="Używanie API Powiadomień">Using the Notifications API</a></li> +</ul> diff --git a/files/pl/web/api/push_api/index.html b/files/pl/web/api/push_api/index.html new file mode 100644 index 0000000000..e889cb6c01 --- /dev/null +++ b/files/pl/web/api/push_api/index.html @@ -0,0 +1,167 @@ +--- +title: Push API +slug: Web/API/Push_API +translation_of: Web/API/Push_API +--- +<div>{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}</div> + +<p class="summary"><strong>Push API</strong> daje aplikacjom web możliwość odbierania wiadomości przesłanych z serwera, niezależnie do tego czy aplikacja pracuje w tle, lub jest wogóle załadowana w przeglądarce internetowej. To pozwala programistom dostarczać (asynchronicznie) powiadomienia i aktualizacje do użytkowników którzy zezwolili na przesyłanie notyfikacj, w efekcie mamy lepszą komunikację z użytkownikiem, którzy dostają nowe treści w odpowiednim czasie.th timely new content.</p> + +<h2 id="Pojęcia_i_stosowanie">Pojęcia i stosowanie</h2> + +<p>For an app to receive push messages, it has to have an active <a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a>. When the service worker is active, it can subscribe to push notifications, using {{domxref("PushManager.subscribe()")}}.</p> + +<p>The resulting {{domxref("PushSubscription")}} includes all the information that the application needs to send a push message: an endpoint and the encryption key needed for sending data.</p> + +<p>The service worker will be started as necessary to handle incoming push messages, which are delivered to the {{domxref("ServiceWorkerGlobalScope.onpush")}} event handler. This allows apps to react to push messages being received, for example, by displaying a notification (using {{domxref("ServiceWorkerRegistration.showNotification()")}}.)</p> + +<p>Each subscription is unique to a service worker. The endpoint for the subscription is a unique <a href="http://www.w3.org/TR/capability-urls/">capability URL</a>: knowledge of the endpoint is all that is necessary to send a message to your application. The endpoint URL therefore needs to be kept secret, or other applications might be able to send push messages to your application.</p> + +<p>Activating a service worker to deliver a push message can result in increased resource usage, particularly of the battery. Different browsers have different schemes for handling this, there is currently no standard mechanism. Firefox allows a limited number (quota) of push messages to be sent to an application, although Push messages that generate notifications are exempt from this limit. The limit is refreshed each time the site is visited. In comparison, Chrome applies no limit, but requires that every push message causes a notification to be displayed.</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 notifications 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="Interfejsy">Interfejsy</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="Wzbogacenia_Service_worker">Wzbogacenia Service worker</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="Przykłady">Przykłady</h2> + +<p><a href="https://serviceworke.rs/">ServiceWorker Cookbook</a> Mozilli zawiera dużo przydatnych przykładów Push.</p> + +<h2 id="Specyfikacje">Specyfikacje</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")}}</td> + <td>{{Spec2("Push API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_przeglądarek">Zgodność przeglądarek</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funkcjonalność</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] Aktualnie dostępne tylko dla wersji desktop przeglądarek Firefox; również, wiadomości push są dostarczane tylko wtedy gdy Firefox jest uruchomiony.</li> + <li>[2] Aktualnie nie jest zaimplementowane. Zobacz <a href="https://dev.modern.ie/platform/status/pushapi/">Microsoft Edge status information</a>.</li> + <li>[3] Push (i <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>) zostały zablokowane w wersjach przeglądarek <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</li> + <li>[4] Push jest już dostępny (domoyślnie) w przeglądarkach Firefox oraz Android version 48.</li> +</ul> + +<h2 id="Zobacz_również">Zobacz również</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="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>, Matt Gaunt</li> + <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li> +</ul> diff --git a/files/pl/web/api/range/index.html b/files/pl/web/api/range/index.html new file mode 100644 index 0000000000..cabb00df2c --- /dev/null +++ b/files/pl/web/api/range/index.html @@ -0,0 +1,105 @@ +--- +title: range +slug: Web/API/Range +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Range +--- +<p>{{ ApiRef("DOM") }}Obiekt <code>Range</code> reprezentuje fragment dokumentu, który stanowi węzeł oraz część węzła tekstowego w danym dokumencie.</p> + +<p>A range can be created using the <code><a href="pl/DOM/document.createRange">createRange</a></code> method of the <code><a href="pl/DOM/document">Document</a></code> object. Range objects can also be retrieved by using the <code><a href="pl/DOM/Selection/getRangeAt">getRangeAt</a></code> method of the <code><a href="pl/DOM/Selection">selection</a></code> object.</p> + +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3> + +<dl> + <dt><a href="pl/DOM/range.collapsed">collapsed</a></dt> + <dd>Returns a boolean indicating whether the range's start and end points are at the same position.</dd> + <dt><a href="pl/DOM/range.commonAncestorContainer">commonAncestorContainer</a></dt> + <dd>Returns the deepest Node that contains the startContainer and endContainer Nodes.</dd> + <dt><a href="pl/DOM/range.endContainer">endContainer</a></dt> + <dd>Returns the Node within which the Range ends.</dd> + <dt><a href="pl/DOM/range.endOffset">endOffset</a></dt> + <dd>Returns a number representing where in the endContainer the Range ends.</dd> + <dt><a href="pl/DOM/range.startContainer">startContainer</a></dt> + <dd>Returns the Node within which the Range starts.</dd> + <dt><a href="pl/DOM/range.startOffset">startOffset</a></dt> + <dd>Returns a number representing where in the startContainer the Range starts.</dd> +</dl> + +<h3 id="Metody" name="Metody">Metody</h3> + +<h4 id="Metody_pozycjonowania" name="Metody_pozycjonowania">Metody pozycjonowania</h4> + +<p>Te metody ustawiają punkt początkowy i końcowy obiektu range.</p> + +<dl> + <dt><a href="pl/DOM/range.setStart">setStart</a></dt> + <dd>Ustawia pozycję początkową obiektu range.</dd> + <dt><a href="pl/DOM/range.setEnd">setEnd</a></dt> + <dd>Ustawia pozycję końcową obiektu range.</dd> + <dt><a href="pl/DOM/range.setStartBefore">setStartBefore</a></dt> + <dd>Ustawia pozycję początkowa dla obiektu range w odniesieniu do innego węzła.</dd> + <dt><a href="pl/DOM/range.setStartAfter">setStartAfter</a></dt> + <dd>Ustawia pozycję początkowa dla obiektu range w odniesieniu do innego węzła.</dd> + <dt><a href="pl/DOM/range.setEndBefore">setEndBefore</a></dt> + <dd>Ustawia pozycję końcową dla obiektu range w odniesieniu do innego węzła.</dd> + <dt><a href="pl/DOM/range.setEndAfter">setEndAfter</a></dt> + <dd>Ustawia pozycję końcową dla obiektu range w odniesieniu do innego węzła.</dd> + <dt><a href="pl/DOM/range.selectNode">selectNode</a></dt> + <dd>Ustawia obiekt range, aby zawierał węzeł wraz z jego zawartością.</dd> + <dt><a href="pl/DOM/range.selectNodeContents">selectNodeContents</a></dt> + <dd>Ustawia obiekt range, aby zawierał zawartość węzła.</dd> + <dt><a href="pl/DOM/range.collapse">collapse</a></dt> + <dd>Zawija obiekt range do jednego z jego punktów granicznych.</dd> +</dl> + +<h4 id="Metody_edytuj.C4.85ce" name="Metody_edytuj.C4.85ce">Metody edytujące</h4> + +<p>These methods retrieve Nodes from a range and modify the contents of a range.</p> + +<dl> + <dt><a href="pl/DOM/range.cloneContents">cloneContents</a></dt> + <dd>Returns a document fragment copying the nodes of a Range.</dd> + <dt><a href="pl/DOM/range.deleteContents">deleteContents</a></dt> + <dd>Removes the contents of a Range from the document.</dd> + <dt><a href="pl/DOM/range.extractContents">extractContents</a></dt> + <dd>Moves contents of a Range from the document tree into a document fragment</dd> + <dt><a href="pl/DOM/range.insertNode">insertNode</a></dt> + <dd>Insert a node at the start of a Range.</dd> + <dt><a href="pl/DOM/range.surroundContents">surroundContents</a></dt> + <dd>Moves content of a Range into a new node.</dd> +</dl> + +<h4 id="Inne_metody" name="Inne_metody">Inne metody</h4> + +<dl> + <dt><a href="pl/DOM/range.compareBoundaryPoints">compareBoundaryPoints</a></dt> + <dd>Porównuje punkty graniczne dwóch obiektów range.</dd> + <dt><a href="pl/DOM/range.cloneRange">cloneRange</a></dt> + <dd>Zwraca obiekt range z punktami granicznymi identycznymi z klonowanym obiektem range.</dd> + <dt><a href="pl/DOM/range.detach">detach</a></dt> + <dd>Releases Range from use to improve performance.</dd> + <dt><a href="pl/DOM/range.toString">toString</a></dt> + <dd>Zwraca tekst z obiektu range.</dd> +</dl> + +<h4 id="Metody_Gecko" name="Metody_Gecko">Metody Gecko</h4> + +<p>Ta sekcja opisuje szczególne metody <code>Range</code> Mozilli nie będące częścią specyfikacji W3C DOM.</p> + +<dl> + <dt><a href="pl/DOM/range.compareNode">compareNode</a> {{ Obsolete_inline() }}</dt> + <dd>Zwraca stałą opisującą czy węzeł znajduje się przed, za, wewnątrz lub otacza obiekt range .</dd> + <dt><a href="pl/DOM/range.comparePoint">comparePoint</a></dt> + <dd>Zwraca -1, 0 lub 1 wskazując czy punkt porównania występuje przed, wewnątrz lub za obiektem range.</dd> + <dt><a href="pl/DOM/range.createContextualFragment">createContextualFragment</a></dt> + <dd>Zwraca fragment dokumentu utworzony z danego łańcucha kodu.</dd> + <dt><a href="pl/DOM/range.intersectsNode">intersectsNode</a> {{ Obsolete_inline() }}</dt> + <dd>Zwraca wartość Boolean określającą czy dany węzeł przecina obiekt range.</dd> + <dt><a href="pl/DOM/range.isPointInRange">isPointInRange</a></dt> + <dd>Zwraca wartość Boolean określającą czy dany punkt jest zawarty w obiekcie range.</dd> +</dl> diff --git a/files/pl/web/api/response/index.html b/files/pl/web/api/response/index.html new file mode 100644 index 0000000000..394a5a4a4d --- /dev/null +++ b/files/pl/web/api/response/index.html @@ -0,0 +1,132 @@ +--- +title: Response +slug: Web/API/Response +tags: + - API + - Experimental + - Fetch + - Fetch API + - Interface + - NeedsTranslation + - Reference + - Response + - TopicStub +translation_of: Web/API/Response +--- +<div>{{APIRef("Fetch API")}}</div> + +<p>The <strong><code>Response</code></strong> interface of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents the response to a request.</p> + +<p>You can create a new <code>Response</code> object using the {{domxref("Response.Response()")}} constructor, but you are more likely to encounter a Response object being returned as the result of another API operation, for example a service worker {{domxref("Fetchevent.respondWith")}}, or a simple {{domxref("GlobalFetch.fetch()")}}.</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("Response.Response","Response()")}}</dt> + <dd>Creates a new <code>Response</code> object.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt> + <dd>Contains the {{domxref("Headers")}} object associated with the response.</dd> + <dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt> + <dd>Contains a boolean stating whether the response was successful (status in the range 200-299) or not.</dd> + <dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt> + <dd>Indicates whether or not the response is the result of a redirect; that is, its URL list has more than one entry.</dd> + <dt>{{domxref("Response.status")}} {{readonlyinline}}</dt> + <dd>Contains the status code of the response (e.g., <code>200</code> for a success).</dd> + <dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt> + <dd>Contains the status message corresponding to the status code (e.g., <code>OK</code> for <code>200</code>).</dd> + <dt>{{domxref("Response.trailers")}}</dt> + <dd>Contains a {{domxref("Promise")}} resolving to a {{domxref("Headers")}} object associated with the response with {{domxref("Response.headers")}} for values of the HTTP {{HTTPHeader("Trailer")}} header.</dd> + <dt>{{domxref("Response.type")}} {{readonlyinline}}</dt> + <dd>Contains the type of the response (e.g., <code>basic</code>, <code>cors</code>).</dd> + <dt>{{domxref("Response.url")}} {{readonlyinline}}</dt> + <dd>Contains the URL of the response.</dd> + <dt>{{domxref("Response.useFinalURL")}}</dt> + <dd>Contains a boolean stating whether this is the final URL of the response.</dd> +</dl> + +<p><code>Response</code> implements {{domxref("Body")}}, so it also has the following properties available to it:</p> + +<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>Stores a {{domxref("Boolean")}} that declares whether the body has been used in a response yet.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Response.clone()")}}</dt> + <dd>Creates a clone of a <code>Response</code> object.</dd> + <dt>{{domxref("Response.error()")}}</dt> + <dd>Returns a new <code>Response</code> object associated with a network error.</dd> + <dt>{{domxref("Response.redirect()")}}</dt> + <dd>Creates a new response with a different URL.</dd> +</dl> + +<p><code>Response</code> implements {{domxref("Body")}}, so it also has the following methods available to it:</p> + +<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).</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>In our <a href="https://github.com/mdn/fetch-examples/tree/master/basic-fetch">basic fetch example</a> (<a href="http://mdn.github.io/fetch-examples/basic-fetch/">run example live</a>) we use a simple <code>fetch()</code> call to grab an image and display it in an {{htmlelement("img")}} tag. The <code>fetch()</code> call returns a promise, which resolves with the <code>Response</code> object associated with the resource fetch operation. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.</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>You can also use the {{domxref("Response.Response()")}} constructor to create your own custom <code>Response</code> object:</p> + +<pre class="brush: js">const response = new Response();</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('Fetch','#response-class','Response')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Response")}}</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> diff --git a/files/pl/web/api/screen/colordepth/index.html b/files/pl/web/api/screen/colordepth/index.html new file mode 100644 index 0000000000..89c06c4b8c --- /dev/null +++ b/files/pl/web/api/screen/colordepth/index.html @@ -0,0 +1,43 @@ +--- +title: Screen.colorDepth +slug: Web/API/Screen/colorDepth +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Screen/colorDepth +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca głębię koloru ekranu.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">bitDepth = window.screen.colorDepth +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">// Sprawdzenie głębi koloru ekranu +if ( window.screen.colorDepth < 8) { + // Użycie wersji strony z małą ilością kolorów +} else { + // Użycie prawidłowej wersji strony, o pełnej głębi kolorów +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Zobacz także <code><a href="pl/DOM/window.screen.pixelDepth">window.screen.pixelDepth</a></code>.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>{{ DOM0() }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.screen.colorDepth", "ja": "ja/DOM/window.screen.colorDepth" } ) }}</p> diff --git a/files/pl/web/api/screen/index.html b/files/pl/web/api/screen/index.html new file mode 100644 index 0000000000..91ce6c3476 --- /dev/null +++ b/files/pl/web/api/screen/index.html @@ -0,0 +1,74 @@ +--- +title: Screen +slug: Web/API/Screen +translation_of: Web/API/Screen +--- +<div>{{APIRef("CSSOM View")}}</div> + +<p>The <code>Screen</code> interface represents a screen, usually the one on which the current window is being rendered.</p> + +<p>Usually it is the one on which the current window is being rendered, obtained using <code>window.screen</code>.</p> + +<h2 id="Example" name="Example">Properties</h2> + +<dl> + <dt>{{domxref("Screen.availTop")}}</dt> + <dd>Specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.</dd> + <dt>{{domxref("Screen.availLeft")}}</dt> + <dd>Returns the first available pixel available from the left side of the screen.</dd> + <dt>{{domxref("Screen.availHeight")}}</dt> + <dd>Specifies the height of the screen, in pixels, minus permanent or semipermanent user interface features displayed by the operating system, such as the Taskbar on Windows.</dd> + <dt>{{domxref("Screen.availWidth")}}</dt> + <dd>Returns the amount of horizontal space in pixels available to the window.</dd> + <dt>{{domxref("Screen.colorDepth")}}</dt> + <dd>Returns the color depth of the screen.</dd> + <dt>{{domxref("Screen.height")}}</dt> + <dd>Returns the height of the screen in pixels.</dd> + <dt>{{domxref("Screen.left")}}</dt> + <dd>Returns the distance in pixels from the left side of the main screen to the left side of the current screen.</dd> + <dt>{{domxref("Screen.orientation")}}</dt> + <dd>Returns the current orientation of the screen.</dd> + <dt>{{domxref("Screen.pixelDepth")}}</dt> + <dd>Gets the bit depth of the screen.</dd> + <dt>{{domxref("Screen.top")}}</dt> + <dd>Returns the distance in pixels from the top side of the current screen.</dd> + <dt>{{domxref("Screen.width")}}</dt> + <dd>Returns the width of the screen.</dd> + <dt>{{domxref("Screen.mozEnabled")}} {{gecko_minversion_inline("12.0")}}</dt> + <dd>Boolean. Setting to false will turn off the device's screen.</dd> + <dt>{{domxref("Screen.mozBrightness")}} {{gecko_minversion_inline("12.0")}}</dt> + <dd>Controls the brightness of a device's screen. A double between 0 and 1.0 is expected.</dd> +</dl> + +<h3 id="Events_handler">Events handler</h3> + +<dl> + <dt>{{domxref("Screen.onorientationchange")}}</dt> + <dd>A handler for the {{event("orientationchange")}} events.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Screen.lockOrientation")}}</dt> + <dd>Lock the screen orientation (only works in fullscreen or for installed apps)</dd> + <dt>{{domxref("Screen.unlockOrientation")}}</dt> + <dd>Unlock the screen orientation (only works in fullscreen or for installed apps)</dd> +</dl> + +<p>Methods inherit from {{domxref("EventTarget")}}</p> + +<p>{{page("/en-US/docs/Web/API/EventTarget","Methods")}}</p> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush:js">if (screen.pixelDepth < 8) { + // use low-color version of page +} else { + // use regular, colorful page +} +</pre> + +<h2 id="Specification" name="Specification">Specification</h2> + +<p>CSSOM View</p> diff --git a/files/pl/web/api/screen/width/index.html b/files/pl/web/api/screen/width/index.html new file mode 100644 index 0000000000..352f6cfbf3 --- /dev/null +++ b/files/pl/web/api/screen/width/index.html @@ -0,0 +1,108 @@ +--- +title: Screen.width +slug: Web/API/Screen/width +translation_of: Web/API/Screen/width +--- +<div> +<div>{{APIRef("CSSOM View")}}</div> +</div> + +<p>Zwraca szerokość ekranu.</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox"><var>lWidth</var> = window.screen.width +</pre> + +<h2 id="Example" name="Example">Przykład</h2> + +<pre class="brush:js">// crude way to check that the screen is at least 1024x768 +if (window.screen.width >= 1024 && window.screen.height >= 768) { + // resolution is 1024x768 or above +} +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Note that not all of the width given by this property may be available to the window itself. When other widgets occupy space that cannot be used by the <code>window</code> object, there is a difference in <code>window.screen.width</code> and <code>window.screen.availWidth</code>. See also {{domxref("window.screen.height")}}.</p> + +<p>Internet Explorer will take into account the zoom setting when reporting the screen width. It will only return the real width of the screen if the zoom is set to 100%.</p> + +<h2 id="Specification" name="Specification">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSSOM View', '#dom-screen-width', 'Screen.width') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</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>6</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>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>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/api/selection/addrange/index.html b/files/pl/web/api/selection/addrange/index.html new file mode 100644 index 0000000000..7827743f8e --- /dev/null +++ b/files/pl/web/api/selection/addrange/index.html @@ -0,0 +1,40 @@ +--- +title: addRange +slug: Web/API/Selection/addRange +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/addRange +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Dodaje zakres do zaznaczenia.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.addRange(<i>range</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <i> + <code>range</code></i> + </dt> + <dd> + Obiekt <a href="pl/DOM/range">zakresu</a>, który będzie dodany do zaznaczenia.</dd> +</dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval"> /* Wybiera wszystkie znaczniki STRONG w dokumencie HTML */ + var strongs = document.getElementsByTagName("strong"); + var s = window.getSelection(); + if(s.rangeCount > 0) s.removeAllRanges(); + for(var i = 0; i < strongs.length; i++) { + var range = document.createRange(); + range.selectNode(strongs[i]); + s.addRange(range); + } +</pre> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/addRange", "es": "es/DOM/Selection/addRange", "it": "it/DOM/Selection/addRange" } ) }}</p> diff --git a/files/pl/web/api/selection/anchornode/index.html b/files/pl/web/api/selection/anchornode/index.html new file mode 100644 index 0000000000..200bccb3fa --- /dev/null +++ b/files/pl/web/api/selection/anchornode/index.html @@ -0,0 +1,22 @@ +--- +title: anchorNode +slug: Web/API/Selection/anchorNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/anchorNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca węzeł, w którym się zaczyna zaznaczenie.</p> +<h3 id="Skladnia" name="Skladnia">Skladnia</h3> +<pre class="eval"><i>sel</i>.anchorNode +</pre> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>Użytkownik może wykonać zaznaczenie od lewej do prawej (w bieg dokumentu) lub od prawej do lewej (odwrotnie od biegu dokumentu). Kotwica znajduje się tam, gdzie użytkownik zaczyna selekcję. Może to być widoczne, kiedy zostanie przytrzymany klawisz Shift i naciśnięte strzałki na klawiaturze. Kotwica selekcji nie zmienia swojego położenia, ale skupienie selekcji, drugi koniec selekcji, porusza się.</p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/anchorNode", "es": "es/DOM/Selection/anchorNode", "it": "it/DOM/Selection/anchorNode" } ) }}</p> diff --git a/files/pl/web/api/selection/anchoroffset/index.html b/files/pl/web/api/selection/anchoroffset/index.html new file mode 100644 index 0000000000..35a0148f6a --- /dev/null +++ b/files/pl/web/api/selection/anchoroffset/index.html @@ -0,0 +1,23 @@ +--- +title: anchorOffset +slug: Web/API/Selection/anchorOffset +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/anchorOffset +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca pozycję, na której kotwica selekcji znajduje się w węźle <a href="pl/DOM/Selection/anchorNode">anchorNode</a>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.anchorOffset +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Liczenie się tej zmiennej zaczyna się od 0. Jeżeli selekcja zaczyna się w pierwszym znaku <a href="pl/DOM/Selection/anchorNode">anchorNode</a>, zwracane jest 0.</p> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/anchorOffset", "es": "es/DOM/Selection/anchorOffset", "it": "it/DOM/Selection/anchorOffset" } ) }}</p> diff --git a/files/pl/web/api/selection/collapse/index.html b/files/pl/web/api/selection/collapse/index.html new file mode 100644 index 0000000000..fec80daf7e --- /dev/null +++ b/files/pl/web/api/selection/collapse/index.html @@ -0,0 +1,45 @@ +--- +title: collapse +slug: Web/API/Selection/collapse +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/collapse +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zawęża aktualne zaznaczenie w pojedynczy punkt. Dokument nie jest modyfikowany. Jeżeli treść jest edytowalna i aktywna, przeniesie się tam kursor.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.collapse(<i>parentNode</i>,<i>offset</i>); +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <i> + <code>parentNode</code></i> + </dt> + <dd> + Kursor znajdzie się w tym węźle.</dd> +</dl> +<dl> + <dt> + <i> + <code>offset</code></i> + </dt> + <dd> + Kursor zostanie umieszczony w tej odległości od początku węzła tekstowego + <i> + <code>parentNode</code></i> + .</dd> +</dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval">/* Umieszcza kursor na początku ciała dokumentu HTML. */ +var body = document.getElementsByTagName("body")[0]; +window.getSelection().collapse(body,0); +</pre> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/collapse", "es": "es/DOM/Selection/collapse", "it": "it/DOM/Selection/collapse" } ) }}</p> diff --git a/files/pl/web/api/selection/collapsetoend/index.html b/files/pl/web/api/selection/collapsetoend/index.html new file mode 100644 index 0000000000..e7897ea59a --- /dev/null +++ b/files/pl/web/api/selection/collapsetoend/index.html @@ -0,0 +1,22 @@ +--- +title: collapseToEnd +slug: Web/API/Selection/collapseToEnd +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/collapseToEnd +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Przesuwa kotwicę zaznaczenia do pozycji, w której znajduje się skupienie. Samo skupienie nie zmienia swojego położenia. Jeżeli treść jest aktywna i edytowalna, pojawi się tam kursor.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.collapseToEnd() +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<p>Brak.</p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/collapseToEnd", "es": "es/DOM/Selection/collapseToEnd", "it": "it/DOM/Selection/collapseToEnd" } ) }}</p> diff --git a/files/pl/web/api/selection/collapsetostart/index.html b/files/pl/web/api/selection/collapsetostart/index.html new file mode 100644 index 0000000000..0dfdc92468 --- /dev/null +++ b/files/pl/web/api/selection/collapsetostart/index.html @@ -0,0 +1,22 @@ +--- +title: collapseToStart +slug: Web/API/Selection/collapseToStart +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/collapseToStart +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Przesuwa skupienie zaznaczenia do położenia kotwicy. Sama kotwica nie zmienia swojego położenia. Jeżeli treść jest aktywna i edytowalna, przeniesie się tam kursor.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.collapseToStart() +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<p>Brak.</p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/collapseToStart", "es": "es/DOM/Selection/collapseToStart", "it": "it/DOM/Selection/collapseToStart" } ) }}</p> diff --git a/files/pl/web/api/selection/containsnode/index.html b/files/pl/web/api/selection/containsnode/index.html new file mode 100644 index 0000000000..c73f0ae763 --- /dev/null +++ b/files/pl/web/api/selection/containsnode/index.html @@ -0,0 +1,47 @@ +--- +title: containsNode +slug: Web/API/Selection/containsNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/containsNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Sprawdza czy węzeł jest częścią zaznaczenia.</p> +<h3 id="Sk.C5.82adania" name="Sk.C5.82adania">Składania</h3> +<pre class="eval"><i>sel</i>.containsNode(<i>aNode</i>,<i>aPartlyContained</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <i> + <code>aNode</code></i> + </dt> + <dd> + Węzeł, którego obecność sprawdzamy.</dd> + <dt> + <i> + <code>aPartlyContained</code></i> + </dt> + <dd> + Kiedy jej wartością jest + <i> + true</i> + , <code>containsNode</code> zwraca wartość true kiedy część węzła jest częścią zaznaczenia.</dd> + <dd> + Kiedy jej wartością jest + <i> + false</i> + , <code>containsNode</code> zwraca wartość true tylko i wyłącznie, gdy cały węzeł jest częścią zaznaczenia.</dd> +</dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval"> /* Sprawdza czy cokolwiek wewnątrz elementu body jest zaznaczone */ + alert(window.getSelection().containsNode(document.body, true)); +</pre> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/containsNode", "es": "es/DOM/Selection/containsNode", "it": "it/DOM/Selection/containsNode" } ) }}</p> diff --git a/files/pl/web/api/selection/deletefromdocument/index.html b/files/pl/web/api/selection/deletefromdocument/index.html new file mode 100644 index 0000000000..7cc9727ebc --- /dev/null +++ b/files/pl/web/api/selection/deletefromdocument/index.html @@ -0,0 +1,24 @@ +--- +title: deleteFromDocument +slug: Web/API/Selection/deleteFromDocument +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/deleteFromDocument +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Usuwa rzeczywisty tekst będący reprezentacją zaznaczenia z DOM dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.deleteFromDocument() +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<p>Brak.</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<p>Użytkownik na stronie internetowej zaznacza tekst "mają dwoje" ze zdania "Króliki mają dwoje uszu". Następnie klika na przycisk, który wywołuje kod JavaScript <code>window.getSelection().deleteFromDocument()</code>. Tekst dokumentu staje się zdaniem "Króliki uszu".</p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/deleteFromDocument", "es": "es/DOM/Selection/deleteFromDocument", "it": "it/DOM/Selection/deleteFromDocument" } ) }}</p> diff --git a/files/pl/web/api/selection/extend/index.html b/files/pl/web/api/selection/extend/index.html new file mode 100644 index 0000000000..fbec1f5eb5 --- /dev/null +++ b/files/pl/web/api/selection/extend/index.html @@ -0,0 +1,40 @@ +--- +title: extend +slug: Web/API/Selection/extend +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/extend +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Przemieszcza skupienie zaznaczenia do podanego miejsca. Kotwica zaznaczenia nie zmienia swojego położenia. Zaznaczenie będzie miało koniec w nowym miejscu skupienia bez względu na kierunek zaznaczania.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.extend(<i>parentNode</i>,<i>offset</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <i> + <code>parentNode</code></i> + </dt> + <dd> + Węzeł, w którym skupienie zmieni swoje położenie.</dd> +</dl> +<dl> + <dt> + <i> + <code>offset</code></i> + </dt> + <dd> + Pozycja od początku węzła tekstowego + <i> + <code>parentNode</code></i> + , gdzie zostanie umieszczone skupienie.</dd> +</dl> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/extend", "es": "es/DOM/Selection/extend", "it": "it/DOM/Selection/extend" } ) }}</p> diff --git a/files/pl/web/api/selection/focusnode/index.html b/files/pl/web/api/selection/focusnode/index.html new file mode 100644 index 0000000000..e59310d0f1 --- /dev/null +++ b/files/pl/web/api/selection/focusnode/index.html @@ -0,0 +1,21 @@ +--- +title: focusNode +slug: Web/API/Selection/focusNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/focusNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca węzeł, w którym selekcja się kończy.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.focusNode +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Użytkownik może wykonać zaznaczenie od lewej do prawej (w bieg dokumentu) lub od prawej do lewej (odwrotnie od biegu dokumentu). Skupienie znajduje się tam, gdzie użytkownik kończy selekcję. Może to być widoczne, kiedy zostanie przytrzymany klawisz Shift i naciśnięte strzałki na klawiaturze. Skupienie selekcji zmienia swoje położenie, a skupienie selekcji, drugi koniec selekcji, nie.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/focusNode", "es": "es/DOM/Selection/focusNode", "it": "it/DOM/Selection/focusNode" } ) }}</p> diff --git a/files/pl/web/api/selection/focusoffset/index.html b/files/pl/web/api/selection/focusoffset/index.html new file mode 100644 index 0000000000..cba7b76783 --- /dev/null +++ b/files/pl/web/api/selection/focusoffset/index.html @@ -0,0 +1,22 @@ +--- +title: focusOffset +slug: Web/API/Selection/focusOffset +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/focusOffset +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca pozycję, na której skupienie selekcji znajduje się w węźle <a href="pl/DOM/Selection/focusNode">focusNode</a>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.focusOffset +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Liczenie się tej zmiennej zaczyna się od 0. Jeżeli selekcja kończy się z pierwszym znakiem <a href="pl/DOM/Selection/anchorNode">anchorNode</a>, zwracane jest 0.</p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/focusOffset", "es": "es/DOM/Selection/focusOffset", "it": "it/DOM/Selection/focusOffset" } ) }}</p> diff --git a/files/pl/web/api/selection/getrangeat/index.html b/files/pl/web/api/selection/getrangeat/index.html new file mode 100644 index 0000000000..ff4b2c962b --- /dev/null +++ b/files/pl/web/api/selection/getrangeat/index.html @@ -0,0 +1,44 @@ +--- +title: getRangeAt +slug: Web/API/Selection/getRangeAt +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/getRangeAt +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca obiekt zakresu reprezentujący jeden z obecnie zaznaczonych zakresów.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>range</i> =<i>sel</i>.getRangeAt(<i>index</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <i> + <code>range</code></i> + </dt> + <dd> + Obiekt <a href="pl/DOM/range">zakresu</a>, który zostanie zwrócony.</dd> +</dl> +<dl> + <dt> + <i> + <code>index</code></i> + </dt> + <dd> + Wartość liczbowa liczona od zera. Wartość ujemna, równa albo większa od <a href="pl/DOM/Selection/rangeCount">rangeCount</a> spowoduje wystąpienie błędu.</dd> +</dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval">ranges = []; +sel = window.getSelection(); +for(var i = 0; i < sel.rangeCount; i++) { + ranges[i] = sel.getRangeAt(i); +} +/* Każdy element w tablicy zakresów jest teraz + * obiektem zakresu reprezentującym jeden z + * zakresów w aktualnym zaznaczeniu */ +</pre> +<p>{{ languages( { "en": "en/DOM/Selection/getRangeAt", "es": "es/DOM/Selection/getRangeAt" } ) }}</p> diff --git a/files/pl/web/api/selection/index.html b/files/pl/web/api/selection/index.html new file mode 100644 index 0000000000..83e76ccfa9 --- /dev/null +++ b/files/pl/web/api/selection/index.html @@ -0,0 +1,100 @@ +--- +title: Selection +slug: Web/API/Selection +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Selection +--- +<p>{{ ApiRef("DOM") }}{{SeeCompatTable}}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Klasa obiektu zwracanego przez <code><a href="pl/DOM/window.getSelection"> window.getSelection()</a></code> i inne metody.</p> + +<h3 id="Opis" name="Opis">Opis</h3> + +<p>Obiekt reprezentujący <a href="pl/DOM/range">zakresy</a>, które zaznaczył użytkownik. Zazwyczaj przechowuje tylko jeden zakres, który pobieramy następująco:</p> + +<pre class="eval">range = sel.getRangeAt(0); +</pre> + +<p>Wywołanie metody <code><a href="pl/DOM/Selection/toString">toString()</a></code> zwróci tekst znajdujący się wewnątrz zaznaczenia, na przykład:</p> + +<pre class="eval">selObj = window.getSelection(); +window.alert(selObj); +</pre> + +<h3 id="S.C5.82ownik" name="S.C5.82ownik">Słownik</h3> + +<p>Inne kluczowe pojęcia używane w tym dziale.</p> + +<dl> + <dt>kotwica (anchor)</dt> + <dd>Kotwicą zaznaczenia jest jego właściwy początek. Kiedy tworzymy zaznaczenie przy użyciu myszki, kotwica w dokumencie znajduje się dokładnie tam, gdzie początkowo został wciśnięty przycisk myszki. Gdy użytkownik zmienia zaznaczenie używając myszki lub klawiatury, kotwica nie zmienia swego położenia.</dd> + <dt>skupienie (focus)</dt> + <dd>Skupieniem zaznaczenia jest jego właściwy koniec. Kiedy tworzymy zaznaczenie przy użyciu myszki, jej skupienie jest dokładnie tam, gdzie przycisk myszki zostaje zwolniony. Gdy użytkownik zmienia zaznaczenie używając myszki lub klawiatury, skupienie zmienia swe położenie na koniec tego zaznaczenia.</dd> + <dt>zakres (range)</dt> + <dd>Zakres to przyległa część dokumentu. Zakres może zawierać zarówno całe węzły, jak i ich części, jak np. wycinek węzła tekstowego. Użytkownik zazwyczaj wybiera tylko jedno zaznaczenie w danej chwili, jednak możliwe jest zaznaczenie kilku fragmentów na raz (na przykład używając klawisza Control). Zakres może być pobrany z zaznaczenia jako obiekt <a href="pl/DOM/range">zakresu</a>. Obiekty zakresów mogą być również utworzone poprzez DOM i programowo dodane lub usunięte z zaznaczenia.</dd> +</dl> + +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3> + +<dl> + <dt><a href="pl/DOM/Selection/anchorNode">anchorNode</a></dt> + <dd>Zwraca węzeł, w którym rozpoczyna się zaznaczenie.</dd> + <dt><a href="pl/DOM/Selection/anchorOffset">anchorOffset</a></dt> + <dd>Zwraca pozycję, gdzie kotwica zaznaczenia znajduje się w węźle <code>anchorNode</code>.</dd> + <dt><a href="pl/DOM/Selection/focusNode">focusNode</a></dt> + <dd>Zwraca węzeł, w którym kończy się zaznaczenie.</dd> + <dt><a href="pl/DOM/Selection/focusOffset">focusOffset</a></dt> + <dd>Zwraca pozycję, gdzie skupienie zaznaczenia znajduje się w węźle <code>focusNode</code></dd> + <dt><a href="pl/DOM/Selection/isCollapsed">isCollapsed</a></dt> + <dd>Zwraca wartość logiczną wskazującą czy początek zaznaczenia znajduje się w tym samym miejscu, co jego koniec.</dd> + <dt><a href="pl/DOM/Selection/rangeCount">rangeCount</a></dt> + <dd>Zwraca liczbę zakresów znajdujących się w zaznaczeniu.</dd> +</dl> + +<h3 id="Metody" name="Metody">Metody</h3> + +<dl> + <dt><a href="pl/DOM/Selection/getRangeAt">getRangeAt</a></dt> + <dd>Zwraca obiekt zakresu reprezentujący jeden z obecnie zaznaczonych zakresów.</dd> + <dt><a href="pl/DOM/Selection/collapse">collapse</a></dt> + <dd>Zawęża aktualne zaznaczenie do pojedynczego punktu.</dd> + <dt><a href="pl/DOM/Selection/extend">extend</a></dt> + <dd>Przesuwa koniec zaznaczenia do podanego punktu.</dd> + <dt><a href="pl/DOM/Selection/collapseToStart">collapseToStart</a></dt> + <dd>Przesuwa koniec zaznaczenia do tego samego miejsca, w którym znajduje się początek.</dd> + <dt><a href="pl/DOM/Selection/collapseToEnd">collapseToEnd</a></dt> + <dd>Przesuwa początek zaznaczenia do tego samego miejsca, w którym znajduje się koniec. Sam koniec zaznaczenia nie zmienia swojego położenia.</dd> + <dt><a href="pl/DOM/Selection/selectAllChildren">selectAllChildren</a></dt> + <dd>Dodaje wszystkie dzieci podanego węzła do zaznaczenia.</dd> + <dt><a href="pl/DOM/Selection/addRange">addRange</a></dt> + <dd>Obiekt zakresu, który zostanie dodany do zaznaczenia.</dd> + <dt><a href="pl/DOM/Selection/removeRange">removeRange</a></dt> + <dd>Usuwa zakres z zaznaczenia</dd> + <dt><a href="pl/DOM/Selection/removeAllRanges">removeAllRanges</a></dt> + <dd>Usuwa wszystkie zakresy z zaznaczenia.</dd> + <dt><a href="pl/DOM/Selection/deleteFromDocument">deleteFromDocument</a></dt> + <dd>Usuwa zawartość zaznaczenia z dokumentu.</dd> + <dt><a href="pl/DOM/Selection/selectionLanguageChange">selectionLanguageChange</a></dt> + <dd> </dd> + <dt><a href="pl/DOM/Selection/toString">toString</a></dt> + <dd>Zwraca ciąg znaków, który jest obecnie reprezentowany przez obiekt zaznaczenia, tj. aktualnie zaznaczony tekst.</dd> + <dt><a href="pl/DOM/Selection/containsNode">containsNode</a></dt> + <dd>Wskazuje czy konkretny węzeł jest częścią zaznaczenia.</dd> +</dl> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p><a href="pl/DOM/window.getSelection">window.getSelection</a>, <a href="pl/DOM/range">Range</a></p> + +<h3 id="Odno.C5.9Bniki_zewn.C4.99trzne" name="Odno.C5.9Bniki_zewn.C4.99trzne">Odnośniki zewnętrzne</h3> + +<ul> + <li><a class="external" href="http://lxr.mozilla.org/mozilla/source/content/base/public/nsISelection.idl">IDL definition in Mozilla cross-reference</a></li> +</ul> diff --git a/files/pl/web/api/selection/iscollapsed/index.html b/files/pl/web/api/selection/iscollapsed/index.html new file mode 100644 index 0000000000..84b01c648c --- /dev/null +++ b/files/pl/web/api/selection/iscollapsed/index.html @@ -0,0 +1,21 @@ +--- +title: isCollapsed +slug: Web/API/Selection/isCollapsed +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/isCollapsed +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca wartość logiczną, która określa czy początek selekcji znajduje się w tym samym miejscu, co jej koniec.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.isCollapsed +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Nawet załamana selekcja może mieć <code>rangeCount</code> większe niż 0. <code>sel.getRangeAt(0)</code> może zwrócić zakres, który również jest załamany.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/isCollapsed", "es": "es/DOM/Selection/isCollapsed", "it": "it/DOM/Selection/isCollapsed" } ) }}</p> diff --git a/files/pl/web/api/selection/rangecount/index.html b/files/pl/web/api/selection/rangecount/index.html new file mode 100644 index 0000000000..f966cff941 --- /dev/null +++ b/files/pl/web/api/selection/rangecount/index.html @@ -0,0 +1,19 @@ +--- +title: rangeCount +slug: Web/API/Selection/rangeCount +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/rangeCount +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca liczbę zakresów, które znajdują się w zaznaczeniu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.rangeCount +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zaraz po załadowaniu strony, wartość <code>rangeCount</code> wynosi 0. Użytkownik może zazwyczaj wykonać tylko jedno zaznaczenie na raz, dlatego wartość <code>rangeCount</code> z reguły będzie wynosiła 1. Za pomocą skryptu możliwe jest stworzenie zaznaczenia, które zawiera więcej niż jeden zakres.</p> +<p>{{ languages( { "en": "en/DOM/Selection/rangeCount", "es": "es/DOM/Selection/rangeCount", "it": "it/DOM/Selection/rangeCount" } ) }}</p> diff --git a/files/pl/web/api/selection/removeallranges/index.html b/files/pl/web/api/selection/removeallranges/index.html new file mode 100644 index 0000000000..3ba0519f45 --- /dev/null +++ b/files/pl/web/api/selection/removeallranges/index.html @@ -0,0 +1,22 @@ +--- +title: removeAllRanges +slug: Web/API/Selection/removeAllRanges +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/removeAllRanges +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Usuwa wszystkie zakresy, ustawiając własności <a href="pl/DOM/Selection/anchorNode">anchorNode</a> i <a href="pl/DOM/Selection/focusNode">focusNode</a> na <code>null</code> oraz usuwając samo zaznaczenie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.removeAllRanges(); +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<p>Brak.</p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/removeAllRanges", "es": "es/DOM/Selection/removeAllRanges", "it": "it/DOM/Selection/removeAllRanges" } ) }}</p> diff --git a/files/pl/web/api/selection/removerange/index.html b/files/pl/web/api/selection/removerange/index.html new file mode 100644 index 0000000000..24fa532b22 --- /dev/null +++ b/files/pl/web/api/selection/removerange/index.html @@ -0,0 +1,40 @@ +--- +title: removeRange +slug: Web/API/Selection/removeRange +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/removeRange +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Usuwa zakres z zaznaczenia.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.removeRange(<i>range</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <i> + <code>range</code></i> + </dt> + <dd> + Obiekt zakresu, który będzie usunięty z zaznaczenia.</dd> +</dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval">/* Programowo, można wybrać więcej niż jeden zakres. + * Ten przykład usunie wszystkie zakresy oprócz pierwszego.*/ +s = window.getSelection(); +if(s.rangeCount > 1) { + for(var i = 1; i < s.rangeCount; i++) { + s.removeRange(s.getRangeAt(i)); + } +} +</pre> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/removeRange", "es": "es/DOM/Selection/removeRange", "it": "it/DOM/Selection/removeRange" } ) }}</p> diff --git a/files/pl/web/api/selection/selectallchildren/index.html b/files/pl/web/api/selection/selectallchildren/index.html new file mode 100644 index 0000000000..df659530c6 --- /dev/null +++ b/files/pl/web/api/selection/selectallchildren/index.html @@ -0,0 +1,40 @@ +--- +title: selectAllChildren +slug: Web/API/Selection/selectAllChildren +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/selectAllChildren +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Dodaje wszystkie dzieci podanego węzła do zaznaczenia. Poprzednie zaznaczenie jest usuwane.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.selectAllChildren(<i>parentNode</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <i> + <code>parentNode</code></i> + </dt> + <dd> + Wszystkie dzieci węzła + <i> + <code>parentNode</code></i> + będą wybrane. Samo + <i> + <code>parentNode</code></i> + nie będzie częścią zaznaczenia.</dd> +</dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval">footer = document.getElementById("footer"); +window.getSelection().selectAllChildren(footer); +/* Wszystko wewnątrz <code>footer</code> jest teraz wybrane */ +</pre> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/selectAllChildren", "es": "es/DOM/Selection/selectAllChildren", "it": "it/DOM/Selection/selectAllChildren" } ) }}</p> diff --git a/files/pl/web/api/selection/tostring/index.html b/files/pl/web/api/selection/tostring/index.html new file mode 100644 index 0000000000..588c81ec26 --- /dev/null +++ b/files/pl/web/api/selection/tostring/index.html @@ -0,0 +1,35 @@ +--- +title: toString +slug: Web/API/Selection/toString +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/toString +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca ciąg znakowy, który jest obecnie reprezentowany przez obiekt selekcji, tj. aktualnie zaznaczony tekst.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>string</i> =<i>sel</i>.toString() +</pre> +<ul> + <li><code>string</code> jest ciągiem znakowym reprezentującym selekcję.</li> +</ul> +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3> +<p>Brak.</p> +<h3 id="Opis" name="Opis">Opis</h3> +<p>Ta metoda zwraca obecnie zaznaczony tekst.</p> +<p>W <a href="pl/JavaScript">JavaScript</a>, ta metoda jest wywoływana automatycznie, kiedy funkcja, do której przesyłany jest obiekt, oczekuje ciągu znakowego:</p> +<pre class="eval">alert(window.getSelection()) // Co jest wywoływane +alert(window.getSelection().toString()) // Co jest w wywoływane w rzeczywistości +</pre> +<h3 id="Zobacz_r.C3.B3wnie.C5.BC" name="Zobacz_r.C3.B3wnie.C5.BC">Zobacz również</h3> +<ul> + <li><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Object/toString">Object.toString</a></li> +</ul> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/toString", "es": "es/DOM/Selection/toString", "fr": "fr/DOM/Selection/toString", "it": "it/DOM/Selection/toString" } ) }}</p> diff --git a/files/pl/web/api/speechrecognition/index.html b/files/pl/web/api/speechrecognition/index.html new file mode 100644 index 0000000000..8f41dfb239 --- /dev/null +++ b/files/pl/web/api/speechrecognition/index.html @@ -0,0 +1,153 @@ +--- +title: SpeechRecognition +slug: Web/API/SpeechRecognition +translation_of: Web/API/SpeechRecognition +--- +<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p> + +<p>Interfejs <strong><code>SpeechRecognition</code></strong> jest częścią <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> i kontroluje usługę rozpoznawania mowy. Obsługuje również {{domxref("SpeechRecognitionEvent")}} zwracany przez usługę rozpoznawania mowy.</p> + +<div class="note"> +<p><strong>Uwaga</strong>: Na Chrome użycie Speech Recognition wymaga zastosowania serwera. Dźwięk jest przesyłany do usługi web, więc nie działa offline.</p> +</div> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt>{{domxref("SpeechRecognition.SpeechRecognition()")}}</dt> + <dd>Tworzy nowy obiekt <code>SpeechRecognition</code>.</dd> +</dl> + +<h2 id="Właściwości">Właściwości</h2> + +<p><em><code>SpeechRecognition</code> dziedziczy równiez właściwości z interfejsu rodzica, {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("SpeechRecognition.grammars")}}</dt> + <dd>Tworzy i zwraca kolekcję obiektów {{domxref("SpeechGrammar")}}, które reprezentują zasady gramatyczne akceptowane przez <code>SpeechRecognition</code>.</dd> + <dt>{{domxref("SpeechRecognition.lang")}}</dt> + <dd>Tworzy i zwraca język bieżącej instacji <code>SpeechRecognition</code>. Jeśli nie zostanie sprecyzowany domyślnie przyjmie wartość z atrybutu {{htmlattrxref("lang","html")}}, a jeśli i on nie został zdefiniowany - z ustawień językowych przeglądarki.</dd> + <dt>{{domxref("SpeechRecognition.continuous")}}</dt> + <dd>Ustawienie przyjęcia ciągłego strumienia mowy lub pojedynczego zwrotu. Domyslnie ustawiony na przyjęcie pojedynczego zwrotu (<code>false</code>.)</dd> + <dt>{{domxref("SpeechRecognition.interimResults")}}</dt> + <dd>Ustawienie kontrolujące zwracanie rezultatów pośrednich. Przyjmuje wartości (<code>true</code>) lub (<code>false</code>.) Rezultat pośredni rozpoznawania mowy to rezultat niepełny, uzyskiwany w trakcie rozpoznawania wypowiedzi (np. kiedy metoda {{domxref("SpeechRecognitionResult.isFinal")}} zwraca <code>false</code>.) </dd> + <dt>{{domxref("SpeechRecognition.maxAlternatives")}}</dt> + <dd>Ustawienie maksymalnej liczby alternatywnych wyników rozpoznawania mowy. Domyślnie - 1.</dd> + <dt>{{domxref("SpeechRecognition.serviceURI")}}</dt> + <dd>Specifies the location of the speech recognition service used by the current <code>SpeechRecognition</code> to handle the actual recognition. The default is the user agent's default speech service.</dd> +</dl> + +<dl> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em><code>SpeechRecognition</code> also inherits methods from its parent interface, {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("SpeechRecognition.abort()")}}</dt> + <dd>Stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a {{domxref("SpeechRecognitionResult")}}.</dd> + <dt>{{domxref("SpeechRecognition.start()")}}</dt> + <dd>Starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current <code>SpeechRecognition</code>.</dd> + <dt>{{domxref("SpeechRecognition.stop()")}}</dt> + <dd>Stops the speech recognition service from listening to incoming audio, and attempts to return a {{domxref("SpeechRecognitionResult")}} using the audio captured so far.</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/SpeechRecognition/audiostart_event"><code>audiostart</code></a></dt> + <dd>Fired when the user agent has started to capture audio.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onaudiostart">onaudiostart</a></code> property.</dd> + <dt><a href="/en-US/docs/Web/API/SpeechRecognition/audioend_event"><code>audioend</code></a></dt> + <dd>Fired when the user agent has finished capturing audio.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onaudioend">onaudioend</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/SpeechRecognition/end_event">end</a></code></dt> + <dd>Fired when the speech recognition service has disconnected.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onend">onend</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/SpeechRecognition/error_event">error</a></code></dt> + <dd>Fired when a speech recognition error occurs.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onerror">onerror</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/SpeechRecognition/nomatch_event">nomatch</a></code></dt> + <dd>Fired when the speech recognition service returns a final result with no significant recognition. This may involve some degree of recognition, which doesn't meet or exceed the {{domxref("SpeechRecognitionAlternative.confidence","confidence")}} threshold.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onnomatch">onnomatch</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/SpeechRecognition/result_event">result</a></code></dt> + <dd>Fired when the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onresult">onresult</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/SpeechRecognition/soundstart_event">soundstart</a></code></dt> + <dd>Fired when any sound — recognisable speech or not — has been detected.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onsoundstart">onsoundstart</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/SpeechRecognition/soundend_event">soundend</a></code></dt> + <dd>Fired when any sound — recognisable speech or not — has stopped being detected.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onsoundend">onsoundend</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/SpeechRecognition/speechstart_event">speechstart</a></code></dt> + <dd>Fired when sound that is recognised by the speech recognition service as speech has been detected.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onspeechstart">onspeechstart</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/SpeechRecognition/speechend_event">speechend</a></code></dt> + <dd>Fired when speech recognised by the speech recognition service has stopped being detected.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onspeechend">onspeechend</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/SpeechRecognition/start_event">start</a></code></dt> + <dd>Fired when the speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current <code>SpeechRecognition</code>.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechSynthesisUtterance/onstart">onstart</a></code> property.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>In our simple <a href="https://github.com/mdn/web-speech-api/tree/master/speech-color-changer">Speech color changer</a> example, we create a new <code>SpeechRecognition</code> object instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor, create a new {{domxref("SpeechGrammarList")}}, and set it to be the grammar that will be recognised by the <code>SpeechRecognition</code> instance using the {{domxref("SpeechRecognition.grammars")}} property.</p> + +<p>After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see {{domxref("SpeechRecognition.start()")}}.) When a result has been successfully recognised, the {{domxref("SpeechRecognition.onresult")}} handler fires, we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that colour.</p> + +<pre class="brush: js">var grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' +var recognition = new SpeechRecognition(); +var speechRecognitionList = new SpeechGrammarList(); +speechRecognitionList.addFromString(grammar, 1); +recognition.grammars = speechRecognitionList; +//recognition.continuous = false; +recognition.lang = 'en-US'; +recognition.interimResults = false; +recognition.maxAlternatives = 1; + +var diagnostic = document.querySelector('.output'); +var bg = document.querySelector('html'); + +document.body.onclick = function() { + recognition.start(); + console.log('Ready to receive a color command.'); +} + +recognition.onresult = function(event) { + var color = event.results[0][0].transcript; + diagnostic.textContent = 'Result received: ' + color; + bg.style.backgroundColor = color; +}</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 Speech API', '#speechreco-section', 'SpeechRecognition')}}</td> + <td>{{Spec2('Web Speech API')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.SpeechRecognition")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li> +</ul> diff --git a/files/pl/web/api/storage/index.html b/files/pl/web/api/storage/index.html new file mode 100644 index 0000000000..22f478e9ff --- /dev/null +++ b/files/pl/web/api/storage/index.html @@ -0,0 +1,154 @@ +--- +title: Storage +slug: Web/API/Storage +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - JavaScript + - Wszystkie_kategorie +translation_of: Web/API/Web_Storage_API +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Magazyn DOM (DOM Storage) jest nazwą określającą zestaw <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">aspektów magazynowania danych</a> wprowadzonych w specyfikacji <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a>. Magazyn DOM jest zaprojektowany, by dostarczyć większą, bezpieczniejszą i prostszą do użycia, alternatywę przechowywania informacji w ciasteczkach. Jest obecnie dostępny tylko w przeglądarkach bazujących na Mozilli, zwłaszcza zaczynając od <a href="pl/Firefox_2">Firefoksa 2</a>.</p> + +<div class="note"><strong>Uwaga:</strong> Magazyn DOM nie jest tym samym co <a href="pl/Storage">mozStorage</a> (interfejsy XPCOM Mozilli do SQLite) czy <a href="pl/API_przechowywania_sesji">API przechowywania sesji</a> (użyteczność magazynu <a href="pl/XPCOM">XPCOM</a> do użycia przez rozszerzenia).</div> + +<h3 id="Opis" name="Opis">Opis</h3> + +<p>Mechanizm Magazynu DOM w głównej mierze polega na bezpiecznym przechowywaniu par kluczy i wartości możliwych do późniejszego odtworzenia. Celem tego dodatku jest dostarczenie wszechstronnego środka, dzięki któremu mogą być budowane w pełni interaktywne aplikacje (włączając w to zaawansowane cechy, takie jak możliwość pracowania bez dostępu do sieci nawet przez dłuższe okresy czasu).</p> + +<p>Obecnie tylko przeglądarki bazujące na Mozilli dostarczają działającą implementację specyfikacji Magazynu DOM. Jednakże, Internet Explorer posiada podobną funkcję nazwaną <a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">"zachowaniem danych użytkownika"</a> (userData behavior), które pozwala na przechowanie danych pomiędzy wieloma sesjami przeglądarki.</p> + +<p>Magazyn DOM jest użyteczny, ponieważ nie istnieje żadna dobra metoda przechowywania przez przeglądarkę sensownej pojemności danych przez dowolny okres czasu. <a class="external" href="http://pl.wikipedia.org/wiki/Ciasteczka_%28internet%29">Ciasteczka HTTP</a> mają ograniczoną pojemność i nie dostarczają żadnego wsparcia dla organizowania przechowywanych danych oraz innych metod (takich jak <a class="external" href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">Lokalny magazyn Flash (Flash Local Storage)</a>), które do działania wymagają dodatkowych wtyczek.</p> + +<p>Jedną z pierwszych aplikacji, które zaczęły używać nowej funkcjonalności Magazynu DOM (w dodatku do "zachowania danych użytkownika" Internet Explorer) było <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> (aplikacja zarządzająca notatkami) napisana przez <a class="external" href="http://aaronboodman.com/">Aarona Boodmana</a>. W swoim programie, Aaron jednocześnie zapisywał swoje notatki na serwer (kiedy jego połączenie Internetowe było aktywne) i dysk lokalny. To pozwala użytkownikowi na bezpieczne zapisywanie notatek, nawet ze sporadyczną aktywnością połączenia z Internetem.</p> + +<p>Pomimo, że koncept oraz implementacja zaprezentowana w programie halfnote była stosunkowo prosta, jego powstanie wskazuje na możliwość tworzenia nowego typu aplikacji internetowych, użytecznych i działających zarówno z aktywnym połączeniem Internetowym, jak i bez niego.</p> + +<h3 id="Odno.C5.9Bniki" name="Odno.C5.9Bniki">Odnośniki</h3> + +<p>Poniższe elementy są obiektami globalnymi, które istnieją jako własności każdego <a href="pl/DOM/window">okna DOM</a>. Znaczy to, że są one dostępne jako własności <code>sessionStorage</code> lub <code>window.sessionStorage</code> (jest to ważne, ponieważ możliwe dzięki temu jest użycie ramek do przechowania i dostępu do dodatkowych danych, po za tym, co automatycznie jest dostępne na stronie).</p> + +<h4 id="sessionStorage" name="sessionStorage"><code>sessionStorage</code></h4> + +<p>Jest to globalny obiekt, który zajmuje się przechowywaniem danych, które mają być dostępne na czas trwania sesji strony. Trwa ona tak długo, dopóki otwarte jest okno przeglądarki, które można przeładowywać i odświeżać. Otwarcie strony w nowej karcie bądź oknie, powoduje stworzenie nowej sesji.</p> + +<pre class="brush: js">// Zapisywanie danych do pamięci aktualnej sesji +sessionStorage.username = "John"; + +// Odtwarzanie wcześniej zapisanych danych +alert( "username = " + sessionStorage.username ); +</pre> + +<p>Obiekt <code>sessionStorage</code> jest najbardziej pomocny przy przechowywaniu tymczasowych danych, które powinny być zapisane i chronione przez utraceniem w razie przypadkowego przeładowania strony.</p> + +<div class="bug"><strong>Uwaga:</strong> Obiekt <code>sessionStorage</code> powinien również być w stanie przechowywać i odtwarzać dane po przypadkowym zawieszeniu się przeglądarki, jednak przez {{ Bug(339445) }} ta funkcjonalność w Firefox jeszcze nie działa.</div> + +<p><strong>Przykłady:</strong></p> + +<p>Automatycznie zapisuje treści pól tekstowych, by w razie przypadkowego odświeżenia strony, odtworzyć treści tych pól, by nie stracić danych już wprowadzonych.</p> + +<pre class="brush: js"> // Pobranie pola tekstowego, który zamierzamy śledzić. + var field = document.getElementById("field"); + + // Sprawdzenie, czy mamy zapisaną już wcześniej wartość + // (stanie się to tylko wtedy, gdy strona została przeładowana) + if ( sessionStorage.autosave ) { + // Odtworzenie wartości pola tekstowego + field.value = sessionStorage.autosave; + } + + // Sprawdzanie wartości pola tekstowego co 1 sekundę + setInterval(function(){ + // Oraz zapisanie jej do obiektu sesji + sessionStorage.autosave = field.value; + }, 1000); +</pre> + +<p><strong>Więcej informacji:</strong></p> + +<ul> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#sessionstorage">Specyfikacja obiektu sessionStorage</a></li> +</ul> + +<h4 id="globalStorage" name="globalStorage"><code>globalStorage</code></h4> + +<p>Jest to globalny obiekt, który utrzymuje wiele przestrzeni publicznych oraz prywatnych, które mogą być użyte do przechowywania danych przez dłuższy okres czasu (np. przez kilka stron czy sesji przeglądarki).</p> + +<pre class="brush: js">// Zapisanie danych, które będzie można odtworzyć tylko z domeny mozilla.org +globalStorage['mozilla.org'].snippet = "<b>Cześć</b>, jak się masz?"; + +// Zapisanie danych, które możliwe będą do otworzenia przez dowolną stronę czy domenę +globalStorage[<span class="nowiki">''</span>].favBrowser = "Firefox"; +</pre> + +<p>Dokładniej mówiąc, obiekt <code>globalStorage</code> daje nam dostęp do wielu różnych magazynów obiektów, do których można przypisywać dane. Dla przykładu, jeśli chcielibyśmy stworzyć stronę internetową, która używałaby obiektu <code>globalStorage</code> w tej domenie (developer.mozilla.org) mielibyśmy takie obiekty magazynów nam dostępne:</p> + +<ul> + <li><code>globalStorage['developer.mozilla.org']</code> - Wszystkie strony wewnątrz subdomeny developer.mozilla.org mogłyby zarówno pobierać i zapisywać dane do tego magazynu.</li> + <li><code>globalStorage['mozilla.org']</code> - Wszystkie strony z domeną mozilla.org mogłyby pobierać i zapisywać dane do tego magazynu.</li> + <li><code>globalStorage['org']</code> - Wszystkie strony z końcówką .org mogą czytać i pobierać dane z tego magazynu.</li> + <li><code>globalStorage['']</code> - Wszystkie strony ze wszystkich domen mają pełen dostęp do tego magazynu.</li> +</ul> + +<p><strong>Przykłady:</strong></p> + +<p>Wszystkie te przykłady wymagają dołączenia kodu na wszystkich stronach, na których chcemy zaobserwować efekt.</p> + +<p>Zapamiętywanie nazwy użytkownika dla konkretnej subdomeny, która została odwiedzona:</p> + +<pre class="brush: js"> globalStorage['developer.mozilla.org'].username = "John"; +</pre> + +<p>Zliczenie każdej wizyty użytkownika na każdej ze stron w danej domenie:</p> + +<pre class="brush: js"> // musi zostać użyte <code>parseInt</code>, ponieważ wszystkie przechowywane dane są jako ciągi znakowe + globalStorage['mozilla.org'].visits = + parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1; +</pre> + +<p>Zapamiętywanie adresów wszystkich stron, które odwiedzasz:</p> + +<pre class="brush: js"> globalStorage[<span class="nowiki">''</span>].sites += "," + location.hostname; +</pre> + +<p><strong>Więcej informacji:</strong></p> + +<ul> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#globalstorage">Specyfikacja obiektu globalStorage</a></li> +</ul> + +<h3 id="Wi.C4.99cej_informacji:" name="Wi.C4.99cej_informacji:">Więcej informacji:</h3> + +<ul> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Specyfikacja Web Applications 1.0</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">Specyfikacja Web Applications 1.0 Storage</a></li> + <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Włączanie i wyłączanie obsługi Magazynu DOM w Firefox i SeaMonkey</a></li> +</ul> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<ul> + <li><a class="external" href="http://channy.creation.net/work/firefox/domstorage/">Proste przykłady obsługi Magazynu DOM</a></li> + <li><a class="external" href="http://aaronboodman.com/halfnote/">Halfnote</a> - aplikacja organizująca notatki używająca Magazynu DOM</li> +</ul> + +<h3 id="Tematy_powi.C4.85zane" name="Tematy_powi.C4.85zane">Tematy powiązane</h3> + +<ul> + <li><a class="external" href="http://pl.wikipedia.org/wiki/Ciasteczka_%28internet%29">Ciasteczka HTTP</a> (<code><a href="pl/DOM/document.cookie">document.cookie</a></code>)</li> + <li><a class="external" href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">Magazyn lokalny Flash (Flash Local Storage)</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">Zachowanie danych użytkownika Internet Explorer (userData behavior)</a></li> +</ul> + +<p> </p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/Storage", "es": "es/DOM/Almacenamiento", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}</p> diff --git a/files/pl/web/api/stylesheet/cssrules/index.html b/files/pl/web/api/stylesheet/cssrules/index.html new file mode 100644 index 0000000000..d3fabad79a --- /dev/null +++ b/files/pl/web/api/stylesheet/cssrules/index.html @@ -0,0 +1,46 @@ +--- +title: stylesheet.cssRules +slug: Web/API/Stylesheet/cssRules +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/CSSRuleList +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca wszystkie reguły/zasady CSS w arkuszu stylów jako {{domxref("CSSRuleList")}}, tablico-podobny obiekt.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>rules</i> = stylesheet.cssRules +</pre> + +<p><code>rules</code> jest tablicą {{domxref("CSSRuleList")}} indywidualnych obiektów <code>cssRule</code>. Pojedynczy obiekt <code>cssRule</code> może odwołać się do jednego z następujących obiektów:</p> + +<ul> + <li>{{domxref("CSSStyleRule") }}</li> + <li>{{domxref("CSSMediaRule") }}</li> + <li>{{domxref("CSSFontFaceRule") }}</li> + <li>{{domxref("CSSPageRule") }}</li> + <li>{{domxref("CSSImportRule") }}</li> + <li>{{domxref("CSSCharsetRule") }}</li> + <li>{{domxref("CSSUnknownRule") }}</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">// pobiera pierwszą zasadę +first_rule = document.styleSheets[0].cssRules[0]; +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Zobacz obiekt DOM {{domxref("cssRule")}}.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet-cssRules">DOM Level 2 Style: CSSStyleSheet.cssRules</a></p> diff --git a/files/pl/web/api/stylesheet/deleterule/index.html b/files/pl/web/api/stylesheet/deleterule/index.html new file mode 100644 index 0000000000..bda06f24b4 --- /dev/null +++ b/files/pl/web/api/stylesheet/deleterule/index.html @@ -0,0 +1,26 @@ +--- +title: stylesheet.deleteRule +slug: Web/API/Stylesheet/deleteRule +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/CSSStyleSheet/deleteRule +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <b>deleteRule</b> usuwa regułę stylu bieżącego obiektu arkusza stylów.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">stylesheet.deleteRule(<i>index</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>index</code> jest długą liczbą reprezentującą pozycję reguły.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> myStyles.deleteRule(0); +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleSheet-deleteRule">deleteRule</a></p> +<p>{{ languages( { "en": "en/DOM/stylesheet.deleteRule" } ) }}</p> diff --git a/files/pl/web/api/stylesheet/disabled/index.html b/files/pl/web/api/stylesheet/disabled/index.html new file mode 100644 index 0000000000..74e1e5401a --- /dev/null +++ b/files/pl/web/api/stylesheet/disabled/index.html @@ -0,0 +1,25 @@ +--- +title: stylesheet.disabled +slug: Web/API/Stylesheet/disabled +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/disabled +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Ta własność sygnalizuje, gdzie bieżący arkusz stylów jest używany lub nie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>bool</i> = stylesheet.disabled +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// jeśli arkusz stylów jest wyłączony... +if (stylesheet.disabled) { + // zachowuje style in-line +} +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-disabled">disabled </a></p> +<p>{{ languages( { "en": "en/DOM/stylesheet.disabled" } ) }}</p> diff --git a/files/pl/web/api/stylesheet/href/index.html b/files/pl/web/api/stylesheet/href/index.html new file mode 100644 index 0000000000..e0d7661c24 --- /dev/null +++ b/files/pl/web/api/stylesheet/href/index.html @@ -0,0 +1,42 @@ +--- +title: stylesheet.href +slug: Web/API/Stylesheet/href +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/href +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca położenie zewnetrznego arkusza stylów.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>uri</i> = stylesheet.href +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>uri</code> jest łańcuchem zawierającym URI arkusza stylów.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> // W lokalnej maszynie: + <html> + <head> + <link rel="StyleSheet" href="example.css" type="text/css" /> + <script> + function sref() { + alert(document.styleSheets[0].href); + } + </script> + </head> + <body> + <div class="thunder">Thunder</div> + <button onclick="sref()">ss</button> + </body> + </html> +// Zwraca "file:////C:/Windows/Desktop/example.css +</pre> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>Jeżeli arkusz stylów jest zewnętrznym arkuszem stylów, wartością tego atrybutu jest jego lokalizacja. Dla wewnętrznego arkusza stylów, wartość tego atrybutu wynosi null.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-href">href </a></p> diff --git a/files/pl/web/api/stylesheet/index.html b/files/pl/web/api/stylesheet/index.html new file mode 100644 index 0000000000..dca62c79ee --- /dev/null +++ b/files/pl/web/api/stylesheet/index.html @@ -0,0 +1,57 @@ +--- +title: Stylesheet +slug: Web/API/Stylesheet +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/CSSStyleSheet +--- +<p>{{ ApiRef() }}</p> + +<p>Ten dział opisuje obiekt <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet">CSSStyleSheet</a>, który opisuje pojedynczy arkusz stylów css.</p> + +<p>Arkusz stylów CSS składa się z reguł CSS, każda z nich może być manipulowana bezpośrednio przez obiekt <a href="pl/DOM/cssRule">CSSRule</a>. Obiekt arkusza stylów pozwala ci kontrolować i modyfikować arkusze stylów,włączając jego listę reguł.</p> + +<p>Możesz pobrać listę arkuszy stylów dla bieżącego dokumentu używając własności <a href="pl/DOM/document.styleSheets">document.styleSheets</a>.</p> + +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3> + +<dl> + <dt><a href="pl/DOM/stylesheet.cssRules">stylesheet.cssRules</a></dt> + <dd>Zwraca wszystkie reguły/zasady CSS w arkuszu stylów jako tablicę.</dd> + <dt><a href="pl/DOM/stylesheet.disabled">stylesheet.disabled</a></dt> + <dd>Ta własność sygnalizuje, czy bieżący arkusz stylów jest używany lub nie.</dd> + <dt><a href="pl/DOM/stylesheet.href">stylesheet.href</a></dt> + <dd>Zwraca położenie zewnętrznego arkusza stylów.</dd> + <dt><a href="pl/DOM/stylesheet.media">stylesheet.media</a></dt> + <dd>SpeObiekt media określa zamierzony nośnik docelowy dla stylu informacji.</dd> + <dt><a href="pl/DOM/stylesheet.ownerNode">stylesheet.ownerNode</a></dt> + <dd>Zwraca węzeł łączący arkusz stylów z dokumentem.</dd> + <dt><a href="pl/DOM/stylesheet.ownerRule">stylesheet.ownerRule</a></dt> + <dd>Jeżeli arkusz stylów pochodzi z reguły @import, własność ownerRule będzie zawierać CSSImportRule.</dd> + <dt><a href="pl/DOM/stylesheet.parentStyleSheet">stylesheet.parentStyleSheet</a></dt> + <dd>Zwraca arkusz stylów, który włącza obecny arkusz (jeśli istnieje).</dd> + <dt><a href="pl/DOM/stylesheet.title">stylesheet.title</a></dt> + <dd>Zwraca doradczy tytuł bieżącego arkusza stylów.</dd> + <dt><a href="pl/DOM/stylesheet.type">stylesheet.type</a></dt> + <dd>Określa język arkusza stylów dla tego arkusza stylów.</dd> +</dl> + +<h3 id="Metody" name="Metody">Metody</h3> + +<dl> + <dt><a href="pl/DOM/stylesheet.deleteRule">stylesheet.deleteRule</a></dt> + <dd>Usuwa reguły z arkusza stylów.</dd> + <dt><a href="pl/DOM/stylesheet.insertRule">stylesheet.insertRule</a></dt> + <dd>Umieszcza nową regułę stylu dla bieżącego arkusza stylów.</dd> +</dl> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-StyleSheet">DOM Level 2 Style Sheets: StyleSheet</a></p> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet">DOM Level 2 CSS: CSSStyleSheet</a></p> + +<p>{{ languages( { "en": "en/DOM/stylesheet" } ) }}</p> diff --git a/files/pl/web/api/stylesheet/insertrule/index.html b/files/pl/web/api/stylesheet/insertrule/index.html new file mode 100644 index 0000000000..eeabdc8a31 --- /dev/null +++ b/files/pl/web/api/stylesheet/insertrule/index.html @@ -0,0 +1,42 @@ +--- +title: stylesheet.insertRule +slug: Web/API/Stylesheet/insertRule +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/CSSStyleSheet/insertRule +--- +<p>{{APIRef("CSSOM")}}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Metoda <strong>insertRule</strong> dodaje nową regułę stylu do aktualnego arkuszu stylu.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">stylesheet.insertRule(<em>rule</em>, <em>index</em>) +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<ul> + <li><code>rule</code> jest ciągiem zawierającym regułę do dodania (selector i declaration).</li> + <li><code>index</code> jest liczbą reprezentującą pozycję do dodania.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre> // push a new rule onto the top of my stylesheet + myStyle.insertRule("#blanc { color: white }", 0); +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>For rule sets this contains both the selector and the style declaration. For at-rules, this specifies both the at-identifier and the rule content.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleSheet-insertRule">insertRule </a></p> diff --git a/files/pl/web/api/stylesheet/media/index.html b/files/pl/web/api/stylesheet/media/index.html new file mode 100644 index 0000000000..8264cd5cb1 --- /dev/null +++ b/files/pl/web/api/stylesheet/media/index.html @@ -0,0 +1,29 @@ +--- +title: stylesheet.media +slug: Web/API/Stylesheet/media +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/media +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Obiekt <b>media</b> określa zamierzony nośnik docelowy dla stylu informacji.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>medium</i> = stylesheet.media +stylesheet.media =<i>medium</i> +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>medium</code> jest łańcuchem znaków opisującym pojedynczy nośnik lub listę nośników oddzielonych przecinkiem.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><link rel="StyleSheet" href="document.css" type="text/css" media="screen" /> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Domyślną wartością dla media jest "screen".</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 2 Styles - STYLESHEET</p> +<p>{{ languages( { "en": "en/DOM/stylesheet.media" } ) }}</p> diff --git a/files/pl/web/api/stylesheet/ownerrule/index.html b/files/pl/web/api/stylesheet/ownerrule/index.html new file mode 100644 index 0000000000..93d73c35c5 --- /dev/null +++ b/files/pl/web/api/stylesheet/ownerrule/index.html @@ -0,0 +1,24 @@ +--- +title: stylesheet.ownerRule +slug: Web/API/Stylesheet/ownerRule +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Jeżeli arkusz stylów pochodzi z reguły @import, własność <b>ownerRule</b> będzie zawierać regułę CSSImportRule.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>rule</i> = stylesheet.ownerRule +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>rule</code> jest łańcuchem zawierającym importowaną regułę w dokumencie HTML lub XML.</li> +</ul> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zauważ, że jeżeli wartość własności <b>ownerNode</b> bieżącego elementu <a href="pl/STYLE">STYLE</a> wynosi NULL, wówczas reguła <b>ownerRule</b> zwróci !!TODO!!. I odwrotnie.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleSheet-ownerRule">ownerRule </a></p> +<p>{{ languages( { "en": "en/DOM/stylesheet.ownerRule" } ) }}</p> diff --git a/files/pl/web/api/stylesheet/parentstylesheet/index.html b/files/pl/web/api/stylesheet/parentstylesheet/index.html new file mode 100644 index 0000000000..9d79c0197a --- /dev/null +++ b/files/pl/web/api/stylesheet/parentstylesheet/index.html @@ -0,0 +1,29 @@ +--- +title: stylesheet.parentStyleSheet +slug: Web/API/Stylesheet/parentStyleSheet +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/parentStyleSheet +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca arkusz stylów, który włącza obecny arkusz (jeśli istnieje).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>objRef</i> = stylesheet.parentStyleSheet +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">// znajdź arkusz stylów najwyższego poziomu +if (stylesheet.parentStyleSheet) { + sheet = stylesheet.parentStyleSheet; +} +else +{ sheet = stylesheet; } +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Ta własność zwraca wartość NULL, jeśli obecny arkusz stylów jest arkuszem najwyższego poziomu lub jeśli włączanie arkuszy stylów nie jest obsługiwane.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-parentStyleSheet">parentStyleSheet </a></p> +<p>{{ languages( { "en": "en/DOM/stylesheet.parentStyleSheet" } ) }}</p> diff --git a/files/pl/web/api/stylesheet/title/index.html b/files/pl/web/api/stylesheet/title/index.html new file mode 100644 index 0000000000..48353f2667 --- /dev/null +++ b/files/pl/web/api/stylesheet/title/index.html @@ -0,0 +1,18 @@ +--- +title: stylesheet.title +slug: Web/API/Stylesheet/title +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/title +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>title</b> zwraca doradczy tytuł bieżącego arkusza stylów.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Tytuł jest często określany w <a href="pl/OwnerNode">ownerNode</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-title">title</a></p> +<p>{{ languages( { "en": "en/DOM/stylesheet.title" } ) }}</p> diff --git a/files/pl/web/api/stylesheet/type/index.html b/files/pl/web/api/stylesheet/type/index.html new file mode 100644 index 0000000000..ea1892faa4 --- /dev/null +++ b/files/pl/web/api/stylesheet/type/index.html @@ -0,0 +1,22 @@ +--- +title: stylesheet.type +slug: Web/API/Stylesheet/type +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/type +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>type określa język arkusza stylów dla tego arkusza stylów.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>string</i> = stylesheet.type +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> ss.type = "text/css"; +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-type">type</a></p> +<p>{{ languages( { "en": "en/DOM/stylesheet.type" } ) }}</p> diff --git a/files/pl/web/api/web_audio_api/index.html b/files/pl/web/api/web_audio_api/index.html new file mode 100644 index 0000000000..e67cec2fd6 --- /dev/null +++ b/files/pl/web/api/web_audio_api/index.html @@ -0,0 +1,503 @@ +--- +title: Web Audio API +slug: Web/API/Web_Audio_API +translation_of: Web/API/Web_Audio_API +--- +<div> +<p>Web Audio API to potężny i uniwersalny system webowej kontroli audio umożliwiający deweloperom wybór źródeł audio, dodawanie efektów do audio, tworzenie wizualizacji audio, stosowanie efektów przestrzennych (jak panorama) i wiele więcej.</p> +</div> + +<h2 id="Założenia_Web_Audio_i_jego_zastosowanie">Założenia Web Audio i jego zastosowanie</h2> + +<p>Web Audio API dotyczy przebiegu operacji audio wewnątrz kontekstu audio (audio context) i został zaprojektowany po to, by umożliwić obróbkę modularną (modular routing). Podstawowe operacje audio zostają wykonywane z węzłami audio (audio nodes), które złączone tworzą wykres trasowania audio (audio routing graph). Niektóre źródła - o różnych typach układów kanałów - są wspierane nawet w obrębie pojedynczego kontekstu. Modularny design cechuje się elastycznością umożliwiającą tworzenie złożonych funkcji audio z efektami dynamicznymi.</p> + +<p>Audio nodes are linked into chains and simple webs by their inputs and outputs. They typically start with one or more sources. Sources provide arrays of sound intensities (samples) at very small timeslices, often tens of thousands of them per second. These could be either computed mathematically (such as {{domxref("OscillatorNode")}}), or they can be recordings from sound/video files (like {{domxref("AudioBufferSourceNode")}} and {{domxref("MediaElementAudioSourceNode")}}) and audio streams ({{domxref("MediaStreamAudioSourceNode")}}). In fact, sound files are just recordings of sound intensities themselves, which come in from microphones or electric instruments, and get mixed down into a single, complicated wave.</p> + +<p>Outputs of these nodes could be linked to inputs of others, which mix or modify these streams of sound samples into different streams. A common modification is multiplying the samples by a value to make them louder or quieter (as is the case with {{domxref("GainNode")}}). Once the sound has been sufficiently processed for the intended effect, it can be linked to the input of a destination ({{domxref("AudioContext.destination")}}), which sends the sound to the speakers or headphones. This last connection is only necessary if the user is supposed to hear the audio.</p> + +<p>A simple, typical workflow for web audio would look something like this:</p> + +<ol> + <li>Create audio context</li> + <li>Inside the context, create sources — such as <code><audio></code>, oscillator, stream</li> + <li>Create effects nodes, such as reverb, biquad filter, panner, compressor</li> + <li>Choose final destination of audio, for example your system speakers</li> + <li>Connect the sources up to the effects, and the effects to the destination.</li> +</ol> + +<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/12241/webaudioAPI_en.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p> + +<p>Timing is controlled with high precision and low latency, allowing developers to write code that responds accurately to events and is able to target specific samples, even at a high sample rate. So applications such as drum machines and sequencers are well within reach.</p> + +<p>The Web Audio API also allows us to control how audio is <em>spatialized</em>. Using a system based on a <em>source-listener model</em>, it allows control of the <em>panning model</em> and deals with <em>distance-induced attenuation</em> or <em>doppler shift</em> induced by a moving source (or moving listener).</p> + +<div class="note"> +<p>You can read about the theory of the Web Audio API in a lot more detail in our article <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a>.</p> +</div> + +<h2 id="Web_Audio_API_Interfaces">Web Audio API Interfaces</h2> + +<p>The Web Audio API has a number of interfaces and associated events, which we have split up into nine categories of functionality.</p> + +<h3 id="General_audio_graph_definition">General audio graph definition</h3> + +<p>General containers and definitions that shape audio graphs in Web Audio API usage.</p> + +<dl> + <dt>{{domxref("AudioContext")}}</dt> + <dd>The <strong><code>AudioContext</code></strong> interface represents an audio-processing graph built from audio modules linked together, each represented by an {{domxref("AudioNode")}}. An audio context controls the creation of the nodes it contains and the execution of the audio processing, or decoding. You need to create an <code>AudioContext</code> before you do anything else, as everything happens inside a context.</dd> + <dt>{{domxref("AudioNode")}}</dt> + <dd>The <strong><code>AudioNode</code></strong><strong> </strong>interface represents an audio-processing module like an <em>audio source</em> (e.g. an HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} element), <em>audio destination</em>, <em>intermediate processing module</em> (e.g. a filter like {{domxref("BiquadFilterNode")}}, or <em>volume control</em> like {{domxref("GainNode")}}).</dd> + <dt>{{domxref("AudioParam")}}</dt> + <dd>The <strong><code>AudioParam</code></strong><strong> </strong>interface represents an audio-related parameter, like one of an {{domxref("AudioNode")}}. It can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.</dd> + <dt>The {{event("ended")}} event</dt> + <dd>The <code>ended</code> event is fired when playback has stopped because the end of the media was reached.</dd> +</dl> + +<h3 id="Defining_audio_sources">Defining audio sources</h3> + +<p>Interfaces that define audio sources for use in the Web Audio API.</p> + +<dl> + <dt>{{domxref("OscillatorNode")}}</dt> + <dd>The <strong><code style="font-size: 14px;">OscillatorNode</code></strong><strong> </strong>interface represents a periodic waveform, such as a sine or triangle wave. It is an {{domxref("AudioNode")}} audio-processing module that causes a given <em>frequency</em> of wave to be created.</dd> + <dt>{{domxref("AudioBuffer")}}</dt> + <dd>The <strong><code>AudioBuffer</code></strong> interface represents a short audio asset residing in memory, created from an audio file using the {{ domxref("AudioContext.decodeAudioData()") }} method, or created with raw data using {{ domxref("AudioContext.createBuffer()") }}. Once decoded into this form, the audio can then be put into an {{ domxref("AudioBufferSourceNode") }}.</dd> + <dt>{{domxref("AudioBufferSourceNode")}}</dt> + <dd>The <strong><code>AudioBufferSourceNode</code></strong> interface represents an audio source consisting of in-memory audio data, stored in an {{domxref("AudioBuffer")}}. It is an {{domxref("AudioNode")}} that acts as an audio source.</dd> + <dt>{{domxref("MediaElementAudioSourceNode")}}</dt> + <dd>The <code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> interface represents an audio source consisting of an HTML5 {{ htmlelement("audio") }} or {{ htmlelement("video") }} element. It is an {{domxref("AudioNode")}} that acts as an audio source.</dd> + <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt> + <dd>The <code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> interface represents an audio source consisting of a <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (such as a webcam, microphone, or a stream being sent from a remote computer). It is an {{domxref("AudioNode")}} that acts as an audio source.</dd> +</dl> + +<h3 id="Defining_audio_effects_filters">Defining audio effects filters</h3> + +<p>Interfaces for defining effects that you want to apply to your audio sources.</p> + +<dl> + <dt>{{domxref("BiquadFilterNode")}}</dt> + <dd>The <strong><code>BiquadFilterNode</code></strong><strong> </strong>interface represents a simple low-order filter. It is an {{domxref("AudioNode")}} that can represent different kinds of filters, tone control devices, or graphic equalizers. A <code>BiquadFilterNode</code> always has exactly one input and one output.</dd> + <dt>{{domxref("ConvolverNode")}}</dt> + <dd>The <code><strong>Convolver</strong></code><strong><code>Node</code></strong><strong> </strong>interface is an <span style="line-height: 1.5;">{{domxref("AudioNode")}} that</span><span style="line-height: 1.5;"> performs a Linear Convolution on a given {{domxref("AudioBuffer")}}, and is often used to achieve a reverb effect</span><span style="line-height: 1.5;">.</span></dd> + <dt>{{domxref("DelayNode")}}</dt> + <dd>The <strong><code>DelayNode</code></strong><strong> </strong>interface represents a <a href="http://en.wikipedia.org/wiki/Digital_delay_line" title="http://en.wikipedia.org/wiki/Digital_delay_line">delay-line</a>; an {{domxref("AudioNode")}} audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.</dd> + <dt>{{domxref("DynamicsCompressorNode")}}</dt> + <dd>The <strong><code>DynamicsCompressorNode</code></strong> interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.</dd> + <dt>{{domxref("GainNode")}}</dt> + <dd>The <strong><code>GainNode</code></strong><strong> </strong>interface represents a change in volume. It is an {{domxref("AudioNode")}} audio-processing module that causes a given <em>gain</em> to be applied to the input data before its propagation to the output.</dd> + <dt>{{domxref("StereoPannerNode")}}</dt> + <dd>The <code><strong>StereoPannerNode</strong></code> interface represents a simple stereo panner node that can be used to pan an audio stream left or right.</dd> + <dt>{{domxref("WaveShaperNode")}}</dt> + <dd>The <strong><code>WaveShaperNode</code></strong><strong> </strong>interface represents a non-linear distorter. It is an {{domxref("AudioNode")}} that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.</dd> + <dt>{{domxref("PeriodicWave")}}</dt> + <dd>Describes a periodic waveform that can be used to shape the output of an {{ domxref("OscillatorNode") }}.</dd> +</dl> + +<h3 id="Defining_audio_destinations">Defining audio destinations</h3> + +<p>Once you are done processing your audio, these interfaces define where to output it.</p> + +<dl> + <dt>{{domxref("AudioDestinationNode")}}</dt> + <dd>The <strong><code>AudioDestinationNode</code></strong> interface represents the end destination of an audio source in a given context — usually the speakers of your device.</dd> + <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt> + <dd>The <code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> interface represents an audio destination consisting of a <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} with a single <code>AudioMediaStreamTrack</code>, which can be used in a similar way to a {{domxref("MediaStream")}} obtained from {{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}. It is an {{domxref("AudioNode")}} that acts as an audio destination.</dd> +</dl> + +<h3 id="Data_analysis_and_visualization">Data analysis and visualization</h3> + +<p>If you want to extract time, frequency, and other data from your audio, the <code>AnalyserNode</code> is what you need.</p> + +<dl> + <dt>{{domxref("AnalyserNode")}}</dt> + <dd>The <strong><code>AnalyserNode</code></strong> interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.</dd> +</dl> + +<h3 id="Splitting_and_merging_audio_channels">Splitting and merging audio channels</h3> + +<p>To split and merge audio channels, you'll use these interfaces.</p> + +<dl> + <dt>{{domxref("ChannelSplitterNode")}}</dt> + <dd>The <code><strong>ChannelSplitterNode</strong></code> interface separates the different channels of an audio source out into a set of <em>mono</em> outputs.</dd> + <dt>{{domxref("ChannelMergerNode")}}</dt> + <dd>The <code><strong>ChannelMergerNode</strong></code> interface reunites different mono inputs into a single output. Each input will be used to fill a channel of the output.</dd> +</dl> + +<h3 id="Audio_spatialization">Audio spatialization</h3> + +<p>These interfaces allow you to add audio spatialization panning effects to your audio sources.</p> + +<dl> + <dt>{{domxref("AudioListener")}}</dt> + <dd>The <strong><code>AudioListener</code></strong><strong> </strong>interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.</dd> + <dt>{{domxref("PannerNode")}}</dt> + <dd>The <strong><code>PannerNode</code></strong><strong> </strong>interface represents the behavior of a signal in space. It is an {{domxref("AudioNode")}} audio-processing module describing its position with right-hand Cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.</dd> +</dl> + +<h3 id="Audio_processing_in_JavaScript">Audio processing in JavaScript</h3> + +<p>You can write JavaScript code to process audio data. To do so, you use the interfaces and events listed below.</p> + +<div class="note"> +<p>As of the August 29, 2014 version of the Web Audio API spec. these features have been marked as deprecated, and are soon to be replaced by {{ anch("Audio_Workers") }}.</p> +</div> + +<dl> + <dt>{{domxref("ScriptProcessorNode")}}</dt> + <dd>The <strong><code>ScriptProcessorNode</code></strong><strong> </strong>interface allows the generation, processing, or analyzing of audio using JavaScript. It is an {{domxref("AudioNode")}} audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing the {{domxref("AudioProcessingEvent")}} interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.</dd> + <dt>{{event("audioprocess")}} (event)</dt> + <dd>The <code>audioprocess</code> event is fired when an input buffer of a Web Audio API {{domxref("ScriptProcessorNode")}} is ready to be processed.</dd> + <dt>{{domxref("AudioProcessingEvent")}}</dt> + <dd>The <a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> <code>AudioProcessingEvent</code> represents events that occur when a {{domxref("ScriptProcessorNode")}} input buffer is ready to be processed.</dd> +</dl> + +<h3 id="Offlinebackground_audio_processing">Offline/background audio processing</h3> + +<p>It is possible to process/render an audio graph very quickly in the background — rendering it to an {{domxref("AudioBuffer")}} rather than to the device's speakers — with the following.</p> + +<dl> + <dt>{{domxref("OfflineAudioContext")}}</dt> + <dd>The <strong><code>OfflineAudioContext</code></strong> interface is an {{domxref("AudioContext")}} interface representing an audio-processing graph built from linked together {{domxref("AudioNode")}}s. In contrast with a standard <code>AudioContext</code>, an <code>OfflineAudioContext</code> doesn't really render the audio but rather generates it, <em>as fast as it can</em>, in a buffer.</dd> + <dt>{{event("complete")}} (event)</dt> + <dd>The <code>complete</code> event is fired when the rendering of an {{domxref("OfflineAudioContext")}} is terminated.</dd> + <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt> + <dd>The <code>OfflineAudioCompletionEvent</code> represents events that occur when the processing of an {{domxref("OfflineAudioContext")}} is terminated. The {{event("complete")}} event implements this interface.</dd> +</dl> + +<h3 id="Audio_Workers" name="Audio_Workers">Audio Workers</h3> + +<p>Audio workers provide the ability for direct scripted audio processing to be done inside a <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">web worker</a> context, and are defined by a couple of interfaces (new as of 29th August 2014). These are not implemented in any browsers yet. When implemented, they will replace {{domxref("ScriptProcessorNode")}}, and the other features discussed in the <a href="#Audio_processing_via_JavaScript">Audio processing in JavaScript</a> section above.</p> + +<dl> + <dt>{{domxref("AudioWorkerNode")}}</dt> + <dd>The AudioWorkerNode interface represents an {{domxref("AudioNode")}} that interacts with a worker thread to generate, process, or analyse audio directly.</dd> + <dt>{{domxref("AudioWorkerGlobalScope")}}</dt> + <dd>The <code>AudioWorkerGlobalScope</code> interface is a <code>DedicatedWorkerGlobalScope</code>-derived object representing a worker context in which an audio processing script is run; it is designed to enable the generation, processing, and analysis of audio data directly using JavaScript in a worker thread.</dd> + <dt>{{domxref("AudioProcessEvent")}}</dt> + <dd>This is an <code>Event</code> object that is dispatched to {{domxref("AudioWorkerGlobalScope")}} objects to perform processing.</dd> +</dl> + +<h2 id="Example" name="Example">Obsolete interfaces</h2> + +<p>The following interfaces were defined in old versions of the Web Audio API spec, but are now obsolete and have been replaced by other interfaces.</p> + +<dl> + <dt>{{domxref("JavaScriptNode")}}</dt> + <dd>Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by {{domxref("ScriptProcessorNode")}}.</dd> + <dt>{{domxref("WaveTableNode")}}</dt> + <dd>Used to define a periodic waveform. This interface is obsolete, and has been replaced by {{domxref("PeriodicWave")}}.</dd> +</dl> + +<h2 id="Example" name="Example">Example</h2> + +<p>This example shows a wide variety of Web Audio API functions being used. You can see this code in action on the <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> demo (also check out the <a href="https://github.com/mdn/voice-change-o-matic">full source code at Github</a>) — this is an experimental voice changer toy demo; keep your speakers turned down low when you use it, at least to start!</p> + +<p>The Web Audio API lines are highlighted; if you want to find out more about what the different methods, etc. do, have a search around the reference pages.</p> + +<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151]">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context +// Webkit/blink browsers need prefix, Safari won't work without window. + +var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options +var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options +var mute = document.querySelector('.mute'); // mute button +var drawVisual; // requestAnimationFrame + +var analyser = audioCtx.createAnalyser(); +var distortion = audioCtx.createWaveShaper(); +var gainNode = audioCtx.createGain(); +var biquadFilter = audioCtx.createBiquadFilter(); + +function makeDistortionCurve(amount) { // function to make curve shape for distortion/wave shaper node to use + var k = typeof amount === 'number' ? amount : 50, + n_samples = 44100, + curve = new Float32Array(n_samples), + deg = Math.PI / 180, + i = 0, + x; + for ( ; i < n_samples; ++i ) { + x = i * 2 / n_samples - 1; + curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) ); + } + return curve; +}; + +navigator.getUserMedia ( + // constraints - only audio needed for this app + { + audio: true + }, + + // Success callback + function(stream) { + source = audioCtx.createMediaStreamSource(stream); + source.connect(analyser); + analyser.connect(distortion); + distortion.connect(biquadFilter); + biquadFilter.connect(gainNode); + gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together + + visualize(stream); + voiceChange(); + + }, + + // Error callback + function(err) { + console.log('The following gUM error occured: ' + err); + } +); + +function visualize(stream) { + WIDTH = canvas.width; + HEIGHT = canvas.height; + + var visualSetting = visualSelect.value; + console.log(visualSetting); + + if(visualSetting == "sinewave") { + analyser.fftSize = 2048; + var bufferLength = analyser.frequencyBinCount; // half the FFT value + var dataArray = new Uint8Array(bufferLength); // create an array to store the data + + canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + + function draw() { + + drawVisual = requestAnimationFrame(draw); + + analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above + + canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // draw wave with canvas + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + + canvasCtx.beginPath(); + + var sliceWidth = WIDTH * 1.0 / bufferLength; + var x = 0; + + for(var i = 0; i < bufferLength; i++) { + + var v = dataArray[i] / 128.0; + var y = v * HEIGHT/2; + + if(i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + + x += sliceWidth; + } + + canvasCtx.lineTo(canvas.width, canvas.height/2); + canvasCtx.stroke(); + }; + + draw(); + + } else if(visualSetting == "off") { + canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + canvasCtx.fillStyle = "red"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + } + +} + +function voiceChange() { + distortion.curve = new Float32Array; + biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run + + var voiceSetting = voiceSelect.value; + console.log(voiceSetting); + + if(voiceSetting == "distortion") { + distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node + } else if(voiceSetting == "biquad") { + biquadFilter.type = "lowshelf"; + biquadFilter.frequency.value = 1000; + biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad + } else if(voiceSetting == "off") { + console.log("Voice settings turned off"); // do nothing, as off option was chosen + } + +} + +// event listeners to change visualize and voice settings + +visualSelect.onchange = function() { + window.cancelAnimationFrame(drawVisual); + visualize(stream); +} + +voiceSelect.onchange = function() { + voiceChange(); +} + +mute.onclick = voiceMute; + +function voiceMute() { // toggle to mute and unmute sound + if(mute.id == "") { + gainNode.gain.value = 0; // gain set to 0 to mute sound + mute.id = "activated"; + mute.innerHTML = "Unmute"; + } else { + gainNode.gain.value = 1; // gain set to 1 to unmute sound + mute.id = ""; + mute.innerHTML = "Mute"; + } +} +</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')}}</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>Edge</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>{{CompatVersionUnknown}}</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>Edge</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>{{CompatVersionUnknown}}</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> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li> + <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic example</a></li> + <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin example</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li> + <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/" title="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li> + <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/" title="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li> + <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li> + <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li> + <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li> +</ul> + +<section id="Quick_Links"> +<h3 id="Quicklinks">Quicklinks</h3> + +<ol> + <li data-default-state="open"><strong><a href="#">Guides</a></strong> + + <ol> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio spatialization basics</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li> + </ol> + </li> + <li data-default-state="open"><strong><a href="#">Examples</a></strong> + <ol> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Simple_synth">Simple synth keyboard</a></li> + <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a></li> + <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a></li> + </ol> + </li> + <li data-default-state="open"><strong><a href="#">Interfaces</a></strong> + <ol> + <li>{{domxref("AnalyserNode")}}</li> + <li>{{domxref("AudioBuffer")}}</li> + <li>{{domxref("AudioBufferSourceNode")}}</li> + <li>{{domxref("AudioContext")}}</li> + <li>{{domxref("AudioDestinationNode")}}</li> + <li>{{domxref("AudioListener")}}</li> + <li>{{domxref("AudioNode")}}</li> + <li>{{domxref("AudioParam")}}</li> + <li>{{event("audioprocess")}} (event)</li> + <li>{{domxref("AudioProcessingEvent")}}</li> + <li>{{domxref("BiquadFilterNode")}}</li> + <li>{{domxref("ChannelMergerNode")}}</li> + <li>{{domxref("ChannelSplitterNode")}}</li> + <li>{{event("complete")}} (event)</li> + <li>{{domxref("ConvolverNode")}}</li> + <li>{{domxref("DelayNode")}}</li> + <li>{{domxref("DynamicsCompressorNode")}}</li> + <li>{{event("ended_(Web_Audio)", "ended")}} (event)</li> + <li>{{domxref("GainNode")}}</li> + <li>{{domxref("MediaElementAudioSourceNode")}}</li> + <li>{{domxref("MediaStreamAudioDestinationNode")}}</li> + <li>{{domxref("MediaStreamAudioSourceNode")}}</li> + <li>{{domxref("OfflineAudioCompletionEvent")}}</li> + <li>{{domxref("OfflineAudioContext")}}</li> + <li>{{domxref("OscillatorNode")}}</li> + <li>{{domxref("PannerNode")}}</li> + <li>{{domxref("PeriodicWave")}}</li> + <li>{{domxref("ScriptProcessorNode")}}</li> + <li>{{domxref("WaveShaperNode")}}</li> + </ol> + </li> +</ol> +</section> diff --git a/files/pl/web/api/webgl_api/index.html b/files/pl/web/api/webgl_api/index.html new file mode 100644 index 0000000000..a3cc7bb3d0 --- /dev/null +++ b/files/pl/web/api/webgl_api/index.html @@ -0,0 +1,252 @@ +--- +title: WebGL +slug: Web/API/WebGL_API +tags: + - WebGL +translation_of: Web/API/WebGL_API +--- +<div>{{WebGLSidebar}}</div> + +<p class="summary">WebGL (Web Graphics Library) to API języka JavaScript służące do renderowania (rysowania) interaktywnej grafiki 3D i 2D poprzez kompatybilną przeglądarkę bez używania pluginów. WebGL został oparty na API OpenGL ES 2.0 i może zostać wykorzystany do pracy z elementem {{HTMLElement("canvas")}}.</p> + +<p>Aktualnie Jest wspierany przez <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+ i <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+; ponad to urządzenie użytkownika musi także spełniać odpowiednie warunki sprzętowe, aby móc obsłużyć WebGL (przede wszystkim obsługiwać OpenGL co najmniej w wersji 2.0).</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Tematy">Tematy</h2> + +<dl> + <dt><a href="/en-US/docs/WebGL/Getting_started_with_WebGL" title="WebGL/Getting started with WebGL">Rozpocznij pracę z WebGL </a></dt> + <dd>Czyli jak stworzyć pierwszy kontekst WebGL.</dd> + <dt><a href="/en-US/docs/WebGL/Adding_2D_content_to_a_WebGL_context" title="WebGL/Adding 2D content to a WebGL context">Dodawanie grafiki 2D do kontekstu WebGL</a></dt> + <dd>Czyli jak wyświetlić proste kształty używając WebGL.</dd> + <dt><a href="/en-US/docs/WebGL/Using_shaders_to_apply_color_in_WebGL" title="WebGL/Using shaders to apply color in WebGL">Nakładamy kolory używając shaderów w WebGL</a></dt> + <dd>Czyli jak dodać nieco koloru naszym figurom w WebGL</dd> + <dt><a href="/en-US/docs/WebGL/Animating_objects_with_WebGL" title="WebGL/Animating objects with WebGL">Animacja obiektów w WebGL</a></dt> + <dd>Pokażemy jak zmieniać i przekształcać obiekty na potrzeby prostej animacji.</dd> + <dt><a href="/en-US/docs/WebGL/Creating_3D_objects_using_WebGL" title="WebGL/Creating 3D objects using WebGL">Tworzenie obiektów 3D używając WebGL</a></dt> + <dd>Pokażemy jak tworzyć i animować obiekty 3D (w tym przykładzie, sześcian).</dd> + <dt><a href="/en-US/docs/WebGL/Using_textures_in_WebGL" title="WebGL/Using textures in WebGL">Tworzenie tekstur w WebGL</a></dt> + <dd>Zademonstrowanie tworzenia map tekstur, na obiektach.</dd> + <dt><a href="/en-US/docs/WebGL/Lighting_in_WebGL" title="WebGL/Lighting in WebGL">Światła w WebGL</a></dt> + <dd>Jak zasymulować efekty świetlne w twoim kontekście WebGL.</dd> + <dt><a href="/en-US/docs/WebGL/Animating_textures_in_WebGL" title="WebGL/Animating textures in WebGL">Animacja tekstur w WebGL</a></dt> + <dd>Pokaz, jak animować tekstury, w tym przypadku mapowanie strumienia Ogg na obracającym się sześcianie.</dd> + <dt><a href="/en-US/docs/WebGL/WebGL_best_practices" title="WebGL/WebGL best practices">WebGL - najlepsze praktyki</a></dt> + <dd>Porady i sugestie na wdrożenie zawartości WebGL.</dd> + <dt><a href="/en-US/docs/WebGL/Cross-Domain_Textures" title="WebGL/Cross-Domain Textures">Cross-domain textures</a></dt> + <dd>Informacje na temat załadowania tekstur dla domen innych niż aktualne informacje, które są przetwarzane.</dd> + <dt><a href="/en-US/docs/WebGL/Using_Extensions" title="WebGL/Using_Extensions">Używanie rozszerzeń</a></dt> + <dd>Jak używać rozszerzeń aby włączyć je w WebGL.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Related_Topics" id="Zasoby">Zasoby</h2> + +<dl> + <dt><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a></dt> + <dd>Rozmowa z Nick Desaulniers o wprowadzająca do podstaw WebGL. To jest idealne miejsce aby zacząć jeśli nigdy nie programowałeś grafiki niskopoziomowej.</dd> + <dt><a class="link-https" href="https://www.khronos.org/registry/webgl/specs/1.0/" title="https://www.khronos.org/registry/webgl/specs/1.0/">WebGL - Specyfikacje</a></dt> + <dd>Specyfikacja WebGL.</dd> + <dt><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Strona Khronos WebGL</a></dt> + <dd>Strona domowa WebGL w Khronos Group.</dd> + <dt><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Learning WebGL</a></dt> + <dd>Strona z tutorialami na temat jak używać WebGL.</dd> + <dt><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a></dt> + <dd>Tutorial z podstawami WebGL.</dd> + <dt><a href="http://games.greggman.com/game/webgl-2d-matrices/">WebGL Matrices</a></dt> + <dd>Wprowadzenie metryk używając 2D WebGL. Ta seria wyjaśnia także matematyczne zależności perspektyw 3D.</dd> + <dt><a href="http://learningwebgl.com/cookbook/index.php/" title="http://learningwebgl.com/cookbook/index.php/">The WebGL Cookbook</a></dt> + <dd>Strona z poręcznymi przykładami kodu WebGL.</dd> + <dt><a href="http://planet-webgl.org/" title="http://planet-webgl.org/">Planet WebGL</a></dt> + <dd>Agregat dla ludzi zaangażowanych w społeczność WebGL.</dd> + <dt><a href="http://code.google.com/p/ewgl-matrices/" title="http://code.google.com/p/ewgl-matrices/">ewgl-matrices</a></dt> + <dd>Biblioteka 'blazing fast matrix' dla WebGL</dd> + <dt><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a></dt> + <dd>Biblioteka JavaScript Matrix and Vector dla wysoko wydajnych app WebGL.</dd> + <dt><a href="http://code.google.com/p/webgl-mjs/" title="http://code.google.com/p/webgl-mjs/">mjs</a></dt> + <dd><span>A JavaScript vector and matrix math library, optimized for WebGL usage.</span></dd> + <dt><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a></dt> + <dd>Biblioteka Open Source do manipulowania wektorami i metrykami. Nie zoptymalizowana pod WebGl (eksperymentalna).</dd> + <dt><a href="http://webglplayground.net" title="http://webglplayground.net">WebGL playground</a></dt> + <dd>Narzędzia online do twoarzenia i dzielenia się projektami WebGL. Dobra dla szybkich prototypów i eksperymenotwania.</dd> + <dt><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">WebGL Academy</a></dt> + <dd>HTML/Javascript edytor z tutorialami do nauki podstaw programowania WebGL.</dd> + <dt> </dt> +</dl> +</div> +</div> + +<h2 id="Browser_compatibility">Browser compatibility</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>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9</td> + <td>11</td> + <td>12 (experiment)</td> + <td>5.1 (experiment)</td> + </tr> + <tr> + <td><a href="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt" title="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt"><code>OES_texture_float</code></a></td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/" title="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/"><code>OES_standard_derivatives</code></a></td> + <td>{{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a></td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc" title="WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc"><code>WEBGL_compressed_texture_s3tc</code></a></td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>drawingBufferWidth</code> and <code>drawingBufferHeight</code> attributes</td> + <td>{{CompatGeckoDesktop("9.0")}}</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>Chrome for Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>25 (experiment)</td> + <td>{{CompatNo}}</td> + <td>12 (experiment)</td> + <td>8.1</td> + </tr> + <tr> + <td><code>drawingBufferWidth</code> and <code>drawingBufferHeight</code> attributes</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>25</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt" title="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt"><code>OES_texture_float</code></a></td> + <td>{{CompatGeckoMobile("6.0")}}</td> + <td>25</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/" title="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/"><code>OES_standard_derivatives</code></a></td> + <td>{{CompatGeckoMobile("10.0")}}</td> + <td>25</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a></td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>25</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_element_index_uint</code></td> + <td>{{CompatUnknown}}</td> + <td>25</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_vertex_array_object</code></td> + <td>{{CompatUnknown}}</td> + <td>25</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc" title="WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc"><code>WEBGL_compressed_texture_s3tc</code></a></td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>25<br> + prefixed with <span style="color: rgb(34, 34, 34); font-family: courier new,monospace; font-size: 12.66px; line-height: normal; white-space: pre-wrap;">WEBKIT_</span></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBKIT_EXT_texture_filter_nisotropic</code></td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Compatibility_notes">Compatibility notes</h3> + +<p>In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the <code>webgl</code> context name, but older ones need <code>experimental-webgl</code> as well. In addition, the upcoming WebGL 2 is fully backwards-compatible and will have the context name <code>experimental-webgl2</code> in the future for testing.</p> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<h4 id="WebGL_debugging_and_testing">WebGL debugging and testing</h4> + +<p>Starting with Gecko 10.0 {{geckoRelease("10.0")}}, there are two preferences available which let you control the capabilities of WebGL for testing purposes:</p> + +<dl> + <dt><code>webgl.min_capability_mode</code></dt> + <dd>Boolean-owska stała, oznaczająca tryb w którym włączenie jej na true, przyczynia się do włączenia minimum kompatybilności. Kiedy ten tryb jest włączony, WebGL jest skonfigurowany w taki sposób, aby wspomagał w minimalnym zakresie jego możliwości, wymagane przez specyfikacje. Tryb ten zapewnia możliwość pracy kodu WebGL na urządzeniach i przeglądarkach niezależnie od ich kompatybilności. Opcja <code>false</code> jest ustawiona domyślnie.</dd> + <dt> </dt> + <dt><code>webgl.disable_extensions</code></dt> + <dd>Boolean-owska stała, oznaczająca tryb w którym ustawienie jej na true, powoduje zamknięcie wszystkich rozszerzeń WebGL. Wartość <code>false</code> jest ustawiona domyślnie.</dd> +</dl> diff --git a/files/pl/web/api/webgl_api/tutorial/index.html b/files/pl/web/api/webgl_api/tutorial/index.html new file mode 100644 index 0000000000..cecc84cbfe --- /dev/null +++ b/files/pl/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_this_tutorial">In this tutorial</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">Getting started with WebGL</a></dt> + <dd>How to set up a WebGL context.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">Adding 2D content to a WebGL context</a></dt> + <dd>How to render simple flat shapes using WebGL.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL">Using shaders to apply color in WebGL</a></dt> + <dd>Demonstrates how to add color to shapes using shaders.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL">Animating objects with WebGL</a></dt> + <dd>Shows how to rotate and translate objects to create simple animations.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL">Creating 3D objects using WebGL</a></dt> + <dd>Shows how to create and animate a 3D object (in this case, a cube).</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Using textures in WebGL</a></dt> + <dd>Demonstrates how to map textures onto the faces of an object.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">Lighting in WebGL</a></dt> + <dd>How to simulate lighting effects in your WebGL context.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL">Animating textures in WebGL</a></dt> + <dd>Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.</dd> +</dl> diff --git a/files/pl/web/api/window/alert/index.html b/files/pl/web/api/window/alert/index.html new file mode 100644 index 0000000000..786efd57a3 --- /dev/null +++ b/files/pl/web/api/window/alert/index.html @@ -0,0 +1,58 @@ +--- +title: window.alert +slug: Web/API/Window/alert +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/alert +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Wyświetla okno ostrzegawcze z podanym tekstem.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">window.alert(<em>wiadomość</em>); +</pre> + +<ul> + <li><code>wiadomość</code> to ciąg znaków, który zostanie wyświetlony w oknie.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">window.alert("Hello world!"); +// "window." prefix <a href="pl/DOM/window.window">jest opcjonalny</a>, więc +// alert("Hello world!"); będzie miało taki sam efekt +</pre> + +<p>Wyświetli:</p> + +<p><img alt="Grafika:AlertHelloWorld.png"></p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Okno ostrzegawcze powinno być używane do przekazania wiadomości, które nie wymagają żadnej odpowiedzi ze strony użytkownika, poza potwierdzeniem komunikatu.</p> + +<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.confirm</span> Okna dialogowe to okna modalne - uniemożliwiają użytkownikowi dostęp do reszty interfejsu programu dopóki okno nie zostanie zamknięte. Z tego powodu nie powinieneś nadużywać funkcji, które otwierają okna dialogowe.</p> + +<p>Przy pracy z chrome (np. przy tworzeniu rozszerzenie) zaleca się korzystanie z <a href="pl/NsIPromptService">nsIPromptService</a>.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>{{ DOM0() }}</p> + +<h3 id="Zobacz_te.C5.BC" name="Zobacz_te.C5.BC">Zobacz też</h3> + +<p><a href="pl/DOM/window.confirm">confirm</a>, <a href="pl/DOM/window.prompt">prompt</a></p> + +<p>Dla chrome zobacz <a href="pl/NsIPromptService#alert">alert()</a> i <a href="pl/NsIPromptService#alertCheck">alertCheck()</a></p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.alert", "fr": "fr/DOM/window.alert", "ja": "ja/DOM/window.alert" } ) }}</p> diff --git a/files/pl/web/api/window/applicationcache/index.html b/files/pl/web/api/window/applicationcache/index.html new file mode 100644 index 0000000000..5f176fa81e --- /dev/null +++ b/files/pl/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">Podsumowanie</h2> + +<p>Zwraca referencję do obiektu przetrzymującego <code>cache</code> aplikacji.</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox"><var>cache</var> = window.applicationCache +</pre> + +<h3 id="Parameters" name="Parameters">Parametry</h3> + +<ul> + <li><code>cache</code> jest obiektem mającym referencję do {{domxref("OfflineResourceList")}}.</li> +</ul> + +<h2 id="Specification" name="Specification">Specyfikacja</h2> + +<ul> + <li>{{spec("http://www.w3.org/TR/2008/WD-html5-20080122/#appcache","HTML 5","WD")}}</li> +</ul> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li><a href="/en-US/docs/HTML/Using_the_application_cache">Using Application Cache</a></li> +</ul> diff --git a/files/pl/web/api/window/clearinterval/index.html b/files/pl/web/api/window/clearinterval/index.html new file mode 100644 index 0000000000..e763be1f4a --- /dev/null +++ b/files/pl/web/api/window/clearinterval/index.html @@ -0,0 +1,28 @@ +--- +title: window.clearInterval +slug: Web/API/Window/clearInterval +tags: + - Window +translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">Podsumowanie</h2> +<p>Anuluje powtarzającą się akcję, która została utworzona korzystając z <code><a href="/pl/docs/DOM/window.setInterval" title="DOM/window.setInterval">setInterval()</a></code>.</p> +<h2 id="Syntax" name="Syntax">Składnia</h2> +<pre class="syntaxbox"><em>window</em>.clearInterval(<em>idInterwalu</em>) +</pre> +<p><code>idInterwalu</code> to identyfikator powtarzającej się akcji, która ma zostać anulowana. Ten identyfikator został zwrócony z {{domxref("window.setInterval","setInterval()")}}.</p> +<h2 id="Example" name="Example">Przykład</h2> +<p>Zobacz <a href="/pl/docs/DOM/window.setInterval#Przyk.C5.82ad" title="DOM/window.setInterval#Przyk.C5.82ad">przykład z <code>setInterval()</code></a>.</p> +<h2 id="Specification" name="Specification">Specification</h2> +<p>{{DOM0}}</p> +<h2 id="See_also" name="See_also">Zobacz także</h2> +<ul> + <li><a href="/pl/docs/JavaScript/Timers" title="JavaScript/Timers">JavaScript zegary</a></li> + <li>{{domxref("window.setTimeout")}}</li> + <li>{{domxref("window.setInterval")}}</li> + <li>{{domxref("window.clearTimeout")}}</li> + <li>{{domxref("window.requestAnimationFrame")}}</li> + <li><a href="/pl/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> zarządzanie</a></li> +</ul> diff --git a/files/pl/web/api/window/cleartimeout/index.html b/files/pl/web/api/window/cleartimeout/index.html new file mode 100644 index 0000000000..64604dc479 --- /dev/null +++ b/files/pl/web/api/window/cleartimeout/index.html @@ -0,0 +1,40 @@ +--- +title: window.clearTimeout +slug: Web/API/Window/clearTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Podsumowanie</h3> +<p>Usuwa opóźnienie ustanione przez <a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout">window.setTimeout()</a>.</p> +<h3 id="Syntax" name="Syntax">Składnia</h3> +<pre class="eval">window.clearTimeout(id) +</pre> +<p>gdzie <code>id</code> jest identyfikatorem opóźnienia do usunięcia, który został zwrócony podczas wywołania <a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout">window.setTimeout()</a>.</p> +<h3 id="Example" name="Example">Przykład</h3> +<p>Uruchomienie poniższego skryptu w kontekscie strony i pojedyncze kliknięcie spowoduje wyświetlenie wiadomości po jednej sekundzie. Jeżeli użytkownik będzie klikał na stronie przynajmniej raz na sekundę wiadomość nigdy nie zostanie wyświetlona.</p> +<pre class="eval">var alarm = { + remind: function(aMessage) { + alert(aMessage); + delete this.timeoutID; + }, + + setup: function() { + this.cancel(); + var self = this; + this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!"); + }, + + cancel: function() { + if(typeof this.timeoutID == "number") { + window.clearTimeout(this.timeoutID); + delete this.timeoutID; + } + } +}; +window.onclick = function() { alarm.setup() }; +</pre> +<h3 id="Notes" name="Notes">Uwagi</h3> +<p>Przekazanie niepoprawnego ID do <code>clearTimeout</code> nie powoduje żadnej akcji (żaden błąd nie jest wyrzucany).</p> +<h3 id="Specification" name="Specification">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<p>{{ languages( { "en": "en/DOM/window.clearTimeout", "fr": "fr/DOM/window.clearTimeout", "ja": "ja/DOM/window.clearTimeout", "pl": "pl/DOM/window.clearTimeout" } ) }}</p> diff --git a/files/pl/web/api/window/closed/index.html b/files/pl/web/api/window/closed/index.html new file mode 100644 index 0000000000..bdffbcd94d --- /dev/null +++ b/files/pl/web/api/window/closed/index.html @@ -0,0 +1,59 @@ +--- +title: window.closed +slug: Web/API/Window/closed +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/closed +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Ta własność oznacza czy dane okno jest zamknięte lub nie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">var <var>isClosed</var> = <var>windowRef</var>.closed; +</pre> +<p><br> + Ta własność jest tylko do odczytu.</p> +<h3 id="Zwracane_warto.C5.9Bci" name="Zwracane_warto.C5.9Bci">Zwracane wartości</h3> +<dl> + <dt> + <code>isClosed</code></dt> + <dd> + Wartość logiczna. Możliwe wartości:</dd> +</dl> +<ul> + <li><code>true</code>: Okno zostało zamknięte.</li> + <li><code>false</code>: Okno jest otwarte.</li> +</ul> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<h4 id="Zmiana_adresu_URL_okna_pierwotnego_z_okna_otworzonego" name="Zmiana_adresu_URL_okna_pierwotnego_z_okna_otworzonego">Zmiana adresu URL okna pierwotnego z okna otworzonego</h4> +<p>Ten przykład demonstruje w jaki sposób okno otworzone może zmienić adres URL okna, które je otwarło. Przed próbą zmiany adresu URL, sprawdza czy obecne okno posiada okno-rodzica stosując własność <code><a href="pl/DOM/window.opener">window.opener</a></code> oraz czy nie zostało ono zamknięte.</p> +<pre>// Sprawdza czy okno otwierające istnieje i nie zostało zamknięte +if (window.opener && !window.opener.closed) { + window.opener.location.href = "http://www.mozilla.org"; +} +</pre> +<p>Zauważ, że okno otwierane ma dostęp tylko do okna, które je otworzyło.</p> +<h4 id="Od.C5.9Bwie.C5.BCanie_uprzednio_otwartego_okna" name="Od.C5.9Bwie.C5.BCanie_uprzednio_otwartego_okna">Odświeżanie uprzednio otwartego okna</h4> +<p>W tym przykładzie funkcja <code>refreshPopupWindow()</code> wywołuje metodę <code>reload</code> obiektu <code>location</code> otwartego okna, by odświeżyć jego dane. Jeżeli okno nie zostało jeszcze otwarte, bądź użytkownik zamknął je, zostaje utworzone nowe okno.</p> +<pre>var popupWindow = null; + +function refreshPopupWindow() { + if (popupWindow && !popupWindow.closed) { + // popupWindow jest otwarte, przeładujmy je + popupWindow.location.reload(true); + } else { + // Otwieramy nowe okno + popupWindow = window.open("popup.html","dataWindow"); + } +} +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. <code>window.closed</code> nie jest częścią żadnej specyfikacji W3C, ani technicznej rekomendacji.</p> +<h3 id="Dodatkowe_.C5.BAr.C3.B3d.C5.82a" name="Dodatkowe_.C5.BAr.C3.B3d.C5.82a">Dodatkowe źródła</h3> +<p><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/closed.asp">MSDN window.closed</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.closed", "fr": "fr/DOM/window.closed", "ja": "ja/DOM/window.closed" } ) }}</p> diff --git a/files/pl/web/api/window/content/index.html b/files/pl/web/api/window/content/index.html new file mode 100644 index 0000000000..66eed370a9 --- /dev/null +++ b/files/pl/web/api/window/content/index.html @@ -0,0 +1,43 @@ +--- +title: window.content +slug: Web/API/Window/content +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Window/content +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca obiekt <a href="pl/DOM/window">Window</a> dla zawartości głównego okna. This is useful in XUL windows that have a <code><browser></code> (or <code>tabbrowser</code> or <code><iframe></code>) with <code>type="content-primary"</code> attribute on it - the most famous example is Firefox main window, <code>browser.xul</code>. In such cases, <code>content</code> returns a reference to the <code>Window</code> object for the document currently displayed in the browser. It is a shortcut for <code><var>browserRef</var>.contentWindow</code>.</p> + +<p>In unprivileged content (webpages), <code>content</code> is normally equivalent to <a href="pl/DOM/window.top">top</a> (except in the case of a webpage loaded in a sidebar, <code>content</code> still refers to the <code>Window</code> of the currently selected tab).</p> + +<p>Some examples use <code>_content</code> instead of <code>content</code>. The former has been deprecated for a long time, and you should use <code>content</code> in the new code.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">var <var>windowObject</var> = window.content; +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<p>Executing the following code in a chrome XUL window with a <code><browser type="content-primary"/></code> element in it draws a red border around the first div on the page currently displayed in the browser:</p> + +<pre class="eval">content.document.getElementsByTagName("div")[0].style.border = "solid red 1px"; +</pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>Nie jest częścią żadnej specyfikacji.</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<ul> + <li><a href="pl/Praca_z_oknami_w_kodzie_chrome">Praca z oknami w kodzie chrome</a></li> + <li>When accessing content documents from privileged code, be aware of <a href="pl/XPCNativeWrapper">XPCNativeWrappers</a>.</li> +</ul> diff --git a/files/pl/web/api/window/controllers/index.html b/files/pl/web/api/window/controllers/index.html new file mode 100644 index 0000000000..cdb67298bf --- /dev/null +++ b/files/pl/web/api/window/controllers/index.html @@ -0,0 +1,24 @@ +--- +title: window.controllers +slug: Web/API/Window/controllers +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/controllers +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca kontrolery XUL okna chrome.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>controllers</i> = window.controllers +</pre> +<ul> + <li><code>controllers</code> jest obiektem typu <code><a href="pl/XULControllers">XULControllers</a></code> (<code><a href="pl/NsIControllers">nsIControllers</a></code>).</li> +</ul> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>XUL-specific. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.controllers", "ja": "ja/DOM/window.controllers" } ) }}</p> diff --git a/files/pl/web/api/window/crypto/index.html b/files/pl/web/api/window/crypto/index.html new file mode 100644 index 0000000000..5d7bac8666 --- /dev/null +++ b/files/pl/web/api/window/crypto/index.html @@ -0,0 +1,19 @@ +--- +title: window.crypto +slug: Web/API/Window/crypto +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/crypto +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca obiekt crypto przeglądarki, który może być wtedy użyty do manipulacji różnymi własnościami zabezpieczeń przeglądarki.</p> +<p>Zobacz więcej szczegółów o <a href="pl/JavaScript_crypto">JavaScript crypto</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.crypto", "ja": "ja/DOM/window.crypto" } ) }}</p> diff --git a/files/pl/web/api/window/defaultstatus/index.html b/files/pl/web/api/window/defaultstatus/index.html new file mode 100644 index 0000000000..f352835233 --- /dev/null +++ b/files/pl/web/api/window/defaultstatus/index.html @@ -0,0 +1,35 @@ +--- +title: window.defaultStatus +slug: Web/API/Window/defaultStatus +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/defaultStatus +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Pobiera/ustawia tekst paska stanu dla danego okna.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sMsg</i> = window.defaultStatus +window.defaultStatus =<i>sMsg</i> +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>sMsg</code> jest łańcuchem znaków zawierającym tekst, który ma zostać wyświetlony domyślnie na pasku stanu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><html> + <body onload="window.defaultStatus='hello!';"/> + <button onclick="window.confirm('Czy jesteś pewien, że chcesz wyjść?');">confirm</button> + </body> +</htm> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Aby ustawić zawartość paska stanu, gdy okno zostało już otwarte, możemy użyć <code><a href="pl/Dokumentacja_Gecko_DOM/window/status">window.status</a></code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.defaultStatus", "ja": "ja/DOM/window.defaultStatus" } ) }}</p> diff --git a/files/pl/web/api/window/directories/index.html b/files/pl/web/api/window/directories/index.html new file mode 100644 index 0000000000..7c4e113760 --- /dev/null +++ b/files/pl/web/api/window/directories/index.html @@ -0,0 +1,33 @@ +--- +title: window.directories +slug: Web/API/Window/directories +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/directories +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca obiekt paska adresu okna.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>dirBar</i> = window.directories +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<p> + <i> + dirBar</i> + jest obiektem typu <code>barProp</code>.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><script> + function dirs() { + alert(window.directories); + } +</script> +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.directories", "ja": "ja/DOM/window.directories" } ) }}</p> diff --git a/files/pl/web/api/window/document/index.html b/files/pl/web/api/window/document/index.html new file mode 100644 index 0000000000..296c81af50 --- /dev/null +++ b/files/pl/web/api/window/document/index.html @@ -0,0 +1,40 @@ +--- +title: window.document +slug: Web/API/Window/document +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/document +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca referencję do dokumentu zawartego w oknie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>doc</i> = window.document +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>doc</code> jest referencją do obiektu <code><a href="pl/DOM/document">document</a></code>.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><html> +<head> + <title>Witaj, Świecie!</title> +</head> +<body> + +<script type="text/javascript"> + var doc = window.document; + alert( doc.title); // wyświetli: Witaj, Świecie! +</script> + +</body> +</html></pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.document", "fr": "fr/DOM/window.document", "ja": "ja/DOM/window.document" } ) }}</p> diff --git a/files/pl/web/api/window/dump/index.html b/files/pl/web/api/window/dump/index.html new file mode 100644 index 0000000000..f0ddb923c3 --- /dev/null +++ b/files/pl/web/api/window/dump/index.html @@ -0,0 +1,30 @@ +--- +title: window.dump +slug: Web/API/Window/dump +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/dump +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wypisuje wiadomość w konsoli.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">dump(<i>wiadomość</i>); +</pre> +<ul> + <li><code>wiadomość</code> to ciąg znaków do wypisania.</li> +</ul> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>dump</code> jest często używany do debugowania JavaScriptu. W uprzywilejowanym kodzie można użyć także <a href="pl/Components.utils.reportError">Components.utils.reportError</a> oraz <a href="pl/NsIConsoleService">nsIConsoleService</a> do zapisu w <a href="pl/Konsola_b%c5%82%c4%99d%c3%b3w">konsoli błędów</a>.</p> +<p>W <a href="pl/Gecko">Gecko</a> <code>dump</code> jest domyślnie zablokowane - jego użycie nic nie powoduje, nie wywołuje też żadnego błędu. Aby zobaczyć wyjście metody <code>dump</code>, musisz włączyć ją, zmieniając preferencję <code>browser.dom.window.dump.enabled</code> na <code>true</code>. Możesz to zrobić za pomocą <a class="external" href="http://kb.mozillazine.org/About:config">about:config</a> lub <a class="external" href="http://kb.mozillazine.org/User.js_file">pliku user.js</a></p> +<p>Żeby cokolwiek zobaczyć, będziesz potrzebował konsoli. Jeśli jeszcze jej nie masz, zamknięcie programu i wywołanie z parametrem <tt>-console</tt> w linii poleceń powinno otworzyć konsolę.</p> +<p><code>dump</code> jest też dostępny dla komponentów XPCOM implementowanych w JavaScript, mimo że w ich kontekście <a href="pl/DOM/window">window</a> nie jest obiektem globalnym.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.dump", "fr": "fr/DOM/window.dump", "ja": "ja/DOM/window.dump" } ) }}</p> diff --git a/files/pl/web/api/window/focus/index.html b/files/pl/web/api/window/focus/index.html new file mode 100644 index 0000000000..35cb33dbc4 --- /dev/null +++ b/files/pl/web/api/window/focus/index.html @@ -0,0 +1,24 @@ +--- +title: window.focus +slug: Web/API/Window/focus +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/focus +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Ustawia okno jako aktywne.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">window.focus() +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">if (clicked) { window.focus(); } +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM poziom 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.focus", "ja": "ja/DOM/window.focus" } ) }}</p> diff --git a/files/pl/web/api/window/frameelement/index.html b/files/pl/web/api/window/frameelement/index.html new file mode 100644 index 0000000000..773e7d37e2 --- /dev/null +++ b/files/pl/web/api/window/frameelement/index.html @@ -0,0 +1,34 @@ +--- +title: window.frameElement +slug: Web/API/Window/frameElement +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/frameElement +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca element (jak np. <code><iframe></code> lub <code><object></code>), w którym osadzone jest okno lub wartość <code>null</code>, gdy okno jest najwyższego poziomu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">var<i>frameEl</i> = window.frameElement; +</pre> +<ul> + <li><code>frameEl</code> jest elementem, w którym jest osadzone okno lub <code>null</code>, jeśli okno jest najwyższego poziomu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var frameEl = window.frameElement; +// jeśli jesteśmy wewnątrz ramki, to zmień jej adres URL na '<span class="nowiki">http://mozilla.org/</span>' +if (frameEl) + frameEl.src = '<span class="nowiki">http://mozilla.org/</span>'; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zauważ, że pomimo swojej nazwy własność działa również dla dokumentów wewnątrz <code><object></code> lub innych elementów osadzających.</p> +<p>Zobacz także <code><a href="pl/DOM/window.parent">window.parent</a></code>, który zwraca okno-rodzica, którym jest okno zawierające <code>frameElement</code> okna-dziecka.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.frameElement", "ja": "ja/DOM/window.frameElement" } ) }}</p> diff --git a/files/pl/web/api/window/frames/index.html b/files/pl/web/api/window/frames/index.html new file mode 100644 index 0000000000..1e1e625ca4 --- /dev/null +++ b/files/pl/web/api/window/frames/index.html @@ -0,0 +1,31 @@ +--- +title: window.frames +slug: Web/API/Window/frames +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/frames +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca obiekt tablico-podobny, zawierający listę ramek podrzędnych bieżącego okna.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>frameList</i> = window.frames; +</pre> +<ul> + <li><code>frameList</code> jest listą obiektów ramki.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var frames = window.frames; // lub // var frames = window.parent.frames; +for (var i = 0; i < frames.length; i++) { + // zrób coś z każdą ramką podrzędną jako frames[i] + frames[i].document.body.style.background = "red"; +} +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.frames", "ja": "ja/DOM/window.frames" } ) }}</p> diff --git a/files/pl/web/api/window/getselection/index.html b/files/pl/web/api/window/getselection/index.html new file mode 100644 index 0000000000..c6768feb45 --- /dev/null +++ b/files/pl/web/api/window/getselection/index.html @@ -0,0 +1,39 @@ +--- +title: window.getSelection +slug: Web/API/Window/getSelection +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/getSelection +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca obiekt zaznaczenia reprezentujący zakres tekstu zaznaczonego przez użytkownika. Zauważ, że nie ma to żadnego powiązania z obiektem listy selekcji DOM!</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>selection</i> =<i>window</i>.getSelection(); +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>selection</code> jest obiektem <a href="pl/DOM/Selection">selekcji</a>.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">function foo() { + var selObj = window.getSelection(); + alert(selObj); + var selRange = selObj.getRangeAt(0); + // teraz możemy operować na zakresie +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>W JavaScript, kiedy przesyłany jest obiekt selekcji do funkcji, zamiast jej, przesyłana jest jej reprezentacja w postaci ciągu znaków (tj. zaznaczony tekst). Może to złudnie przypominać, że obiekt selekcji wygląda jak ciąg znaków (obiekt <code>string</code>), kiedy tak naprawdę ma swoje własne właściwości i metody. Dokładniej, zwracana jest wartość wywołania metody <code><a href="pl/DOM/Selection/toString">toString()</a></code>. <span class="comment">I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian</span></p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM poziomu 0. Nie jest częścią specyfikacji.</p> +<h3 id="Zobacz_r.C3.B3wnie.C5.BC" name="Zobacz_r.C3.B3wnie.C5.BC">Zobacz również</h3> +<p><code><a href="pl/DOM/Selection">Selection</a>, <a href="pl/DOM/range">Range</a></code></p> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.getSelection", "es": "es/DOM/window.getSelection", "fr": "fr/DOM/window.getSelection", "it": "it/DOM/window.getSelection", "ja": "ja/DOM/window.getSelection" } ) }}</p> diff --git a/files/pl/web/api/window/index.html b/files/pl/web/api/window/index.html new file mode 100644 index 0000000000..0c833217a3 --- /dev/null +++ b/files/pl/web/api/window/index.html @@ -0,0 +1,494 @@ +--- +title: window +slug: Web/API/Window +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Window +--- +<p>{{APIRef}}</p> + +<p><span class="seoSummary">The <code>window</code> object represents a window containing a DOM document; the <code>document</code> property points to the <a href="/en-US/docs/DOM/document">DOM document</a> loaded in that window.</span> A window for a given document can be obtained using the {{Domxref("document.defaultView")}} property.</p> + +<p>This section provides a brief reference for all of the methods, properties, and events available through the DOM <code>window</code> object. The <code>window</code> object implements the <code>Window</code> interface, which in turn inherits from the <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code> interface. Some additional global functions, namespaces, objects, interfaces, and constructors, not typically associated with the window, but available on it, are listed in the <a href="/en-US/docs/JavaScript/Reference">JavaScript Reference</a> and <a href="/en-US/docs/Web/API/Document_Object_Model" title="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a>.</p> + +<p>In a tabbed browser, such as Firefox, each tab contains its own <code>window</code> object (and if you're writing an extension, the browser window itself is a separate window too - see <a href="/en-US/docs/Working_with_windows_in_chrome_code#Content_windows">Working with windows in chrome code</a> for more information). That is, the <code>window</code> object is not shared between tabs in the same window. Some methods, namely {{Domxref("window.resizeTo")}} and {{Domxref("window.resizeBy")}} apply to the whole window and not to the specific tab the <code>window</code> object belongs to. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</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.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt> + <dd>This property indicates whether the current window is closed or not.</dd> + <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the console object which provides 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. Since Firefox 57 (initially Nightly-only), both versions are only available from chrome (privileged) code, and not available to the web anymore.</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.customElements")}}{{ReadOnlyInline}}</dt> + <dd>returns a reference to the {{domxref("CustomElementRegistry")}} object, which can be used to register new <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">custom elements</a> and get information about previously registered custom elements.</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.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMMatrix")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd> + <dt>{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMMatrixReadOnly")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd> + <dt>{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMPoint")}} object, which represents a 2D or 3D point in a coordinate system.</dd> + <dt>{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMPointReadOnly")}} object, which represents a 2D or 3D point in a coordinate system.</dd> + <dt>{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMQuad")}} object, which provides represents a quadrilaterial object, that is one having four corners and four sides.</dd> + <dt>{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.</dd> + <dt>{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMRectReadOnly")}} object, which represents a rectangle.</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>{{domxref("Window.globalStorage")}} {{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")}} {{readOnlyInline}}</dt> + <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd> + <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt> + <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd> + <dt>{{domxref("Window.isSecureContext")}} {{readOnlyInline}}</dt> + <dd>Indicates whether a context is capable of using features that require secure contexts.</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")}}</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")}} {{Deprecated_inline}}</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.NetworkInformation")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to the {{domxref("NetworkInformation")}} interface, which provides information about the connection a device is using to communicate with the network and provides a means for scripts to be notified if the connection type changes. </dd> + <dt>{{domxref("Window.opener")}}</dt> + <dd>Returns a reference to the window that opened this current window.</dd> + <dt>{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}</dt> + <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</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("Window.StaticRange")}} {{experimental_inline}} {{readonlyinline}}</dt> + <dd>Returns a {{domxref('StaticRange.StaticRange','StaticRange()')}} constructor which creates a {{domxref('StaticRange')}} object.</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>Returns a {{domxref("Performance")}} object, which includes the {{domxref("Performance.timing", "timing")}} and {{domxref("Performance.navigation", "navigation")}} attributes, each of which is an object providing <a href="/en-US/docs/Navigation_timing">performance-related</a> data. See also <a href="/en-US/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing">Using Navigation Timing</a> for additional information and examples.</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.speechSynthesis")}} {{ReadOnlyInline}}</dt> + <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</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.visualViewport")}} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("VisualViewport")}} object which represents the visual viewport for a given window.</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> + +<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> + <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt> + <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt> + <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> + <dd>Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("Window.alert()")}}</dt> + <dd>Displays an alert dialog.</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("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt> + <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}.</dd> + <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt> + <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</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("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()")}} {{Non-standard_inline}}</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()")}} {{Non-standard_inline}} {{obsolete_inline}}</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.getDefaultComputedStyle()")}} {{Non-standard_inline}}</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.open()")}}</dt> + <dd>Opens a new window.</dd> + <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</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()")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>Releases the window from trapping events of a specific type.</dd> + <dt>{{domxref("Window.requestAnimationFrame()")}} {{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.</dd> + <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt> + <dd>Enables the scheduling of tasks during a browser's idle periods.</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()")}} {{Non-standard_inline}} {{obsolete_inline}}</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()")}} {{Non-standard_inline}}</dt> + <dd>Scrolls the document by the given number of lines.</dd> + <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</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()")}} {{Non-standard_inline}} (top-level XUL windows only)</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("Window.setResizable()")}} {{Non-standard_inline}}</dt> + <dd>Toggles a user's ability to resize a window.</dd> + <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</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()")}} {{Non-standard_inline}}</dt> + <dd>Updates the state of commands of the current chrome window (UI).</dd> +</dl> + +<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("EventTarget.addEventListener()")}}</dt> + <dd>Register an event handler to a specific event type on the window.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt> + <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt> + <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> + <dd>Starts the process of fetching a resource from the network.</dd> + <dt>{{domxref("EventTarget.removeEventListener")}}</dt> + <dd>Removes an event listener from the window.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt> + <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> + <dd>Schedules a function to execute in a given amount of time.</dd> +</dl> + +<h3 id="Obsolete_methods">Obsolete methods</h3> + +<dl> + <dt>{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}</dt> + <dd>Displays a modal dialog. <strong>This method was removed completely in Chrome 43, and Firefox 55.</strong></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("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>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd> + <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> + <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> + <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd> + <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt> + <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</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>Called after the window loses focus, such as due to a popup.</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>An event handler property for change events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>Called after the ANY mouse button is pressed & released</dd> + <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> + <dd>Called when a double click is made with ANY mouse button.</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>Called after the window is closed</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>Called when the RIGHT mouse button is pressed</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>Called if accelerometer detects a change (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Called when the orientation is changed (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</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>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd> + <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd> + <dt>{{domxref("Window.onappinstalled")}}</dt> + <dd>Called when the page is installed as a webapp. See {{event('appinstalled')}} event.</dd> + <dt>{{domxref("Window.ongamepadconnected")}}</dt> + <dd>Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).</dd> + <dt>{{domxref("Window.ongamepaddisconnected")}}</dt> + <dd>Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</dd> + <dt>{{domxref("Window.oninput")}}</dt> + <dd>Called when the value of an <input> element changes</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</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>Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.</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("GlobalEventHandlers.onmousedown")}}</dt> + <dd>Called when ANY mouse button is pressed.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>Called continously when the mouse is moved inside the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>Called when the pointer leaves the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>Called when the pointer enters the window</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>Called when ANY mouse button is released</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.onoffline")}}</dt> + <dd>Called when network connection is lost. See {{event("offline")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> + <dd>Called when network connection is established. See {{event("online")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> + <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> + <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</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>Called when a back button is pressed.</dd> + <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt> + <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>Called when a form is reset</dd> + <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> + <dd>Called continuously as you are resizing the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd> + <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt> + <dd>Called when the mouse wheel is rotated around any axis</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>Called after text in an input field is selected</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("WindowEventHandlers.onstorage")}}</dt> + <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>Called when a form is submitted</dd> + <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt> + <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> + <dd>Called when the user navigates away from the page.</dd> + <dt>{{domxref("Window.onuserproximity")}}</dt> + <dd>An event handler property for user proximity events.</dd> + <dt>{{domxref("Window.onvrdisplayconnect")}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplayactivate")}}</dt> + <dd>Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.</dd> + <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt> + <dd>Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.</dd> + <dt>{{domxref("Window.onvrdisplayblur")}}</dt> + <dd>Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.</dd> + <dt>{{domxref("Window.onvrdisplayfocus")}}</dt> + <dd>Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt> + <dd>represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).</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("DOMParser")}}</dt> + <dd><code>DOMParser</code> can parse XML or HTML source stored in a string into a DOM <a href="https://developer.mozilla.org/en-US/docs/DOM/document" title="document">Document</a>. <code>DOMParser</code> is specified in <a href="https://w3c.github.io/DOM-Parsing/" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a>.</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/pl/web/api/window/localstorage/index.html b/files/pl/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..e93c5c15e7 --- /dev/null +++ b/files/pl/web/api/window/localstorage/index.html @@ -0,0 +1,125 @@ +--- +title: Window.localStorage +slug: Web/API/Window/localStorage +tags: + - API + - Pamięć + - Referencja + - Storage + - Web Storage + - WindowLocalStorage + - Własność + - localStorage +translation_of: Web/API/Window/localStorage +--- +<p>{{APIRef()}}</p> + +<p>Własność localStorage pozwala na dostęp do lokalnego obiektu {{domxref("Storage")}}. localStorage jest podobne w swoich założeniach do <code><a href="/en-US/docs/Web/API/Window.sessionStorage">sessionStorage</a>.</code> Różnica pomiędzy nimi polega na tym, że dane przechowywane w <code>localStorage</code> nie mają daty ważności, a dane przechowywane w <code>sessionStorage</code> usuwane są po zakończeniu danej sesji - czyli przy zamknięciu przeglądarki.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="brush: js">myStorage = localStorage;</pre> + +<h3 id="Wartość">Wartość</h3> + +<p>Obiekt {{domxref("Storage")}}.</p> + +<h2 id="Przykład">Przykład</h2> + +<p>Poniższy kod uzyskuje dostęp do lokalnego obiektu {{domxref("Storage")}}, należącego do obecnej domeny i dodaje do niego własność używająć metody {{domxref("Storage.setItem()")}}.</p> + +<pre class="brush: js">localStorage.setItem('myCat', 'Tom');</pre> + +<div class="note"> +<p><strong>Notka</strong>: Pełny przykład znajdziesz w artykule <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> .</p> +</div> + +<h2 id="Specyfikajca">Specyfikajca</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('Web Storage', '#dom-localstorage', 'localStorage')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Własność</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>Własność</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Podstawowe wspracie</td> + <td>2.1</td> + <td>{{ CompatUnknown }}</td> + <td>8</td> + <td>11</td> + <td>iOS 3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>Sposób wsparcia dla <code>localStorage</code> i {{domxref("sessionStorage")}} różni się w zależności od przeglądarki. Tutaj znajdziesz <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">szczegółowe dane na temat wsparcia poszczególnych przeglądarek dla obiektów Storage</a>.</p> + +<div class="note"> +<p><strong>Notka:</strong> Zaczynając od wersji iOS 5.1, Safari przetrzymuje dane <code>localStorage</code> w folderze <code>cache.</code> Folder ten poddawany jest okresowemu czyszczeniu, zazwyczaj, gdy w pamięci urządzenia kończy się miejsce. Tryb prywatny w mobilnej przeglądarce Safari blokuje również całkowicie możliwość zapisu do pamięci <code>localStorage</code>.</p> +</div> + +<h2 id="Zobacz_także">Zobacz także</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/pl/web/api/window/name/index.html b/files/pl/web/api/window/name/index.html new file mode 100644 index 0000000000..0b91ec81ec --- /dev/null +++ b/files/pl/web/api/window/name/index.html @@ -0,0 +1,27 @@ +--- +title: window.name +slug: Web/API/Window/name +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/name +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Pobiera/ustawia nazwę okna.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>string</i> = window.name + window.name =<i>string</i> +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">window.name = "lab_view"; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Nazwa okna jest używana pierwotnie dla ustawienia celu dla linków oraz formularzy. Okno nie musi posiadać nazwy.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM poziom 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.name", "ja": "ja/DOM/window.name" } ) }}</p> diff --git a/files/pl/web/api/window/navigator/index.html b/files/pl/web/api/window/navigator/index.html new file mode 100644 index 0000000000..c43e84184b --- /dev/null +++ b/files/pl/web/api/window/navigator/index.html @@ -0,0 +1,84 @@ +--- +title: window.navigator +slug: Web/API/Window/navigator +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Window/navigator +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca odwołanie do obiektu navigator, który może być zapytany o informację na temat aplikacji uruchamiającej skrypt.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">alert("Używasz " + navigator.appName); +</pre> + +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3> + +<dl> + <dt><a href="pl/DOM/window.navigator.appCodeName">navigator.appCodeName</a></dt> + <dd>Zwraca wewnętrzną nazwę "kodową" aktualnej przeglądarki.</dd> + <dt><a href="pl/DOM/window.navigator.appName">navigator.appName</a></dt> + <dd>Zwraca oficjalną nazwę przeglądarki.</dd> + <dt><a href="pl/DOM/window.navigator.appVersion">navigator.appVersion</a></dt> + <dd>Zwraca wersję przeglądarki jako łańcuch znaków.</dd> + <dt><a href="pl/DOM/window.navigator.buildID">navigator.buildID</a></dt> + <dd>Zwraca identyfikator kompilacji przeglądarki (np. "2006090803").</dd> + <dt><a href="pl/DOM/window.navigator.cookieEnabled">navigator.cookieEnabled</a></dt> + <dd>Zwraca wartość logiczną wskazującą czy obsługa ciasteczek jest włączona, czy nie.</dd> + <dt><a href="pl/DOM/window.navigator.language">navigator.language</a></dt> + <dd>Zwraca łańcuch znaków reprezentujący wersję językową przeglądarki.</dd> + <dt><a href="pl/DOM/window.navigator.mimeTypes">navigator.mimeTypes</a></dt> + <dd>Zwraca listę typów MIME obsługiwanych przez przeglądarkę.</dd> + <dt><a href="pl/DOM/window.navigator.onLine">navigator.onLine</a></dt> + <dd>Zwraca wartość logiczną wskazującą czy przeglądarka jest w trybie online.</dd> + <dt><a href="pl/DOM/window.navigator.oscpu">navigator.oscpu</a></dt> + <dd>Zwraca łańcuch znaków reprezentujący bieżący system operacyjny.</dd> + <dt><a href="pl/DOM/window.navigator.platform">navigator.platform</a></dt> + <dd>Zwraca łańcuch znaków reprezentujący platformę przeglądarki.</dd> + <dt><a href="pl/DOM/window.navigator.plugins">navigator.plugins</a></dt> + <dd>Zwraca tablicę z zainstalowanymi wtyczkami przeglądarki.</dd> + <dt><a href="pl/DOM/window.navigator.product">navigator.product</a></dt> + <dd>Zwraca nazwę produktu bieżącej przeglądarki (np. "Gecko")</dd> + <dt><a href="pl/DOM/window.navigator.productSub">navigator.productSub</a></dt> + <dd>Zwraca numer kompilacji bieżącej przeglądarki (np. "20060909").</dd> + <dt><a href="pl/DOM/window.navigator.securityPolicy">navigator.securityPolicy</a></dt> + <dd>Returns an empty string. In Netscape 4.7x, returns "US & CA domestic policy" or "Export policy".</dd> + <dt><a href="pl/DOM/window.navigator.userAgent">navigator.userAgent</a></dt> + <dd>Returns the user agent string for the current browser.</dd> + <dt><a href="pl/DOM/window.navigator.vendor">navigator.vendor</a></dt> + <dd>Returns the vendor name of the current browser (e.g. "Netscape6")</dd> + <dt><a href="pl/DOM/window.navigator.vendorSub">navigator.vendorSub</a></dt> + <dd>Returns the vendor version number (e.g. "6.1")</dd> +</dl> + +<h3 id="Metody" name="Metody">Metody</h3> + +<dl> + <dt><a href="pl/DOM/window.navigator.javaEnabled">navigator.javaEnabled</a></dt> + <dd>Określa czy w przeglądarce jest włączona obsługa Javy.</dd> + <dt><a href="pl/DOM/window.navigator.taintEnabled">navigator.taintEnabled</a> {{ Obsolete_inline() }} </dt> + <dd>Returns false. JavaScript taint/untaint functions removed in JavaScript 1.2<a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/nav.html#1194117"> </a></dd> + <dt><a href="pl/DOM/window.navigator.preference">navigator.preference</a></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 you should use XPCOM <a href="pl/API_preferencji">API preferencji</a> instead.</dd> + <dt><a href="pl/DOM/window.navigator.registerContentHandler">navigator.registerContentHandler</a></dt> + <dd>Pozwala stronom na zarejestrowanie się jako możliwe serwisy obsługujące dla zawartości konkretnego typu MIME.</dd> + <dt><a href="pl/DOM/window.navigator.registerProtocolHandler">navigator.registerProtocolHandler</a></dt> + <dd>Pozwala stronom na zarejestrowanie się jako możliwe serwisy obsługujące dany protokół.</dd> +</dl> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p><a href="pl/DOM_Client_Object_Cross-Reference/navigator">DOM Client Object Cross-Reference:navigator</a></p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p> </p> diff --git a/files/pl/web/api/window/onload/index.html b/files/pl/web/api/window/onload/index.html new file mode 100644 index 0000000000..45e1b97328 --- /dev/null +++ b/files/pl/web/api/window/onload/index.html @@ -0,0 +1,62 @@ +--- +title: window.onload +slug: Web/API/Window/onload +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onload +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Uchwyt zdarzenia dla zdarzenia wczytywania okna (<a href="/pl/DOM/window" title="pl/DOM/window">window</a>).</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">window.onload = <em>funcRef</em>; +</pre> + +<ul> + <li><code>funcRef</code> jest funkcją uchwytu.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>window.onload = function() { + init(); + doSomethingElse(); +}; +</pre> + +<pre><html> +<head> + +<title>Test onload</title> + +<script type="text/javascript"> + +window.onload = load; + +function load() +{ + alert("Wykryto zdarzenie load!"); +} +</script> +</head> + +<body> +<p>Zdarzenie load występuje w momencie zakończenia ładowania dokumentu!</p> +</body> +</html> +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Zdarzenie load wywoływane jest na końcu procesu ładowania dokumentu. W momencie wystąpienia zdarzenia, DOM zawiera już wszystkie obiekty zawarte w dokumencie oraz zakończone zostało wczytywanie obrazków oraz ramek.<br> + <br> + Istnieje także zdarzenie <code>DOMContentLoaded</code> (które można zarejestrować za pomocą <code>addEventListener</code>) występujące w momencie gdy DOM dla danej strony został zbudowany ale bez czekania na zakończenie ładowania pozostałych zasobów.</p> diff --git a/files/pl/web/api/window/open/index.html b/files/pl/web/api/window/open/index.html new file mode 100644 index 0000000000..de2d422a8b --- /dev/null +++ b/files/pl/web/api/window/open/index.html @@ -0,0 +1,796 @@ +--- +title: window.open +slug: Web/API/Window/open +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Window/open +--- +<p>{{ ApiRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Tworzy nowe okno przeglądarki i wczytuje do niego wskazany zasób.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval"><var>referencjaDoObiektuOkna</var> = window.open(<var>strUrl</var>, <var>strNazwaOkna</var> [, <var>strCechyOkna</var>]); +</pre> + +<h3 id="Parametry_i_zwracana_warto.C5.9B.C4.87" name="Parametry_i_zwracana_warto.C5.9B.C4.87">Parametry i zwracana wartość</h3> + +<dl> + <dt><code>referencjaDoObiektuOkna</code></dt> + <dd>Referencja wskazująca na obiekt nowoutworzonego okna to wartość zwracana przez metodę open(). Jeżeli z jakichś powodów nie uda się otworzyć okna, zwrócone zostanie <code>null</code>. Referencje taką dobrze jest przechowywać w zmiennej globalnej. Możesz wtedy użyć jej do do pobrania właściwości nowego okna lub wywołania jego metod - pod warunkiem, że zależność między głównym a nowym oknem spełnia <a class="external" href="http://www.mozilla.org/projects/security/components/same-origin.html">Zasadę tego samego pochodzenia</a> - wymaganą ze względów bezpieczeństwa.</dd> +</dl> + +<dl> + <dt><code>strUrl</code></dt> + <dd>Adres URL, który ma zostać wczytany w nowym oknie. Może to być dokument HTML gdzieś w Sieci, może to być obrazek lub dowolny inny plik, który może obsłużyć przeglądarka.</dd> +</dl> + +<dl> + <dt><code>strNazwaOkna</code></dt> + <dd>Ciąg znaków używany jako nazwa okna. Nazwy tej można użyć jako celu dla odnośników i formularzy, określanego za pomocą atrybutu <code>target</code> elementu <code style="font-size: 1em;"><a></code> lub <code style="font-size: 1em;"><form></code>. Nazwa nie powinna zawierać spacji. <var>strNazwaOkna</var> nie określa tytułu nowego okna.</dd> +</dl> + +<dl> + <dt><code>strCechyOkna</code></dt> + <dd>Parametr opcjonalny. Jest to ciąg znaków, w którym wymienione zostają cechy (funkcjonalność, paski narzędzi) nowego okna przeglądarki. Parametr ten nie może zawierać żadnych spacji. Każda żądana cecha okna oddzielana jest od innych za pomocą przecinka.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>open()</code> tworzy nowe okno przeglądarki, podobnie jak przy wybraniu polecenia Nowe okno w menu Plik. Parametr <var>strUrl</var> określa URL, który ma zostać pobrany i załadowany w nowym oknie. Jeśli <var>strUrl</var> jest pustym ciągiem, utworzone zostanie puste okno (URL <code>about:blank</code>) z domyślnym zestawem pasków głównego okna.</p> + +<p>Zauważ, że zdalny URL nie zostanie załadowany od razu. Po zakończeniu wykonywania <code>window.open()</code> okno zawsze zawiera <code>about:blank</code>. Faktyczne pobieranie z adresu URL jest opóźniane do momentu zakończenia wykonywania bieżącego bloku skryptu. Tworzenie okna i ładowanie wskazanego zasobu odbywają się asynchronicznie.</p> + +<h4 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h4> + +<pre><script type="text/javascript"> + +/* Deklaracja zmiennej globalnej, w której będzie + przechowywana referencja do nowego okna */ + +var WindowObjectReference; + +function openRequestedPopup() +{ + WindowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName", + "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes"); +} +</script> +</pre> + +<pre><script type="text/javascript"> +var WindowObjectReference; // zmienna globalna + +function openRequestedPopup() +{ + WindowObjectReference = window.open("http://www.domainname.ext/path/ImageFile.png", + "DescriptiveWindowName", + "resizable=yes,scrollbars=yes,status=yes"); +} +</script> +</pre> + +<p>Jeśli istnieje już okno o tej samej nazwie <var>strWindowName</var>, to zamiast otwierania nowego okna w istniejącym oknie zostanie załadowany URL <var>strUrl</var>. W takim wypadku wartością zwracaną jest referencja do istniejącego okna, a parametr <var>strWindowFeatures</var> jest ignorowany. Wywołanie metody z pustym ciągiem jako <var>strUrl</var> to sposób uzyskania referencji do otwartego okna jeśli znana jest jego nazwa. Zawartość tego okna nie zostanie zmieniona. Jeśli chcesz otwierać nowe okno przy każdym wywołaniu <code>window.open()</code>, podaj specjalną wartość <var>_blank</var> jako parametr <var>strWindowName</var>.</p> + +<p><var>strWindowFeatures</var> to opcjonalny ciąg znaków z rozdzieloną przecinkami listą żądanych cech nowego okna. Po otwarciu okna nie możesz zmienić jego funkcjonalności czy pasków za pomocą JavaScriptu. Jeśli <var>strWindowName</var> nie określa istniejącego okna i jeśli nie podasz parametru <var>strWindowFeatures</var> (lub będzie on tylko pustym ciągiem znaków), w nowym oknie znajdize się domyślny zestaw pasków głównego okna.</p> + +<p>Jeżeli zostanie użyty parametr <var>strWindowFeatures</var>, ale nie zostaną podane cechy określające rozmiar, wymiary okna będą takie same, jak wymiary ostatnio wyrenderowanego okna.</p> + +<p>Jeśli zostanie podany parametr <var>strWindowFeatures</var>, ale bez definiowania cech określających pozycję, wtedy współrzędne lewego górnego rogu będą przesunięte o 22 piksele od miejsca, gdzie znajdował się róg ostatnio wyrenderowanego okna. Przesunięcie to jest implementowane przez producentów przeglądarek (w MSIE 6 SP2 wynosi ono 29 pikseli przy domyślnym motywie) - ma ono ułatwiać użytkownikom dostrzeżenie, że otwarto nowe okno. Jeśli ostatnio używane okno było zmaksymalizowane, przesunięcie o 22 piksele nie zostanie użyte - nowe okno także będzie zmaksymalizowane.</p> + +<p><strong>Jeśli podajesz <var>strWindowFeatures</var>, cechy, które nie zostaną określone, będą wyłączone lub usunięte</strong> (z wyjątkiem <var>titlebar</var> i <var>close</var>, które domyślnie ustawiane są na <var>yes</var>)>.</p> + +<div class="note"> +<p><strong>Porada</strong>: Jeśli podajesz parametr <var>strWindowFeatures</var>, zawrzyj tylko te cechy, które chcesz, by były włączone lub wyświetlane; pozostałe (poza <var>titlebar</var> i <var>close</var>) zostaną wyłączone.</p> +</div> + +<p><img alt="Firefox Chrome Toolbars Illustration" class="internal" src="/@api/deki/files/2311/=FirefoxChromeToolbarsDescription7a.gif"></p> + +<h4 id="Pozycja_i_rozmiar_okna" name="Pozycja_i_rozmiar_okna">Pozycja i rozmiar okna</h4> + +<ul> + <li><a href="#Note_on_position_and_dimension_error_correction">Note on position and dimension error correction</a></li> + <li>{{bug(176320) }}</li> + <li><a href="#Note_on_precedence">Note on precedence</a></li> +</ul> + +<dl> + <dt>left</dt> + <dd><span id="left">Określa odległość</span> między lewą krawędzią obszaru roboczego aplikacji w systemie operacyjnym użytkownika a najbardziej wysuniętą w lewo częścią obramowania nowego okna przeglądarki. Nowe okno nie możo być zainicjowane w miejscu wychodzącym poza ekran.</dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png">, <img alt="Opera 6+" class="internal" src="/@api/deki/files/2337/=Opera6.gif"></dd> +</dl> + +<dl> + <dt>top</dt> + <dd><span id="topS">Określa odległość</span> między górną krawędzią obszaru roboczego aplikacji w systemie operacyjnym użytkownika a najbardziej wysuniętą w górę częścią obramowania nowego okna przeglądarki. Nowe okno nie możo być zainicjowane w miejscu wychodzącym poza ekran.</dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png">, <img alt="Opera 6+" class="internal" src="/@api/deki/files/2337/=Opera6.gif"></dd> +</dl> + +<dl> + <dt>height</dt> + <dd><span id="height">Określa wysokość</span> obszaru zawartości okna wyrażoną w pikselach. Wartość zawiera wysokość poziomego paska przewijania, jeśli jest on wyświetlany. Wymagana minimalna wartość to 100.</dd> + <dd><a href="#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png">, <img alt="Opera 6+" class="internal" src="/@api/deki/files/2337/=Opera6.gif"></dd> +</dl> + +<dl> + <dt>width</dt> + <dd><span id="width">Określa wysokość</span> obszaru zawartości okna wyrażoną w pikselach. Wartość zawiera szerokość pionowego paska przewijania, jeśli jest on wyświetlany. Nie jest włączana szerokość panelu bocznego, jeśli jest on otwarty. Wymagana minimalna wartość to 100.</dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png">, <img alt="Opera 6+" class="internal" src="/@api/deki/files/2337/=Opera6.gif"></dd> +</dl> + +<dl> + <dt>screenX</dt> + <dd>Cecha wycofana. Określa to samo co <a href="#left">left</a>, ale obsługują ją tylko przeglądarki Netscape i oparte o Mozillę.</dd> + <dd>Obsługiwane przez <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>screenY</dt> + <dd>Cecha wycofana. Określa to samo co <a href="#topS">top</a>, ale obsługują ją tylko przeglądarki Netscape i oparte o Mozillę.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>outerHeight</dt> + <dd>Określa wysokość całego okna przeglądarki w pikselach. Wartość <code>outerHeight</code> zawiera w sobie wszystkie widoczne paski, poziomy pasek przewijania (jeśli jest widoczny) i obramowanie okna. Minimalna wymana wartość to 100.</dd> + <dd><strong>Uwaga</strong>: ponieważ pasek tytułowy jest zawsze widoczny, wywołanie <code>outerHeight=100</code> zmniejszy <code>innerHeight</code> okna poniżej wymaganych 100 pikseli.</dd> + <dd><a href="#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd> + <dd>Obsługiwane przez <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>outerWidth</dt> + <dd>Określa szerokość całego okna przeglądarki w pikselach. Wartość <code>outerWidth</code> zawiera w sobie pionowy pasek przewijania (jeśli jest widoczny) i obramowanie okna. Minimalna wymana wartość to 100.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>innerHeight</dt> + <dd>To samo co <a href="#height">height</a>, ale obsługiwane tylko przez przeglądarki Netscape i oparte o Mozillę</dd> + <dd><a href="#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>innerWidth</dt> + <dd>To samo co <a href="#width">width</a>, ale obsługiwane tylko przez przeglądarki Netscape i oparte o Mozillę</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<h4 id="Toolbar_and_chrome_features" name="Toolbar_and_chrome_features">Toolbar and chrome features</h4> + +<dl> + <dt>menubar </dt> + <dd>Jeśli ta opcja jest ustawiona na <var>yes</var>, wtedy nowe okno posiada widoczny pasek menu.</dd> + <dd>Użytkownicy Mozilli i Firefoxa mogą wymusić by każde nowo otwarte okno posiadało widoczny masek menu poprzez ustawienie<br> + <code>dom.disable_window_open_feature.menubar</code><br> + na <var>true</var> w <code>about:config</code> lub w ich <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">pliku user.js</a>.</dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>toolbar </dt> + <dd>Jeśli ta opcja jest ustawiona na <var>yes</var>, wtedy nowe okno posiada widoczny pasek nawigacji (Przyciski: poprzednia strona, następna strona, odśwież, zatrzymaj). In addition to the Navigation Toolbar, Mozilla-based browsers will render the Tab Bar if it is visible, present in the parent window.</dd> + <dd>Mozilla and Firefox users can force new windows to always render the Navigation Toolbar by setting<br> + <code>dom.disable_window_open_feature.toolbar</code><br> + to <var>true</var> in <code>about:config</code> or in their <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>location </dt> + <dd>If this feature is set to <var>yes</var>, then the new secondary window renders the Location bar in Mozilla-based browsers. MSIE 5+ and Opera 7.x renders the Address Bar.</dd> + <dd>Mozilla and Firefox users can force new windows to always render the location bar by setting<br> + <code>dom.disable_window_open_feature.location</code><br> + to <var>true</var> in <code>about:config</code> or in their <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</dd> +</dl> + +<p>Note that MSIE 7 will force the presence of the Address Bar: "We think the address bar is also important for users <strong>to see in pop-up windows</strong>. A missing address bar creates a chance for a fraudster to forge an address of their own. To help thwart that, <strong>IE7 will show the address bar on all internet windows to help users see where they are</strong>." coming from <a class="external" href="http://blogs.msdn.com/ie/archive/2005/11/21.aspx">Microsoft Internet Explorer Blog, Better Website Identification</a></p> + +<dl> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png">, <img alt="Opera 6+" class="internal" src="/@api/deki/files/2337/=Opera6.gif"></dd> +</dl> + +<dl> + <dt>directories </dt> + <dd>If this feature is set to <var>yes</var>, then the new secondary window renders the Personal Toolbar in Netscape 6.x, Netscape 7.x and Mozilla browser. It renders the Bookmarks Toolbar in Firefox 1.x and, in MSIE 5+, it renders the Links bar. In addition to the Personal Toolbar, Mozilla browser will render the Site Navigation Bar if such toolbar is visible, present in the parent window.</dd> + <dd>Mozilla and Firefox users can force new windows to always render the Personal Toolbar/Bookmarks toolbar by setting<br> + <code>dom.disable_window_open_feature.directories</code><br> + to <var>true</var> in <code>about:config</code> or in their <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>personalbar </dt> + <dd>Same as <var>directories</var> but only supported by Netscape and Mozilla-based browsers.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>status </dt> + <dd>If this feature is set to <var>yes</var>, then the new secondary window has a status bar. Users can force the rendering of status bar in all Mozilla-based browsers, in MSIE 6 SP2 (<a href="#Note_on_security_issues_of_the_status_bar_presence">Note on status bar in XP SP2</a>) and in Opera 6+. The default preference setting in recent Mozilla-based browser releases and in Firefox 1.0 is to force the presence of the status bar.</dd> + <dd><a href="#Note_on_status_bar">Note on status bar</a></dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<h4 id="Window_functionality_features" name="Window_functionality_features">Window functionality features</h4> + +<dl> + <dt>resizable </dt> + <dd>If this feature is set to <var>yes</var>, the new secondary window will be resizable.</dd> + <dd><strong>Note</strong>: Starting with version 1.4, Mozilla-based browsers have a window resizing grippy at the right end of the status bar, this ensures that users can resize the browser window even if the web author requested this secondary window to be non-resizable. In such case, the maximize/restore icon in the window's titlebar will be disabled and the window's borders won't allow resizing but the window will still be resizable via that grippy in the status bar.</dd> +</dl> + +<div class="note"> +<p><strong>Tip</strong>: For accessibility reasons, it is strongly recommended to set this feature always to <var>yes</var>.</p> +</div> + +<dl> + <dd>Mozilla and Firefox users can force new windows to be easily resizable by setting<br> + <code>dom.disable_window_open_feature.resizable</code><br> + to <var>true</var> in <code>about:config</code> or in their <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>scrollbars </dt> + <dd>If this feature is set to <var>yes</var>, the new secondary window will show horizontal and/or vertical scrollbar(s) if the document doesn't fit into the window's viewport.</dd> +</dl> + +<div class="note"> +<p><strong>Tip</strong>: For accessibility reasons, it is strongly encouraged to set this feature always to <var>yes</var>.</p> +</div> + +<dl> + <dd>Mozilla and Firefox users can force this option to be always enabled for new windows by setting<br> + <code>dom.disable_window_open_feature.scrollbars</code><br> + to <var>true</var> in <code>about:config</code> or in their <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</dd> + <dd><a href="#Note_on_scrollbars">Note on scrollbars</a></dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>dependent </dt> + <dd>If set to <var>yes</var>, the new window is said to be dependent of its parent window. A dependent window closes when its parent window closes. A dependent window is minimized on the Windows task bar only when its parent window is minimized. On Windows platforms, a dependent window does not show on the task bar. A dependent window also stays in front of the parent window.</dd> + <dd>Dependent windows are not implemented on MacOS X, this option will be ignored.</dd> + <dd>In MSIE 6, the nearest equivalent to this feature is the <code>showModelessDialog()</code> method.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>chrome </dt> + <dd><strong>Note</strong>: Starting with Mozilla 1.7/Firefox 0.9, this feature requires the <code>UniversalBrowserWrite</code> privilege ({{ Bug(244965) }}). Without this privilege it is ignored.</dd> + <dd>If set to <var>yes</var>, the page is loaded as window's only content, without any of the browser's interface elements. There will be no context menu defined by default and none of the standard keyboard shortcuts will work. The page is supposed to provide a user interface of its own, usually this feature is used to open XUL documents (standard dialogs like the JavaScript Console are opened this way).</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>modal </dt> + <dd><strong>Note</strong>: Starting with Mozilla 1.2.1, this feature requires the <code>UniversalBrowserWrite</code> privilege ({{ Bug(180048) }}). Without this privilege, it is equivalent to <code>dependent</code>.</dd> + <dd>If set to <var>yes</var>, the new window is said to be modal. The user cannot return to the main window until the modal window is closed. A typical modal window is created by the <a href="/pl/DOM/window.alert" title="pl/DOM/window.alert">alert() function</a>.</dd> + <dd>The exact behavior of modal windows depends on the platform and on the Mozilla release version.</dd> + <dd>The MSIE 6 equivalent to this feature is the <code>showModalDialog()</code> method.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>dialog </dt> + <dd>The <code>dialog</code> feature removes all icons (restore, minimize, maximize) from the window's titlebar, leaving only the close button. <span class="float-right"><img alt="Firefox and its command system menu under Windows" class="internal" src="/@api/deki/files/2325/=MenuSystemCommands.png"></span>Mozilla 1.2+ and Netscape 7.1 will render the other menu system commands (in FF 1.0 and in NS 7.0x, the command system menu is not identified with the Firefox/NS 7.0x icon on the left end of the titlebar: that's probably a bug. You can access the command system menu with a right-click on the titlebar). Dialog windows are windows which have no minimize system command icon and no maximize/restore down system command icon on the titlebar nor in correspondent menu item in the command system menu. They are said to be dialog because their normal, usual purpose is to only notify info and to be dismissed, closed. On Mac systems, dialog windows have a different window border and they may get turned into a sheet.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>minimizable </dt> + <dd>This setting can only apply to dialog windows; "minimizable" requires <code>dialog=yes</code>. If <code>minimizable</code> is set to <var>yes</var>, the new dialog window will have a minimize system command icon in the titlebar and it will be minimizable. Any non-dialog window is always minimizable and <code>minimizable=no</code> will be ignored.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>fullscreen </dt> + <dd>Do not use. Not implemented in Mozilla. There are no plans to implement this feature in Mozilla.</dd> + <dd>This feature no longer works in MSIE 6 SP2 the way it worked in MSIE 5.x. The Windows taskbar, as well as the titlebar and the status bar of the window are not visible, nor accessible when fullscreen is enabled in MSIE 5.x.</dd> + <dd><code>fullscreen</code> always upsets users with large monitor screen or with dual monitor screen. Forcing <code>fullscreen</code> onto other users is also extremely unpopular and is considered an outright rude attempt to impose web author's viewing preferences onto users.</dd> + <dd><a href="#Note_on_fullscreen">Note on fullscreen</a></dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png"></dd> + <dd><code>fullscreen</code> does not really work work in MSIE 6 SP2.</dd> +</dl> + +<h4 id="Features_requiring_privileges" name="Features_requiring_privileges">Features requiring privileges</h4> + +<p>The following features require the <code>UniversalBrowserWrite</code> privilege, otherwise they will be ignored. Chrome scripts have this privilege automatically, others have to request it from the <a href="/pl/PrivilegeManager" title="pl/PrivilegeManager">PrivilegeManager</a>.</p> + +<dl> + <dt>titlebar </dt> + <dd>By default, all new secondary windows have a titlebar. If set to <var>no</var>, this feature removes the titlebar from the new secondary window.</dd> + <dd>Mozilla and Firefox users can force new windows to always render the titlebar by setting<br> + <code>dom.disable_window_open_feature.titlebar</code><br> + to <var>true</var> in <code>about:config</code> or in their <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>alwaysRaised </dt> + <dd>If set to <var>yes</var>, the new window will always be displayed on top of other browser windows, regardless of whether it is active or not.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>alwaysLowered </dt> + <dd>If set to <var>yes</var>, the new created window floats below, under its own parent when the parent window is not minimized. alwaysLowered windows are often referred as pop-under windows. The alwaysLowered window can not be on top of the parent but the parent window can be minimized. In NS 6.x, the alwaysLowered window has no minimize system command icon and no restore/maximize system command.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>z-lock </dt> + <dd>Same as <code>alwaysLowered</code>.</dd> +</dl> + +<dl> + <dt>close </dt> + <dd>When set to <var>no</var>, this feature removes the system close command icon and system close menu item. It will only work for dialog windows (<code>dialog</code> feature set). <code>close=no</code> will override <code>minimizable=yes</code>.</dd> + <dd>Mozilla and Firefox users can force new windows to always have a close button by setting<br> + <code>dom.disable_window_open_feature.close</code><br> + to <var>true</var> in <code>about:config</code> or in their <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<p>The position and size feature elements require a number to be set. The toolbars and window functionalities can be set with a <var>yes</var> or <var>no</var>; you can use <var>1</var> instead of <var>yes</var> and <var>0</var> instead of <var>no</var>. The toolbar and functionality feature elements also accept the shorthand form: you can turn a feature on by simply listing the feature name in the <var>strWindowFeatures</var> string. If you supply the <var>strWindowFeatures</var> parameter, then the <code>titlebar</code> and <code>close</code> are still <var>yes</var> by default, but the other features which have a <var>yes</var>/<var>no</var> choice will be <var>no</var> by default and will be turned off.</p> + +<p>Example:</p> + +<pre><script type="text/javascript"> +var WindowObjectReference; // global variable + +function openRequestedPopup() +{ + WindowObjectReference = window.open("http://www.domainname.ext/path/ImgFile.png", + "DescriptiveWindowName", + "width=420,height=230,resizable,scrollbars=yes,status=1"); +} +</script> +</pre> + +<p>In this example, the window will be resizable, it will render scrollbar(s) if needed, if the content overflows requested window dimensions and it will render the status bar. It will not render the menubar nor the location bar. Since the author knew about the size of the image (400 pixels wide and 200 pixels high), he added the margins applied to the root element in MSIE 6 which is 15 pixels for top margin, 15 pixels for the bottom margin, 10 pixels for the left margin and 10 pixels for the right margin.</p> + +<h3 id="Best_practices" name="Best_practices">Best practices</h3> + +<pre><script type="text/javascript"> +var WindowObjectReference = null; // global variable + +function openFFPromotionPopup() +{ + if(WindowObjectReference == null || WindowObjectReference.closed) + /* if the pointer to the window object in memory does not exist + or if such pointer exists but the window was closed */ + + { + WindowObjectReference = window.open("http://www.spreadfirefox.com/", + "PromoteFirefoxWindowName", "resizable=yes,scrollbars=yes,status=yes"); + /* then create it. The new window will be created and + will be brought on top of any other window. */ + } + else + { + WindowObjectReference.focus(); + /* else the window reference must exist and the window + is not closed; therefore, we can bring it back on top of any other + window with the focus() method. There would be no need to re-create + the window or to reload the referenced resource. */ + }; +} +</script> + +(...) + +<p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindowName" +onclick="openFFPromotionPopup(); return false;" +title="This link will create a new window or will re-use +an already opened one">Promote Firefox adoption</a></p> +</pre> + +<p>The above code solves a few usability problems related to links opening secondary window. The purpose of the <code>return false</code> in the code is to cancel default action of the link: if the onclick event handler is executed, then there is no need to execute the default action of the link. But if javascript support is disabled or non-existent on the user's browser, then the onclick event handler is ignored and the browser loads the referenced resource in the target frame or window that has the name "PromoteFirefoxWindowName". If no frame nor window has the name "PromoteFirefoxWindowName", then the browser will create a new window and will name it "PromoteFirefoxWindowName".</p> + +<p>More reading on the use of the target attribute:</p> + +<p><a class="external" href="http://www.w3.org/TR/html401/present/frames.html#h-16.3.2">HTML 4.01 Target attribute specifications</a></p> + +<p><a class="external" href="http://www.htmlhelp.com/faq/html/links.html#new-window">How do I create a link that opens a new window?</a></p> + +<p>You can also parameterize the function to make it versatile, functional in more situations, therefore re-usable in scripts and webpages:</p> + +<pre><script type="text/javascript"> +var WindowObjectReference = null; // global variable + +function openRequestedPopup(strUrl, strWindowName) +{ + if(WindowObjectReference == null || WindowObjectReference.closed) + { + WindowObjectReference = window.open(strUrl, strWindowName, + "resizable=yes,scrollbars=yes,status=yes"); + } + else + { + WindowObjectReference.focus(); + }; +} +</script"> +(...) + +<p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindow" +onclick="openRequestedPopup(this.href, this.target); return false;" +title="This link will create a new window or will re-use +an already opened one">Promote +Firefox adoption</a></p> +</pre> + +<p>You can also make such function able to open only 1 secondary window and to reuse such single secondary window for other links in this manner:</p> + +<pre><script type="text/javascript"> +var WindowObjectReference = null; // global variable +var PreviousUrl; /* global variable which will store the + url currently in the secondary window */ + +function openRequestedSinglePopup(strUrl) +{ + if(WindowObjectReference == null || WindowObjectReference.closed) + { + WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName", + "resizable=yes,scrollbars=yes,status=yes"); + } + else if(previousUrl != strUrl) + { + WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName", + "resizable=yes,scrollbars=yes,status=yes"); + /* if the resource to load is different, + then we load it in the already opened secondary window and then + we bring such window back on top/in front of its parent window. */ + WindowObjectReference.focus(); + } + else + { + WindowObjectReference.focus(); + }; + PreviousUrl = strUrl; + /* explanation: we store the current url in order to compare url + in the event of another call of this function. */ +} +</script> + +(...) + +<p><a href="http://www.spreadfirefox.com/" target="SingleSecondaryWindowName" +onclick="openRequestedSinglePopup(this.href); return false;" +title="This link will create a new window or will re-use +an already opened one">Promote Firefox +adoption</a></p> +<p><a href="http://www.mozilla.org/support/firefox/faq" +target="SingleSecondaryWindowName" +onclick="openRequestedSinglePopup(this.href); return false;" +title="This link will create a new window or will re-use +an already opened one">Firefox FAQ</a></p> +</pre> + +<h3 id="FAQ" name="FAQ">FAQ</h3> + +<dl> + <dt>How can I prevent the confirmation message asking the user whether he wants to close the window?</dt> + <dd>You can not. <strong>New windows not opened by javascript can not as a rule be closed by JavaScript.</strong> The JavaScript Console in Mozilla-based browsers will report the warning message: <code>"Scripts may not close windows that were not opened by script."</code> Otherwise the history of URLs visited during the browser session would be lost.</dd> + <dd><a href="/pl/Window.close" title="pl/Window.close">More on the window.close()</a> method</dd> +</dl> + +<dl> + <dt>How can I bring back the window if it is minimized or behind another window?</dt> + <dd>First check for the existence of the window object reference of such window and if it exists and if it has not been closed, then use the <a href="/pl/DOM/window.focus" title="pl/DOM/window.focus">focus()</a> method. There is no other reliable way. You can examine an <a href="#Best_practices">example explaining how to use the focus() method</a>.</dd> +</dl> + +<dl> + <dt>How do I force a maximized window?</dt> + <dd>You cannot. All browser manufacturers try to make the opening of new secondary windows noticed by users and noticeable by users to avoid confusion, to avoid disorienting users.</dd> +</dl> + +<dl> + <dt>How do I turn off window resizability or remove toolbars?</dt> + <dd>You cannot force this. Users with Mozilla-based browsers have absolute control over window functionalities like resizability, scrollability and toolbars presence via user preferences in <code>about:config</code>. Since your users are the ones who are supposed to use such windows (and not you, being the web author), the best is to avoid interfering with their habits and preferences. We recommend to always set the resizability and scrollbars presence (if needed) to yes to insure accessibility to content and usability of windows. This is in the best interests of both the web author and the users.</dd> +</dl> + +<dl> + <dt>How do I resize a window to fit its content?</dt> + <dd>You can not reliably because the users can prevent the window from being resized by unchecking the</dd> +</dl> + +<p><code style="white-space: normal;">Edit/Preferences/Advanced/Scripts & Plug-ins/Allow Scripts to/ Move or resize existing windows</code><br> + checkbox in Mozilla or<br> + <code style="white-space: normal;">Tools/Options.../Content tab/Enable Javascript/Advanced button/Move or resize existing windows</code><br> + checkbox in Firefox or by setting<br> + <code>dom.disable_window_move_resize</code><br> + to <var>true</var> in the <code>about:config</code> or by editing accordingly their <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</p> + +<dl> + <dd>In general, users usually disable moving and resizing of existing windows because allowing authors' scripts to do so has been abused overwhelmingly in the past and the rare scripts that do not abuse such feature are often wrong, inaccurate when resizing the window. 99% of all those scripts disable window resizability and disable scrollbars when in fact they should enable both of these features to allow a cautious and sane fallback mechanism if their calculations are wrong.</dd> +</dl> + +<dl> + <dd>The window method <a href="/pl/DOM/window.sizeToContent" title="pl/DOM/window.sizeToContent">sizeToContent()</a> is also disabled if the user unchecks the preference <code>Move or resize existing windows</code> checkbox. Moving and resizing a window remotely on the user's screen via script will very often annoy the users, will disorient the user, and will be wrong at best. The web author expects to have full control of (and can decide about) every position and size aspects of the users' browser window ... which is simply not true.</dd> +</dl> + +<dl> + <dt>How do I open a referenced resource of a link in a new tab? or in a specific tab?</dt> + <dd>Currently, you can not. Only the user can set his advanced preferences to do that. <a class="external" href="http://kmeleon.sourceforge.net/">K-meleon 1.1</a>, a Mozilla-based browser, gives complete control and power to the user regarding how links are opened. Some advanced extensions also give Mozilla and Firefox a lot of power over how referenced resources are loaded.</dd> +</dl> + +<dl> + <dd>In a few years, the <a class="external" href="http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target0">target property of the CSS3 hyperlink module</a> may be implemented (if CSS3 Hyperlink module as it is right now is approved). And even if and when this happens, you can expect developers of browsers with tab-browsing to give the user entire veto power and full control over how links can open web pages. How to open a link should always be entirely under the control of the user.</dd> +</dl> + +<dl> + <dt>How do I know whether a window I opened is still open?</dt> + <dd>You can test for the existence of the window object reference which is the returned value in case of success of the window.open() call and then verify that <var>WindowObjectReference</var>.closed return value is <var>false</var>.</dd> +</dl> + +<dl> + <dt>How can I tell when my window was blocked by a popup blocker?</dt> + <dd>With the built-in popup blockers of Mozilla/Firefox and Internet Explorer 6 SP2, you have to check the return value of <code>window.open()</code>: it will be <var>null</var> if the window wasn't allowed to open. However, for most other popup blockers, there is no reliable way.</dd> +</dl> + +<dl> + <dt>What is the JavaScript relationship between the main window and the secondary window?</dt> + <dd>The return value of the window.open() method and the <a href="/pl/DOM/window.opener" title="pl/DOM/window.opener">opener</a> property. The <var>WindowObjectReference</var> links the main (opener) window to the secondary (sub-window) window while the opener keyword will link the secondary window to its main (opener) window.</dd> +</dl> + +<dl> + <dt>I can not access the properties of the new secondary window. I always get an error in the javascript console saying "Error<span class="nowiki">:</span> uncaught exception<span class="nowiki">:</span> Permission denied to get property <property_name or method_name>. Why is that?</dt> + <dd>It is because of the cross-domain script security restriction (also referred as the "Same Origin Policy"). A script loaded in a window (or frame) from a distinct origin (domain name) <strong>cannot get nor set</strong> properties of another window (or frame) or the properties of any of its HTML objects coming from another distinct origin (domain name). Therefore, before executing a script targeting a secondary window, the browser in the main window will verify that the secondary window has the same domain name.</dd> + <dd>More reading on the cross-domain script security restriction: <a class="external" href="http://www.mozilla.org/projects/security/components/same-origin.html" rel="freelink">http://www.mozilla.org/projects/secu...me-origin.html</a></dd> +</dl> + +<h3 id="Usability_issues" name="Usability_issues">Usability issues</h3> + +<h4 id="Avoid_resorting_to_window.open.28.29" name="Avoid_resorting_to_window.open.28.29">Avoid resorting to <code>window.open()</code></h4> + +<p>Generally speaking, it is preferable to avoid resorting to window.open() for several reasons:</p> + +<ul> + <li>All Mozilla-based browsers offer tab-browsing and this is the preferred mode of opening referenced resources... not just in Mozilla-based browsers but in all other browsers offering tab-browsing. In other words, tab-capable browser users overall prefer opening new tabs than opening new windows in a majority of webpage situations. Tab-capable browsers have rapidly gained support and enthusiasm on internet in the last 2 years and this trend will likely continue. It has been confirmed that the new upcoming release of MSIE 7 in February 2006 will have full support for tab browsing.</li> +</ul> + +<ul> + <li>There are now <a class="link-https" href="https://addons.update.mozilla.org/extensions/showlist.php?application=mozilla&category=Tabbed+Browsing&numpg=50&os=windows&version=auto-detect&submit=Update">several Mozilla extensions</a> (like Multizilla) and <a class="link-https" href="https://addons.update.mozilla.org/extensions/showlist.php?application=firefox&version=1.0+&os=Windows&category=Tabbed%20Browsing">Firefox extensions</a> (like <a class="link-https" href="https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&version=1.0%20&os=Windows&category=Tabbed%20Browsing&numpg=10&id=158">Tabbrowser preferences</a>), features, settings and advanced preferences based on tab-browsing and based on converting window.open() calls into opening tabs, based on neutralizing window.open() calls, in particular in neutralizing unrequested openings of new windows (often referred as blocking unrequested popups or as blocking script-initiated windows opening automatically). Such features found in extensions include opening a link in a new window or not, in the same window, in a new tab or not, in "background" or not. Coding carelessly to open new windows can no longer be assured of success, can not succeed by force and, if it does, it will annoy a majority of users.</li> +</ul> + +<ul> + <li>New windows can have menubar missing, scrollbars missing, status bar missing, window resizability disabled, etc.; new tabs can not be missing those functionalities or toolbars (or at least, the toolbars which are present by default). Therefore, tab-browsing is preferred by a lot of users because the normal user-interface of the browser window they prefer is kept intact, remains stable.</li> +</ul> + +<ul> + <li>Opening new windows, even with reduced features, uses considerably a lot of the user's system resources (cpu, RAM) and involves considerably a lot of coding in the source code (security management, memory management, various code branchings sometimes quite complex, window frame/chrome/toolbars building, window positioning and sizing, etc.). Opening new tabs is less demanding on the user's system resources (and faster to achieve) than opening new windows.</li> +</ul> + +<h4 id="Offer_to_open_a_link_in_a_new_window.2C_using_these_guidelines" name="Offer_to_open_a_link_in_a_new_window.2C_using_these_guidelines">Offer to open a link in a new window, using these guidelines</h4> + +<p>If you want to offer to open a link in a new window, then follow tested and recommendable usability and accessibility guidelines:</p> + +<h5 id="Never_use_this_form_of_code_for_links:.3Ca_href.3D.22javascript:window.open.28....29.22_....3E" name="Never_use_this_form_of_code_for_links:.3Ca_href.3D.22javascript:window.open.28....29.22_....3E"><em>Never</em> use this form of code for links:<br> + <code><a href="javascript:window.open(...)" ...></code></h5> + +<p>"javascript:" links break accessibility and usability of webpages in every browser.</p> + +<ul> + <li>"javascript:" pseudo-links become dysfunctional when javascript support is disabled or inexistent. Several corporations allow their employees to surf on the web but under strict security policies: no javascript enabled, no java, no activeX, no Flash. For various reasons (security, public access, text browsers, etc..), about 8% to 12% of users on the web surf with javascript disabled.</li> + <li>"javascript:" links will interfere with advanced features in tab-capable browsers: eg. middle-click on links, Ctrl+click on links, tab-browsing features in extensions, etc.</li> + <li>"javascript:" links will interfere with the process of indexing webpages by search engines.</li> + <li>"javascript:" links interfere with assistive technologies and several web-aware applications (e.g. PDA (Personal Digital Assistant).</li> + <li>"javascript:" links also interfere with "mouse gestures" features implemented in browsers.</li> + <li>Protocol scheme "javascript:" will be reported as an error by link validators and link checkers.</li> +</ul> + +<p><strong>Further reading:</strong></p> + +<ul> + <li><a class="external" href="http://www.useit.com/alertbox/20021223.html">Top Ten Web-Design Mistakes of 2002</a>, 6. JavaScript in Links, Jakob Nielsen, December 2002</li> + <li><a class="external" href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links & JavaScript Living Together in Harmony</a>, Jeff Howden, February 2002</li> + <li><a class="external" href="http://jibbering.com/faq/#FAQ4_24">comp.lang.javascript newsgroup discussion FAQ on "javascript:" links</a></li> +</ul> + +<h5 id="Nigdy_nie_u.C5.BCywaj_.3Ca_href.3D.22.23.22_onclick.3D.22window.open.28....29.3B.22.3E" name="Nigdy_nie_u.C5.BCywaj_.3Ca_href.3D.22.23.22_onclick.3D.22window.open.28....29.3B.22.3E">Nigdy nie używaj <code><a href="#" onclick="window.open(...);"></code></h5> + +<p>Takie pseudo-linki ograniczają dostępność stron. <strong>Zawsze używaj rzeczywistych URLi jako wartości atrybutu href</strong> tak by w przypadku braku obsługi javascriptu lub gdy przeglądarka nie obsługuje otwierania odrębnych okien (jak w przypadku MS-Web TV, przeglądarek tekstowych, itp.), przeglądarka miała możliwość dostępu do zasobu zgodnie z domyślnym sposobem obsługi zasobów. Tak sformułowane linki kolidują także z dodatkowymi funkcjami przeglądarek obsługujących zakładki, np.: kliknięcie linku środkowym klawiszem myszy, kliknięcie linku z przytrzymanym klawiszem ctrl, naciśnięcie kombinacji ctrl+enter czy gesty myszą.</p> + +<h5 id="Always_identify_links_which_will_create_.28or_will_re-use.29_a_new.2C_secondary_window" name="Always_identify_links_which_will_create_.28or_will_re-use.29_a_new.2C_secondary_window">Always identify links which will create (or will re-use) a new, secondary window</h5> + +<p>Identify links that will open new windows in a way that helps navigation for users by coding the title attribute of the link, by adding an icon at the end of the link or by coding the cursor accordingly.</p> + +<p>The purpose is to warn users in advance of context changes to minimize confusion on the user's part: changing the current window or popping up new windows can be very disorienting to users (Back toolbar button is disabled).</p> + +<blockquote> +<p>"Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out <em>Back</em> button."<br> + quote from <a class="external" href="http://www.useit.com/alertbox/990530.html">The Top Ten <em>New</em> Mistakes of Web Design</a>: 2. Opening New Browser Windows, Jakob Nielsen, May 1999</p> +</blockquote> + +<p>When extreme changes in context are explicitly identified before they occur, then the users can determine if they wish to proceed or so they can be prepared for the change: not only they will not be confused or feel disoriented, but more experienced users can better decide how to open such links (in a new window or not, in the same window, in a new tab or not, in "background" or not).</p> + +<p><strong>References</strong></p> + +<ul> + <li>"If your link spawns a new window, or causes another windows to 'pop up' on your display, or move the focus of the system to a new FRAME or Window, then the nice thing to do is to tell the user that something like that will happen." <a class="external" href="http://www.w3.org/WAI/wcag-curric/sam77-0.htm">World Wide Web Consortium Accessibility Initiative regarding popups</a></li> + <li>"Use link titles to provide users with a preview of where each link will take them, before they have clicked on it." <a class="external" href="http://www.useit.com/alertbox/991003.html">Ten Good Deeds in Web Design</a>, Jakob Nielsen, October 1999</li> + <li><a class="external" href="http://www.useit.com/alertbox/980111.html">Using Link Titles to Help Users Predict Where They Are Going</a>, Jakob Nielsen, January 1998</li> +</ul> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header" colspan="4">Przykład ikon & kursorów "Nowego okna"</td> + </tr> + <tr> + <td style="width: 25%;"><img alt="New window icon from yahoo.com"></td> + <td style="width: 25%;"><img alt="New window icon from microsoft.com" class="internal" src="/@api/deki/files/2463/=NewwinMSIE.gif"></td> + <td style="width: 25%;"><img alt="New window icon from webaim.org" class="internal" src="/@api/deki/files/2339/=Popup_requested_new_window.gif"></td> + <td style="width: 25%;"><img alt="New window icon from sun.com" class="internal" src="/@api/deki/files/2476/=PopupImageSun.gif"></td> + </tr> + <tr> + <td><img alt="New window icon from bbc.co.uk" class="internal" src="/@api/deki/files/2469/=Opennews_rb.gif"></td> + <td><img alt="New window icon from Accessible Internet Solutions" class="internal" src="/@api/deki/files/2205/=AIS_NewWindowIcon.png"></td> + <td><img alt="New window icon from accessify.com" class="internal" src="/@api/deki/files/2474/=Pop-up-launcher.gif"></td> + <td><img alt="New window icon from webstyleguide.com" class="internal" src="/@api/deki/files/2347/=Webstyleguide_com_newwind.gif"></td> + </tr> + <tr> + <td><img alt="New window icon from an unknown source" class="internal" src="/@api/deki/files/2475/=Popicon_1.gif"></td> + <td><img alt="New window icon from an unknown source" class="internal" src="/@api/deki/files/2462/=New.gif"></td> + <td><img alt="New window icon from an unknown source" class="internal" src="/@api/deki/files/2348/=WillCreateOrRecycleNewWindow.gif"></td> + <td><img alt="New window icon from gtalbot.org" class="internal" src="/@api/deki/files/2336/=OpenRequestedPopup.png"></td> + </tr> + <tr> + <td colspan="2"><img alt="New window cursor from draig.de" class="internal" src="/@api/deki/files/2300/=Cursor_LinkNewWindowTargetBlank.png"></td> + <td colspan="2"><img alt="New window cursor from mithgol.ru" class="internal" src="/@api/deki/files/2301/=Cursor_newwindowSergeySokoloff.png"></td> + </tr> + </tbody> +</table> + +<h5 id="Always_use_the_target_attribute" name="Always_use_the_target_attribute">Always use the target attribute</h5> + +<p>If javascript support is disabled or non-existent, then the user agent will create a secondary window accordingly or will render the referenced resource according to its handling of the target attribute: e.g. some user agents which can not create new windows, like MS Web TV, will fetch the referenced resource and append it at the end of the current document. The goal and the idea is to try to provide - <strong>not impose</strong> - to the user a way to open the referenced resource, a mode of opening the link. Your code should not interfere with the features of the browser at the disposal of the user and your code should not interfere with the final decision resting with the user.</p> + +<h5 id="Do_not_use_target.3D.22_blank.22" name="Do_not_use_target.3D.22_blank.22">Do not use <code>target="_blank"</code></h5> + +<p>Always provide a meaningful name to your target attribute and try to reuse such target attribute in your page so that a click on another link may load the referenced resource in an already created and rendered window (therefore speeding up the process for the user) and therefore justifying the reason (and user system resources, time spent) for creating a secondary window in the first place. Using a single target attribute value and reusing it in links is much more user resources friendly as it only creates one single secondary window which is recycled. On the other hand, using "_blank" as the target attribute value will create several new and unnamed windows on the user's desktop which can not be recycled, reused. In any case, if your code is well done, it will not interfere with the user's final choice but will rather merely offer him more choices, more ways to open links and more power to the tool he's using (a browser).</p> + +<h3 id="Glossary" name="Glossary">Glossary</h3> + +<dl> + <dt>Opener window, parent window, main window, first window </dt> + <dd>Terms often used to describe or to identify the same window. It is the window from which a new window will be created. It is the window on which the user clicked a link which lead to the creation of another, new window.</dd> +</dl> + +<dl> + <dt>Sub-window, child window, secondary window, second window </dt> + <dd>Terms often used to describe or to identify the same window. It is the new window which was created.</dd> +</dl> + +<dl> + <dt>Unrequested popup windows</dt> + <dd>Script-initiated windows opening automatically without the user's consent.</dd> +</dl> + +<h3 id="Specification" name="Specification">Specification</h3> + +<p>DOM Level 0. window.open() is not part of any W3C (World Wide Web Consortium) specification or technical recommendation.</p> + +<h3 id="Notes" name="Notes">Notes</h3> + +<h4 id="Note_on_precedence" name="Note_on_precedence">Note on precedence</h4> + +<p>In cases where <code>left</code> and <code>screenX</code> (and/or <code>top</code> and <code>screenY</code>) have conflicting values, then <code>left</code> and <code>top</code> have precedence over <code>screenX</code> and <code>screenY</code> respectively. If <code>left</code> and <code>screenX</code> (and/or <code>top</code> and <code>screenY</code>) are defined in the <var>strWindowFeatures</var> list, then <code>left</code> (and/or <code>top</code>) will be honored and rendered. In the following example the new window will be positioned at 100 pixels from the left side of the work area for applications of the user's operating system, not at 200 pixels.</p> + +<pre><script type="text/javascript"> +WindowObjectReference = window.open("http://news.bbc.co.uk/", + "BBCWorldNewsWindowName", + "left=100,screenX=200,resizable,scrollbars,status"); +</script> +</pre> + +<p>If left is set but top has no value and screenY has a value, then left and screenY will be the coordinate positioning values of the secondary window.</p> + +<p>outerWidth has precedence over width and width has precedence over innerWidth. outerHeight has precedence over height and height has precedence over innerHeight. In the following example, Mozilla-browsers will create a new window with an outerWidth of 600 pixels wide and will ignore the request of a width of 500 pixels and will also ignore the request of an innerWidth of 400 pixels.</p> + +<pre><script type="text/javascript"> +WindowObjectReference = window.open("http://www.wwf.org/", + "WWildlifeOrgWindowName", + "outerWidth=600,width=500,innerWidth=400,resizable,scrollbars,status"); +</script> +</pre> + +<h4 id="Note_on_position_and_dimension_error_correction" name="Note_on_position_and_dimension_error_correction">Note on position and dimension error correction</h4> + +<p>Requested position and requested dimension values in the <var>strWindowFeatures</var> list will not be honored and <strong>will be corrected</strong> if any of such requested value does not allow the entire browser window to be rendered within the work area for applications of the user's operating system. <strong>No part of the new window can be initially positioned offscreen. This is by default in all Mozilla-based browser releases.</strong></p> + +<p><a class="external" href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">MSIE 6 SP2 has a similar error correction mechanism</a> but it is not activated by default in all security levels: a security setting can disable such error correction mechanism.</p> + +<h4 id="Note_on_scrollbars" name="Note_on_scrollbars">Note on scrollbars</h4> + +<p>When content overflows window viewport dimensions, then scrollbar(s) (or some scrolling mechanism) are necessary to ensure that content can be accessed by users. Content can overflow window dimensions for several reasons which are outside the control of web authors:</p> + +<ul> + <li>user resizes the window</li> + <li>user increases the text size of fonts via View/Text Zoom (%) menuitem in Mozilla or View/Text Size/Increase or Decrease in Firefox</li> + <li>user sets a minimum font size for pages which is bigger than the font-size the web author requested. People over 40 years old or with particular viewing habit or reading preference often set a minimal font size in Mozilla-based browsers.</li> + <li>web author is not aware of default margin (and/or border and/or padding) values applying to root element or body node in various browsers and various browser versions</li> + <li>user uses an user stylesheet (<a class="external" href="http://www.mozilla.org/support/firefox/edit#content">userContent.css in Mozilla-based browsers</a>) for his viewing habits which increases document box dimensions (margin, padding, default font size)</li> + <li>user can customize individually the size (height or width) of most toolbars via operating system settings. E.g. window resizing borders, height of browser titlebar, menubar, scrollbars, font size are entirely customizable by the user in Windows XP operating system. These toolbars dimensions can also be set via browser themes and skins or by operating system themes</li> + <li>web author is unaware that the user default browser window has custom toolbar(s) for specific purpose(s); e.g.: prefs bar, web developer bar, accessibility toolbar, popup blocking and search toolbar, multi-feature toolbar, etc.</li> + <li>user uses assistive technologies or add-on features which modify the operating system's work area for applications: e.g. MS-Magnifier</li> + <li>user repositions and/or resizes directly or indirectly the operating system's work area for applications: e.g. user resizes the Windows taskbar, user positions the Windows taskbar on the left side (arabic language based) or right side (Hebrew language), user has a permanent MS-Office quick launch toolbar, etc.</li> + <li>some operating system (Mac OS X) forces presence of toolbars which can then fool the web author's anticipations, calculations of the effective dimensions of the browser window</li> +</ul> + +<h4 id="Note_on_status_bar" name="Note_on_status_bar">Note on status bar</h4> + +<p>You should assume that a large majority of users' browsers will have the status bar or that a large majority of users will want to force the status bar presence: best is to always set this feature to yes. Also, if you specifically request to remove the status bar, then Firefox users will not be able to view the Site Navigation toolbar if it is installed. In Mozilla and in Firefox, all windows with a status bar have a window resizing grippy at its right-most side. The status bar also provides info on http connection, hypertext resource location, download progress bar, encryption/secure connection info with SSL (Secure Socket Layer) connection (displaying a yellow padlock icon), internet/security zone icons, privacy policy/cookie icon, etc. <strong>Removing the status bar usually removes a lot of functionality, features and information considered useful (and sometimes vital) by the users.</strong></p> + +<h4 id="Note_on_security_issues_of_the_status_bar_presence" name="Note_on_security_issues_of_the_status_bar_presence">Note on security issues of the status bar presence</h4> + +<p>In MSIE 6 for XP SP2: For windows opened using window.open():</p> + +<blockquote> +<p>"For windows opened using window.open():<br> + Expect the status bar to be present, and code for it. <strong>The status bar will be on by default</strong> and is 20-25 pixels in height. (...)"<br> + quote from <a class="external" href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2</a></p> +</blockquote> + +<blockquote> +<p>"(...) windows that are created using the window.open() method can be called by scripts and used to spoof a user interface or desktop or to hide malicious information or activity by sizing the window so that the status bar is not visible.<br> + Internet Explorer windows provide visible security information to the user to help them ascertain the source of the Web page and the security of the communication with that page. When these elements are not in view, the user might think they are on a more trusted page or interacting with a system process when they are actually interacting with a malicious host. (...)<br> + <strong>Script-initiated windows will be displayed fully, with the Internet Explorer title bar and status bar.</strong> (...)<br> + Script management of Internet Explorer status bar<br> + Detailed description<br> + <strong>Internet Explorer has been modified to not turn off the status bar for any windows. The status bar is always visible for all Internet Explorer windows.</strong> (...) Without this change, windows that are created using the window.open() method can be called by scripts and spoof a user interface or desktop or hide malicious information or activity by hiding important elements of the user interface from the user.<br> + The status bar is a security feature of Internet Explorer windows that provides Internet Explorer security zone information to the user. This zone cannot be spoofed (...)"<br> + quote from <a class="external" href="http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions</a></p> +</blockquote> + +<h4 id="Note_on_fullscreen" name="Note_on_fullscreen">Note on fullscreen</h4> + +<p>In MSIE 6 for XP SP2:</p> + +<ul> + <li>"window.open() with fullscreen=yes will now result in a maximized window, not a kiosk mode window."</li> +</ul> + +<ul> + <li>"The definition of the fullscreen=yes specification is changed to mean 'show the window as maximized,' which will keep the title bar, address bar, and status bar visible."</li> +</ul> + +<p><em>References:</em></p> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2</a></li> +</ul> + +<ul> + <li><a class="external" href="http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Script sizing of Internet Explorer windows</a></li> +</ul> + +<h4 id="Note_on_outerHeight_versus_height" name="Note_on_outerHeight_versus_height">Note on outerHeight versus height</h4> + +<p><img alt="innerHeight vs outerHeight illustration"></p> + +<h2 id="Tutorials" name="Tutorials">Tutorials</h2> + +<p><a class="external" href="http://www.infimum.dk/HTML/JSwindows.html">JavaScript windows (tutorial)</a> by Lasse Reichstein Nielsen</p> + +<p><a class="external" href="http://www.accessify.com/tutorials/the-perfect-pop-up.asp">The perfect pop-up (tutorial)</a> by Ian Lloyd</p> + +<p><a class="external" href="http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html">Popup windows and Firefox (interactive demos)</a> by Gérard Talbot</p> + +<h2 id="References" name="References">References</h2> + +<p><a class="external" href="http://www.cs.tut.fi/~jkorpela/www/links.html">Links Want To Be Links</a> by Jukka K. Korpela</p> + +<p><a class="external" href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links & JavaScript Living Together in Harmony</a> by Jeff Howden</p> diff --git a/files/pl/web/api/window/opendialog/index.html b/files/pl/web/api/window/opendialog/index.html new file mode 100644 index 0000000000..6d24bf03fd --- /dev/null +++ b/files/pl/web/api/window/opendialog/index.html @@ -0,0 +1,75 @@ +--- +title: window.openDialog +slug: Web/API/Window/openDialog +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Window/openDialog +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>window.openDialog</code> jest rozszerzeniem do <a href="/pl/DOM/window.open" title="pl/DOM/window.open">window.open</a>. Zachowuje się w taki sam sposób, oprócz tego, że opcjonalnie pobiera jeden lub więcej parametrów przeszłego <code>windowFeatures</code> i <code>windowFeatures</code> <strong>itself is treated a little differently.</strong></p> +<p>The optional parameters, if present, will be bundled up in a JavaScript Array object and added to the newly created window as a property named <a href="/pl/DOM/window.arguments" title="pl/DOM/window.arguments">window.arguments</a>. They may be referenced in the JavaScript of the window at any time, including during the execution of a <code>load</code> handler. These parameters may be used, then, to pass arguments to and from the dialog window.</p> +<p>Note that the call to <code>openDialog()</code> returns immediately. If you want the call to block until the user has closed the dialog, supply <code>modal</code> as a <code>windowFeatures</code> parameter. Note that this also means the user won't be able to interact with the opener window until he closes the modal dialog.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><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> + Otwarte okno.</dd> + <dt> + url </dt> + <dd> + Adres URL który będzie wczytany do nowego okna.</dd> + <dt> + name </dt> + <dd> + Nazwa okna (opcjonalnie). Zobacz opis <a href="/pl/DOM/window.open" title="pl/DOM/window.open">window.open</a>, aby dowiedzieć się więcej.</dd> + <dt> + features </dt> + <dd> + Zobacz opis <a href="/pl/DOM/window.open" title="pl/DOM/window.open">window.open</a>, aby dowiedzieć się więcej.</dd> + <dt> + arg1, arg2, ... </dt> + <dd> + Argumenty dopasowujące nowe okno (opcjonalnie).</dd> +</dl> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var win = openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "", "pizza", 6.98); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<h4 id="Nowe_mo.C5.BCliwo.C5.9Bci" name="Nowe_mo.C5.BCliwo.C5.9Bci">Nowe możliwości</h4> +<p><code>all</code> - Initially activates (or deactivates <code>("all=no")</code>) all chrome (except the behaviour flags <code>chrome</code>, <code>dialog</code> and <code>modal</code>). These can be overridden (so <code>"menubar=no,all"</code> turns on all chrome except the menubar.) This feature is explicitly ignored by <a href="/pl/DOM/window.open" title="pl/DOM/window.open">DOM:window.open</a>. <code>window.openDialog</code> finds it useful because of its different default assumptions.</p> +<h4 id="Domy.C5.9Blne_zachowanie" name="Domy.C5.9Blne_zachowanie">Domyślne zachowanie</h4> +<p>Możliwości <code>chrome</code> i <code>dialog</code> są zawsze assumed on, unless explicitly turned off ("<code>chrome=no</code>"). <code>openDialog</code> treats the absence of the features parameter as does <a href="/pl/DOM/window.open" title="pl/DOM/window.open">DOM:window.open</a>, (that is, an empty string sets all features to off) except <code>chrome</code> and <code>dialog</code>, which default to on. If the <code>features</code> parameter is a zero-length string, or contains only one or more of the behaviour features (<code>chrome</code>, <code>dependent</code>, <code>dialog</code> and <code>modal</code>) the chrome features are assumed "OS' choice." That is, window creation code is not given specific instructions, but is instead allowed to select the chrome that best fits a dialog on that operating system.</p> +<h4 id="Passing_extra_parameters_to_the_dialog" name="Passing_extra_parameters_to_the_dialog">Passing extra parameters to the dialog</h4> +<p>To pass extra parameters into the dialog, you can simply supply them after the <code>windowFeatures</code> parameter:</p> +<pre class="eval">openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "", "pizza", 6.98); +</pre> +<p>The extra parameters will then get packed into a property named <code>arguments</code> of type <a href="/pl/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="pl/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a>, and this property gets added to the newly opened dialog window.</p> +<p>To access these extra parameters from within dialog code, use the following scheme:</p> +<pre class="eval">var food = window.arguments[0]; +var price = window.arguments[1]; +</pre> +<p>Note that you can access this property from within anywhere in the dialog code.</p> +<h4 id="Zwracanie_warto.C5.9Bci_z_okienka_dialogowego" name="Zwracanie_warto.C5.9Bci_z_okienka_dialogowego">Zwracanie wartości z okienka dialogowego</h4> +<p>Since <code>window.close()</code> erases all properties associated with the dialog window (i.e. the variables specified in the JavaScript code which gets loaded from the dialog), it is not possible to pass return values back past the close operation using globals (or any other constructs).</p> +<p>To be able to pass values back to the caller, you have to supply some object via the extra parameters. You can then access this object from within the dialog code and set properties on it, containing the values you want to return or preserve past the <code>window.close()</code> operation.</p> +<pre class="eval">var retVals = { address: null, delivery: null }; +openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "modal", "pizza", 6.98, retVals); +</pre> +<p>If you set the properties of the <code>retVals</code> object in the dialog code as described below, you can now access them via the <code>retVals</code> array after the <code>openDialog()</code> call returns.</p> +<p>Inside the dialog code, you can set the properties as follows:</p> +<pre class="eval">var retVals = window.arguments[2]; +retVals.address = enteredAddress; +retVals.delivery = "immediate"; +</pre> +<p>Zobacz także .</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> diff --git a/files/pl/web/api/window/opener/index.html b/files/pl/web/api/window/opener/index.html new file mode 100644 index 0000000000..3cd744928e --- /dev/null +++ b/files/pl/web/api/window/opener/index.html @@ -0,0 +1,49 @@ +--- +title: window.opener +slug: Web/API/Window/opener +tags: + - API + - HTML DOM + - Window + - Własność + - odniesienie + - opener +translation_of: Web/API/Window/opener +--- +<p>{{APIRef("HTML DOM")}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Właściwość <code>opener</code> obiektu {{domxref ("Window")}} zwraca odniesienie do okna, które otworzyło okno używając {{domxref ("Window.open", "open()")}}.</p> + +<p><span class="tlid-translation translation"><span title="">Innymi słowy, jeśli okno <code>A</code> otwiera okno <code>B</code>, <code>B.opener</code> zwraca <code>A</code>.</span></span></p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval"><em>openerWindow</em> = window.opener; +</pre> + +<h3 id="Wartość">Wartość</h3> + +<p>{{domxref ("Window")}} odnosi się do okna, które wywołało open(), aby otworzyć bieżące okno, lub <code>null</code>, jeśli to okno nie zostało otwarte przez połączenie z innym lub utworzone przez inne.</p> + +<p><span class="tlid-translation translation"><span title="">W <a href="https://caniuse.com/#search=noopener">niektórych przeglądarkach</a> atrybut <code>rel="noopener noreferrer"</code> w początkowym elemencie {{HTMLElement ("a")}} zapobiega ustawianiu referencji <strong><code>window.opener</code></strong>, w którym to przypadku ta właściwość zwróci wartość <code>null</code>.</span></span></p> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<pre> if window.opener != indexWin { + referToTop(window.opener); + } +</pre> + +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> + +<p>Kiedy okno jest otwarte z innego okna, to utrzymuje referencję do pierwszego okna jako <strong>window.opener</strong>. Jeśli bieżące okno nie posiada własności opener, te metoda zwróci NULL.</p> + +<h2 id="Specyfikacja" name="Specyfikacja">Wsparcie przeglądarek</h2> + +<div class="hidden"> +<p><span class="tlid-translation translation"><span title="">Tabela zgodności na tej stronie jest generowana na podstawie danych strukturalnych.</span> <span title="">Jeśli chcesz przyczynić się do danych, sprawdź <a href="/pl/docs/">https://github.com/mdn/browser-compat-data</a> i wyślij nam pull request'a.</span></span></p> +</div> + +<p>{{Compat("api.Window.opener")}}</p> diff --git a/files/pl/web/api/window/prompt/index.html b/files/pl/web/api/window/prompt/index.html new file mode 100644 index 0000000000..0a90ac5c2e --- /dev/null +++ b/files/pl/web/api/window/prompt/index.html @@ -0,0 +1,33 @@ +--- +title: window.prompt +slug: Web/API/Window/prompt +translation_of: Web/API/Window/prompt +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wyświetla okno dialogowe z prośbą do użytkownika o wpisanie jakiegoś tekstu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>result</i> = window.prompt(<i>text</i>,<i>value</i>); +</pre> +<ul> + <li><code>result</code> jest łańcuchem znaków, który zawiera tekst wprowadzony przez użytkownika lub wartość null.</li> + <li><code>text</code> jest łańcuchem znaków określającym tekst, jaki ma zostać wyświetlony użytkownikowi.</li> + <li><code>value</code> jest łańcuchem znaków zawierającym domyślną wartość w polu wprowadzania tekstu (input). Jest to opcjonalny parametr.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var sign = prompt("Jaki jest twój znak zodiaku?"); +if (sign.toLowerCase() == "skorpion") + alert("Wow! Też jestem Skorpionem!"); +</pre> +<p>Gdy użytkownik naciśnie przycisk OK, zwracany jest wpisany przez niego tekst. Jeśli użytkownik naciśnie przycisk OK bez wprowadzania tekstu, zwrócony zostanie pusty łańcuch znaków. Jeśli użytkownik naciśnie przycisk Anuluj, ta funkcja zwróci wartość null.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Okno dialogowe typu prompt zawiera pole tekstowe o wielkości pojedynczej linii, przycisk Anuluj i przycisk OK oraz zwraca tekst (możliwy również pusty), które użytkownik wpisał w to pole tekstowe.</p> +<p><span class="comment">The following text is shared between this article, DOM:window.confirm and DOM:window.alert</span> Okna dialogowe to okna modalne - uniemożliwiają użytkownikowi dostęp do reszty interfejsu programu dopóki okno nie zostanie zamknięte. Z tego powodu nie powinieneś nadużywać funkcji, które otwierają okna dialogowe.</p> +<p>Zamiast tego użytkownicy Chrome (na przykład rozszerzenia) powinni używać metod <a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIPromptService">nsIPromptService</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<p><a href="pl/DOM/window.alert">alert</a>, <a href="pl/DOM/window.confirm">confirm</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.prompt", "fr": "fr/DOM/window.prompt", "ja": "ja/DOM/window.prompt" } ) }}</p> diff --git a/files/pl/web/api/window/requestanimationframe/index.html b/files/pl/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..703a908e8d --- /dev/null +++ b/files/pl/web/api/window/requestanimationframe/index.html @@ -0,0 +1,170 @@ +--- +title: Window.requestAnimationFrame() +slug: Web/API/Window/requestAnimationFrame +tags: + - API + - DOM + - Metodă +translation_of: Web/API/window/requestAnimationFrame +--- +<p>{{APIRef}}<br> + Metoda <strong><code>Window.requestAnimationFrame()</code></strong> informuje przeglądarkę o zamiarze wykonania animacji i żąda od przeglądarki wywołania określonej funkcji w celu odświeżenia animacji przed następnym odmalowaniem. Argumentem metody jest funkcja (<em>callback</em>) do wywołania przed następnym odmalowaniem (odświeżeniem kanwy).</p> + +<div class="note"><strong>Uwaga:</strong> Twoja funkcja musi samodzielnie wywołać <code>requestAnimationFrame(),</code> jeżeli chcesz odmalować kolejną ramkę animacji.</div> + +<p>Należy wywołać tą metodą za każdym razem, gdy jesteś gotowy do odświeżenia swojej animacji na ekranie. Spowoduje to żądanie od przeglądarki wykonania twojej funkcji przed następnym odmalowaniem. Częstotliwość wykonywania funkcji wynosi zazwyczaj 60 razy na sekundę, jednakże według rekomendacji W3C w większości przeglądarek odpowiada częstotliwości odświeżania ekranu. Ta częstotliwość może zostać zredukowana do niższej wartości, gdy kod wykonywany jest w zakładce pozostającej w tle lub w ukrytej {{ HTMLElement("iframe") }} w celu poprawienia wydajności lub przedłużenia żywotności baterii.</p> + +<p>Wywoływanej funkcji przekazywany jest pojedynczy argument {{domxref("DOMHighResTimeStamp")}}, który zawiera aktualny czas rozpoczęcia wykonywania tej funkcji, wstawionej do kolejki przez wywołanie <code>requestAnimationFrame</code>. Wiele różnych funkcji wywołanych w jednej ramce otrzyma jednakże tę samą wartość znacznika czasu, niezależnie od czasu spędzonego wykonaniu obliczeń w poprzedzającej funkcji. Znacznik czasu jest liczbą dziesiętną wyrażoną w milisekundach z maksymalną dokładnością 1ms (1000 µs).</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox">window.requestAnimationFrame(callback); +</pre> + +<h3 id="Parameters" name="Parameters">Parametry</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Parametr określający funkcję do wywołania, gdy nadchodzi czas odświeżenia animacji przed następnym odmalowaniem. Przekazywana funkcja przyjmuje pojedynczy argument {{domxref("DOMHighResTimeStamp")}}, który określa aktualny czas (zwrócony przez {{domxref('Performance.now()')}} ) w momencie rozpoczęcia przez <code>requestAnimationFrame</code> uruchamiania skolejkowanych wcześniej funkcji.</dd> +</dl> + +<h3 id="Wartość_zwracana">Wartość zwracana</h3> + +<p>Wartość typu <code>long</code> integer będącą identyfikatorem żądania, który unikalnie określa pozycję na liście funkcji do wykonania. Jest to niezerowa wartość, jednakże nie wolno przyjmować żadnych innych założeń dotyczących wartości tego identyfikatora. Możesz przekazać tę wartość do {{domxref("Window.cancelAnimationFrame()")}} aby anulować żądanie wywołania funkcji do odświeżenia.</p> + +<h2 id="Notes" name="Notes">Przykład</h2> + +<pre class="brush: js">var start = null; +var element = document.getElementById("SomeElementYouWantToAnimate"); + +function step(timestamp) { + if (!start) start = timestamp; + var progress = timestamp - start; + element.style.left = Math.min(progress/10, 200) + "px"; + if (progress < 2000) { + window.requestAnimationFrame(step); + } +} + +window.requestAnimationFrame(step); +</pre> + +<h2 id="Specification" name="Specification">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Brak zmian, zastępuje poprzednią.</td> + </tr> + <tr> + <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td> + <td>{{Spec2('RequestAnimationFrame')}}</td> + <td>Wstępna definicja</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_przeglądarek">Zgodność przeglądarek</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>10.0 {{property_prefix("webkit")}}<br> + 24.0 <sup>3</sup></td> + <td>4.0 {{property_prefix("moz")}} <sup>1 4</sup><br> + 23 <sup>2</sup></td> + <td>10.0</td> + <td>{{compatversionunknown}} {{property_prefix("-o")}}<br> + 15.0</td> + <td>6.0 {{property_prefix("webkit")}}<br> + 6.1</td> + </tr> + <tr> + <td>return value</td> + <td>23.0</td> + <td>{{CompatGeckoDesktop("11.0")}}</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>Android</th> + <th>Chrome for 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</td> + <td>16.0 {{property_prefix("webkit")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>14.0</td> + <td>7.0<br> + 6.0 {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td><code>requestID</code> return value</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p><sup>1</sup> Przed Gecko 11.0 {{geckoRelease("11.0")}}, <code>mozRequestAnimationFrame()</code> mogłobyć wywołane bez parametru. To nie jest dalej wspierane, gdyż raczej nie stanie się częścią standardu.</p> + +<p><sup>2</sup> Parametrem wywoływanej funkcji jest {{domxref("DOMTimeStamp")}} zamiast {{domxref("DOMHighResTimeStamp")}} gdy stosuje się metodę z prefiksem. <code>DOMTimeStamp</code> ma dokładność tylko do milisekundy, podczas gdy <code>DOMHighResTimeStamp</code> ma minimalną dokładność dziesięciu mikrosekund. Co więcej, czas zerowy jest inny: <code>DOMHighResTimeStamp</code> ma taki sam czas zerowy jak <code>performance.now()</code>, lecz <code>DOMTimeStamp</code> ma czas zerowy jak <code>Date.now().</code></p> + +<p><sup>3</sup> Poprawnym wywołaniem anulowania żądania w Chrome jest aktualnie <code>window.cancelAnimationFrame()</code>. W starszych wersjach <code>window.webkitCancelAnimationFrame()</code> & <code>window.webkitCancelRequestAnimationFrame()</code>, które są przestarzałe, ale ciągle wspierane.</p> + +<p><sup>4</sup> Wsparcie dla wersji z prefiksem zostało usunięte z Firefox 42.</p> + +<h2 id="Specification" name="Specification">Zobacz również</h2> + +<ul> + <li>{{domxref("Window.mozAnimationStartTime")}}</li> + <li>{{domxref("Window.cancelAnimationFrame()")}}</li> + <li><a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li> + <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li> + <li><a href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li> + <li><a href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li> + <li><a href="http://www.testufo.com/#test=animation-time-graph" title="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li> + <li>Paul Irish: <a class="external external-icon" href="http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/" title="http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for Smart Animating</a></li> + <li>Paul Irish: <a class="external external-icon" href="http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision">requestAnimationFrame API: now with sub-millisecond precision</a></li> +</ul> diff --git a/files/pl/web/api/window/resizeby/index.html b/files/pl/web/api/window/resizeby/index.html new file mode 100644 index 0000000000..df817ea665 --- /dev/null +++ b/files/pl/web/api/window/resizeby/index.html @@ -0,0 +1,32 @@ +--- +title: window.resizeBy +slug: Web/API/Window/resizeBy +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/resizeBy +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zmienia rozmiar okna o pewną wartość.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">window.resizeBy(<i>xDelta</i>,<i>yDelta</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>xDelta</code> jest liczbą pikseli o jaką ma wzrosnąć okno w poziomie.</li> + <li><code>yDelta</code> jest liczbą pikseli o jaką ma wzrosnąć okno w pionie.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// Spowoduje zmniejszenie się okna +window.resizeBy(-200, -200); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Ta metoda zmienia rozmiar okna relatywnie do jego obecnego rozmiaru. Aby zmienić rozmiar okna bezwzględnie zastosuj <a href="pl/DOM/window.resizeTo">DOM:window.resizeTo</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM poziom 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.resizeBy", "ja": "ja/DOM/window.resizeBy" } ) }}</p> diff --git a/files/pl/web/api/window/resizeto/index.html b/files/pl/web/api/window/resizeto/index.html new file mode 100644 index 0000000000..532b561993 --- /dev/null +++ b/files/pl/web/api/window/resizeto/index.html @@ -0,0 +1,36 @@ +--- +title: window.resizeTo +slug: Web/API/Window/resizeTo +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/resizeTo +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Dynamicznie zmienia rozmiar okna.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">window.resizeTo(<i>iWidth</i>,<i>iHeight</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>iWidth</code> jest liczbą całkowitą reprezentującą nową szerokość wyrażoną w pikselach.</li> + <li><code>iHeight</code> jest liczbą całkowitą wartości reprezentującej nową wyskość w pikselach.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> // funkcja zmienia rozmiar okna do połowy aktualnie + // wyświetlanego ekranu + function halve() { + window.resizeTo(window.screen.availWidth/2, + window.screen.availHeight/2); + } +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zobacz także <a href="pl/DOM/window.resizeBy">DOM:window.resizeBy</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM poziom 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.resizeTo", "ja": "ja/DOM/window.resizeTo" } ) }}</p> diff --git a/files/pl/web/api/window/scroll/index.html b/files/pl/web/api/window/scroll/index.html new file mode 100644 index 0000000000..3aeacc5f9a --- /dev/null +++ b/files/pl/web/api/window/scroll/index.html @@ -0,0 +1,33 @@ +--- +title: window.scroll +slug: Web/API/Window/scroll +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/scroll +--- +<p> </p> +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Przesuwa się do danych koordynatów w dokumencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">window.scroll(<i>x-coord</i>,<i>y-coord</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>x-coord</code> jest pikselem wzdłuż poziomej osi dokumentu do wyświetlenia, w jego lewym górnym rogu.</li> + <li><code>y-coord</code> jest pikselem wzdłuż pionowej osi dokumentu do wyświetlenia, w jego lewym górnym rogu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> // przenieś 100-ny piksel poziomy na górę okna + <button onClick="scroll(0, 100);">kliknij, by przesunąć się o 100 pikseli w dół </button> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Powyższa funkcja jest tym co funkcja <code><a href="pl/DOM/window.scrollTo">window.scrollTo</a></code>. Dla przesuwu względnego zobacz <code><a href="pl/DOM/window.scrollBy">window.scrollBy</a>, <a href="pl/DOM/window.scrollByLines">window.scrollByLines</a></code> oraz <code><a href="pl/DOM/window.scrollByPages">window.scrollByPages</a></code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM poziom 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.scroll", "ja": "ja/DOM/window.scroll" } ) }}</p> diff --git a/files/pl/web/api/window/scrollbylines/index.html b/files/pl/web/api/window/scrollbylines/index.html new file mode 100644 index 0000000000..329171c9c7 --- /dev/null +++ b/files/pl/web/api/window/scrollbylines/index.html @@ -0,0 +1,35 @@ +--- +title: window.scrollByLines +slug: Web/API/Window/scrollByLines +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/scrollByLines +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Przewija dokument przez daną liczbę linii.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">window.scrollByLines(<i>lines</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>lines</code> jest liczbą linii do przewinięcia w dokumencie.</li> + <li><code>lines</code> może być liczbą całkowitą dodatnią lub ujemną.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">// przewija w dół o 5 linii w dokumencie. +<button onclick="scrollByLines(5);">down 5 lines</button> +</pre> +<pre class="eval">// przewija w górę o 5 linii w dokumencie. +<button onclick="scrollByLines(-5);">up 5 lines</button> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zobacz także <code><a href="pl/DOM/window.scrollBy">window.scrollBy</a>, <a href="pl/DOM/window.scrollByPages">window.scrollByPages</a></code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM poziom 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.scrollByLines", "ja": "ja/DOM/window.scrollByLines" } ) }}</p> diff --git a/files/pl/web/api/window/scrollbypages/index.html b/files/pl/web/api/window/scrollbypages/index.html new file mode 100644 index 0000000000..99548bf52c --- /dev/null +++ b/files/pl/web/api/window/scrollbypages/index.html @@ -0,0 +1,35 @@ +--- +title: window.scrollByPages +slug: Web/API/Window/scrollByPages +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/scrollByPages +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Przewija aktualny dokument przez określoną liczbę stron.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">window.scrollByPages(<i>pages</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>pages</code> jest liczbą stron do przewinięcia.</li> + <li><code>pages</code> może być wartością dodatnią lub ujemną liczby całkowitej.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// przewija w dół dokument o 1 stronę +window.scrollByPages(1); + +// przewija w górę dokument o 1 stronę +window.scrollByPages(-1); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zobacz także <code><a href="pl/DOM/window.scrollBy">window.scrollBy</a>, <a href="pl/DOM/window.scrollByLines">window.scrollByLines</a>, <a href="pl/DOM/window.scroll">window.scroll</a>, <a href="pl/DOM/window.scrollTo">window.scrollTo</a></code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.scrollByPages", "ja": "ja/DOM/window.scrollByPages" } ) }}</p> diff --git a/files/pl/web/api/window/scrollto/index.html b/files/pl/web/api/window/scrollto/index.html new file mode 100644 index 0000000000..6bdb2154a7 --- /dev/null +++ b/files/pl/web/api/window/scrollto/index.html @@ -0,0 +1,32 @@ +--- +title: window.scrollTo +slug: Web/API/Window/scrollTo +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/scrollTo +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Przesuwa się do danych koordynatów w dokumencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">window.scrollTo(<i>x-coord</i>,<i>y-coord</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>x-coord</code> jest pikselem wzdłuż poziomej osi dokumentu do wyświetlenia, w jego lewym górnym rogu.</li> + <li><code>y-coord</code> jest pikselem wzdłuż pionowej osi dokumentu do wyświetlenia, w jego lewym górnym rogu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>window.scrollTo(0, 1000); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Powyższa funkcja jest tym co funkcja <a href="pl/DOM/window.scroll">window.scroll</a>. Dla przesuwu względnego zobacz <a href="pl/DOM/window.scrollBy">window.scrollBy</a>, <a href="pl/DOM/window.scrollByLines">window.scrollByLines</a> oraz <a href="pl/DOM/window.scrollByPages">window.scrollByPages</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM poziom 0. Nie jest częścią specyfikacji.</p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.scrollTo", "fr": "fr/DOM/window.scrollTo", "ja": "ja/DOM/window.scrollTo" } ) }}</p> diff --git a/files/pl/web/api/window/setinterval/index.html b/files/pl/web/api/window/setinterval/index.html new file mode 100644 index 0000000000..5cbfadde80 --- /dev/null +++ b/files/pl/web/api/window/setinterval/index.html @@ -0,0 +1,87 @@ +--- +title: window.setInterval +slug: Web/API/Window/setInterval +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Ustawia opóźnienie do cyklicznego wywoływania określonej funkcji.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>var idInterwalu</em> = window.setInterval(<em>funkcja</em>, <em>opóźnienie</em>[, <em>parametr1</em>, <em>parametr2</em>, ...]); +<em>var idInterwalu</em> = window.setInterval(<em>kod</em>, <em>opóźnienie</em>);</pre> + +<p> Parametry</p> + +<ul> + <li><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">idInterwalu</code> to identyfikator ustawianego interwału który można przekazać do funkcji <code><a href="/pl/DOM/window.clearInterval" title="pl/DOM/window.clearInterval">window.clearInterval()</a></code>.</li> + <li><code>funkcja</code> to funkcja, dla której ustawiane jest opóźnienie</li> + <li><code>kod </code>to ciąg znaków zawierający kod javascript do cyklicznego wykonania. Jest to składnia alternatywna, której wykorzystanie <strong>nie jest zalecane</strong> z tych samych powodów, co stosowanie <code><a href="/en/JavaScript/Reference/Global_Objects/eval#Don%27t_use_eval!" title="en/JavaScript/Reference/Global Objects/eval#Don't use eval!">eval()</a></code>.</li> + <li><code>opóźnienie</code> to liczba milisekund (tysięcznych części sekundy), co którą wywoływana będzie <code>funkcja </code>lub <code>kod</code></li> +</ul> + +<p>Należy zwrócić uwagę, że przekazywanie dodatkowych parametrów w pierwszej składni nie działa w Internet Explorerze.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="brush: js">idInterwalu = window.setInterval(animuj, 500); +</pre> + +<p> W poniższym przykładzie, funkcja <code>zmienKolorTekstu()</code> będzie wykonywana co sekundę, dopóki użytkownik nie naciśnie przycisku Stop, co spowoduje wywołanie <code>clearInterval() </code>z parametrem <code>idInterwalu</code>.</p> + +<pre class="brush: js" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(246, 246, 242); font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><html> +<head> +<title>przykład z wykorzystaniem setInterval/clearInterval</title> + +<script type="text/javascript"> +var idInterwalu; + +function zmienKolor() { + idInterwalu = setInterval(zmienKolorTekstu, 1000); +} + +function zmienKolorTekstu() { + var elem = document.getElementById("my_box"); + if (elem.style.color == 'red') { + elem.style.color = 'blue'; + } else { + elem.style.color = 'red'; + } +} + +function zatrzymajZmianeKoloru() { + clearInterval(idInterwalu); +} +</script> +</head> + +<body onload="zmienKolor();"> +<div id="my_box"> +<p>Hello World</p> +</div> +<button onclick="zatrzymajZmianeKoloru();">Stop</button> +</body> +</html></pre> + +<h3 id="Uwagi">Uwagi</h3> + +<p>Funkcja setInterval() służy do ustawienia opóźnienia dla cyklicznie wywoływanych funkcji, takich jak funkcje animacji.</p> + +<p>Możliwe jest anulowanie wykonania fukcji poprzez wywołanie <code><a href="/pl/DOM/window.clearInterval" title="pl/DOM/window.clearInterval">window.clearInterval()</a></code>.</p> + +<p>Jeżeli funkcja ma zostać wykonana <em>tylko raz</em> a nie być wykonywana cyklicznie to należy skorzystać z <code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;"><a href="/pl/DOM/window.setTimeout" title="pl/DOM/window.setTimeout">window.setTimeout()</a></code>.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>{{ DOM0() }}</p> + +<p>{{ languages( { "en": "en/DOM/window.setInterval", "fr": "fr/DOM/window.setInterval", "ja": "ja/DOM/window.setInterval", "pl": "pl/DOM/window.setInterval" } ) }}</p> diff --git a/files/pl/web/api/window/settimeout/index.html b/files/pl/web/api/window/settimeout/index.html new file mode 100644 index 0000000000..926080dd5b --- /dev/null +++ b/files/pl/web/api/window/settimeout/index.html @@ -0,0 +1,46 @@ +--- +title: window.setTimeout +slug: Web/API/Window/setTimeout +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Uruchamia fragment kodu bądź funkcję po określonym odstępie czasu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><em>id</em> = window.setTimeout(<em>funkcja</em>, <em>opóźnienie</em>[, <em>param1</em>, <em>param2</em>, ...]); +<em>id</em> = window.setTimeout(<em>kod</em>, <em>opóźnienie</em>); +</pre> +<p>gdzie</p> +<ul> + <li><code>funkcja</code> to <a href="/pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Function" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Function">funkcja</a>, jaką chcesz uruchomić po opóźnieniu + <ul> + <li>w alternatywnej składni, <code>kod</code> to ciąg znaków z kodem, który będzie wykonany po upływie podanego czasu</li> + </ul> + </li> + <li><code>opóźnienie</code> to liczba milisekund (tysięcznych części sekundy), po których upływie wykonana zostanie funkcja</li> + <li><code>id</code> to identyfikator, którego można użyć z <a href="/pl/DOM/window.clearTimeout" title="pl/DOM/window.clearTimeout">window.clearTimeout</a></li> +</ul> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval">window.setTimeout('window.parent.generateOutput()', 1000); +</pre> +<pre class="eval">function generateOutput(aConcise) { + if(aConcise) + parent.generateConciseOutput(); + else + parent.generateOutput(); +} +window.setTimeout(generateOutput, 1000, true); +</pre> +<p>Zobacz też <a href="/pl/DOM/window.clearTimeout#Example" title="pl/DOM/window.clearTimeout#Example">przykład użycia clearTimeout()</a>.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Możesz anulować opóźnienie wywołania funkcji za pomocą <a href="/pl/DOM/window.clearTimeout" title="pl/DOM/window.clearTimeout">window.clearTimeout()</a>.</p> +<p>Jeśli chcesz, by funkcja była uruchamiana cyklicznie (np. co każde N milisekund), rozważ wykorzystanie <a href="/pl/DOM/window.setInterval" title="pl/DOM/window.setInterval">window.setInterval()</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<p>{{ languages( { "en": "en/DOM/window.setTimeout", "fr": "fr/DOM/window.setTimeout", "ja": "ja/DOM/window.setTimeout", "pl": "pl/DOM/window.setTimeout" } ) }}</p> diff --git a/files/pl/web/api/window/sidebar/index.html b/files/pl/web/api/window/sidebar/index.html new file mode 100644 index 0000000000..280b5dcce3 --- /dev/null +++ b/files/pl/web/api/window/sidebar/index.html @@ -0,0 +1,56 @@ +--- +title: Window.sidebar +slug: Web/API/Window/sidebar +tags: + - DOM + - NeedsTranslation + - Non-standard + - Property + - Reference + - TopicStub + - Window +translation_of: Web/API/Window/sidebar +--- +<div>{{APIRef}} {{Non-standard_header}}</div> + +<p>Returns a sidebar object, which contains several methods for registering add-ons with the browser.</p> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>The sidebar object returned has the following methods:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Method</th> + <th>Description (SeaMonkey)</th> + <th>Description (Firefox)</th> + </tr> + <tr> + <td><code>addPanel(<var>title</var>, <var>contentURL</var>, "")</code></td> + <td>Adds a sidebar panel.</td> + <td rowspan="2">Obsolete since Firefox 23 (only present in SeaMonkey).<br> + End users can use the "load this bookmark in the sidebar" option instead. Also see <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Creating_a_Firefox_sidebar">Creating a Firefox sidebar.</a></td> + </tr> + <tr> + <td><code>addPersistentPanel(<var>title</var>, <var>contentURL</var>, "")</code></td> + <td>Adds a sidebar panel, which is able to work in the background.</td> + </tr> + <tr> + <td><code>AddSearchProvider(<em>descriptionURL)</em></code></td> + <td colspan="2">Installs a search provider (OpenSearch). <a href="/en-US/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages#Installing_OpenSearch_plugins" title="Adding_search_engines_from_web_pages">Adding OpenSearch search engines </a>contains more details. Added in Firefox 2.</td> + </tr> + <tr> + <td><code>addSearchEngine(<var>engineURL</var>, <var>iconURL</var>, <var>suggestedTitle</var>, <var>suggestedCategory</var>)</code> {{Obsolete_inline(44)}}</td> + <td colspan="2">Installs a search engine (Sherlock). <a href="/en-US/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages#Installing_Sherlock_plugins" title="Adding_search_engines_from_web_pages">Adding Sherlock search engines </a>contains more details.</td> + </tr> + <tr> + <td><code>IsSearchProviderInstalled(<em>descriptionURL)</em></code></td> + <td colspan="2">Indicates if a specific search provider (OpenSearch) is installed.</td> + </tr> + </tbody> +</table> + +<h2 id="Specification" name="Specification">Specification</h2> + +<p>Mozilla-specific. Not part of any standard.</p> diff --git a/files/pl/web/api/windowbase64/atob/index.html b/files/pl/web/api/windowbase64/atob/index.html new file mode 100644 index 0000000000..cd36201a6c --- /dev/null +++ b/files/pl/web/api/windowbase64/atob/index.html @@ -0,0 +1,104 @@ +--- +title: WindowBase64.atob() +slug: Web/API/WindowBase64/atob +tags: + - API + - Base-64 + - Base64 + - Method + - Metodă + - Reference + - Referencja + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope/atob +--- +<p>{{APIRef}}</p> +<p>Funkcja <strong><code>WindowBase64.atob()</code></strong> dekoduje ciąg danych, który został zakodowany używając kodowania base-64. Możesz użyć metody <a href="/pl/docs/Web/API/WindowBase64.btoa"><code>window.btoa()</code></a> aby zakodować i przesłać dane, które w innym wypadku mogą powodować problemy z komunikacją, a następnie odebrać je i użyć metody <code>window.atob()</code> aby zdekodować dane ponownie. Na przykład możesz zakodować, przesłać i zdekodować znaki kontrolne ASCII o wartościach od 0 do 31.</p> +<p>Aby używać tej funkcji z ciągami Unicode albo UTF-8, zobacz <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#The_.22Unicode_Problem.22">tę uwagę w Kodowaniu i dekodowaniu Base64</a> i <a href="/pl/docs/Web/API/WindowBase64.btoa#Ci.C4.85gi_Unicode">tę uwagę w <code>window.btoa()</code></a>.</p> +<h2 id="Syntax" name="Syntax">Składnia</h2> +<pre class="syntaxbox">var odkodowaneDane = window.atob(<em>zakodowaneDane</em>);</pre> +<h2 id="Example" name="Example">Przykład</h2> +<pre class="brush:js">var zakodowaneDane = window.btoa("Hello, world"); // kodowanie ciągu +var odkodowaneDane = window.atob(zakodowaneDane); // odkodowywanie ciągu</pre> +<h2 id="Specyfikacje">Specyfikacje</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Bez zmian od ostatniej migawki, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Migawka {{SpecName("HTML WHATWG")}}. Bez zmian.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Migawka {{SpecName("HTML WHATWG")}}. Utworzenie <code>WindowBase64</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> +<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność przeglądarek</h2> +<div> + {{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Funkcja</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Podstawowa obsługa</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1)}}[1][2]</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>Funkcja</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Podstawowa obsługa</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> jest także dostępna dla komponentów XPCOM zaimplementowanych w JavaScript, nawet jeżeli <code><a href="https://developer.mozilla.org/pl/docs/DOM/window" lang="pl">window</a></code> nie jest globalnym obiektem w komponencie<code>.</code></p> +<p>[2] Wraz z <a href="/pl/Firefox/Releases/27/Site_Compatibility">Firefoxem 27</a>, metoda <code>atob()</code> ignoruje wszystkie spacje w argumencie dla zgodności z najnowszą specyfikacją HTML5. ({{ bug(711180) }})</p> +<h2 id="See_also" name="See_also">Zobacz też</h2> +<ul> + <li><a href="https://developer.mozilla.org/Web/API/WindowBase64/Base64_encoding_and_decoding">Kodowanie i dekodowanie Base64</a></li> + <li><a href="/pl/docs/data_URIs"><code>data</code> URIs</a></li> + <li><a href="/pl/docs/Web/API/WindowBase64.btoa"><code>window.btoa()</code></a></li> +</ul> diff --git a/files/pl/web/api/windowbase64/btoa/index.html b/files/pl/web/api/windowbase64/btoa/index.html new file mode 100644 index 0000000000..cf3e90c26d --- /dev/null +++ b/files/pl/web/api/windowbase64/btoa/index.html @@ -0,0 +1,126 @@ +--- +title: WindowBase64.btoa() +slug: Web/API/WindowBase64/btoa +tags: + - API + - Base-64 + - Base64 + - Method + - Reference + - Referencja + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope/btoa +--- +<p>{{APIRef}}</p> +<p>Tworzy string ASCII zakodowany w base-64 z ciągu ("string") danych binarnych.</p> +<p>Metoda ta jednak nie nadaje się do konwertowania surowych ciągów <a href="http://www.unicode.org/standard/WhatIsUnicode.html">Unicode</a>! Zobacz sekcję Unicode poniżej.</p> +<h2 id="Syntax" name="Syntax">Składnia</h2> +<pre class="syntaxbox">var zakodowaneDane = window.btoa(<em>ciagDoZakodowania</em>);</pre> +<h2 id="Example" name="Example">Przykład</h2> +<pre class="brush:js">var zakodowaneDane = window.btoa("Hello, world"); // kodowanie ciągu +var odkodowaneDane = window.atob(zakodowaneDane); // odkodowywanie ciągu ("Hello, world") +</pre> +<h2 id="Notes" name="Notes">Uwagi</h2> +<p>Możesz używać tej metody do kodowania danych, które w innym wypadku mogą powodować problemy z komunikacją. Przekaż je, a następnie użyj metody <code><a href="/pl/docs/Web/API/WindowBase64.atob" title="DOM/window.atob">window.atob()</a></code> aby odkodować dane ponownie. Na przykład możesz zakodować znaki kontrolne takie jak ASCII o wartości od 0 do 31.</p> +<p><code>btoa()</code> jest także dostępne dla komponentów XPCOM zaimplementowanych w JavaScript, nawet jeżeli <a href="/pl/docs/DOM/window" title="DOM/window"><code>window</code></a> nie jest globalnym obiektem w komponencie.</p> +<h2 id="Ciągi_Unicode">Ciągi Unicode</h2> +<p>W większości przeglądarek odwołanie się do <code>window.btoa()</code> z ciągiem Unicode spowoduje wystąpienie wyjątku <code>Character Out Of Range</code>.</p> +<p>Aby tego uniknąć, rozważ ten model odnotowany przez <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">Johana Sundströma</a>:</p> +<pre class="brush:js">function utf8_to_b64( str ) { + return window.btoa(encodeURIComponent( escape( str ))); +} + +function b64_to_utf8( str ) { + return unescape(decodeURIComponent(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>Lepszym, bardziej wiarygodnym i mniej wymagającym rozwiązaniem jest konwersja <code><a href="/pl/docs/Web/API/DOMString">DOMString</a></code> do ciągu zakodowanego w UTF-8 używając <a href="/pl/docs/Web/JavaScript/Typed_arrays">TypedArray</a>. W tym celu proszę zapoznać się z <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">tym akapitem</a>.</p> +<h2 id="Browser_compatibility" name="Browser_compatibility">Specyfikacje</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Brak zmian od ostatniej migawki, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Migawka {{SpecName("HTML WHATWG")}}. Bez zmian.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Migawka {{SpecName("HTML WHATWG")}}. Utworzenie <code>WindowBase64</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> +<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność przeglądarek</h2> +<div> + {{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Funkcja</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Podstawowa obsługa</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>Funkcja</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Podstawowa obsługa</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> jest także dostępna dla komponentów XPCOM zaimplementowanych w JavaScript, nawet jeżeli <code><a href="/pl/docs/DOM/window" lang="pl">window</a></code> nie jest globalnym obiektem w komponencie<code>.</code></p> +<h2 id="See_also" name="See_also">Zobacz też</h2> +<ul> + <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Kodowanie i dekodowanie Base64</a></li> + <li><a href="/pl/docs/data_URIs"><code>data</code> URIs</a></li> + <li><a href="/pl/docs/Web/API/WindowBase64.atob"><code>window.atob()</code></a></li> +</ul> diff --git a/files/pl/web/api/windowbase64/index.html b/files/pl/web/api/windowbase64/index.html new file mode 100644 index 0000000000..2d13e49406 --- /dev/null +++ b/files/pl/web/api/windowbase64/index.html @@ -0,0 +1,113 @@ +--- +title: WindowBase64 +slug: Web/API/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/pl/web/api/zdarzenia_dotykowe/index.html b/files/pl/web/api/zdarzenia_dotykowe/index.html new file mode 100644 index 0000000000..4d49e9b5b5 --- /dev/null +++ b/files/pl/web/api/zdarzenia_dotykowe/index.html @@ -0,0 +1,336 @@ +--- +title: Zdarzenia dotykowe +slug: Web/API/Zdarzenia_dotykowe +translation_of: Web/API/Touch_events +--- +<div>{{DefaultAPISidebar("Touch Events")}}</div> + +<p>W celu zapewnienia wsparcia dla dotykowych interfejsów użytkownika, zdarzenia dotykowe oferują możliwość interpretowania aktywności palca (lub rysika) na ekranach i gładzikach.</p> + +<p>Interfejsy zdarzeń dotykowych to stounkowo niskopoziomowe API, które mogą być użyte do specyficznych dla aplikacji wielodotykowych interakcji takich jak gesty wykonywane dwoma palcami. Interakcja wielodotykowa zaczyna się, kiedy palec (lub rysik) dotyka powierzchni ekranu lub gładzika. Pozostałe palce mogą dotknąć powierzhni później i, opcjonalnie, poruszać się po powierzchni dotykowej. Interakcja kończy się, gdy palce są zabrane z powierzchni ekranu lub gładzika. W czasie trwania interakcji, aplikacja odbiera zdarzenia dotykowe podczas faz startu, ruchu i zakończenia tejże interakcji.</p> + +<p>Zdarzenia dotykowe są podobne do zdarzeń myszki, z tą różnicą, że pozwalają na jednoczesne dotknięcia w różnych miejscach na ekranie. Interfejs {{domxref("TouchEvent")}} hermetyzuje wszystkie punkty dotyku aktywne w danym momencie. Interfejs {{domxref("Touch")}}, który reprezentuje pojedynczy punkt dotyku, zawiera informacje takie jak pozycja punktu dotyku w stosunku do widoku okna przeglądarki.</p> + +<h2 id="Definicje">Definicje</h2> + +<dl> + <dt>Powierzchnia</dt> + <dd>Powierzchnia dotykowa. Może to być ekran lub gładzik.</dd> +</dl> + +<dl> + <dt>Punkt dotyku</dt> + <dd>Punkt kontaktu z powierzchnią. Może to być palec (lub łokieć, ucho, nos, cokolwiek, ale najczęściej jednak palec) lub rysik.</dd> +</dl> + +<h2 id="Interfejsy">Interfejsy</h2> + +<dl> + <dt>{{domxref("TouchEvent")}}</dt> + <dd>Reprezentuje zdarzenie, które zachodzi, gdy stan dotknięć powierzchni się zmienia.</dd> + <dt>{{domxref("Touch")}}</dt> + <dd>Reprezentuje pojedynczy punkt kontaktu między użytkownikiem a powierzchnią dotykową.</dd> + <dt>{{domxref("TouchList")}}</dt> + <dd>Reprezentuje grupę dotknięć; jest używany, gdy na przykład użytkownik dotyka powierzchni wieloma palcami jednocześnie.</dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<p>Poniższy przykład śledzi wiele dotknięć w jednym czasie, pozwalając użytkownikowi na rysowanie w elemencie {{HTMLElement("canvas")}} przy użyciu więcej niż jednego palca jednocześnie. Kod ten będzie działać jedynie w przeglądarkach wspierających zdarzenia dotykowe.</p> + +<div class="note"><strong>Uwaga:</strong> W niniejszym tekście słowo „palec” używane jest do opisania kontaktu z powierzchnią dotykową, ale może to być oczywiście także rysik lub dowolna inna metoda dotykania ekranu.</div> + +<h3 id="Stwórz_kanwę">Stwórz kanwę</h3> + +<pre class="brush: html"><canvas id="canvas" width="600" height="600" style="border:solid black 1px;"> + Twoja przeglądarka nie wspiera elementu kanwa (canvas). +</canvas> +<br> +<button onclick="startup()">Initialize</button> +<br> +Log: <pre id="log" style="border: 1px solid #ccc;"></pre> +</pre> + +<h3 id="Ustawianie_funkcji_do_obsługi_zdarzeń">Ustawianie funkcji do obsługi zdarzeń</h3> + +<p>Kiedy strona się ładuje, pokazana niżej funkcja <code>startup()</code> powinna być wywołana przez atrybut <code>onload</code> naszego elementu {{HTMLElement("body")}} (choć w przykładzie używamy przycisku do jej uruchomienia, ze względu na ograniczenia systemu przykłądów w MDN).</p> + +<pre class="brush: js">function startup() { + var el = document.getElementsByTagName("canvas")[0]; + el.addEventListener("touchstart", handleStart, false); + el.addEventListener("touchend", handleEnd, false); + el.addEventListener("touchcancel", handleCancel, false); + el.addEventListener("touchmove", handleMove, false); + console.log("initialized."); +} +</pre> + +<p>Funkcja ta po prostu ustawia nasłluchiwanie zdarzeń dla naszego elementu {{HTMLElement("canvas")}}, tak że możemy obsłużyć zdarzenia dotykowe, kiedy się pojawią.</p> + +<h4 id="Śledzenie_nowych_zdarzeń">Śledzenie nowych zdarzeń</h4> + +<p>We'll keep track of the touches in-progress.</p> + +<pre class="brush: js">var ongoingTouches = []; +</pre> + +<p>When a {{event("touchstart")}} event occurs, indicating that a new touch on the surface has occurred, the <code>handleStart()</code> function below is called.</p> + +<pre class="brush: js">function handleStart(evt) { + evt.preventDefault(); + console.log("touchstart."); + var el = document.getElementsByTagName("canvas")[0]; + var ctx = el.getContext("2d"); + var touches = evt.changedTouches; + + for (var i = 0; i < touches.length; i++) { + console.log("touchstart:" + i + "..."); + ongoingTouches.push(copyTouch(touches[i])); + var color = colorForTouch(touches[i]); + ctx.beginPath(); + ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false); // a circle at the start + ctx.fillStyle = color; + ctx.fill(); + console.log("touchstart:" + i + "."); + } +} +</pre> + +<p>This calls {{domxref("event.preventDefault()")}} to keep the browser from continuing to process the touch event (this also prevents a mouse event from also being delivered). Then we get the context and pull the list of changed touch points out of the event's {{domxref("TouchEvent.changedTouches")}} property.</p> + +<p>After that, we iterate over all the {{domxref("Touch")}} objects in the list, pushing them onto an array of active touch points and drawing the start point for the draw as a small circle; we're using a 4-pixel wide line, so a 4 pixel radius circle will show up neatly.</p> + +<h4 id="Drawing_as_the_touches_move">Drawing as the touches move</h4> + +<p>Each time one or more fingers moves, a {{event("touchmove")}} event is delivered, resulting in our <code>handleMove()</code> function being called. Its responsibility in this example is to update the cached touch information and to draw a line from the previous position to the current position of each touch.</p> + +<pre class="brush: js">function handleMove(evt) { + evt.preventDefault(); + var el = document.getElementsByTagName("canvas")[0]; + var ctx = el.getContext("2d"); + var touches = evt.changedTouches; + + for (var i = 0; i < touches.length; i++) { + var color = colorForTouch(touches[i]); + var idx = ongoingTouchIndexById(touches[i].identifier); + + if (idx >= 0) { + console.log("continuing touch "+idx); + ctx.beginPath(); + console.log("ctx.moveTo(" + ongoingTouches[idx].pageX + ", " + ongoingTouches[idx].pageY + ");"); + ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY); + console.log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");"); + ctx.lineTo(touches[i].pageX, touches[i].pageY); + ctx.lineWidth = 4; + ctx.strokeStyle = color; + ctx.stroke(); + + ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // swap in the new touch record + console.log("."); + } else { + console.log("can't figure out which touch to continue"); + } + } +} +</pre> + +<p>This iterates over the changed touches as well, but it looks in our cached touch information array for the previous information about each touch in order to determine the starting point for each touch's new line segment to be drawn. This is done by looking at each touch's {{domxref("Touch.identifier")}} property. This property is a unique integer for each touch, and remains consistent for each event during the duration of each finger's contact with the surface.</p> + +<p>This lets us get the coordinates of the previous position of each touch and use the appropriate context methods to draw a line segment joining the two positions together.</p> + +<p>After drawing the line, we call <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.splice()</code></a> to replace the previous information about the touch point with the current information in the <code>ongoingTouches</code> array.</p> + +<h4 id="Handling_the_end_of_a_touch">Handling the end of a touch</h4> + +<p>When the user lifts a finger off the surface, a {{event("touchend")}} event is sent. We handle this by calling the <code>handleEnd()</code> function below. Its job is to draw the last line segment for each touch that ended and remove the touch point from the ongoing touch list.</p> + +<pre class="brush: js">function handleEnd(evt) { + evt.preventDefault(); + log("touchend"); + var el = document.getElementsByTagName("canvas")[0]; + var ctx = el.getContext("2d"); + var touches = evt.changedTouches; + + for (var i = 0; i < touches.length; i++) { + var color = colorForTouch(touches[i]); + var idx = ongoingTouchIndexById(touches[i].identifier); + + if (idx >= 0) { + ctx.lineWidth = 4; + ctx.fillStyle = color; + ctx.beginPath(); + ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY); + ctx.lineTo(touches[i].pageX, touches[i].pageY); + ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8); // and a square at the end + ongoingTouches.splice(idx, 1); // remove it; we're done + } else { + console.log("can't figure out which touch to end"); + } + } +} +</pre> + +<p>This is very similar to the previous function; the only real differences are that we draw a small square to mark the end and that when we call <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.splice()</code></a>, we simply remove the old entry from the ongoing touch list, without adding in the updated information. The result is that we stop tracking that touch point.</p> + +<h4 id="Handling_canceled_touches">Handling canceled touches</h4> + +<p>If the user's finger wanders into browser UI, or the touch otherwise needs to be canceled, the {{event("touchcancel")}} event is sent, and we call the <code>handleCancel()</code> function below.</p> + +<pre class="brush: js">function handleCancel(evt) { + evt.preventDefault(); + console.log("touchcancel."); + var touches = evt.changedTouches; + + for (var i = 0; i < touches.length; i++) { + var idx = ongoingTouchIndexById(touches[i].identifier); + ongoingTouches.splice(idx, 1); // remove it; we're done + } +} +</pre> + +<p>Since the idea is to immediately abort the touch, we simply remove it from the ongoing touch list without drawing a final line segment.</p> + +<h3 id="Convenience_functions">Convenience functions</h3> + +<p>This example uses two convenience functions that should be looked at briefly to help make the rest of the code more clear.</p> + +<h4 id="Selecting_a_color_for_each_touch">Selecting a color for each touch</h4> + +<p>In order to make each touch's drawing look different, the <code>colorForTouch()</code> function is used to pick a color based on the touch's unique identifier. This identifier is an opaque number, but we can at least rely on it differing between the currently-active touches.</p> + +<pre class="brush: js">function colorForTouch(touch) { + var r = touch.identifier % 16; + var g = Math.floor(touch.identifier / 3) % 16; + var b = Math.floor(touch.identifier / 7) % 16; + r = r.toString(16); // make it a hex digit + g = g.toString(16); // make it a hex digit + b = b.toString(16); // make it a hex digit + var color = "#" + r + g + b; + console.log("color for touch with identifier " + touch.identifier + " = " + color); + return color; +} +</pre> + +<p>The result from this function is a string that can be used when calling {{HTMLElement("canvas")}} functions to set drawing colors. For example, for a {{domxref("Touch.identifier")}} value of 10, the resulting string is "#a31".</p> + +<h4 id="Copying_a_touch_object">Copying a touch object</h4> + +<p>Some browsers (mobile Safari, for one) re-use touch objects between events, so it's best to copy the bits you care about, rather than referencing the entire object.</p> + +<pre class="brush: js">function copyTouch(touch) { + return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY }; +}</pre> + +<h4 id="Finding_an_ongoing_touch">Finding an ongoing touch</h4> + +<p>The <code>ongoingTouchIndexById()</code> function below scans through the <code>ongoingTouches</code> array to find the touch matching the given identifier, then returns that touch's index into the array.</p> + +<pre class="brush: js">function ongoingTouchIndexById(idToFind) { + for (var i = 0; i < ongoingTouches.length; i++) { + var id = ongoingTouches[i].identifier; + + if (id == idToFind) { + return i; + } + } + return -1; // not found +} +</pre> + +<h4 id="Showing_whats_going_on">Showing what's going on</h4> + +<pre class="brush: js">function log(msg) { + var p = document.getElementById('log'); + p.innerHTML = msg + "\n" + p.innerHTML; +}</pre> + +<p>If your browser supports it, you can {{LiveSampleLink('Example', 'see it live')}}.</p> + +<p><a href="http://jsfiddle.net/Darbicus/z3Xdx/10/">jsFiddle example</a></p> + +<h2 id="Dodatkowe_wskazówki">Dodatkowe wskazówki</h2> + +<p>This section provides additional tips on how to handle touch events in your web application.</p> + +<h3 id="Obsługa_kliknięć">Obsługa kliknięć</h3> + +<p>Since calling <code>preventDefault()</code> on a {{event("touchstart")}} or the first {{event("touchmove")}} event of a series prevents the corresponding mouse events from firing, it's common to call <code>preventDefault()</code> on {{event("touchmove")}} rather than {{event("touchstart")}}. That way, mouse events can still fire and things like links will continue to work. Alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose. (This example is oversimplified and may result in strange behavior. It is only intended as a guide.)</p> + +<pre class="brush: js">function onTouch(evt) { + evt.preventDefault(); + if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0)) + return; + + var newEvt = document.createEvent("MouseEvents"); + var type = null; + var touch = null; + + switch (evt.type) { + case "touchstart": + type = "mousedown"; + touch = evt.changedTouches[0]; + break; + case "touchmove": + type = "mousemove"; + touch = evt.changedTouches[0]; + break; + case "touchend": + type = "mouseup"; + touch = evt.changedTouches[0]; + break; + } + + newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0, + touch.screenX, touch.screenY, touch.clientX, touch.clientY, + evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, 0, null); + evt.originalTarget.dispatchEvent(newEvt); +} +</pre> + +<h3 id="Calling_preventDefault_only_on_a_second_touch">Calling preventDefault() only on a second touch</h3> + +<p>One technique for preventing things like <code>pinchZoom</code> on a page is to call <code>preventDefault()</code> on the second touch in a series. This behavior is not well defined in the touch events spec, and results in different behavior for different browsers (i.e., iOS will prevent zooming but still allow panning with both fingers; Android will allow zooming but not panning; Opera and Firefox currently prevent all panning and zooming.) Currently, it's not recommended to depend on any particular behavior in this case, but rather to depend on meta viewport to prevent zooming.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('Touch Events 2', '#touch-interface', 'Touch')}}</td> + <td>{{Spec2('Touch Events 2')}}</td> + <td>Added <code>radiusX</code>, <code>radiusY</code>, <code>rotationAngle</code>, <code>force</code> properties</td> + </tr> + <tr> + <td>{{SpecName('Touch Events', '#touch-interface', 'Touch')}}</td> + <td>{{Spec2('Touch Events')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<h3 id="Touch"><code>Touch</code></h3> + +<p>Touch events are typically available on devices with a touch screen, but many browsers make the touch events API unavailable on all desktop devices, even those with touch screens.</p> + +<p>The reason for this is that some websites use the availability of parts of the touch events API as an indicator that the browser is running on a mobile device. If the touch events API is available, these websites will assume a mobile device and serve mobile-optimised content. This may then provide a poor experience for users of desktop devices that have touch screens.</p> + +<p>To support both touch and mouse across all types of device, use <a href="/en-US/docs/Web/API/Pointer_events">pointer events</a> instead.</p> + + + +<p>{{Compat("api.Touch")}}</p> + +<h3 id="Firefox_touch_events_and_multiprocess_e10s">Firefox, touch events, and multiprocess (e10s)</h3> + +<p>In Firefox, touch events are disabled when e10s (electrolysis; <a href="/en-US/docs/Mozilla/Firefox/Multiprocess_Firefox">multiprocess Firefox</a>) is disabled. e10s is on by default in Firefox, but can end up becoming disabled in certain situations, for example when certain accessibility tools or Firefox add-ons are installed that require e10s to be disabled to work. This means that even on a touchscreen-enabled desktop/laptop, touch events won't be enabled.</p> + +<p>You can test whether e10s is disabled by going to <code>about:support</code> and looking at the "Multiprocess Windows" entry in the "Application Basics" section. 1/1 means it is enabled, 0/1 means disabled.</p> + +<p>If you want to force e10s to be on — to explicitly re-enable touch events support — you need to go to <code>about:config</code> and create a new Boolean preference <code>browser.tabs.remote.force-enable</code>. Set it to <code>true</code>, restart the browser, and e10s will be enabled regardless of any other settings.</p> |