diff options
Diffstat (limited to 'files/pl/web')
43 files changed, 0 insertions, 8704 deletions
diff --git a/files/pl/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/pl/web/accessibility/keyboard-navigable_javascript_widgets/index.html deleted file mode 100644 index 3d015d8519..0000000000 --- a/files/pl/web/accessibility/keyboard-navigable_javascript_widgets/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: Keyboard-navigable JavaScript widgets -slug: Web/Accessibility/Keyboard-navigable_JavaScript_widgets -tags: - - Accessibility - - DOM - - Navigation -translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets -original_slug: Web/Dostępność/Keyboard-navigable_JavaScript_widgets ---- -<h3 id="Overview">Overview</h3> - -<p>Web applications often use JavaScript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels. These widgets are typically composed of {{ HTMLElement("div") }} and {{ HTMLElement("span") }} elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do. This document describes techniques to make JavaScript widgets accessible with the keyboard.</p> - -<h3 id="Using_tabindex">Using tabindex</h3> - -<p>By default, when people use the tab key to browse a webpage, only interactive elements (like links, form controls) get focused. With the <code>tabindex</code> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a>, authors can make other elements focusable, too. When set to <code>0</code>, the element becomes focusable by keyboard and script. When set to <code>-1</code>, the element becomes focusable by script, but it does not become part of the keyboard focus order.</p> - -<p>The order in which elements gain focus when using a keyboard, is the source order by default. In exceptional circumstances, authors may want to redefine the order. To do this, authors can set <code>tabindex</code> to any positive number.</p> - -<div class="warning"> -<p><strong>Warning:</strong> avoid using positive values for <code>tabindex</code>. Elements with a positive <code>tabindex</code> are put before the default interactive elements on the page, which means page authors will have to set (and maintain) <code>tabindex</code> values for all focusable elements on the page whenever they use one or more positive values for <code>tabindex</code>.</p> -</div> - -<p>The following table describes <code>tabindex</code> behavior in modern browsers:</p> - -<table class="fullwidth-table" style="width: 75% !important;"> - <tbody> - <tr> - <th><code>tabindex</code> attribute</th> - <th>Focusable with mouse or JavaScript via <code>element.focus()</code></th> - <th>Tab navigable</th> - </tr> - <tr> - <td>not present</td> - <td>Follows the platform convention of the element (yes for form controls, links, etc.).</td> - <td>Follows the platform convention of the element.</td> - </tr> - <tr> - <td>Negative (i.e. <code>tabindex="-1"</code>)</td> - <td>Yes</td> - <td>No; author must focus the element with <code><a class="external text" href="../../../../En/DOM/Element.focus" rel="nofollow" title="https://developer.mozilla.org/En/DOM/Element.focus">focus()</a></code> in response to arrow or other key presses.</td> - </tr> - <tr> - <td>Zero (i.e. <code>tabindex="0"</code>)</td> - <td>Yes</td> - <td>In tab order relative to element's position in document (note that interactive elements like {{ HTMLElement("a") }} have this behavior by default, they don't need the attribute).</td> - </tr> - <tr> - <td>Positive (e.g. <code>tabindex="33"</code>)</td> - <td>Yes</td> - <td><code>tabindex</code> value determines where this element is positioned in the tab order: smaller values will position elements earlier in the tab order than larger values (for example, <code>tabindex="7"</code> will be positioned before <code>tabindex="11"</code>).</td> - </tr> - </tbody> -</table> - -<h4 id="Non-native_controls">Non-native controls</h4> - -<p>Native HTML elements that are interactive, like {{ HTMLElement("a") }}, {{ HTMLElement("input") }} and {{ HTMLElement("select") }}, are already accessible by keyboards, so to use one of them is the fastest path to make components work with keyboards.</p> - -<p>Authors can also make a {{ HTMLElement("div") }} or {{ HTMLElement("span") }} keyboard accessible by adding a <code>tabindex</code> of <code>0</code>. This is particularly useful for components that use interactive elements that do not exist in HTML.</p> - -<h4 id="Grouping_controls">Grouping controls</h4> - -<p>For grouping widgets such as menus, tablists, grids, or tree views, the parent element should be in the tab order (<code>tabindex="0"</code>), and each descendent choice/tab/cell/row should be removed from the tab order (<code>tabindex="-1"</code>). Users should be able to navigate the descendent elements using arrow keys. (For a full description of the keyboard support that is normally expected for typical widgets, see the <a class="external text" href="https://www.w3.org/TR/wai-aria-practices-1.1/" rel="nofollow" title="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices</a>.)</p> - -<p>The example below shows this technique used with a nested menu control. Once keyboard focus lands on the containing {{ HTMLElement("ul") }} element, the JavaScript developer must programmatically manage focus and respond to arrow keys. For techniques for managing focus within widgets, see "Managing focus inside groups" below.</p> - -<p><em>Example 2: A menu control using tabindex to control keyboard access</em></p> - -<pre class="brush: html"><ul id="mb1" tabindex="0"> - <li id="mb1_menu1" tabindex="-1"> Font - <ul id="fontMenu" title="Font" tabindex="-1"> - <li id="sans-serif" tabindex="-1">Sans-serif</li> - <li id="serif" tabindex="-1">Serif</li> - <li id="monospace" tabindex="-1">Monospace</li> - <li id="fantasy" tabindex="-1">Fantasy</li> - </ul> - </li> - <li id="mb1_menu2" tabindex="-1"> Style - <ul id="styleMenu" title="Style" tabindex="-1"> - <li id="italic" tabindex="-1">Italics</li> - <li id="bold" tabindex="-1">Bold</li> - <li id="underline" tabindex="-1">Underlined</li> - </ul> - </li> - <li id="mb1_menu3" tabindex="-1"> Justification - <ul id="justificationMenu" title="Justication" tabindex="-1"> - <li id="left" tabindex="-1">Left</li> - <li id="center" tabindex="-1">Centered</li> - <li id="right" tabindex="-1">Right</li> - <li id="justify" tabindex="-1">Justify</li> - </ul> - </li> -</ul></pre> - -<h4 id="Disabled_controls">Disabled controls</h4> - -<p>When a custom control becomes disabled, remove it from the tab order by setting <code>tabindex="-1"</code>. Note that disabled items within a grouped widget (such as menu items in a menu) should remain navigable using arrow keys.</p> - -<h3 id="Managing_focus_inside_groups">Managing focus inside groups</h3> - -<p>When a user tabs away from a widget and returns, focus should return to the specific element that had focus, for example, the tree item or grid cell. There are two techniques for accomplishing this:</p> - -<ol> - <li>Roving <code>tabindex</code>: programmatically moving focus</li> - <li><code>aria-activedescendant</code>: managing a 'virtual' focus</li> -</ol> - -<h4 id="Technique_1_Roving_tabindex">Technique 1: Roving tabindex</h4> - -<p>Setting the <code>tabindex</code> of the focused element to "0" ensures that if the user tabs away from the widget and then returns, the selected item within the group retains focus. Note that updating the <code>tabindex</code> to "0" requires also updating the previously selected item to <code>tabindex="-1"</code>. This technique involves programmatically moving focus in response to key events and updating the <code>tabindex</code> to reflect the currently focused item. To do this:</p> - -<p>Bind a key down handler to each element in the group, and when an arrow key is used to move to another element:</p> - -<ol> - <li>programmatically apply focus to the new element,</li> - <li>update the <code>tabindex</code> of the focused element to "0", and</li> - <li>update the <code>tabindex</code> of the previously focused element to "-1".</li> -</ol> - -<p>Here's an example of a <a class="external text" href="https://files.paciellogroup.com/training/WWW2012/samples/Samples/aria/tree/index.html" rel="nofollow" title="Paciello Group Tree View example">WAI-ARIA tree view</a> using this technique.</p> - -<h5 id="Tips">Tips</h5> - -<h6 id="Use_element.focus_to_set_focus">Use element.focus() to set focus</h6> - -<p>Do not use <code>createEvent()</code>, <code>initEvent()</code> and <code>dispatchEvent()</code> to send focus to an element. DOM focus events are considered informational only: generated by the system after something is focused, but not actually used to set focus. Use <code>element.focus()</code> instead.</p> - -<h6 id="Use_onfocus_to_track_the_current_focus">Use onfocus to track the current focus</h6> - -<p>Don't assume that all focus changes will come via key and mouse events: assistive technologies such as screen readers can set the focus to any focusable element. Track focus using <code>onfocus</code> and <code>onblur</code> instead.</p> - -<p><code>onfocus</code> and <code>onblur</code> can now be used with every element. There is no standard DOM interface to get the current document focus. If you want to track the focus status, you can use the <a href="/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement">document.activeElement</a> to get the active element. You can also use <a href="/en-US/docs/Web/API/Document/hasFocus">document.hasFocus</a> to make sure if the current document focus. </p> - -<h4 id="Technique_2_aria-activedescendant">Technique 2: aria-activedescendant</h4> - -<p>This technique involves binding a single event handler to the container widget and using the <code>aria-activedescendant</code> to track a "virtual" focus. (For more information about ARIA, see this <a class="external text" href="../../../../An_Overview_of_Accessible_Web_Applications_and_Widgets" rel="nofollow" title="https://developer.mozilla.org/An_Overview_of_Accessible_Web_Applications_and_Widgets">overview of accessible web applications and widgets</a>.)</p> - -<p>The <code>aria-activedescendant</code> property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of <code>aria-activedescendant</code> and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this <a class="external text" href="http://www.oaa-accessibility.org/example/28/" rel="nofollow" title="http://www.oaa-accessibility.org/example/28/">ARIA radiogroup example</a> for a direct illustration of how this works.</p> - -<h3 id="General_Guidelines">General Guidelines</h3> - -<h4 id="Use_onkeydown_to_trap_key_events_not_onkeypress">Use onkeydown to trap key events, not onkeypress</h4> - -<p>IE will not fire <code>keypress</code> events for non-alphanumeric keys. Use <code>onkeydown</code> instead.</p> - -<h4 id="Ensure_that_keyboard_and_mouse_produce_the_same_experience">Ensure that keyboard and mouse produce the same experience</h4> - -<p>To ensure that the user experience is consistent regardless of input device, keyboard and mouse event handlers should share code where appropriate. For example, the code that updates the <code>tabindex</code> or the styling when users navigate using the arrow keys should also be used by mouse click handlers to produce the same changes.</p> - -<h4 id="Ensure_that_the_keyboard_can_be_used_to_activate_element">Ensure that the keyboard can be used to activate element</h4> - -<p>To ensure that the keyboard can be used to activate elements, any handlers bound to mouse events should also be bound to keyboard events. For example, to ensure that the Enter key will activate an element, if you have an <code>onclick="doSomething()"</code>, you should bind <code>doSomething()</code> to the key down event as well: <code>onkeydown="return event.keyCode != 13 || doSomething();"</code>.</p> - -<h4 id="Always_draw_the_focus_for_tabindex-1_items_and_elements_that_receive_focus_programatically">Always draw the focus for tabindex="-1" items and elements that receive focus programatically</h4> - -<p>IE will not automatically draw the focus outline for items that programatically receive focus. Choose between changing the background color via something like <code>this.style.backgroundColor = "gray";</code> or add a dotted border via <code>this.style.border = "1px dotted invert"</code>. In the dotted border case you will need to make sure those elements have an invisible 1px border to start with, so that the element doesn't grow when the border style is applied (borders take up space, and IE doesn't implement CSS outlines).</p> - -<h4 id="Prevent_used_key_events_from_performing_browser_functions">Prevent used key events from performing browser functions</h4> - -<p>If your widget handles a key event, prevent the browser from also handling it (for example, scrolling in response to the arrow keys) by using your event handler's return code. If your event handler returns <code>false</code>, the event will not be propagated beyond your handler.</p> - -<p>For example:</p> - -<pre class="brush: html"><span tabindex="-1" onkeydown="return handleKeyDown();"></pre> - -<p>If <code>handleKeyDown()</code> returns <code>false</code>, the event will be consumed, preventing the browser from performing any action based on the keystroke.</p> - -<h4 id="Dont_rely_on_consistent_behavior_for_key_repeat_at_this_point">Don't rely on consistent behavior for key repeat, at this point</h4> - -<p>Unfortunately <code>onkeydown</code> may or may not repeat depending on what browser and OS you're running on.</p> diff --git a/files/pl/web/api/audiocontext/index.html b/files/pl/web/api/audiocontext/index.html deleted file mode 100644 index db5d07d69c..0000000000 --- a/files/pl/web/api/audiocontext/index.html +++ /dev/null @@ -1,293 +0,0 @@ ---- -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/element/queryselector/index.html b/files/pl/web/api/element/queryselector/index.html deleted file mode 100644 index 62c6fe2561..0000000000 --- a/files/pl/web/api/element/queryselector/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -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/htmlelement/offsetheight/index.html b/files/pl/web/api/htmlelement/offsetheight/index.html deleted file mode 100644 index 1fe35e7691..0000000000 --- a/files/pl/web/api/htmlelement/offsetheight/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: element.offsetHeight -slug: Web/API/HTMLElement/offsetHeight -tags: - - DOM - - Dokumentacja_Gecko_DOM - - Gecko - - Strony_wymagające_dopracowania - - Wszystkie_kategorie -translation_of: Web/API/HTMLElement/offsetHeight -original_slug: Web/API/Element/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/htmlselectelement/index.html b/files/pl/web/api/htmlselectelement/index.html deleted file mode 100644 index 72c3ab95d3..0000000000 --- a/files/pl/web/api/htmlselectelement/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -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>{{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/mediaelementaudiosourcenode/index.html b/files/pl/web/api/mediaelementaudiosourcenode/index.html deleted file mode 100644 index 81bbce3c25..0000000000 --- a/files/pl/web/api/mediaelementaudiosourcenode/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -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/mousescrollevent/index.html b/files/pl/web/api/mousescrollevent/index.html deleted file mode 100644 index ed0ab35316..0000000000 --- a/files/pl/web/api/mousescrollevent/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -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/node/nodetype/index.html b/files/pl/web/api/node/nodetype/index.html deleted file mode 100644 index e829a351b3..0000000000 --- a/files/pl/web/api/node/nodetype/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: element.nodeType -slug: Web/API/Node/nodeType -tags: - - DOM - - Dokumentacja_Gecko_DOM - - Gecko - - Wszystkie_kategorie -translation_of: Web/API/Node/nodeType -original_slug: Web/API/Element/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/push_api/index.html b/files/pl/web/api/push_api/index.html deleted file mode 100644 index e889cb6c01..0000000000 --- a/files/pl/web/api/push_api/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -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/response/index.html b/files/pl/web/api/response/index.html deleted file mode 100644 index 394a5a4a4d..0000000000 --- a/files/pl/web/api/response/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -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/width/index.html b/files/pl/web/api/screen/width/index.html deleted file mode 100644 index 352f6cfbf3..0000000000 --- a/files/pl/web/api/screen/width/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -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/web_audio_api/index.html b/files/pl/web/api/web_audio_api/index.html deleted file mode 100644 index e67cec2fd6..0000000000 --- a/files/pl/web/api/web_audio_api/index.html +++ /dev/null @@ -1,503 +0,0 @@ ---- -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/tutorial/index.html b/files/pl/web/api/webgl_api/tutorial/index.html deleted file mode 100644 index cecc84cbfe..0000000000 --- a/files/pl/web/api/webgl_api/tutorial/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -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/content/index.html b/files/pl/web/api/window/content/index.html deleted file mode 100644 index 66eed370a9..0000000000 --- a/files/pl/web/api/window/content/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -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/opendialog/index.html b/files/pl/web/api/window/opendialog/index.html deleted file mode 100644 index 6d24bf03fd..0000000000 --- a/files/pl/web/api/window/opendialog/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -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/sidebar/index.html b/files/pl/web/api/window/sidebar/index.html deleted file mode 100644 index 280b5dcce3..0000000000 --- a/files/pl/web/api/window/sidebar/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -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/xmlhttprequest/using_xmlhttprequest/index.html b/files/pl/web/api/xmlhttprequest/using_xmlhttprequest/index.html deleted file mode 100644 index 94be8159b1..0000000000 --- a/files/pl/web/api/xmlhttprequest/using_xmlhttprequest/index.html +++ /dev/null @@ -1,658 +0,0 @@ ---- -title: Wykorzystanie XMLHttpRequest -slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest -translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest -original_slug: XMLHttpRequest/Using_XMLHttpRequest ---- -<p><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest"><code>XMLHttpRequest</code></a> makes sending HTTP requests very easy. You simply create an instance of the object, open a URL, and send the request. The <a href="/en-US/docs/HTTP/HTTP_response_codes" title="HTTP response codes">HTTP status</a> of the result, as well as the result's contents, are available in the request object when the transaction is completed. This page outlines some of the common and even slightly obscure use cases for this powerful JavaScript object.</p> -<pre class="brush: js">function reqListener () { - console.log(this.responseText); -} - -var oReq = new XMLHttpRequest(); -oReq.onload = reqListener; -oReq.open("get", "yourFile.txt", true); -oReq.send();</pre> -<h2 id="Types_of_requests">Types of requests</h2> -<p>A request made via XMLHttpRequest can fetch the data in one of two ways, asynchronously or synchronously. The type of request is dictated by the optional <code>async</code> argument (the third argument) that is set on the XMLHttpRequest <a href="/en-US/docs/DOM/XMLHttpRequest#open()" title="DOM/XMLHttpRequest#open()">open()</a> method. If this argument is <code>true</code> or not specified, the <code>XMLHttpRequest</code> is processed asynchronously, otherwise the process is handled synchronously. A detailed discussion and demonstrations of these two types of requests can be found on the <a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" title="Synchronous and Asynchronous Requests">synchronous and asynchronous requests</a> page. In general, you should rarely if ever use synchronous requests.</p> -<div class="note"> - <strong>Note:</strong> Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.</div> -<h2 id="Handling_responses">Handling responses</h2> -<p>There are several types of <a href="http://www.w3.org/TR/XMLHttpRequest2/#response" title="http://www.w3.org/TR/XMLHttpRequest2/#response">response attributes</a> defined by the W3C specification for XMLHttpRequest. These tell the client making the XMLHttpRequest important information about the status of the response. Some<span style="line-height: 1.572;"> cases where dealing with non-text response types may involve some manipulation and analysis as outlined in the following sections.</span></p> -<h3 id="Analyzing_and_manipulating_the_responseXML_property">Analyzing and manipulating the <code>responseXML</code> property</h3> -<p>If you use <code>XMLHttpRequest </code>to get the content of a remote XML document, the <code>responseXML </code>property will be a DOM Object containing a parsed XML document, which can be hard to manipulate and analyze. There are four primary ways of analyzing this XML document:</p> -<ol> - <li>Using <a href="/en-US/docs/XPath" title="XPath">XPath</a> to address (point to) parts of it.</li> - <li>Using <a href="/en-US/docs/JXON" title="JXON">JXON</a> to convert it into a JavaScript Object tree.</li> - <li>Manually <a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">Parsing and serializing XML</a> to strings or objects.</li> - <li>Using <a href="/en-US/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a> to serialize <strong>DOM trees to strings or to files</strong>.</li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp">RegExp </a>can be used if you always know the content of the XML document beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to linebreaks. However, this method is a "last resort" since if the XML code changes slightly, the method will likely fail.</li> -</ol> -<h3 id="Analyzing_and_manipulating_a_responseText_property_containing_an_HTML_document">Analyzing and manipulating a <code>responseText</code> property containing an HTML document</h3> -<div class="note"> - <strong>Note:</strong> The W3C <a href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> specification allows HTML parsing via the <code>XMLHttpRequest.responseXML</code> property. Read the article about <a href="/en-US/docs/HTML_in_XMLHttpRequest" title="HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a> for details.</div> -<p>If you use <code>XMLHttpRequest</code> to get the content of a remote HTML webpage, the <code>responseText</code> property is a string containing a "soup" of all the HTML tags, which can be hard to manipulate and analyze. There are three primary ways of analyzing this HTML soup string:</p> -<ol> - <li>Use the <code>XMLHttpRequest.responseXML</code> property.</li> - <li>Inject the content into the body of a <a href="/en-US/docs/Web/API/DocumentFragment">document fragment</a> via <code>fragment.body.innerHTML</code> and traverse the DOM of the fragment.</li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp">RegExp </a>can be used if you always know the content of the HTML <code>responseText </code>beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to linebreaks. However, this method is a "last resort" since if the HTML code changes slightly, the method will likely fail.</li> -</ol> -<h2 id="Handling_binary_data">Handling binary data</h2> -<p>Although <code>XMLHttpRequest</code> is most commonly used to send and receive textual data, it can be used to send and receive binary content. There are several well tested methods for coercing the response of an XMLHttpRequest into sending binary data. These involve utilizing the <code>.overrideMimeType()</code> method on the XMLHttpRequest object and is a workable solution.</p> -<pre class="brush:js">var oReq = new XMLHttpRequest(); -oReq.open("GET", url, true); -// retrieve data unprocessed as a binary string -oReq.overrideMimeType("text/plain; charset=x-user-defined"); -/* ... */ -</pre> -<p>The XMLHttpRequest Level 2 Specification adds new <a href="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute" title="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute">responseType attributes</a> which make sending and receiving binary data much easier.</p> -<pre class="brush:js">var oReq = new XMLHttpRequest(); - - -oReq.onload = function(e) { - var arraybuffer = oReq.response; // not responseText - /* ... */ -} -<span style="font-size: 1rem;">oReq.open("GET", url, true); -</span><span style="font-size: 1rem;"><span style="font-size: 1rem;">oReq.responseType = "arraybuffer"; -</span>oReq.send();</span></pre> -<p>For more examples check out the <a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data" title="DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Sending and Receiving Binary Data</a> page</p> -<h2 id="Monitoring_progress">Monitoring progress</h2> -<p><code>XMLHttpRequest</code> provides the ability to listen to various events that can occur while the request is being processed. This includes periodic progress notifications, error notifications, and so forth.</p> -<p>Support for DOM progress event monitoring of <code>XMLHttpRequest</code> transfers follows the Web API <a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">specification for progress events</a>: these events implement the {{domxref("ProgressEvent")}} interface.</p> -<pre class="brush:js">var oReq = new XMLHttpRequest(); - -oReq.addEventListener("progress", updateProgress, false); -oReq.addEventListener("load", transferComplete, false); -oReq.addEventListener("error", transferFailed, false); -oReq.addEventListener("abort", transferCanceled, false); - -oReq.open(); - -// ... - -// progress on transfers from the server to the client (downloads) -function updateProgress (oEvent) { - if (oEvent.lengthComputable) { - var percentComplete = oEvent.loaded / oEvent.total; - // ... - } else { - // Unable to compute progress information since the total size is unknown - } -} - -function transferComplete(evt) { - alert("The transfer is complete."); -} - -function transferFailed(evt) { - alert("An error occurred while transferring the file."); -} - -function transferCanceled(evt) { - alert("The transfer has been canceled by the user."); -}</pre> -<p>Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using <code>XMLHttpRequest</code>.</p> -<div class="note"> - <strong>Note:</strong> You need to add the event listeners before calling <code>open()</code> on the request. Otherwise the progress events will not fire.</div> -<p>The progress event handler, specified by the <code>updateProgress()</code> function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's <code>total</code> and <code>loaded</code> fields. However, if the <code>lengthComputable</code> field is false, the total length is not known and will be zero.</p> -<p>Progress events exist for both download and upload transfers. The download events are fired on the <code>XMLHttpRequest</code> object itself, as shown in the above sample. The upload events are fired on the <code>XMLHttpRequest.upload</code> object, as shown below:</p> -<pre class="brush:js">var oReq = new XMLHttpRequest(); - -oReq.upload.addEventListener("progress", updateProgress, false); -oReq.upload.addEventListener("load", transferComplete, false); -oReq.upload.addEventListener("error", transferFailed, false); -oReq.upload.addEventListener("abort", transferCanceled, false); - -oReq.open(); -</pre> -<div class="note"> - <strong>Note:</strong> Progress events are not available for the <code>file:</code> protocol.</div> -<div class="note"> - <strong>Note</strong>: Currently there are open bugs for the progress event that are still affecting version 25 of Firefox on <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=908375">OS X</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=786953">Linux</a>.</div> -<div class="note"> - <p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, progress events can now be relied upon to come in for every chunk of data received, including the last chunk in cases in which the last packet is received and the connection closed before the progress event is fired. In this case, the progress event is automatically fired when the load event occurs for that packet. This lets you now reliably monitor progress by only watching the "progress" event.</p> -</div> -<div class="note"> - <p><strong>Note:</strong> As of {{Gecko("12.0")}}, if your progress event is called with a <code>responseType</code> of "moz-blob", the value of response is a {{domxref("Blob")}} containing the data received so far.</p> -</div> -<p>One can also detect all three load-ending conditions (<code>abort</code>, <code>load</code>, or <code>error</code>) using the <code>loadend</code> event:</p> -<pre class="brush:js">req.addEventListener("loadend", loadEnd, false); - -function loadEnd(e) { - alert("The transfer finished (although we don't know if it succeeded or not)."); -} -</pre> -<p>Note that there's no way to be certain from the information received by the <code>loadend</code> event as to which condition caused the operation to terminate; however, you can use this to handle tasks that need to be performed in all end-of-transfer scenarios.</p> -<h2 id="Submitting_forms_and_uploading_files">Submitting forms and uploading files</h2> -<p>Instances of <code>XMLHttpRequest</code> can be used to submit forms in two ways:</p> -<ul> - <li>using nothing but AJAX</li> - <li>using the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> API</li> -</ul> -<p>The <strong>second way</strong> (using the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> API) is the simplest and the fastest, but has the disadvantage that the data collected can not be <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringified</a>.<br> - The <strong>first way</strong> is instead the most complex but also lends itself to be the most flexible and powerful.</p> -<h3 id="Using_nothing_but_XMLHttpRequest">Using nothing but <code>XMLHttpRequest</code></h3> -<p>Submitting forms without the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> API does not require other APIs, except that, only <strong>if you want to upload one or more files</strong>, the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API.</p> -<h4 id="A_brief_introduction_to_the_submit_methods">A brief introduction to the submit methods</h4> -<p>An html {{ HTMLElement("form") }} can be sent in four ways:</p> -<ul> - <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>application/x-www-form-urlencoded</code> (default);</li> - <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>text/plain</code>;</li> - <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>multipart/form-data</code>;</li> - <li>using the <code>GET</code> method (in this case the <code>enctype</code> attribute will be ignored).</li> -</ul> -<p>Now, consider to submit a form containing only two fields, named <code>foo</code> and <code>baz</code>. If you are using the <code>POST</code> method, the server will receive a string similar to one of the following three ones depending on the encoding type you are using:</p> -<ul> - <li> - <p>Method: <code>POST</code>; Encoding type: <code>application/x-www-form-urlencoded</code> (default):</p> - <pre>Content-Type: application/x-www-form-urlencoded - -foo=bar&baz=The+first+line.&#37;0D%0AThe+second+line.%0D%0A</pre> - </li> - <li> - <p>Method: <code>POST</code>; Encoding type: <code>text/plain</code>:</p> - <pre>Content-Type: text/plain - -foo=bar -baz=The first line. -The second line.</pre> - </li> - <li> - <p>Method: <code>POST</code>; Encoding type: <code>multipart/form-data</code>:</p> - <pre style="height: 100px; overflow: auto;">Content-Type: multipart/form-data; boundary=---------------------------314911788813839 - ------------------------------314911788813839 -Content-Disposition: form-data; name="foo" - -bar ------------------------------314911788813839 -Content-Disposition: form-data; name="baz" - -The first line. -The second line. - ------------------------------314911788813839--</pre> - </li> -</ul> -<p>Instead, if you are using the <code>GET</code> method, a string like the following will be simply added to the URL:</p> -<pre>?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.</pre> -<h4 id="A_little_vanilla_framework">A little vanilla framework</h4> -<p>All these things are done automatically by the web browser whenever you submit a {{ HTMLElement("form") }}. But if you want to do the same things using JavaScript you have to instruct the interpreter about <em>all</em> things. So, how to send forms in <em>pure</em> AJAX is too complex to be explained in detail here. For this reason we posted here <strong>a complete (but still didactic) framework</strong>, which is able to use all the four ways of <em>submit</em> and, also, to <strong>upload files</strong>:</p> -<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> - <pre class="brush: html"><!doctype html> -<html> -<head> -<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -<title>Sending forms with pure AJAX &ndash; MDN</title> -<script type="text/javascript"> - -"use strict"; - -/*\ -|*| -|*| :: XMLHttpRequest.prototype.sendAsBinary() Polyfill :: -|*| -|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary() -\*/ - -if (!XMLHttpRequest.prototype.sendAsBinary) { - XMLHttpRequest.prototype.sendAsBinary = function(sData) { - var nBytes = sData.length, ui8Data = new Uint8Array(nBytes); - for (var nIdx = 0; nIdx < nBytes; nIdx++) { - ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff; - } - /* send as ArrayBufferView...: */ - this.send(ui8Data); - /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */ - }; -} - -/*\ -|*| -|*| :: AJAX Form Submit Framework :: -|*| -|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest -|*| -|*| This framework is released under the GNU Public License, version 3 or later. -|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html -|*| -|*| Syntax: -|*| -|*| AJAXSubmit(HTMLFormElement); -\*/ - -var AJAXSubmit = (function () { - - function ajaxSuccess () { - /* console.log("AJAXSubmit - Success!"); */ - alert(this.responseText); - /* you can get the serialized data through the "submittedData" custom property: */ - /* alert(JSON.stringify(this.submittedData)); */ - } - - function submitData (oData) { - /* the AJAX request... */ - var oAjaxReq = new XMLHttpRequest(); - oAjaxReq.submittedData = oData; - oAjaxReq.onload = ajaxSuccess; - if (oData.technique === 0) { - /* method is GET */ - oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true); - oAjaxReq.send(null); - } else { - /* method is POST */ - oAjaxReq.open("post", oData.receiver, true); - if (oData.technique === 3) { - /* enctype is multipart/form-data */ - var sBoundary = "---------------------------" + Date.now().toString(16); - oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary); - oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n"); - } else { - /* enctype is application/x-www-form-urlencoded or text/plain */ - oAjaxReq.setRequestHeader("Content-Type", oData.contentType); - oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&")); - } - } - } - - function processStatus (oData) { - if (oData.status > 0) { return; } - /* the form is now totally serialized! do something before sending it to the server... */ - /* doSomething(oData); */ - /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */ - submitData (oData); - } - - function pushSegment (oFREvt) { - this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n"; - this.owner.status--; - processStatus(this.owner); - } - - function plainEscape (sText) { - /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */ - /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */ - return sText.replace(/[\s\=\\]/g, "\\$&"); - } - - function SubmitRequest (oTarget) { - var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post"; - /* console.log("AJAXSubmit - Serializing form..."); */ - this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded"; - this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0; - this.receiver = oTarget.action; - this.status = 0; - this.segments = []; - var fFilter = this.technique === 2 ? plainEscape : escape; - for (var nItem = 0; nItem < oTarget.elements.length; nItem++) { - oField = oTarget.elements[nItem]; - if (!oField.hasAttribute("name")) { continue; } - sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; - if (sFieldType === "FILE" && oField.files.length > 0) { - if (this.technique === 3) { - /* enctype is multipart/form-data */ - for (nFile = 0; nFile < oField.files.length; nFile++) { - oFile = oField.files[nFile]; - oSegmReq = new FileReader(); - /* (custom properties:) */ - oSegmReq.segmentIdx = this.segments.length; - oSegmReq.owner = this; - /* (end of custom properties) */ - oSegmReq.onload = pushSegment; - this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n"); - this.status++; - oSegmReq.readAsBinaryString(oFile); - } - } else { - /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */ - for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name))); - } - } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { - /* field type is not FILE or is FILE but is empty */ - this.segments.push( - this.technique === 3 ? /* enctype is multipart/form-data */ - "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n" - : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */ - fFilter(oField.name) + "=" + fFilter(oField.value) - ); - } - } - processStatus(this); - } - - return function (oFormElement) { - if (!oFormElement.action) { return; } - new SubmitRequest(oFormElement); - }; - -})(); - -</script> -</head> -<body> - -<h1>Sending forms with pure AJAX</h1> - -<h2>Using the GET method</h2> - -<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h2>Using the POST method</h2> -<h3>Enctype: application/x-www-form-urlencoded (default)</h3> - -<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h3>Enctype: text/plain</h3> - -<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - Your name: <input type="text" name="user" /> - </p> - <p> - Your message:<br /> - <textarea name="message" cols="40" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h3>Enctype: multipart/form-data</h3> - -<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Upload example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /><br /> - Sex: - <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> - <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> - Password: <input type="password" name="secret" /><br /> - What do you prefer: - <select name="image_type"> - <option>Books</option> - <option>Cinema</option> - <option>TV</option> - </select> - </p> - <p> - Post your photos: - <input type="file" multiple name="photos[]"> - </p> - <p> - <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> - <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> - </p> - <p> - Describe yourself:<br /> - <textarea name="description" cols="50" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -</body> -</html></pre> -</div> -<p>To test it, create a<span class="long_text short_text" id="result_box" lang="en"><span class="hps"> </span></span>page named <strong>register.php</strong> (which is the <code>action</code> attribute of these sample forms) and just put the following <em><span class="long_text short_text" id="result_box" lang="en"><span class="hps">minimalistic </span></span></em>content:</p> -<pre class="brush: php"><?php -/* register.php */ - -header("Content-type: text/plain"); - -/* -NOTE: You should never use `print_r()` in production scripts, or -otherwise output client-submitted data without sanitizing it first. -Failing to sanitize can lead to cross-site scripting vulnerabilities. -*/ - -echo ":: data received via GET ::\n\n"; -print_r($_GET); - -echo "\n\n:: Data received via POST ::\n\n"; -print_r($_POST); - -echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n"; -if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; } - -echo "\n\n:: Files received ::\n\n"; -print_r($_FILES); - -</pre> -<p>The syntax of this script is the following:</p> -<pre class="syntaxbox">AJAXSubmit(myForm);</pre> -<div class="note"> - <strong>Note:</strong> This framework uses the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API to transmit file uploads. This is a recent API and is not implemented in IE9 or below. For this reason, the AJAX-only upload is considered <strong>an experimental technique</strong>. If you do not need to upload binary files, this framework work fine in most browsers.</div> -<div class="note"> - <strong>Note:</strong> The best way to send binary content is via <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffers</a> or <a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob">Blobs</a> in conjuncton with the <a href="/en-US/docs/DOM/XMLHttpRequest#send%28%29" title="/en-US/docs/DOM/XMLHttpRequest#send()"><code>send()</code></a> method and possibly the <a href="/en-US/docs/DOM/FileReader#readAsArrayBuffer()" title="/en-US/docs/DOM/FileReader#readAsArrayBuffer()"><code>readAsArrayBuffer()</code></a> method of the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API. But, since the aim of this script is to work with a <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> raw data, we used the <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29" title="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> method in conjunction with the <a href="/en-US/docs/DOM/FileReader#readAsBinaryString%28%29" title="/en-US/docs/DOM/FileReader#readAsBinaryString()"><code>readAsBinaryString()</code></a> method of the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API. As such, the above script makes sense only when you are dealing with small files. If you do not intend to upload binary content, consider instead using the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> API.</div> -<div class="note"> - <strong>Note:</strong> The non-standard <code>sendAsBinary </code>method is considered deprecated as of Gecko 31 {{ geckoRelease(31) }} and will be removed soon. The standard <code>send(Blob data)</code> method can be used instead.</div> -<h3 id="Using_FormData_objects">Using FormData objects</h3> -<p>The <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> constructor lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's <code>submit()</code> method would use to send the data if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples and explanations of how one can utilize FormData with XMLHttpRequests see the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="Using FormData Objects">Using FormData Objects</a> page. For didactic purpose only we post here <strong>a <em>translation</em> of <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">the previous example</a> transformed so as to make use of the <code>FormData</code> API</strong>. Note the brevity of the code:</p> -<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> - <pre class="brush: html"><!doctype html> -<html> -<head> -<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -<title>Sending forms with FormData &ndash; MDN</title> -<script type="text/javascript"> -"use strict"; - -function ajaxSuccess () { - alert(this.responseText); -} - -function AJAXSubmit (oFormElement) { - if (!oFormElement.action) { return; } - var oReq = new XMLHttpRequest(); - oReq.onload = ajaxSuccess; - if (oFormElement.method.toLowerCase() === "post") { - oReq.open("post", oFormElement.action, true); - oReq.send(new FormData(oFormElement)); - } else { - var oField, sFieldType, nFile, sSearch = ""; - for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) { - oField = oFormElement.elements[nItem]; - if (!oField.hasAttribute("name")) { continue; } - sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; - if (sFieldType === "FILE") { - for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name)); - } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { - sSearch += "&" + escape(oField.name) + "=" + escape(oField.value); - } - } - oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); - oReq.send(null); - } -} -</script> -</head> -<body> - -<h1>Sending forms with FormData</h1> - -<h2>Using the GET method</h2> - -<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h2>Using the POST method</h2> -<h3>Enctype: application/x-www-form-urlencoded (default)</h3> - -<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h3>Enctype: text/plain</h3> - -<p>The text/plain encoding is not supported by the FormData API.</p> - -<h3>Enctype: multipart/form-data</h3> - -<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Upload example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /><br /> - Sex: - <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> - <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> - Password: <input type="password" name="secret" /><br /> - What do you prefer: - <select name="image_type"> - <option>Books</option> - <option>Cinema</option> - <option>TV</option> - </select> - </p> - <p> - Post your photos: - <input type="file" multiple name="photos[]"> - </p> - <p> - <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> - <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> - </p> - <p> - Describe yourself:<br /> - <textarea name="description" cols="50" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -</body> -</html></pre> -</div> -<div class="note"> - <strong>Note:</strong> As we said,<strong> {{domxref("FormData")}} objects are not <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> objects</strong>. If you want to stringify a submitted data, use <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">the previous <em>pure</em>-AJAX example</a>. Note also that, although in this example there are some <code>file</code> {{ HTMLElement("input") }} fields, <strong>when you submit a form through the <code>FormData</code> API you do not need to use the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API also</strong>: files are automatically loaded and uploaded.</div> -<h2 id="Get_last_modified_date">Get last modified date</h2> -<pre class="brush: js">function getHeaderTime () { - alert(this.getResponseHeader("Last-Modified")); /* A valid GMTString date or null */ -} - -var oReq = new XMLHttpRequest(); -oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html", true); -oReq.onload = getHeaderTime; -oReq.send();</pre> -<h3 id="Do_something_when_last_modified_date_changes">Do something when last modified date changes</h3> -<p>Let's create these two functions:</p> -<pre class="brush: js">function getHeaderTime () { - - var - nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)), - nLastModif = Date.parse(this.getResponseHeader("Last-Modified")); - - if (isNaN(nLastVisit) || nLastModif > nLastVisit) { - window.localStorage.setItem('lm_' + this.filepath, Date.now()); - isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit); - } - -} - -function ifHasChanged(sURL, fCallback) { - var oReq = new XMLHttpRequest(); - oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL, true); - oReq.callback = fCallback; - oReq.filepath = sURL; - oReq.onload = getHeaderTime; - oReq.send(); -}</pre> -<p>Test:</p> -<pre class="brush: js">/* Let's test the file "yourpage.html"... */ - -ifHasChanged("yourpage.html", function (nModif, nVisit) { - alert("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!"); -});</pre> -<p>If you want to know <strong>whether <em>the current page</em> has changed</strong>, please read the article about <a href="/en-US/docs/Web/API/document.lastModified" title="/en-US/docs/Web/API/document.lastModified"><code>document.lastModified</code></a>.</p> -<h2 id="Cross-site_XMLHttpRequest">Cross-site XMLHttpRequest</h2> -<p>Modern browsers support cross-site requests by implementing the web applications working group's <a href="/en-US/docs/HTTP_access_control" title="HTTP access control">Access Control for Cross-Site Requests</a> standard. As long as the server is configured to allow requests from your web application's origin, <code>XMLHttpRequest</code> will work. Otherwise, an <code>INVALID_ACCESS_ERR</code> exception is thrown.</p> -<h2 id="Bypassing_the_cache">Bypassing the cache</h2> -<p><span style="line-height: 1.572;">A, cross-browser compatible approach to bypassing the cache is to append a timestamp to the URL, being sure to include a "?" or "&" as appropriate. For example:</span></p> -<pre>http://foo.com/bar.html -> http://foo.com/bar.html?12345 -http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345 -</pre> -<p>Since the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.</p> -<p>You can automatically adjust URLs using the following code:</p> -<pre class="brush:js">var oReq = new XMLHttpRequest(); - -oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true); -oReq.send(null);</pre> -<h2 id="Security">Security</h2> -<p>{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference <code>capability.policy.<policyname>.XMLHttpRequest.open</policyname></code> to <code>allAccess</code> to give specific sites cross-site access. This is no longer supported.")}}</p> -<p>{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}</p> -<p>The recommended way to enable cross-site scripting is to use the <code>Access-Control-Allow-Origin </code> HTTP header in the response to the XMLHttpRequest.</p> -<h3 id="XMLHttpRequests_being_stopped">XMLHttpRequests being stopped</h3> -<p>If you end up with an XMLHttpRequest having <code>status=0</code> and <code>statusText=null</code>, it means that the request was not allowed to be performed. It was <code><a href="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent" title="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent">UNSENT</a></code>. A likely cause for this is when the <a href="http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin" style="outline: 1px dotted; outline-offset: 0pt;"><code>XMLHttpRequest</code> origin</a> (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then <code>open()</code>. This case can happen for example when one has an XMLHttpRequest that gets fired on an onunload event for a window: the XMLHttpRequest gets in fact created when the window to be closed is still there, and then the request is sent (ie <code>open()</code>) when this window has lost its focus and potentially different window has gained focus. The way to avoid this problem is to set a listener on the new window "activate" event that gets set when the old window has its "unload" event fired.</p> -<h2 id="Using_XMLHttpRequest_from_JavaScript_modules_XPCOM_components">Using XMLHttpRequest from JavaScript modules / XPCOM components</h2> -<p>Instantiating <code>XMLHttpRequest</code> from a <a href="/en-US/docs/JavaScript_code_modules/Using" title="https://developer.mozilla.org/en/JavaScript_code_modules/Using_JavaScript_code_modules">JavaScript module</a> or an XPCOM component works a little differently; it can't be instantiated using the <code>XMLHttpRequest()</code> constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.</p> -<pre class="brush: js">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest"); -</pre> -<p>Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason. If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.</p> -<pre class="brush:js">const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"] - .getService(Components.interfaces.nsIAppShellService) - .hiddenDOMWindow; -var oReq = new XMLHttpRequest();</pre> -<h2 id="See_also">See also</h2> -<ol> - <li><a href="/en-US/docs/AJAX/Getting_Started" title="AJAX/Getting_Started">MDN AJAX introduction</a></li> - <li><a href="/en-US/docs/HTTP_access_control" title="HTTP access control">HTTP access control</a></li> - <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL" title="How to check the security state of an XMLHTTPRequest over SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li> - <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li> - <li><a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li> - <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Articles/XHR.html">Apple developers' reference</a></li> - <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li> - <li><a href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object: W3C Specification</a></li> - <li><a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">Web Progress Events specification</a></li> -</ol> diff --git a/files/pl/web/css/attribute_selectors/index.html b/files/pl/web/css/attribute_selectors/index.html deleted file mode 100644 index 93ffda8fec..0000000000 --- a/files/pl/web/css/attribute_selectors/index.html +++ /dev/null @@ -1,238 +0,0 @@ ---- -title: Selektory artybutów -slug: Web/CSS/Attribute_selectors -translation_of: Web/CSS/Attribute_selectors ---- -<div>{{CSSRef}}</div> - -<p><strong>Selektor atrybutów </strong>CSS dopasowuje elementy w oparciu o obecność lub wartość danego atrybutu.</p> - -<pre class="brush: css no-line-numbers">/* <a> Element z artybutem "title" */ -a[title] { - color: purple; -} - -/* <a> elemente href zawierajacy "https://example.org" */ -a[href="https://example.org"] { - color: green; -} - -/* <a> element href zawirający "example" */ -a[href*="example"] { - font-size: 2em; -} - -/* <a> elementy href kończące się na ".org" */ -a[href$=".org"] { - font-style: italic; -} - -/* <a> elementy, których atrybut klasy zawiera słowo "logo" */ -a[class~="logo"] { - padding: 2px; -}</pre> - -<h2 id="Syntax">Syntax</h2> - -<dl> - <dt><code>[<em>attr</em>]</code></dt> -</dl> - -<p>Reprezentuje elementy z atrybutem o nazwie attr.</p> - -<dl> - <dt><code>[<em>attr</em>=<em>value</em>]</code></dt> - <dd>Reprezentuje elementy z atrybutem o nazwie attr, którego wartością jest "value".</dd> - <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt> - <dd>Represents elements with an attribute name of <em>attr</em> whose value is a whitespace-separated list of words, one of which is exactly <em>value</em>.</dd> - <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt> - <dd>Represents elements with an attribute name of <em>attr</em> whose value can be exactly <em>value</em> or can begin with <em>value</em> immediately followed by a hyphen, <code>-</code> (U+002D). It is often used for language subcode matches.</dd> - <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt> - <dd>Represents elements with an attribute name of <em>attr</em> whose value is prefixed (preceded) by <em>value</em>.</dd> - <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt> - <dd>Represents elements with an attribute name of <em>attr</em> whose value is suffixed (followed) by <em>value</em>.</dd> - <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt> - <dd>Represents elements with an attribute name of <em>attr</em> whose value contains at least one occurrence of <em>value</em> within the string.</dd> - <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt> - <dd>Adding an <code>i</code> (or <code>I</code>) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).</dd> - <dt id="case-sensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> s]</code> {{Experimental_Inline}}</dt> - <dd>Adding an <code>s</code> (or <code>S</code>) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<h3 id="Links">Links</h3> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">a { - color: blue; -} - -/* Internal links, beginning with "#" */ -a[href^="#"] { - background-color: gold; -} - -/* Links with "example" anywhere in the URL */ -a[href*="example"] { - background-color: silver; -} - -/* Links with "insensitive" anywhere in the URL, - regardless of capitalization */ -a[href*="insensitive" i] { - color: cyan; -} - -/* Links with "cAsE" anywhere in the URL, -with matching capitalization */ -a[href*="cAsE" s] { - color: pink; -} - -/* Links that end in ".org" */ -a[href$=".org"] { - color: red; -}</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><ul> - <li><a href="#internal">Internal link</a></li> - <li><a href="http://example.com">Example link</a></li> - <li><a href="#InSensitive">Insensitive internal link</a></li> - <li><a href="http://example.org">Example org link</a></li> -</ul></pre> - -<h4 id="Result">Result</h4> - -<p>{{EmbedLiveSample("Links")}}</p> - -<h3 id="Languages">Languages</h3> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css">/* All divs with a `lang` attribute are bold. */ -div[lang] { - font-weight: bold; -} - -/* All divs without a `lang` attribute are italicized. */ -div:not([lang]) { - <span class="st">font-style: italic;</span> -} - -/* All divs in US English are blue. */ -div[lang~="en-us"] { - color: blue; -} - -/* All divs in Portuguese are green. */ -div[lang="pt"] { - color: green; -} - -/* All divs in Chinese are red, whether - simplified (zh-CN) or traditional (zh-TW). */ -div[lang|="zh"] { - color: red; -} - -/* All divs with a Traditional Chinese - `data-lang` are purple. */ -/* Note: You could also use hyphenated attributes - without double quotes */ -div[data-lang="zh-TW"] { - color: purple; -} -</pre> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><div lang="en-us en-gb en-au en-nz">Hello World!</div> -<div lang="pt">Olá Mundo!</div> -<div lang="zh-CN">世界您好！</div> -<div lang="zh-TW">世界您好！</div> -<div data-lang="zh-TW">世界您好！</div> -</pre> - -<h4 id="Result_2">Result</h4> - -<p>{{EmbedLiveSample("Languages")}}</p> - -<h3 id="HTML_ordered_lists">HTML ordered lists</h3> - -<p>The HTML specification requires the {{htmlattrxref("type", "input")}} attribute to be matched case-insensitively due to it primarily being used in the {{HTMLElement("input")}} element, trying to use attribute selectors to with the {{htmlattrxref("type", "ol")}} attribute of an {{HTMLElement("ol", "ordered list")}} doesn't work without the <a href="#case-sensitive">case-sensitive</a> modifier.</p> - -<h4 id="CSS_3">CSS</h4> - -<pre class="brush: css">/* List types require the case sensitive flag due to a quirk in how HTML treats the type attribute. */ -ol[type="a"] { - list-style-type: lower-alpha; - background: red; -} - -ol[type="a" s] { - list-style-type: lower-alpha; - background: lime; -} - -ol[type="A" s] { - list-style-type: upper-alpha; - background: lime; -}</pre> - -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: html;"><ol type="A"> - <li>Example list</li> -</ol></pre> - -<h4 id="Result_3">Result</h4> - -<p>{{EmbedLiveSample("HTML_ordered_lists")}}</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("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}}</td> - <td>{{Spec2("CSS4 Selectors")}}</td> - <td>Adds modifier for ASCII case-sensitive and case-insensitive attribute value selection.</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}</td> - <td>{{Spec2("CSS3 Selectors")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("css.selectors.attribute")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{CSSxRef("attr")}}</li> - <li>Selecting a single element: {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}}, or {{DOMxRef("Element.querySelector()")}}</li> - <li>Selecting all matching elements: {{DOMxRef("Document.querySelectorAll()")}}, {{DOMxRef("DocumentFragment.querySelectorAll()")}}, or {{DOMxRef("Element.querySelectorAll()")}}</li> - <li>The above methods are all implemented based on the {{DOMxRef("ParentNode")}} mixin; see {{DOMxRef("ParentNode.querySelector()")}} and {{DOMxRef("ParentNode.querySelectorAll()")}}</li> -</ul> diff --git a/files/pl/web/css/background-size/index.html b/files/pl/web/css/background-size/index.html deleted file mode 100644 index bceed2abcd..0000000000 --- a/files/pl/web/css/background-size/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: background-size -slug: Web/CSS/background-size -translation_of: Web/CSS/background-size ---- -<div>{{CSSRef}}</div> - -<p><code style=""><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Właściwość </span></font><strong>background-size</strong></code> określa wielkość elementu <code>background-image.</code> Obrazek może pozostać w jego domyślnych wymiarach, rozciągnięty do nowych wymiarów lub ustawiony tak, aby zajmował całą dostępną przestrzeń zachowując swoje proporcje.</p> - -<div>{{EmbedInteractiveExample("pages/css/background-size.html")}}</div> - -<p class="hidden">Źródło tego interaktywnego przykładu jest zlokalizowane na GitHub. Jeśli chcesz wspierać projekt interaktywnych przykładów sklonuj (clone) <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i wyślij nam pull request.</p> - -<p>Przestrzenie nie zapełnione przez <code>background-image</code> wypełnia {{cssxref("background-color")}}, <code>background-color</code> będzie widoczny jeżeli obrazek jest przezroczysty.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: css no-line-numbers">/* Wartości słowne */ -background-size: cover; -background-size: contain; - -/* Właściwości z jedną wartością */ -/* szerokość obrazka (wysokość stanie się 'auto') */ -background-size: 50%; -background-size: 3.2em; -background-size: 12px; -background-size: auto; - -/* Właściwości z dwoma wartościami */ -/* pierwsza wartość: szerokość obrazka, druga wartość: wysokość */ -background-size: 50% auto; -background-size: 3em 25%; -background-size: auto 6px; -background-size: auto auto; - -/* Wiele teł */ -background-size: auto, auto; /* Not to be confused with `auto auto` */ -background-size: 50%, 25%, 25%; -background-size: 6px, auto, contain; - -/* Wartości globalne */ -background-size: inherit; -background-size: initial; -background-size: unset; -</pre> - -<p>Właściwość <code>background-size</code> jest określana w jeden z podanych sposobów:</p> - -<ul> - <li>Używając wartości słownych <code><a href="#contain">contain</a></code> lub <code><a href="#cover">cover</a></code>.</li> - <li>Używając tylko wartości długości, w tym przypadku wysokość jest domyślnie ustawiona na <code><a href="#auto">auto</a></code><a href="#auto">.</a></li> - <li>Używając obu wartości (width i height), każda z wartości może być określona jako długość {{cssxref("<length>")}}, w procentach {{cssxref("<percentage>")}} lub <code><a href="#auto">auto</a></code>.</li> -</ul> - -<p>Aby określić wielkość wielu teł, odziel wartości dla każdego tła przecinkami.</p> - -<h3 id="Values">Values</h3> - -<dl> - <dt id="contain"><code>contain</code></dt> - <dd>Skaluje obrazek do jak największych rozmiarów, bez jego rozciągania czy przycinania.</dd> - <dt id="cover"><code>cover</code></dt> - <dd>Skaluje obrazek do jak największych rozmiarów, bez jego rozciągania. Jeżeli proporcje obrazu są inne od elementu, jest on przycinany pionowo lub poziomo - tak, żeby nie zostało puste miejsce.</dd> - <dt id="auto"><code>auto</code></dt> - <dd>Skaluje tło w odpowiednim kierunku, po to aby zachować jego nieodłączne proporcje.</dd> - <dt id="length">{{cssxref("<length>")}}</dt> - <dd>Rozciąga obrazek w odpowiednim kierunku do określonej długości. Nie można używać wartości ujemnych.</dd> - <dt id="percentage">{{cssxref("<percentage>")}}</dt> - <dd>[do przetłumaczenia na: Polski]</dd> - <dd>Stretches the image in the corresponding dimension to the specified percentage of the <em>background positioning area</em>. The background positioning area is determined by the value of {{cssxref("background-origin")}} (by default, the padding box). However, if the background's {{cssxref("background-attachment")}} value is <code>fixed</code>, the positioning area is instead the entire {{glossary("viewport")}}. Negative values are not allowed.</dd> -</dl> - -<h3 id="Intrinsic_dimensions_and_proportions">Intrinsic dimensions and proportions</h3> - -<p>The computation of values depends on the image's intrinsic dimensions (width and height) and intrinsic proportions (width-to-height ratio). These attributes are as follows:</p> - -<ul> - <li>A bitmap image (such as JPG) always has intrinsic dimensions and proportions.</li> - <li>A vector image (such as SVG) does not necessarily have intrinsic dimensions. If it has both horizontal and vertical intrinsic dimensions, it also has intrinsic proportions. If it has no dimensions or only one dimension, it may or may not have proportions.</li> - <li>CSS {{cssxref("<gradient>")}}s have no intrinsic dimensions or intrinsic proportions.</li> - <li>Background images created with the {{cssxref("element()")}} function use the intrinsic dimensions and proportions of the generating element.</li> -</ul> - -<div class="note"> -<p><strong>Note:</strong> The behavior of <code><gradient></code>s changed in Gecko 8.0 {{geckoRelease("8.0")}}. Before this, they were treated as images with no intrinsic dimensions, but with intrinsic proportions identical to that of the background positioning area.</p> -</div> - -<div class="note"> -<p><strong>Note:</strong> In Gecko, background images created using the {{cssxref("element()")}} function are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion. This is non-standard behavior.</p> -</div> - -<p>Based on the intrinsic dimensions and proportions, the rendered size of the background image is computed as follows:</p> - -<dl> - <dt>If both components of <code>background-size</code> are specified and are not <code>auto</code>:</dt> - <dd>The background image is rendered at the specified size.</dd> - <dt>If the <code>background-size</code> is <code>contain</code> or <code>cover</code>:</dt> - <dd>While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.</dd> - <dt>If the <code>background-size</code> is <code>auto</code> or <code>auto auto</code>:</dt> - <dd> - <ul> - <li>If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.</li> - <li>If the image has no intrinsic dimensions and has no intrinsic proportions, it's rendered at the size of the background positioning area.</li> - <li>If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if <code>contain</code> had been specified instead.</li> - <li>If the image has only one intrinsic dimension and has intrinsic proportions, it's rendered at the size corresponding to that one dimension. The other dimension is computed using the specified dimension and the intrinsic proportions.</li> - <li>If the image has only one intrinsic dimension but has no intrinsic proportions, it's rendered using the specified dimension and the other dimension of the background positioning area.</li> - </ul> - </dd> - <dd> - <div class="note"><strong>Note:</strong> SVG images have a <code><a href="/en-US/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a></code> attribute that defaults to the equivalent of <code>contain</code>. In Firefox 43, as opposed to Chrome 52, an explicit <code>background-size</code> causes <code>preserveAspectRatio</code> to be ignored.</div> - </dd> - <dt>If the <code>background-size</code> has one <code>auto</code> component and one non-<code>auto</code> component:</dt> - <dd> - <ul> - <li>If the image has intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the specified dimension and the intrinsic proportions.</li> - <li>If the image has no intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the image's corresponding intrinsic dimension, if there is one. If there is no such intrinsic dimension, it becomes the corresponding dimension of the background positioning area.</li> - </ul> - </dd> -</dl> - -<div class="note"> -<p><strong>Note:</strong> Background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers. Be careful about relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable.</p> -</div> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<p>Please see <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Scaling background images</a> for examples.</p> - -<h2 id="Notes">Notes</h2> - -<p>If you use a <code><gradient></code> as the background and specify a <code>background-size</code> to go with it, it's best not to specify a size that uses a single <code>auto</code> component, or is specified using only a width value (for example, <code>background-size: 50%</code>). Rendering of <code><gradient></code>s in such cases changed in Firefox 8, and at present is generally inconsistent across browsers, which do not all implement rendering in full accordance with <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">the CSS3 <code>background-size</code> specification</a> and with <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">the CSS3 Image Values gradient specification</a>.</p> - -<pre class="brush: css">.gradient-example { - width: 50px; - height: 100px; - background-image: linear-gradient(blue, red); - - /* Not safe to use */ - background-size: 25px; - background-size: 50%; - background-size: auto 50px; - background-size: auto 50%; - - /* Safe to use */ - background-size: 25px 50px; - background-size: 50% 50%; -} -</pre> - -<p>Note that it's particularly not recommended to use a pixel dimension and an <code>auto</code> dimension with a <code><gradient></code>, because it's impossible to replicate rendering in versions of Firefox prior to 8, and in browsers not implementing Firefox 8's rendering, without knowing the exact size of the element whose background is being specified.</p> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("css.properties.background-size")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">Scaling background images</a></li> - <li><a href="/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds">Scaling of SVG backgrounds</a></li> - <li>{{cssxref("object-fit")}}</li> -</ul> diff --git a/files/pl/web/css/box-decoration-break/index.html b/files/pl/web/css/box-decoration-break/index.html deleted file mode 100644 index 5873b850fb..0000000000 --- a/files/pl/web/css/box-decoration-break/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: box-decoration-break -slug: Web/CSS/box-decoration-break -tags: - - CSS - - CSS Fragmentation - - CSS Property - - Experimental -translation_of: Web/CSS/box-decoration-break ---- -<p>{{CSSRef}}{{SeeCompatTable}}</p> - -<h2 id="Summary">Summary</h2> - -<p>The <strong><code>box-decoration-break</code></strong> CSS property specifies how the {{ Cssxref("background") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("border-image") }}, {{ Cssxref("box-shadow") }}, {{ Cssxref("margin") }} and {{ Cssxref("clip") }} of an element is applied when the box for the element is fragmented. Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a page break when printed. Each piece of the rendering for the element is called a fragment.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush:css">box-decoration-break: slice; -box-decoration-break: clone; - -box-decoration-break: initial; -box-decoration-break: inherit; -box-decoration-break: unset; -</pre> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code>slice</code></dt> - <dd>The element is rendered as if its box were not fragmented, and then the rendering for this hypothetical box is sliced into pieces for each line/column/page. Note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own width if the break occurs in the block direction. See the CSS specification for details.</dd> - <dt><code>clone</code></dt> - <dd>Each box fragment is rendered independently with the specified border, padding and margin wrapping each fragment. The {{ Cssxref("border-radius") }}, {{ Cssxref("border-image") }} and {{ Cssxref("box-shadow") }}, are applied to each fragment independently. The background is drawn independently in each fragment which means that a background image with {{ Cssxref("background-repeat") }}: <code>no-repeat</code> may be repeated multiple times.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<h3 id="Inline_box_fragments">Inline box fragments</h3> - -<p>An inline element that contains line-breaks styled with:</p> - -<pre class="brush:css">.example { - background: linear-gradient(to bottom right, yellow, green); - box-shadow: - 8px 8px 10px 0px deeppink, - -5px -5px 5px 0px blue, - 5px 5px 15px 0px yellow; - padding: 0em 1em; - border-radius: 16px; - border-style: solid; - margin-left: 10px; - font: 24px sans-serif; - line-height: 2; -} - -... -<span class="example">The<br>quick<br>orange fox</span></pre> - -<p>Results in:</p> - -<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example." src="https://mdn.mozillademos.org/files/8167/box-decoration-break-inline-slice.png" style="height: 177px; width: 191px;"></p> - -<p>Adding <code>box-decoration-break:clone</code> to the above styles:</p> - -<pre class="brush:css"> -webkit-box-decoration-break: clone; - -o-box-decoration-break: clone; - box-decoration-break: clone; -</pre> - -<p>Results in:</p> - -<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example" src="https://mdn.mozillademos.org/files/8169/box-decoration-break-inline-clone.png" style="height: 180px; width: 231px;"></p> - -<p>You can <a href="https://mdn.mozillademos.org/files/8179/box-decoration-break-inline.html">try the two inline examples above</a> in your browser.</p> - -<p>Here's an example of an inline element using a large <code>border-radius</code> value. The second <code>"iM"</code> has a line-break between the <code>"i"</code> and the <code>"M"</code>. For comparison, the first <code>"iM"</code> is without line-breaks. Note that if you stack the rendering of the two fragments horizontally next to each other it will result in the non-fragmented rendering.</p> - -<p><img alt="A screenshot of the rendering of the second inline element example." src="https://mdn.mozillademos.org/files/8189/box-decoration-break-slice-inline-2.png" style="height: 184px; width: 108px;"></p> - -<p><a href="https://mdn.mozillademos.org/files/8191/box-decoration-break-inline-extreme.html">Try the above example</a> in your browser.</p> - -<h3 id="Block_box_fragments">Block box fragments</h3> - -<p>A block element with similar styles as above, first without any fragmentation:</p> - -<p><img alt="A screenshot of the rendering of the block element used in the examples without any fragmentation." src="https://mdn.mozillademos.org/files/8181/box-decoration-break-block.png" style="height: 149px; width: 333px;"></p> - -<p>Fragmenting the above block into three columns results in:</p> - -<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice." src="https://mdn.mozillademos.org/files/8183/box-decoration-break-block-slice.png" style="height: 55px; max-width: none; width: 1025px;"></p> - -<p>Note that stacking these pieces vertically will result in the non-fragmented rendering.</p> - -<p>Now the same example styled with <code>box-decoration-break:clone</code></p> - -<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone." src="https://mdn.mozillademos.org/files/8185/box-decoration-break-block-clone.png" style="height: 61px; max-width: none; width: 1023px;"></p> - -<p>Note here that each fragment has an identical replicated border, box-shadow and background.</p> - -<p>You can <a href="https://mdn.mozillademos.org/files/8187/box-decoration-break-block.html">try the block examples above</a> in your browser.</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('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break') }}</td> - <td>{{ Spec2('CSS3 Fragmentation') }}</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>Support on inline elements</td> - <td>{{ CompatVersionUnknown() }}{{property_prefix("-webkit")}}</td> - <td>{{CompatGeckoDesktop(32.0)}} [1]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}{{property_prefix("-o")}}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>Support on non-inline element</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(32.0)}} [1]</td> - <td>{{ CompatUnknown() }}</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>Support on inline elements</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatGeckoMobile("32.0")}}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>Support on non-inline element</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoMobile("32.0")}}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Note that Firefox implemented an non-standard version of this property before Firefox 32 named {{ Cssxref("-moz-background-inline-policy") }}. That property is unsupported since Firefox 32.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> -</ul> diff --git a/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html deleted file mode 100644 index eb9d550390..0000000000 --- a/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html +++ /dev/null @@ -1,609 +0,0 @@ ---- -title: Auto-placement in CSS Grid Layout -slug: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout -translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout ---- -<p>Poza możliwością umieszczania elementów</p> - -<div id="placement_1"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; -} -</pre> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> -</div> -</pre> - -<p>{{ EmbedLiveSample('placement_1', '500', '230') }}</p> -</div> - -<h2 id="Default_rules_for_auto-placement">Default rules for auto-placement</h2> - -<p>As you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell. The default flow is to arrange items by row. Grid will lay an item out into each cell of row 1. If you have created additional rows using the <code>grid-template-rows</code> property then grid will continue placing items in these rows. If the grid does not have enough rows in the explicit grid to place all of the items new <em>implicit</em> rows will be created.</p> - -<h3 id="Sizing_rows_in_the_implicit_grid">Sizing rows in the implicit grid</h3> - -<p>The default for automatically created rows in the implicit grid is for them to be auto-sized. This means that they will contain the content added to them without causing an overflow.</p> - -<p>You can however control the size of these rows with the property <code>grid-auto-rows</code>. To cause all created rows to be 100 pixels tall for example you would use:</p> - -<div id="placement_2"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; - grid-auto-rows: 100px; -} -</pre> - -<p>{{ EmbedLiveSample('placement_2', '500', '330') }}</p> -</div> - -<p>You can use {{cssxref("minmax","minmax()")}} in your value for {{cssxref("grid-auto-rows")}} enabling the creation of rows that are a minimum size but then grow to fit content if it is taller.</p> - -<div id="placement_3"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four - <br>This cell - <br>Has extra - <br>content. - <br>Max is auto - <br>so the row expands. - </div> - <div>Five</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; - grid-auto-rows: minmax(100px, auto); -} -</pre> - -<p>{{ EmbedLiveSample('placement_3', '500', '330') }}</p> -</div> - -<p>You can also pass in a track listing, this will repeat. The following track listing will create an initial implicit row track as 100 pixels and a second as <code>200px</code>. This will continue for as long as content is added to the implicit grid. <strong>Track listings are not supported in Firefox.</strong></p> - -<div id="placement_4"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> - <div>Six</div> - <div>Seven</div> - <div>Eight</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; - grid-auto-rows: 100px 200px; -} -</pre> - -<p>{{ EmbedLiveSample('placement_4', '500', '330') }}</p> -</div> - -<h3 id="Auto-placement_by_column">Auto-placement by column</h3> - -<p>You can also ask grid to auto-place items by column. Using the property {{cssxref("grid-auto-flow")}} with a value of <code>column</code>. In this case grid will add items in rows that you have defined using {{cssxref("grid-template-rows")}}. When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized. You can control the size of implicit column tracks with {{cssxref("grid-auto-columns")}}, this works in the same way as {{cssxref("grid-auto-rows")}}.</p> - -<p>In this next example I have created a grid with three row tracks of 200 pixels height. I am auto-placing by column and the columns created will be a column width of 300 pixels, then a column width of 100 pixels until there are enough column tracks to hold all of the items.</p> - -<div id="placement_5"> -<pre class="brush: css">.wrapper { - display: grid; - grid-template-rows: repeat(3, 200px); - grid-gap: 10px; - grid-auto-flow: column; - grid-auto-columns: 300px 100px; -} -</pre> - -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> - <div>Six</div> - <div>Seven</div> - <div>Eight</div> -</div> -</pre> - -<p>{{ EmbedLiveSample('placement_5', '500', '640') }}</p> -</div> - -<h2 id="The_order_of_auto_placed_items">The order of auto placed items</h2> - -<p>A grid can contain a mixture of items. Some of the items may have a position on the grid, but others may be auto-placed. This can be helpful, if you have a document order that reflects the order in which items sit on the grid you may not need to write CSS rules to place absolutely everything. The specification contains a long section detailing the <a href="https://drafts.csswg.org/css-grid/#auto-placement-algo">Grid item placement algorithm</a>, however for most of us we just need to remember a few simple rules for our items.</p> - -<h3 id="Order_modified_document_order">Order modified document order</h3> - -<p>Grid places items that have not been given a grid position in what is described in the specification as “order modified document order”. This means that if you have used the <code>order</code> property at all, the items will be placed by that order, not their DOM order. Otherwise they will stay by default in the order that they are entered in the document source.</p> - -<h3 id="Items_with_placement_properties">Items with placement properties</h3> - -<p>The first thing grid will do is place any items that have a position. In the example below I have 12 grid items. Item 2 and item 5 have been placed using line based placement on the grid. You can see how those items are placed and the other items then auto-place in the spaces. The auto-placed items will place themselves before the placed items in DOM order, they don’t start after the position of a placed item that comes before them.</p> - -<div id="placement_6"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> - <div>Six</div> - <div>Seven</div> - <div>Eight</div> - <div>Nine</div> - <div>Ten</div> - <div>Eleven</div> - <div>Twelve</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-auto-rows: 100px; - grid-gap: 10px; -} - .wrapper div:nth-child(2) { - grid-column: 3; - grid-row: 2 / 4; - } - .wrapper div:nth-child(5) { - grid-column: 1 / 3; - grid-row: 1 / 3; -} -</pre> - -<p>{{ EmbedLiveSample('placement_6', '500', '450') }}</p> -</div> - -<h3 id="Deal_with_items_that_span_tracks">Deal with items that span tracks</h3> - -<p>You can use placement properties while still taking advantage of auto-placement. In this next example I have added to the layout by setting odd items to span two tracks both for rows and columns. I do this with the {{cssxref("grid-column-end")}} and {{cssxref("grid-row-end")}} properties and setting the value of this to <code>span 2</code>. What this means is that the start line of the item will be set by auto-placement, and the end line will span two tracks.</p> - -<p>You can see how this then leaves gaps in the grid, as for the auto-placed items if grid comes across an item that doesn’t fit into a track, it will move to the next row until it finds a space the item can fit in.</p> - -<div id="placement_7"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> - <div>Six</div> - <div>Seven</div> - <div>Eight</div> - <div>Nine</div> - <div>Ten</div> - <div>Eleven</div> - <div>Twelve</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-auto-rows: 100px; - grid-gap: 10px; -} -.wrapper div:nth-child(4n+1) { - grid-column-end: span 2; - grid-row-end: span 2; - background-color: #ffa94d; -} - .wrapper div:nth-child(2) { - grid-column: 3; - grid-row: 2 / 4; - } - .wrapper div:nth-child(5) { - grid-column: 1 / 3; - grid-row: 1 / 3; -} -</pre> - -<p>{{ EmbedLiveSample('placement_7', '500', '770') }}</p> -</div> - -<h3 id="Filling_in_the_gaps">Filling in the gaps</h3> - -<p>So far, other than items we have specifically placed, grid is always progressing forward and keeping items in DOM order. This is generally what you want, if you are laying out a form for example you wouldn’t want the labels and fields to become jumbled up in order to fill in some gap. However sometimes, we are laying things out that don’t have a logical order and we would like to create a layout that doesn’t have gaps in it.</p> - -<p>To do this, add the property {{cssxref("grid-auto-flow")}} with a value of <code>dense</code> to the container. This is the same property you use to change the flow order to <code>column</code>, so if you were working in columns you would add both values <code>grid-auto-flow: column dense</code>.</p> - -<p>Having done this, grid will now backfill the gaps, as it moves through the grid it leaves gaps as before, but then if it finds an item that will fit in a previous gap it will pick it up and take it out of DOM order to place it in the gap. As with any other reordering in grid this does not change the logical order. Tab order for example, will still follow the document order. We will take a look at the potential accessibility issues of Grid Layout in a later guide, but you should take care when creating this disconnect between the visual order and display order.</p> - -<div id="placement_8"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> - <div>Six</div> - <div>Seven</div> - <div>Eight</div> - <div>Nine</div> - <div>Ten</div> - <div>Eleven</div> - <div>Twelve</div> -</div> -</pre> - -<pre class="brush: css">.wrapper div:nth-child(4n+1) { - grid-column-end: span 2; - grid-row-end: span 2; - background-color: #ffa94d; -} - .wrapper div:nth-child(2) { - grid-column: 3; - grid-row: 2 / 4; - } - .wrapper div:nth-child(5) { - grid-column: 1 / 3; - grid-row: 1 / 3; -} -.wrapper { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-auto-rows: 100px; - grid-gap: 10px; - grid-auto-flow: dense; -} -</pre> - -<p>{{ EmbedLiveSample('placement_8', '500', '730') }}</p> -</div> - -<h3 id="Anonymous_grid_items">Anonymous grid items</h3> - -<p>There is a mention in the specification of anonymous grid items. These are created if you have a string of text inside your grid container, that is not wrapped in any other element. In the example below we have three grid items, assuming you had set the parent with a class of <code>grid</code> to <code>display: grid</code>. The first is an anonymous item as it has no enclosing markup, this item will always be dealt with via the auto-placement rules. The other two are grid items enclosed in a div, they might be auto-placed or you could place these with a positioning method onto your grid.</p> - -<pre class="brush: css"><div class="grid"> - I am a string and will become an anonymous item - <div>A grid item</div> - <div>A grid item</div> -</div> -</pre> - -<p>Anonymous items are always auto-placed because there is no way to target them. Therefore if you have some unwrapped text for some reason in your grid, be aware that it might show up somewhere unexpected as it will be auto-placed according to the auto-placement rules.</p> - -<h3 id="Use_cases_for_auto-placement">Use cases for auto-placement</h3> - -<p>Auto-placement is useful whenever you have a collection of items. That could be items that do not have a logical order such as a gallery of photos, or product listing. In that case you might choose to use the dense packing mode to fill in any holes in your grid. In my image gallery example I have some landscape and some portrait images. I have set landscape images – with a class of <code>landscape</code> to span two column tracks. I then use <code>grid-auto-flow: dense</code> to create a densely packed grid.</p> - -<div id="placement_9"> -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); - grid-gap: 10px; - grid-auto-flow: dense; - list-style: none; - margin: 1em auto; - padding: 0; - max-width: 800px; -} -.wrapper li { - border: 1px solid #ccc; -} -.wrapper li.landscape { - grid-column-end: span 2; -} -.wrapper li img { - display: block; - object-fit: cover; - width: 100%; - height: 100%; -} -</pre> - -<pre class="brush: html"><ul class="wrapper"> - <li><img src="https://placehold.it/200x300" alt="placeholder"></li> - <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> - <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> - <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> - <li><img src="https://placehold.it/200x300" alt="placeholder"></li> - <li><img src="https://placehold.it/200x300" alt="placeholder"></li> - <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> - <li><img src="https://placehold.it/200x300" alt="placeholder"></li> - <li><img src="https://placehold.it/200x300" alt="placeholder"></li> - <li><img src="https://placehold.it/200x300" alt="placeholder"></li> -</ul> -</pre> - -<p>{{ EmbedLiveSample('placement_9', '500', '1300') }}</p> -</div> - -<p>Auto-placement can also help you lay out interface items which do have logical order. An example is the definition list in this next example. Definition lists are an interesting challenge to style as they are flat, there is nothing wrapping the groups of <code>dt</code> and <code>dd</code> items. In my example I am allowing auto-placement to place the items, however I have classes that start a <code>dt</code> in column 1, and <code>dd</code> in column 2, this ensure that terms go on one side and definitions on the other - no matter how many of each we have.</p> - -<div id="placement_10"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <dl> - <dt>Mammals</dt> - <dd>Cat</dd> - <dd>Dog</dd> - <dd>Mouse</dd> - <dt>Fish</dt> - <dd>Guppy</dd> - <dt>Birds</dt> - <dd>Pied Wagtail</dd> - <dd>Owl</dd> - </dl> -</div> -</pre> - -<pre class="brush: css">dl { - display: grid; - grid-template-columns: auto 1fr; - max-width: 300px; - margin: 1em; - line-height: 1.4; -} -dt { - grid-column: 1; - font-weight: bold; -} -dd { - grid-column: 2; - } -</pre> - -<p>{{ EmbedLiveSample('placement_10', '500', '230') }}</p> -</div> - -<h2 id="What_can’t_we_do_with_auto-placement_yet">What can’t we do with auto-placement (yet)?</h2> - -<p>There are a couple of things that often come up as questions. Currently we can’t do things like target every other cell of the grid with our items. A related issue may have already come to mind if you followed the last guide about named lines on the grid. It would be to define a rule that said “auto-place items against the next line named “n”, and grid would then skip other lines.There is <a href="https://github.com/w3c/csswg-drafts/issues/796">an issue raised about this</a> on the CSSWG GitHub repository, and you would be welcome to add your own use cases to this.</p> - -<p>It may be that you come up with your own use cases for auto-placement or any other part of grid layout. If you do, raise them as issues or add to an existing issue that could solve your use case. This will help to make future versions of the specification better.</p> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> - <li data-default-state="open"><a href="#"><strong>Guides</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Properties</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> - <ol> - <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> - <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> - <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> - <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> - <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> - <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> - <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> - <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> - </ol> - </li> -</ol> -</section> diff --git a/files/pl/web/css/media_queries/using_media_queries/index.html b/files/pl/web/css/media_queries/using_media_queries/index.html deleted file mode 100644 index 8944867c66..0000000000 --- a/files/pl/web/css/media_queries/using_media_queries/index.html +++ /dev/null @@ -1,643 +0,0 @@ ---- -title: Using media queries -slug: Web/CSS/Media_Queries/Using_media_queries -translation_of: Web/CSS/Media_Queries/Using_media_queries ---- -<p><span class="seoSummary">M<strong>edia query</strong> składa się z jej typu oraz przynajmniej jednego wyrażenia, zadaniem którego jest określenie zakresu działania kodu css, poprzez użycie takich wartości jak szerokość, wysokość czy kolor. Media queries zostały dodane w specyfikacji <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, pozwalając na przygotowanie określonego stylu zawartości strony, w zależności od urządzenia docelowego dla kodu, bez potrzeby zmiany samej treści w każdym z przypadków. </span></p> - -<h2 id="Składnia">Składnia</h2> - -<p>Każda Media query składa się z <a href="/pl/docs/CSS/@media">typu medium docelowego</a>, a także, zgodnie ze specyfikacją CSS3, zawiera jedno lub więcej wyrażeń logicznych (ang. media features), które zwracają wartość true lub false. Wynik query jest prawdziwy, jeżeli typ medium jest zgodny z aktualnym urządzaniem (np. gdy rozdzielczość ekranu jest zgodna z podanymi warunkami). Media query zostanie wykonana, tylko jeśli wszystkie jej wyrażenia <strong>będą prawdziwe.</strong> </p> - -<pre class="brush: html"><!-- Media query użyta na elemencie link --> -<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> - -<!-- Media query w środku arkusza stylów --> -<style> -@media (max-width: 600px) { - .facet_sidebar { - display: none; - } -} -</style> -</pre> - -<p>Jeżeli warunki zostaną spełnione, wskazane arkusze stylów, lub zasady CSS w przypadku stylu osadzonego, zostaną załadowane, zgodnie z zasadą kaskadowości css. Należy zaznaczyć, że załączone style za pomocą znacznika <code>link</code> będą pobierane niezależnie od tego czy media query zostanie wykonana.</p> - -<p>Dopóki nie użyjesz operatorów <code>not</code> lub <code>optional</code>, typ medium nie jest wymagany i dla danej query nadany zostanie typ <code>all</code>.</p> - -<h3 id="Operatory_logiczne">Operatory logiczne</h3> - -<p>Możesz tworzyć zaawansowane media queries za pomocą operatorów logicznych - <code>not</code>, <code>and</code> oraz <code>only</code>. Operator <code>and</code> używany jest do łączenia wielu wyrażeń logicznych, w jedną media query. Nakładają one wymaganie, aby każda zeleżność była prawdziwa, wykonując przez to podany zestaw styli. Operator <code>not</code> używany jest do zanegowanie całej media query. Celem operatora <code>only</code> jest zaaplikowanie CSS'a tylko w przypadku, gdy wszystkie warunki są spełnione ( użyteczne gdy chcemy zapobiec użyciu znacznika media przez starsze przeglądarki. Jak już wspomnieliśmy, używając operatorów <code>only</code> oraz <code>not</code> musisz określić typ medium.</p> - -<p>Możesz również połączyć wiele media queries w listę, oddzielając kolejne wyrażenia media średnikiem. Jeżeli jakakolwiek query jest prawdziwa, całe wyrażenie zwróci true. Takie wyrażenie jest równoznaczne z logicznym operatorem <code>or</code></p> - -<h4 id="and">and</h4> - -<p>The <code>and</code> keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied <code>all</code> media type, could look like this:</p> - -<pre class="brush: css">@media (min-width: 700px) { ... }</pre> - -<p>If, however, you wanted this to apply only if the display is in landscape, you could use an <code>and</code> operator to chain the media features together.</p> - -<pre class="brush: css">@media (min-width: 700px) and (orientation: landscape) { ... }</pre> - -<p>Now the above media query will only return true if the viewport is 700px wide or wider and the display is in landscape. If, however, you only wanted this to apply if the display in question was of the media type TV, you could chain these features with a media type using an <code>and</code> operator.</p> - -<pre class="brush: css">@media tv and (min-width: 700px) and (orientation: landscape) { ... }</pre> - -<p>Now, the above media query will only apply if the media type is TV, the viewport is 700px wide or wider, and the display is in landscape.</p> - -<h4 id="comma-separated_lists">comma-separated lists</h4> - -<p>Comma-separated lists behave like the logical operator <code>or</code> when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. This means the comma-separated media queries can target different media features, types, and states.</p> - -<p>For instance, if you wanted to apply a set of styles if the viewing device either had a minimum width of 700px or was a handheld in landscape, you could write the following:</p> - -<pre class="brush: css">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre> - -<p>Above, if I were on a <code>screen</code> device with a viewport width of 800px, the media statement would return true because the first part, interpreted as <code>@media all and (min-width: 700px)</code> would apply to my device and therefore return true, despite the fact that my <code>screen</code> device would fail the <code>handheld</code> media type check in the second media query. Likewise, if I were on a <code>handheld</code> device held in landscape with a viewport width of 500px, while the first media query would fail due to the viewport width, the second media query would succeed and thus the media statement would return true.</p> - -<h4 id="not">not</h4> - -<p>The <code>not</code> keyword applies to the whole media query and returns true if the media query would otherwise return false (such as <code>monochrome</code> on a color display or a screen width of 600px with a <code>min-width: 700px</code> feature query). A <code>not</code> will only negate the media query it is applied to and not to every media query if present in a comma-separated list of media queries. The <code>not</code> keyword cannot be used to negate an individual feature query, only an entire media query. <span style="line-height: 1.572;">For example, the </span><code style="font-size: 14px;">not</code><span style="line-height: 1.572;"> is evaluated last in the following query:</span></p> - -<pre class="brush: css" style="font-size: 14px;">@media not all and (monochrome) { ... } -</pre> - -<p>This means that the query is evaluated like this:</p> - -<pre class="brush: css" style="font-size: 14px;">@media not (all and (monochrome)) { ... } -</pre> - -<p>... rather than like this:</p> - -<pre class="brush: css" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre> - -<p>As another example, look at the following media query:</p> - -<pre class="brush: css" style="font-size: 14px;">@media not screen and (color), print and (color) -</pre> - -<p>It is evaluated like this:</p> - -<pre class="brush: css" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre> - -<h4 id="only">only</h4> - -<p><span style="line-height: 21px;">The </span><code style="font-size: 14px;">only</code><span style="line-height: 21px;"> keyword prevents older browsers that do not support media queries with media features from applying the given styles:</span></p> - -<pre class="brush: html"><link rel="stylesheet" media="only screen and (color)" href="example.css" /> -</pre> - -<h3 id="Pseudo-BNF_(for_those_of_you_that_like_that_kind_of_thing)">Pseudo-BNF (for those of you that like that kind of thing)</h3> - -<pre>media_query_list: <media_query> [, <media_query> ]* -media_query: [[only | not]? <media_type> [ and <expression> ]*] - | <expression> [ and <expression> ]* -expression: ( <media_feature> [: <value>]? ) -media_type: all | aural | braille | handheld | print | - projection | screen | tty | tv | embossed -media_feature: width | min-width | max-width - | height | min-height | max-height - | device-width | min-device-width | max-device-width - | device-height | min-device-height | max-device-height - | aspect-ratio | min-aspect-ratio | max-aspect-ratio - | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio - | color | min-color | max-color - | color-index | min-color-index | max-color-index - | monochrome | min-monochrome | max-monochrome - | resolution | min-resolution | max-resolution - | scan | grid</pre> - -<p>Media queries are case insensitive. Media queries involving unknown media types are always false.</p> - -<div class="note"><strong>Note:</strong> Parentheses are required around expressions; failing to use them is an error.</div> - -<h2 id="Media_features">Media features</h2> - -<p>Most media features can be prefixed with "min-" or "max-" to express "greater or equal to" or "less than or equal to" constraints. This avoids using the "<" and ">" symbols, which would conflict with HTML and XML. If you use a media feature without specifying a value, the expression resolves to true if the feature's value is non-zero.</p> - -<div class="note"><strong>Note:</strong> If a media feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false. For example, querying the aspect ratio of an aural device always results in false.</div> - -<h3 id="color">color</h3> - -<p><strong>Value:</strong> {{cssxref("<color>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Indicates the number of bits per color component of the output device. If the device is not a color device, this value is zero.</p> - -<div class="note"><strong>Note:</strong> If the color components have different numbers of bits per color component, the smallest number is used. For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component. If the device uses indexed colors, the minimum number of bits per color component in the color table is used.</div> - -<h4 id="Examples">Examples</h4> - -<p>To apply a style sheet to all color devices:</p> - -<pre class="brush: css">@media all and (color) { ... } -</pre> - -<p>To apply a style sheet to devices with at least 4 bits per color component:</p> - -<pre class="brush: css">@media all and (min-color: 4) { ... } -</pre> - -<h3 id="color-index">color-index</h3> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Indicates the number of entries in the color look-up table for the output device.</p> - -<h4 id="Examples_2">Examples</h4> - -<p>To indicate that a style sheet should apply to all devices using indexed color, you can do:</p> - -<pre class="brush: css">@media all and (color-index) { ... } -</pre> - -<p>To apply a style sheet to indexed color devices with at least 256 colors:</p> - -<pre class="brush: html"><link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> -</pre> - -<h3 id="aspect-ratio">aspect-ratio</h3> - -<p><strong>Value:</strong> {{cssxref("<ratio>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Describes the aspect ratio of the targeted display area of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).</p> - -<h4 id="Example">Example</h4> - -<p>The following selects a special style sheet to use for when the display area is at least as wide as it is high.</p> - -<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) { ... }</pre> - -<p>This selects the style when the aspect ratio is either 1:1 or greater. In other words, these styles will only be applied when the viewing area is square or landscape.</p> - -<h3 id="device-aspect-ratio">device-aspect-ratio</h3> - -<p><strong>Value:</strong> {{cssxref("<ratio>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Describes the aspect ratio of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).</p> - -<h4 id="Example_2">Example</h4> - -<p>The following selects a special style sheet to use for widescreen displays.</p> - -<pre class="brush: css">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre> - -<p>This selects the style when the aspect ratio is either 16:9 or 16:10.</p> - -<h3 id="device-height">device-height</h3> - -<p><strong>Value:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p> - -<h4 id="Example_3">Example</h4> - -<p>To apply a style sheet to a document when displayed on a screen that is less than 800 pixels long, you can use this:</p> - -<pre class="brush: html"><link rel="stylesheet" media="screen and (max-device-height: 799px)" /> -</pre> - -<h3 id="device-width">device-width</h3> - -<p><strong>Value:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p> - -<h4 id="Example_4">Example</h4> - -<p>To apply a style sheet to a document when displayed on a screen that is less than 800 pixels wide, you can use this:</p> - -<pre class="brush: html" style="font-size: 14px;"><link rel="stylesheet" media="screen and (max-device-width: 799px)" /></pre> - -<h3 id="grid">grid</h3> - -<p><strong>Value:</strong> <code><mq-boolean></code> which is an {{cssxref("<integer>")}} that can only have the <code>0</code> and <code>1</code> value.<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> all<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1. Otherwise it is zero.</p> - -<h4 id="Example_5">Example</h4> - -<p>To apply a style to handheld devices with a 15-character or narrower display:</p> - -<pre class="brush: css">@media handheld and (grid) and (max-width: 15em) { ... } -</pre> - -<div class="note"><strong>Note:</strong> The "em" unit has a special meaning for grid devices; since the exact width of an "em" can't be determined, 1em is assumed to be the width of one grid cell horizontally, and the height of one cell vertically.</div> - -<h3 id="height">height</h3> - -<p><strong>Value:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>The <code>height</code> media feature describes the height of the output device's rendering surface (such as the height of the viewport or of the page box on a printer).</p> - -<div class="note"><strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div> - -<h3 id="monochrome">monochrome</h3> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Indicates the number of bits per pixel on a monochrome (greyscale) device. If the device isn't monochrome, the device's value is 0.</p> - -<h4 id="Examples_3">Examples</h4> - -<p>To apply a style sheet to all monochrome devices:</p> - -<pre class="brush: css">@media all and (monochrome) { ... } -</pre> - -<p>To apply a style sheet to monochrome devices with at least 8 bits per pixel:</p> - -<pre class="brush: css">@media all and (min-monochrome: 8) { ... } -</pre> - -<h3 id="orientation">orientation</h3> - -<p><strong>Value:</strong> <code>landscape</code> | <code>portrait</code><br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.</p> - -<h4 id="Example_6">Example</h4> - -<p>To apply a style sheet only in portrait orientation:</p> - -<pre class="brush: css">@media all and (orientation: portrait) { ... }</pre> - -<div class="note"><strong>Note:</strong> This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.</div> - -<h3 id="resolution">resolution</h3> - -<p><strong>Value:</strong> {{cssxref("<resolution>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Indicates the resolution (pixel density) of the output device. The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).</p> - -<h4 id="Example_7">Example</h4> - -<p>To apply a style sheet to devices with at least 300 dots per inch of resolution:</p> - -<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... } -</pre> - -<p>To replace the old <span style="font-family: courier new,andale mono,monospace; line-height: normal;">(min-device-pixel-ratio: 2) </span>syntax:</p> - -<pre class="brush: css">@media screen and (min-resolution: 2dppx) { ... }</pre> - -<h3 id="scan">scan</h3> - -<p><strong>Value:</strong> <code>progressive</code> | <code>interlace</code><br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/TV")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>Describes the scanning process of television output devices.</p> - -<h4 id="Example_8">Example</h4> - -<p>To apply a style sheet only to progressive scanning televisions:</p> - -<pre class="brush: css">@media tv and (scan: progressive) { ... } -</pre> - -<h3 id="width">width</h3> - -<p><strong>Value:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>The <code>width</code> media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).</p> - -<div class="note"><strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div> - -<h4 id="Examples_4">Examples</h4> - -<p>If you want to specify a style sheet for handheld devices, or screen devices with a width greater than 20em, you can use this query:</p> - -<pre class="brush: css">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... } -</pre> - -<p>This media query specifies a style sheet that applies to printed media wider than 8.5 inches:</p> - -<pre class="brush: html"><link rel="stylesheet" media="print and (min-width: 8.5in)" - href="http://foo.com/mystyle.css" /> -</pre> - -<p>This query specifies a style sheet that is usable when the viewport is between 500 and 800 pixels wide:</p> - -<pre class="brush: css">@media screen and (min-width: 500px) and (max-width: 800px) { ... } -</pre> - -<h2 id="Mozilla-specific_media_features">Mozilla-specific media features</h2> - -<p>Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.</p> - -<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user has configured their device to use the "Graphite" appearance on Mac OS X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS X, this is 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}</p> - -<p><strong>Value:</strong> {{cssxref("<number>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Gives the number of device pixels per CSS pixel.</p> - -<div class="geckoVersionNote"> -<p><strong>Do not use this feature. </strong></p> - -<p>Use the <code>resolution</code> feature with the <code>dppx</code> unit instead.<br> - <br> - <code>-moz-device-pixel-ratio</code> may be used for compatibility with Firefox older than 16 and <code>-webkit-device-pixel-ratio</code> with WebKit-based browsers that do not support <code>dppx</code>.</p> - -<p>Example:</p> - -<pre>@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */ - (min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */ - (min-resolution: 2dppx), /* The standard way */ - (min-resolution: 192dpi) /* dppx fallback */ </pre> - -<p>See this <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">CSSWG article</a> for compatibility good practices regarding <code>resolution</code> and <code>dppx</code>.</p> -</div> - -<div class="note"><strong>Note</strong>: This media feature is also implemented by Webkit and by <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 for Windows Phone 8.1</a> as <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. The min and max prefixes as implemented by Gecko are named <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> and <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; but the same prefixes as implemented by Webkit are named <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> and <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div> - -<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p> - -<p><strong>Value:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8 | windows-win10</code><br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>Indicates which operating system version is currently being used. Currently only implemented on Windows. Possible values are:</p> - -<ul> - <li><code>windows-xp</code></li> - <li><code>windows-vista</code></li> - <li><code>windows-win7</code></li> - <li><code>windows-win8</code></li> - <li><code>windows-win10</code></li> -</ul> - -<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current operating system version.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<h4 id="Example_9">Example</h4> - -<p>You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p> - -<p><strong>Value:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:</p> - -<ul> - <li><code>aero</code></li> - <li><code>luna-blue</code></li> - <li><code>luna-olive</code></li> - <li><code>luna-silver</code></li> - <li><code>royale</code></li> - <li><code>generic</code></li> - <li><code>zune</code></li> -</ul> - -<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatChrome("21") }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>{{ CompatIE("9.0") }}</td> - <td>{{ CompatOpera("9") }}</td> - <td>{{ CompatSafari("4") }}</td> - </tr> - <tr> - <td>grid</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }} [1]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>resolution</td> - <td>{{ CompatChrome("29") }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }} [2]<br> - {{ CompatGeckoDesktop("8.0") }} [3]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>scan</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }} [4]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] <code>grid</code> media type is not supported</p> - -<p>[2] Supports {{cssxref("<integer>")}} values;</p> - -<p>[3] Supports {{cssxref("<number>")}} values, as per the spec.</p> - -<p>[4] <code>tv</code> media type is not supported</p> - -<p> </p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li> - <li><a class="internal" href="/en-US/docs/CSS/@media" title="En/CSS/@media">Media types</a></li> - <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li> - <li><a href="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/">List of mobile and tablet viewport sizes with pixel ratios and physical sizes</a></li> - <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a> by David Walsh</li> -</ul> diff --git a/files/pl/web/guide/html/editable_content/index.html b/files/pl/web/guide/html/editable_content/index.html deleted file mode 100644 index 77abe792b7..0000000000 --- a/files/pl/web/guide/html/editable_content/index.html +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: Making content editable -slug: Web/Guide/HTML/Editable_content -translation_of: Web/Guide/HTML/Editable_content ---- -<p><span class="seoSummary">In progress. In HTML, any element can be editable. By using some JavaScript event handlers, you can transform your web page into a full and fast rich text editor. This article provides some information about this functionality.</span></p> - -<h2 id="How_does_it_work">How does it work?</h2> - -<p>All you have to do is set the {{htmlattrxref("contenteditable")}} attribute on nearly any HTML element to make it editable.</p> - -<p>Here's a simple example which creates a {{HTMLElement("div")}} element whose contents the user can edit.</p> - -<pre class="brush: html"><div contenteditable="true"> - This text can be edited by the user. -</div></pre> - -<p>Here's the above HTML in action:</p> - -<p>{{ EmbedLiveSample('How_does_it_work') }}</p> - -<h2 id="Executing_commands">Executing commands</h2> - -<p>When an HTML element has <code>contenteditable</code> set to <code>true</code>, the {{ domxref("document.execCommand()") }} method is made available. This lets you run <a href="/en-US/docs/Web/API/document.execCommand#Commands">commands</a> to manipulate the contents of the editable region. Most commands affect the document's selection by, for example, applying a style to the text (bold, italics, etc), while others insert new elements (like adding a link) or affect an entire line (indenting). When using <code>contentEditable</code>, calling <code>execCommand()</code> will affect the currently active editable element.</p> - -<h2 id="Differences_in_markup_generation">Differences in markup generation</h2> - -<p>Use of <code>contenteditable</code> across different browsers has been painful for a long time because of the differences in generated markup between browsers. For example, even something as simple as what happens when you press Enter/Return to create a new line of text inside an editable element was handled differently across the major browsers (Firefox inserted {{htmlelement("br")}} elements, IE/Opera used {{htmlelement("p")}}, Chrome/Safari used {{htmlelement("div")}}).</p> - -<p>Fortunately, in modern browsers things are somewhat more consistent. As of <a href="/en-US/docs/Mozilla/Firefox/Releases/55">Firefox 55</a>, Firefox has been updated to wrap the separate lines in {{htmlelement("div")}} elements, matching the behavior of Chrome, modern Opera, Edge, and Safari.</p> - -<p>Try it out in the above example.</p> - -<div class="note"> -<p><strong>Note</strong>: Internet Explorer, which is no longer being developed, uses {{htmlelement("p")}} elements instead of <code><div></code>.</p> -</div> - -<p>If you want to use a different paragraph separator, the above browsers all support {{domxref("document.execCommand")}}, which provides a <code>DefaultParagraphSeparator</code> command to allow you to change it. For example, to use {{htmlelement("p")}} elements:</p> - -<pre class="language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">execCommand</span><span class="punctuation token">(</span><span class="string token">"DefaultParagraphSeparator"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<h2 id="Security">Security</h2> - -<p>For security reasons, Firefox doesn't let JavaScript code use clipboard related features (copy, paste, etc.) by default. You can enable them by setting the preferences shown below using <code>about:config</code>:</p> - -<pre class="code">user_pref("capability.policy.policynames", "allowclipboard"); -user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org"); -user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess"); -user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre> - -<h2 id="Example_A_simple_but_complete_rich_text_editor">Example: A simple but complete rich text editor</h2> - -<div style="height: 500px; width: auto; overflow: auto;"> -<pre class="brush: html"><!doctype html> -<html> -<head> -<title>Rich Text Editor</title> -<script type="text/javascript"> -var oDoc, sDefTxt; - -function initDoc() { - oDoc = document.getElementById("textBox"); - sDefTxt = oDoc.innerHTML; - if (document.compForm.switchMode.checked) { setDocMode(true); } -} - -function formatDoc(sCmd, sValue) { - if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); } -} - -function validateMode() { - if (!document.compForm.switchMode.checked) { return true ; } - alert("Uncheck \"Show HTML\"."); - oDoc.focus(); - return false; -} - -function setDocMode(bToSource) { - var oContent; - if (bToSource) { - oContent = document.createTextNode(oDoc.innerHTML); - oDoc.innerHTML = ""; - var oPre = document.createElement("pre"); - oDoc.contentEditable = false; - oPre.id = "sourceText"; - oPre.contentEditable = true; - oPre.appendChild(oContent); - oDoc.appendChild(oPre); - } else { - if (document.all) { - oDoc.innerHTML = oDoc.innerText; - } else { - oContent = document.createRange(); - oContent.selectNodeContents(oDoc.firstChild); - oDoc.innerHTML = oContent.toString(); - } - oDoc.contentEditable = true; - } - oDoc.focus(); -} - -function printDoc() { - if (!validateMode()) { return; } - var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); - oPrntWin.document.open(); - oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>"); - oPrntWin.document.close(); -} -</script> -<style type="text/css"> -.intLink { cursor: pointer; } -img.intLink { border: 0; } -#toolBar1 select { font-size:10px; } -#textBox { - width: 540px; - height: 200px; - border: 1px #000000 solid; - padding: 12px; - overflow: scroll; -} -#textBox #sourceText { - padding: 0; - margin: 0; - min-width: 498px; - min-height: 200px; -} -#editMode label { cursor: pointer; } -</style> -</head> -<body onload="initDoc();"> -<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;"> -<input type="hidden" name="myDoc"> -<div id="toolBar1"> -<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;"> -<option selected>- formatting -</option> -<option value="h1">Title 1 &lt;h1&gt;</option> -<option value="h2">Title 2 &lt;h2&gt;</option> -<option value="h3">Title 3 &lt;h3&gt;</option> -<option value="h4">Title 4 &lt;h4&gt;</option> -<option value="h5">Title 5 &lt;h5&gt;</option> -<option value="h6">Subtitle &lt;h6&gt;</option> -<option value="p">Paragraph &lt;p&gt;</option> -<option value="pre">Preformatted &lt;pre&gt;</option> -</select> -<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;"> -<option class="heading" selected>- font -</option> -<option>Arial</option> -<option>Arial Black</option> -<option>Courier New</option> -<option>Times New Roman</option> -</select> -<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;"> -<option class="heading" selected>- size -</option> -<option value="1">Very small</option> -<option value="2">A bit small</option> -<option value="3">Normal</option> -<option value="4">Medium-large</option> -<option value="5">Big</option> -<option value="6">Very big</option> -<option value="7">Maximum</option> -</select> -<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;"> -<option class="heading" selected>- color -</option> -<option value="red">Red</option> -<option value="blue">Blue</option> -<option value="green">Green</option> -<option value="black">Black</option> -</select> -<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;"> -<option class="heading" selected>- background -</option> -<option value="red">Red</option> -<option value="green">Green</option> -<option value="black">Black</option> -</select> -</div> -<div id="toolBar2"> -<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" /> -<img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC"> -<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" /> -<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" /> -<img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="> -<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" /> -<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" /> -<img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" /> -<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" /> -<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" /> -<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" /> -<img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" /> -<img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" /> -<img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" /> -<img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" /> -<img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" /> -<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" /> -<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" /> -<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" /> -<img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" /> -</div> -<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div> -<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p> -<p><input type="submit" value="Send" /></p> -</form> -</body> -</html> -</pre> -</div> - -<div class="note"><strong>Note:</strong> if you want to see how to standardize the creation and the insertion of your editor in your page, please see our <a class="internal" href="/@api/deki/files/6243/=rich-text-editor.zip" title="rich-text-editor.zip">more complete rich-text editor example</a>.</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("HTMLElement.contentEditable")}}</li> - <li>The {{htmlattrxref("contenteditable")}} global attribute</li> - <li><a href="/en-US/docs/Mozilla/Projects/Midas">Midas</a> (the scriptable text editor component)</li> - <li>{{cssxref("caret-color")}}, which lets you set the color of the text insertion caret</li> -</ul> diff --git a/files/pl/web/guide/performance/index.html b/files/pl/web/guide/performance/index.html deleted file mode 100644 index 00c4b9d7fe..0000000000 --- a/files/pl/web/guide/performance/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Optimization and performance -slug: Web/Guide/Performance -tags: - - Landing - - NeedsTranslation - - Optimization - - Performance - - TopicStub - - Web -translation_of: Web/Guide/Performance ---- -<p>When building modern Web apps and sites, it's important to make your content perform well. That is, to make it work quickly and efficiently. This lets it work effectively both for users of powerful desktop systems as well as for handheld devices with less power.</p> -<p>{{LandingPageListSubpages}}</p> diff --git a/files/pl/web/html/element/heading_elements/index.html b/files/pl/web/html/element/heading_elements/index.html deleted file mode 100644 index c3eafe6774..0000000000 --- a/files/pl/web/html/element/heading_elements/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: '<h1>–<h6>: The HTML Section Heading elements' -slug: Web/HTML/Element/Heading_Elements -translation_of: Web/HTML/Element/Heading_Elements ---- -<div>{{HTMLRef}}</div> - -<p id="Summary"><span class="seoSummary">Element języka <strong>HTML <code><h1></code>–<code><h6></code> </strong>reprezentuje sześć poziomów zawartości nagłówka. Zawartość nagłówka <code><h1></code> jest prezentowana największą czcionką, a nagłówków <code><h6></code> najmniejszą.</span></p> - -<div>{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}</div> - -<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, heading content, palpable content.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Permitted parents</th> - <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>; don't use a heading element as a child of the {{HTMLElement("hgroup")}} element — it is now deprecated.</td> - </tr> - <tr> - <th scope="row">Implicit ARIA role</th> - <td><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role">heading</a></td> - </tr> - <tr> - <th scope="row">Permitted ARIA roles</th> - <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}} or {{ARIARole("none")}}</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLHeadingElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes">Attributes</h2> - -<p>These elements only include the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> - -<div class="note"> -<p>The <code>align</code> attribute is obsolete; don't use it.</p> -</div> - -<h2 id="Usage_notes">Usage notes</h2> - -<ul> - <li>Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.</li> - <li>Avoid using heading tags to resize text. Instead, use the {{glossary("CSS")}} {{cssxref("font-size")}} property. Headings use size to indicate their relative importance, but CSS is preferred for general-purpose resizing.</li> - <li>Avoid skipping heading levels: always start from <code><h1></code>, next use <code><h2></code> and so on.</li> - <li>You should only use one <code><h1></code> per page. Using more than one will not result in an error, but using only one is seen as a best practice. It makes logical sense — <code><h1></code> is the most important heading, and tells you what the purpose of the overall page is. You wouldn't have a book with more than one title, or a movie with more than one name! Having a single top-level title is also arguably better for screenreader users, and {{glossary("SEO")}}.</li> -</ul> - -<h2 id="Examples">Examples</h2> - -<h3 id="All_headings">All headings</h3> - -<p>The following code shows all the heading levels, in use.</p> - -<pre class="brush: html notranslate"><h1>Heading level 1</h1> -<h2>Heading level 2</h2> -<h3>Heading level 3</h3> -<h4>Heading level 4</h4> -<h5>Heading level 5</h5> -<h6>Heading level 6</h6> -</pre> - -<p>Here is the result of this code:</p> - -<p>{{ EmbedLiveSample('All_headings', '280', '300', '') }}</p> - -<h3 id="Example_page">Example page</h3> - -<p>The following code shows a few headings with some content under them.</p> - -<pre class="brush: html notranslate"><h1>Heading elements</h1> -<h2>Summary</h2> -<p>Some text here...</p> - -<h2>Examples</h2> -<h3>Example 1</h3> -<p>Some text here...</p> - -<h3>Example 2</h3> -<p>Some text here...</p> - -<h2>See also</h2> -<p>Some text here...</p> -</pre> - -<p>Here is the result of this code:</p> - -<p>{{ EmbedLiveSample('Example_page', '280', '480', '') }}</p> - -<h2 id="Accessibility_concerns">Accessibility concerns</h2> - -<h3 id="Navigation">Navigation</h3> - -<p>A common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.</p> - -<h4 id="Dont">Don't</h4> - -<pre class="brush: html example-bad notranslate"><h1>Heading level 1</h1> -<h3>Heading level 3</h3> -<h4>Heading level 4</h4> -</pre> - -<h4 id="Do">Do</h4> - -<pre class="brush: html example-good notranslate"><h1>Heading level 1</h1> -<h2>Heading level 2</h2> -<h3>Heading level 3</h3> -</pre> - -<h4 id="Nesting">Nesting</h4> - -<p>Headings may be nested as subsections to reflect the organization of the content of the page. Most screen readers can also generate an ordered list of all the headings on a page, which can help a person quickly determine the hierarchy of the content:</p> - -<ol> - <li><code>h1</code> Beetles - - <ol> - <li><code>h2</code> Etymology</li> - <li><code>h2</code> Distribution and Diversity</li> - <li><code>h2</code> Evolution - <ol> - <li><code>h3</code> Late Paleozoic</li> - <li><code>h3</code> Jurassic</li> - <li><code>h3</code> Cretaceous</li> - <li><code>h3</code> Cenozoic</li> - </ol> - </li> - <li><code>h2</code> External Morphology - <ol> - <li><code>h3</code> Head - <ol> - <li><code>h4</code> Mouthparts</li> - </ol> - </li> - <li><code>h3</code> Thorax - <ol> - <li><code>h4</code> Prothorax</li> - <li><code>h4</code> Pterothorax</li> - </ol> - </li> - <li><code>h3</code> Legs</li> - <li><code>h3</code> Wings</li> - <li><code>h3</code> Abdomen</li> - </ol> - </li> - </ol> - </li> -</ol> - -<p>When headings are nested, heading levels may be "skipped" when closing a subsection.</p> - -<ul> - <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Headings • Page Structure • WAI Web Accessibility Tutorials</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html">Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h3 id="Labeling_section_content">Labeling section content</h3> - -<p>Another common navigation technique for users of screen reading software is to generate a list of <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">sectioning content</a> and use it to determine the page's layout.</p> - -<p>Sectioning content can be labeled using a combination of the <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> and {{htmlattrxref("id")}} attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.</p> - -<h4 id="Example">Example</h4> - -<pre class="brush: html notranslate"><header> - <nav aria-labelledby="primary-navigation"> - <h2 id="primary-navigation">Primary navigation</h2> - <!-- navigation items --> - </nav> -</header> - -<!-- page content --> - -<footer> - <nav aria-labelledby="footer-navigation"> - <h2 id="footer-navigation">Footer navigation</h2> - <!-- navigation items --> - </nav> -</footer> -</pre> - -<p>In this example, screen reading technology would announce that there are two {{HTMLElement("nav")}} sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each <code>nav</code> element's contents to determine their purpose.</p> - -<ul> - <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li> - <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby">Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials</a></li> -</ul> - -<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', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1-h2-h3-h4-h5-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.elements.h1")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{HTMLElement("p")}}</li> - <li>{{HTMLElement("div")}}</li> - <li>{{HTMLElement("section")}}</li> -</ul> diff --git a/files/pl/web/html/element/input/button/index.html b/files/pl/web/html/element/input/button/index.html deleted file mode 100644 index 8c97a75321..0000000000 --- a/files/pl/web/html/element/input/button/index.html +++ /dev/null @@ -1,341 +0,0 @@ ---- -title: <input type="button"> -slug: Web/HTML/Element/Input/button -translation_of: Web/HTML/Element/input/button ---- -<div>{{HTMLRef}}</div> - -<p><span class="seoSummary">{{HTMLElement("input")}} elements of type <strong><code>button</code></strong> are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the {{event("click")}} event).</span></p> - -<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}</div> - - - -<div class="note"> -<p><strong>Note</strong>: While <code><input></code> elements of type <code>button</code> are still perfectly valid HTML, the newer {{HTMLElement("button")}} element is now the favored way to create buttons. Given that a {{HTMLElement("button")}}’s label text is inserted between the opening and closing tags, you can include HTML in the label, even images.</p> -</div> - -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Value")}}</strong></td> - <td>A {{domxref("DOMString")}} used as the button's label</td> - </tr> - <tr> - <td><strong>Events</strong></td> - <td>{{event("click")}}</td> - </tr> - <tr> - <td><strong>Supported common attributes</strong></td> - <td>{{htmlattrxref("type", "input")}}, and {{htmlattrxref("value", "input")}}</td> - </tr> - <tr> - <td><strong>IDL attributes</strong></td> - <td><code>value</code></td> - </tr> - <tr> - <td><strong>Methods</strong></td> - <td>None</td> - </tr> - </tbody> -</table> - -<h2 id="Value">Value</h2> - -<p>An <code><input type="button"></code> elements' {{htmlattrxref("value", "input")}} attribute contains a {{domxref("DOMString")}} that is used as the button's label.</p> - -<div id="summary-example3"> -<pre class="brush: html notranslate"><input type="button" value="Click Me"></pre> -</div> - -<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> - -<p>If you don't specify a <code>value</code>, you get an empty button:</p> - -<div id="summary-example1"> -<pre class="brush: html notranslate"><input type="button"></pre> -</div> - -<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> - -<h2 id="Using_buttons">Using buttons</h2> - -<p><code><input type="button"></code> elements have no default behavior (their cousins,<code> <a href="/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> and <code><a href="/en-US/docs/Web/HTML/Element/input/reset"><input type="reset"></a></code> are used to submit and reset forms, respectively). To make buttons do anything, you have to write JavaScript code to do the work.</p> - -<h3 id="A_simple_button">A simple button</h3> - -<p>We'll begin by creating a simple button with a {{event("click")}} event handler that starts our machine (well, it toggles the <code>value</code> of the button and the text content of the following paragraph):</p> - -<pre class="brush: html notranslate"><form> - <input type="button" value="Start machine"> -</form> -<p>The machine is stopped.</p></pre> - -<pre class="brush: js notranslate">const button = document.querySelector('input'); -const paragraph = document.querySelector('p'); - -button.addEventListener('click', updateButton); - -function updateButton() { - if (button.value === 'Start machine') { - button.value = 'Stop machine'; - paragraph.textContent = 'The machine has started!'; - } else { - button.value = 'Start machine'; - paragraph.textContent = 'The machine is stopped.'; - } -}</pre> - -<p>The script gets a reference to the {{domxref("HTMLInputElement")}} object representing the <code><input></code> in the DOM, saving this refence in the variable <code>button</code>. {{domxref("EventTarget.addEventListener", "addEventListener()")}} is then used to establish a function that will be run when {{event("click")}} events occur on the button.</p> - -<p>{{EmbedLiveSample("A_simple_button", 650, 100)}}</p> - -<h3 id="Adding_keyboard_shortcuts_to_buttons">Adding keyboard shortcuts to buttons</h3> - -<p>Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any {{HTMLElement("input")}} for which it makes sense — you use the {{htmlattrxref("accesskey")}} global attribute.</p> - -<p>In this example, <kbd>s</kbd> is specified as the access key (you'll need to press <kbd>s</kbd> plus the particular modifier keys for your browser/OS combination; see <a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a> for a useful list of those).</p> - -<div id="accesskey-example1"> -<pre class="brush: html notranslate"><form> - <input type="button" value="Start machine" accesskey="s"> -</form> -<p>The machine is stopped.</p> -</pre> -</div> - -<div class="hidden"> -<pre class="brush: js notranslate">const button = document.querySelector('input'); -const paragraph = document.querySelector('p'); - -button.addEventListener('click', updateButton); - -function updateButton() { - if (button.value === 'Start machine') { - button.value = 'Stop machine'; - paragraph.textContent = 'The machine has started!'; - } else { - button.value = 'Start machine'; - paragraph.textContent = 'The machine is stopped.'; - } -}</pre> -</div> - -<p>{{EmbedLiveSample("Adding_keyboard_shortcuts_to_buttons", 650, 100)}}</p> - -<div class="note"> -<p><strong>Note</strong>: The problem with the above example of course is that the user will not know what the access key is! In a real site, you'd have to provide this information in a way that doesn't intefere with the site design (for example by providing an easily accessible link that points to information on what the site accesskeys are).</p> -</div> - -<h3 id="Disabling_and_enabling_a_button">Disabling and enabling a button</h3> - -<p>To disable a button, simply specify the {{htmlattrxref("disabled")}} global attribute on it, like so:</p> - -<div id="disable-example1"> -<pre class="brush: html notranslate"><input type="button" value="Disable me" disabled></pre> -</div> - -<p>You can enable and disable buttons at run time by simply setting <code>disabled</code> to <code>true</code> or <code>false</code>. In this example our button starts off enabled, but if you press it, it is disabled using <code>button.disabled = true</code>. A {{domxref("WindowTimers.setTimeout","setTimeout()")}} function is then used to reset the button back to its enabled state after two seconds.</p> - -<div class="hidden"> -<h6 id="Hidden_code_1">Hidden code 1</h6> - -<pre class="brush: html notranslate"><input type="button" value="Enabled"></pre> - -<pre class="brush: js notranslate">const button = document.querySelector('input'); - -button.addEventListener('click', disableButton); - -function disableButton() { - button.disabled = true; - button.value = 'Disabled'; - window.setTimeout(function() { - button.disabled = false; - button.value = 'Enabled'; - }, 2000); -}</pre> -</div> - -<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p> - -<p>If the <code>disabled</code> attribute isn't specified, the button inherits its <code>disabled</code> state from its parent element. This makes it possible to enable and disable groups of elements all at once by enclosing them in a container such as a {{HTMLElement("fieldset")}} element, and then setting <code>disabled</code> on the container.</p> - -<p>The example below shows this in action. This is very similar to the previous example, except that the <code>disabled</code> attribute is set on the <code><fieldset></code> when the first button is pressed — this causes all three buttons to be disabled until the two second timeout has passed.</p> - -<div class="hidden"> -<h6 id="Hidden_code_2">Hidden code 2</h6> - -<pre class="brush: html notranslate"><fieldset> - <legend>Button group</legend> - <input type="button" value="Button 1"> - <input type="button" value="Button 2"> - <input type="button" value="Button 3"> -</fieldset></pre> - -<pre class="brush: js notranslate">const button = document.querySelector('input'); -const fieldset = document.querySelector('fieldset'); - -button.addEventListener('click', disableButton); - -function disableButton() { - fieldset.disabled = true; - window.setTimeout(function() { - fieldset.disabled = false; - }, 2000); -}</pre> -</div> - -<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p> - -<div class="note"> -<p><strong>Note</strong>: Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p> -</div> - -<h2 id="Validation">Validation</h2> - -<p>Buttons don't participate in constraint validation; they have no real value to be constrained.</p> - -<h2 id="Examples">Examples</h2> - -<p>The below example shows a very simple drawing app created using a {{htmlelement("canvas")}} element and some simple CSS and JavaScript (we'll hide the CSS for brevity). The top two controls allow you to choose the color and size of the drawing pen. The button, when clicked, invokes a function that clears the canvas.</p> - -<pre class="brush: html notranslate"><div class="toolbar"> - <input type="color" aria-label="select pen color"> - <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span> - <input type="button" value="Clear canvas"> -</div> - -<canvas class="myCanvas"> - <p>Add suitable fallback here.</p> -</canvas></pre> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - background: #ccc; - margin: 0; - overflow: hidden; -} - -.toolbar { - background: #ccc; - width: 150px; - height: 75px; - padding: 5px; -} - -input[type="color"], input[type="button"] { - width: 90%; - margin: 0 auto; - display: block; -} - -input[type="range"] { - width: 70%; -} - -span { - position: relative; - bottom: 5px; -}</pre> -</div> - -<pre class="brush: js notranslate">var canvas = document.querySelector('.myCanvas'); -var width = canvas.width = window.innerWidth; -var height = canvas.height = window.innerHeight-85; -var ctx = canvas.getContext('2d'); - -ctx.fillStyle = 'rgb(0,0,0)'; -ctx.fillRect(0,0,width,height); - -var colorPicker = document.querySelector('input[type="color"]'); -var sizePicker = document.querySelector('input[type="range"]'); -var output = document.querySelector('.output'); -var clearBtn = document.querySelector('input[type="button"]'); - -// covert degrees to radians -function degToRad(degrees) { - return degrees * Math.PI / 180; -}; - -// update sizepicker output value - -sizePicker.oninput = function() { - output.textContent = sizePicker.value; -} - -// store mouse pointer coordinates, and whether the button is pressed -var curX; -var curY; -var pressed = false; - -// update mouse pointer coordinates -document.onmousemove = function(e) { - curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); - curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); -} - -canvas.onmousedown = function() { - pressed = true; -}; - -canvas.onmouseup = function() { - pressed = false; -} - -clearBtn.onclick = function() { - ctx.fillStyle = 'rgb(0,0,0)'; - ctx.fillRect(0,0,width,height); -} - -function draw() { - if(pressed) { - ctx.fillStyle = colorPicker.value; - ctx.beginPath(); - ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false); - ctx.fill(); - } - - requestAnimationFrame(draw); -} - -draw();</pre> - -<p>{{EmbedLiveSample("Examples", '100%', 600)}}</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">Comments</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.elements.input.input-button")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it.</li> - <li>The more modern {{HTMLElement("button")}} element.</li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li> -</ul> diff --git a/files/pl/web/html/element/meta/index.html b/files/pl/web/html/element/meta/index.html deleted file mode 100644 index 8fbc0241f3..0000000000 --- a/files/pl/web/html/element/meta/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: '<meta>: Element metadanych na poziomie dokumentów' -slug: Web/HTML/Element/meta -translation_of: Web/HTML/Element/meta ---- -<div>{{HTMLRef}}</div> - -<p><strong>Element HTML <code><meta></code></strong> reprezentuje {{Glossary("Metadata","metadane")}}, które nie mogą być reprezentowane przez inne elementy związane z metadanymi w HTML, takie jak {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} lub {{HTMLElement("title")}}.</p> - -<table class="properties"> - <tbody> - <tr> - <th><a href="/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> - <td>Metadata content. If the {{htmlattrxref("itemprop")}} attribute is present: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> - </tr> - <tr> - <th>Dozwolona zawartość</th> - <td>None, it is an {{Glossary("empty element")}}.</td> - </tr> - <tr> - <th>Pominięcie znacznika</th> - <td>As it is a void element, the start tag must be present and the end tag must not be present.</td> - </tr> - <tr> - <th>Dozwoleni rodzice</th> - <td><code><meta charset></code>, <code><meta http-equiv></code>: a {{HTMLElement("head")}} element. If the {{htmlattrxref("http-equiv", "meta")}} is not an encoding declaration, it can also be inside a {{HTMLElement("noscript")}} element, itself inside a {{HTMLElement("head")}} element.</td> - </tr> - <tr> - <th scope="row">Domniemane role ARIA</th> - <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> - </tr> - <tr> - <th scope="row">Dozwolone role ARIA</th> - <td>No <code>role</code> permitted</td> - </tr> - <tr> - <th>Interfejs DOM</th> - <td>{{domxref("HTMLMetaElement")}}</td> - </tr> - </tbody> -</table> - -<p>The type of metadata provided by the <code>meta</code> element can be one of the following:</p> - -<ul> - <li>If the {{htmlattrxref("name", "meta")}} attribute is set, the <code>meta</code> element provides <em>document-level metadata</em>, applying to the whole page.</li> - <li>If the {{htmlattrxref("http-equiv", "meta")}} attribute is set, the <code>meta</code> element is a <em>pragma directive</em>, providing information equivalent to what can be given by a similarly-named HTTP header.</li> - <li>If the {{htmlattrxref("charset", "meta")}} attribute is set, the <code>meta</code> element is a <em>charset declaration</em>, giving the character encoding in which the document is encoded.</li> - <li>If the {{htmlattrxref("itemprop")}} attribute is set, the <code>meta</code> element provides <em>user-defined metadata</em>.</li> -</ul> - -<h2 id="Attributes">Attributes</h2> - -<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> - -<div class="note"> -<p><strong>Note:</strong> the attribute {{htmlattrxref("name", "meta")}} has a specific meaning for the <code><meta></code> element, and the {{htmlattrxref("itemprop")}} attribute must not be set on the same <code><meta></code> element that has any existing {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} or {{htmlattrxref("charset", "meta")}} attributes.</p> -</div> - -<dl> - <dt>{{htmlattrdef("charset")}}</dt> - <dd>This attribute declares the document's character encoding. If the attribute is present, its value must be an ASCII case-insensitive match for the string "<code>utf-8</code>".</dd> - <dt>{{htmlattrdef("content")}}</dt> - <dd>This attribute contains the value for the {{htmlattrxref("http-equiv", "meta")}} or {{htmlattrxref("name", "meta")}} attribute, depending on which is used.</dd> - <dt>{{htmlattrdef("http-equiv")}}</dt> - <dd> - <p>Defines a pragma directive. The attribute is named <code><strong>http-equiv</strong>(alent)</code> because all the allowed values are names of particular HTTP headers:</p> - - <ul> - <li><code>content-security-policy</code> - - <p>Allows page authors to define a <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">content policy</a> for the current page. Content policies mostly specify allowed server origins and script endpoints which help guard against cross-site scripting attacks.</p> - </li> - <li><code>content-type</code> - <p>If specified, the <code>content</code> attribute must have the value "<code>text/html; charset=utf-8</code>". <strong>Note: </strong> Can only be used in documents served with a <code>text/html</code> <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a> — not in documents served with an XML MIME type.</p> - </li> - <li><code>default-style</code> - <p>Sets the name of the default <a href="/en-US/docs/Web/CSS">CSS style sheet</a> set.</p> - </li> - <li><code>x-ua-compatible</code> - <p>If specified, the <code>content</code> attribute must have the value "<code>IE=edge</code>". User agents are required to ignore this pragma.</p> - </li> - <li><code>refresh</code> - <div>This instruction specifies:</div> - - <ul> - <li>The number of seconds until the page should be reloaded - only if the {{htmlattrxref("content", "meta")}} attribute contains a positive integer.</li> - <li>The number of seconds until the page should redirect to another - only if the {{htmlattrxref("content", "meta")}} attribute contains a positive integer followed by the string '<code>;url=</code>', and a valid URL.</li> - </ul> - - <h5 id="Accessibility_concerns">Accessibility concerns</h5> - - <div>Pages set with a <code>refresh</code> value run the risk of having the time interval being too short. People navigating with the aid of assistive technology such as a screen reader may be unable to read through and understand the page's content before being automatically redirected. The abrupt, unannounced updating of the page content may also be disorienting for people experiencing low vision conditions.</div> - - <ul> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_—_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.1 explanations</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.1 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html">Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0</a></li> - </ul> - </li> - </ul> - </dd> - <dt>{{htmlattrdef("name")}}</dt> - <dd> - <p>The <code>name</code> and <code>content</code> attributes can be used together to provide document metadata in terms of name-value pairs, with the <code>name</code> attribute giving the metadata name, and the <code>content</code> attribute giving the value.</p> - - <p>See <a href="/en-US/docs/Web/HTML/Element/meta/name">standard metadata names</a> for details about the set of standard metadata names defined in the HTML specification.</p> - </dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<pre class="brush: html notranslate"><meta charset="utf-8"> - -<!-- Redirect page after 3 seconds --> -<meta http-equiv="refresh" content="3;url=https://www.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', 'semantics.html#the-meta-element', '<meta>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<div>{{Compat("html.elements.meta")}}</div> diff --git a/files/pl/web/html/global_attributes/spellcheck/index.html b/files/pl/web/html/global_attributes/spellcheck/index.html deleted file mode 100644 index a0b6c48785..0000000000 --- a/files/pl/web/html/global_attributes/spellcheck/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: sprawdzanie pisowni -slug: Web/HTML/Global_attributes/spellcheck -translation_of: Web/HTML/Global_attributes/spellcheck -original_slug: Web/HTML/Global_attributes/pisownia ---- -<div>{{HTMLSidebar("Global_attributes")}}</div> - -<p>The <code><strong>spellcheck</strong></code> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> is an enumerated attribute defines whether the element may be checked for spelling errors.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}</div> - -<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> - -<p>It may have the following values:</p> - -<ul> - <li><code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li> - <li><code>false</code>, which indicates that the element should not be checked for spelling errors.</li> -</ul> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> The <code>spellcheck</code> attribute is an <em>enumerated</em> one and not a <em>Boolean</em> one. This means that the explicit usage of one of the values <code>true</code> or <code>false</code> is mandatory, and that a shorthand like <code><textarea spellcheck></textarea> </code>is not allowed. The correct usage is <code><textarea spellcheck="true"></textarea></code>.</p> -</div> - -<p>If this attribute is not set, its default value is element-type and browser-defined. This default value may also be <em>inherited</em>, which means that the element content will be checked for spelling errors only if its nearest ancestor has a <em>spellcheck</em> state of <code>true</code>.</p> - -<p>This attribute is merely a hint for the browser: browsers are not required to check for spelling errors. Typically non-editable elements are not checked for spelling errors, even if the <code>spellcheck</code> attribute is set to <code>true</code> and the browser supports spellchecking.</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', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.global_attributes.spellcheck")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> -</ul> diff --git a/files/pl/web/http/authentication/index.html b/files/pl/web/http/authentication/index.html deleted file mode 100644 index d1a365fd50..0000000000 --- a/files/pl/web/http/authentication/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: HTTP authentication -slug: Web/HTTP/Authentication -translation_of: Web/HTTP/Authentication ---- -<div><font><font>{{HTTPSidebar}}</font></font></div> - -<p class="summary"><span class="seoSummary"><font><font>Protokół HTTP zapewnia ogólną strukturę kontroli dostępu i uwierzytelniania. </font><font>Ta strona stanowi wprowadzenie do struktury HTTP służącej do uwierzytelniania i pokazuje, jak ograniczyć dostęp do serwera za pomocą schematu HTTP „Basic”.</font></font></span></p> - -<h2 id="Ogólna_struktura_uwierzytelniania_HTTP"><font><font>Ogólna struktura uwierzytelniania HTTP</font></font></h2> - -<p><font><font>{{RFC ("7235")}} definiuje strukturę uwierzytelniania HTTP, która może być używana przez serwer do {{glosariusza ("wyzwanie")}} żądania klienta, a przez klienta do dostarczania informacji uwierzytelniających.</font></font></p> - -<p><font><font>Wyzwanie i przepływ odpowiedzi działają w następujący sposób:</font></font></p> - -<ol> - <li><font><font>Serwer odpowiada klientowi statusem odpowiedzi {{HTTPStatus ("401")}} (Unauthorized) i dostarcza informacji na temat autoryzacji za pomocą nagłówka odpowiedzi {{HTTPHeader ("WWW-Authenticate")}} zawierającego co najmniej jeden wyzwanie.</font></font></li> - <li>A client that wants to authenticate itself with the server can then do so by including an {{HTTPHeader("Authorization")}} request header with the credentials.</li> - <li>Usually a client will present a password prompt to the user and will then issue the request including the correct <code>Authorization</code> header.</li> -</ol> - -<p><img alt="A sequence diagram illustrating HTTP messages between a client and a server lifeline." src="https://mdn.mozillademos.org/files/14689/HTTPAuth.png" style="height: 335px; width: 710px;" title="Diagram sekwencji uwierzytelniania HTTP klient-serwer"></p> - -<p>In the case of a "Basic" authentication like shown in the figure, the exchange <strong>must</strong> happen over an HTTPS (TLS) connection to be secure.</p> - -<h3 id="Proxy_authentication">Proxy authentication</h3> - -<p>The same challenge and response mechanism can be used for <em>proxy authentication</em>. As both resource authentication and proxy authentication can coexist, a different set of headers and status codes is needed. In the case of proxies, the challenging status code is {{HTTPStatus("407")}} (Proxy Authentication Required), the {{HTTPHeader("Proxy-Authenticate")}} response header contains at least one challenge applicable to the proxy, and the {{HTTPHeader("Proxy-Authorization")}} request header is used for providing the credentials to the proxy server.</p> - -<h3 id="Access_forbidden">Access forbidden</h3> - -<p>If a (proxy) server receives valid credentials that are inadequate to access a given resource, the server should respond with the {{HTTPStatus("403")}} <code>Forbidden</code> status code. Unlike {{HTTPStatus("401")}} <code>Unauthorized</code> or {{HTTPStatus("407")}} <code>Proxy Authentication Required</code>, authentication is impossible for this user.</p> - -<h3 id="Authentication_of_cross-origin_images">Authentication of cross-origin images</h3> - -<p>A potential security hole recently been fixed by browsers is authentication of cross-site images. From <a href="/en-US/docs/Mozilla/Firefox/Releases/59">Firefox 59</a> onwards, image resources loaded from different origins to the current document are no longer able to trigger HTTP authentication dialogs ({{bug(1423146)}}), preventing user credentials being stolen if attackers were able to embed an arbitrary image into a third-party page.</p> - -<h3 id="Character_encoding_of_HTTP_authentication">Character encoding of HTTP authentication</h3> - -<p>Browsers use <code>utf-8</code> encoding for usernames and passwords.</p> - -<p>Firefox once used <code>ISO-8859-1</code>, but changed to <code>utf-8</code> for parity with other browsers and to avoid potential problems as described in {{bug(1419658)}}.</p> - -<h3 id="WWW-Authenticate_and_Proxy-Authenticate_headers">WWW-Authenticate and Proxy-Authenticate headers</h3> - -<p>The {{HTTPHeader("WWW-Authenticate")}} and {{HTTPHeader("Proxy-Authenticate")}} response headers define the authentication method that should be used to gain access to a resource. They must specify which authentication scheme is used, so that the client that wishes to authorize knows how to provide the credentials.</p> - -<p>The syntax for these headers is the following:</p> - -<pre class="syntaxbox notranslate">WWW-Authenticate: <type> realm=<realm> -Proxy-Authenticate: <type> realm=<realm> -</pre> - -<p>Here, <code><type></code> is the authentication scheme ("Basic" is the most common scheme and <a href="/en-US/docs/Web/HTTP/Authentication#Basic_authentication_scheme">introduced below</a>). The <em>realm</em> is used to describe the protected area or to indicate the scope of protection. This could be a message like "Access to the staging site" or similar, so that the user knows to which space they are trying to get access to.</p> - -<h3 id="Authorization_and_Proxy-Authorization_headers">Authorization and Proxy-Authorization headers</h3> - -<p>The {{HTTPHeader("Authorization")}} and {{HTTPHeader("Proxy-Authorization")}} request headers contain the credentials to authenticate a user agent with a (proxy) server. Here, the <code><type></code> is needed again followed by the credentials, which can be encoded or encrypted depending on which authentication scheme is used.</p> - -<pre class="syntaxbox notranslate">Authorization: <type> <credentials> -Proxy-Authorization: <type> <credentials> -</pre> - -<h3 id="Authentication_schemes">Authentication schemes</h3> - -<p>The general HTTP authentication framework is used by several authentication schemes. Schemes can differ in security strength and in their availability in client or server software.</p> - -<p>The most common authentication scheme is the "Basic" authentication scheme, which is introduced in more detail below. IANA maintains a <a class="external external-icon" href="https://www.iana.org/assignments/http-authschemes/http-authschemes.xhtml">list of authentication schemes</a>, but there are other schemes offered by host services, such as Amazon AWS. Common authentication schemes include:</p> - -<dl> - <dt><strong>Basic</strong></dt> - <dd>See {{rfc(7617)}}, base64-encoded credentials. More information below.</dd> - <dt><strong>Bearer</strong></dt> - <dd>See {{rfc(6750)}}, bearer tokens to access OAuth 2.0-protected resources</dd> - <dt><strong>Digest</strong></dt> - <dd>See {{rfc(7616)}}, only md5 hashing is supported in Firefox, see {{bug(472823)}} for SHA encryption support</dd> - <dt><strong>HOBA</strong></dt> - <dd>See {{rfc(7486)}}, Section 3, <strong>H</strong>TTP <strong>O</strong>rigin-<strong>B</strong>ound <strong>A</strong>uthentication, digital-signature-based</dd> - <dt><strong>Mutual</strong></dt> - <dd>See {{rfc(8120)}}</dd> - <dt><strong>AWS4-HMAC-SHA256</strong></dt> - <dd>See <a href="http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-auth-using-authorization-header.html">AWS docs</a></dd> -</dl> - -<h2 id="Basic_authentication_scheme">Basic authentication scheme</h2> - -<p>The "Basic" HTTP authentication scheme is defined in {{rfc(7617)}}, which transmits credentials as user ID/password pairs, encoded using base64.</p> - -<h3 id="Security_of_basic_authentication">Security of basic authentication</h3> - -<p>As the user ID and password are passed over the network as clear text (it is base64 encoded, but base64 is a reversible encoding), the basic authentication scheme <strong>is not secure</strong>. HTTPS/TLS should be used with basic authentication. Without these additional security enhancements, basic authentication should not be used to protect sensitive or valuable information.</p> - -<h3 id="Restricting_access_with_Apache_and_basic_authentication">Restricting access with Apache and basic authentication</h3> - -<p>To password-protect a directory on an Apache server, you will need a <code>.htaccess</code> and a <code>.htpasswd</code> file.</p> - -<p>The <code>.htaccess</code> file typically looks like this:</p> - -<pre class="notranslate">AuthType Basic -AuthName "Access to the staging site" -AuthUserFile /path/to/.htpasswd -Require valid-user</pre> - -<p>The <code>.htaccess</code> file references a <code>.htpasswd</code> file in which each line consists of a username and a password separated by a colon (<code>:</code>). You cannot see the actual passwords as they are <a href="https://httpd.apache.org/docs/2.4/misc/password_encryptions.html">hashed</a> (using MD5-based hashing, in this case). Note that you can name your <code>.htpasswd</code> file differently if you like, but keep in mind this file shouldn't be accessible to anyone. (Apache is usually configured to prevent access to <code>.ht*</code> files).</p> - -<pre class="notranslate">aladdin:$apr1$ZjTqBB3f$IF9gdYAGlMrs2fuINjHsz. -user2:$apr1$O04r.y2H$/vEkesPhVInBByJUkXitA/ -</pre> - -<h3 id="Restricting_access_with_nginx_and_basic_authentication">Restricting access with nginx and basic authentication</h3> - -<p>For nginx, you will need to specify a location that you are going to protect and the <code>auth_basic</code> directive that provides the name to the password-protected area. The <code>auth_basic_user_file</code> directive then points to a <code>.htpasswd</code> file containing the encrypted user credentials, just like in the Apache example above.</p> - -<pre class="notranslate">location /status { - auth_basic "Access to the staging site"; - auth_basic_user_file /etc/apache2/.htpasswd; -}</pre> - -<h3 id="Access_using_credentials_in_the_URL">Access using credentials in the URL</h3> - -<p>Many clients also let you avoid the login prompt by using an encoded URL containing the username and the password like this:</p> - -<pre class="example-bad notranslate">https://username:password@www.example.com/</pre> - -<p><strong>The use of these URLs is deprecated</strong>. In Chrome, the <code>username:password@</code> part in URLs is even <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=82250#c7">stripped out</a> for security reasons. In Firefox, it is checked if the site actually requires authentication and if not, Firefox will warn the user with a prompt "You are about to log in to the site “www.example.com” with the username “username”, but the website does not require authentication. This may be an attempt to trick you."</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{HTTPHeader("WWW-Authenticate")}}</li> - <li>{{HTTPHeader("Authorization")}}</li> - <li>{{HTTPHeader("Proxy-Authorization")}}</li> - <li>{{HTTPHeader("Proxy-Authenticate")}}</li> - <li><font><font>{{HTTPStatus ("401")}}, {{HTTPStatus ("403")}}, {{HTTPStatus ("407")}}</font></font></li> -</ul> diff --git a/files/pl/web/http/headers/date/index.html b/files/pl/web/http/headers/date/index.html deleted file mode 100644 index 81efdff778..0000000000 --- a/files/pl/web/http/headers/date/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Data -slug: Web/HTTP/Headers/Date -translation_of: Web/HTTP/Headers/Date -original_slug: Web/HTTP/Headers/Data ---- -<div>{{HTTPSidebar}}</div> - -<p><strong><code>Date</code></strong> jest to ogólny nagłówek HTTP zawierający datę i czas w jakiej wiadomość została stworzona.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Header type</th> - <td>{{Glossary("General header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>yes</td> - </tr> - </tbody> -</table> - -<h2 id="Składnia">Składnia</h2> - -<pre class="syntaxbox">Date: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT -</pre> - -<h2 id="Dyrektywy">Dyrektywy</h2> - -<dl> - <dt><day-name></dt> - <dd>One of "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", or "Sun" (case-sensitive).</dd> - <dt><day></dt> - <dd>2 digit day number, e.g. "04" or "23".</dd> - <dt><month></dt> - <dd>One of "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" (case sensitive).</dd> - <dt><year></dt> - <dd>4 digit year number, e.g. "1990" or "2016".</dd> - <dt><hour></dt> - <dd>2 digit hour number, e.g. "09" or "23".</dd> - <dt><minute></dt> - <dd>2 digit minute number, e.g. "04" or "59".</dd> - <dt><second></dt> - <dd>2 digit second number, e.g. "04" or "59".</dd> - <dt>GMT</dt> - <dd> - <p>Greenwich Mean Time. HTTP dates are always expressed in GMT, never in local time.</p> - </dd> -</dl> - -<h2 id="Przykłady">Przykłady</h2> - -<pre>Date: Wed, 21 Oct 2015 07:28:00 GMT -</pre> - -<h2 id="Specyfikacja">Specyfikacja</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - <tr> - <td>{{RFC("7231", "Date", "7.1.1.2")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Zgodność_z_przeglądarką"><span class="short_text" id="result_box" lang="pl"><span>Zgodność z przeglądarką</span></span></h2> - - - -<p>{{Compat("http.headers.Date")}}</p> - -<h2 id="Zobacz_również">Zobacz również</h2> - -<ul> - <li>{{HTTPHeader("Age")}}</li> -</ul> diff --git a/files/pl/web/javascript/data_structures/index.html b/files/pl/web/javascript/data_structures/index.html deleted file mode 100644 index 4a86825a9e..0000000000 --- a/files/pl/web/javascript/data_structures/index.html +++ /dev/null @@ -1,444 +0,0 @@ ---- -title: Typy oraz struktury danych w JavaScript -slug: Web/JavaScript/Data_structures -tags: - - JavaScript - - Początkujący - - Typy danych -translation_of: Web/JavaScript/Data_structures -original_slug: Web/JavaScript/typy_oraz_struktury_danych ---- -<div>{{jsSidebar("More")}}</div> - -<div>Wszystkie języki programowania posiadają wbudowane struktury danych, mogą one jednak różnic się między poszczególnymi językami. Poniższy artykuł jest próbą stworzenia listy wbudowanych typów oraz struktur danych w JavaScript oraz ich właściwości. Mogą być one użyte do tworzenia innych struktur danych. Tam gdzie jest to możliwe dokonano porównania z innymi językami programowania.</div> - -<h2 id="Dynamiczne_typowanie">Dynamiczne typowanie</h2> - -<p>JavaScript jest językiem typowanym dynamicznie. Zmienne w Javascript nie są bezpośrednio powiązane z konkretnym typem wartości i możemy im przypisywać wartości dowolnego typu:</p> - -<pre class="brush: js notranslate">let foo = 42; // foo jest teraz liczbą (number) -foo = 'bar'; // foo jest teraz ciągiem znaków (string) -foo = true; // foo jest teraz type logicznym (boolean) -</pre> - -<h2 id="Data_and_Structure_types">Data and Structure types</h2> - -<p>Najnowsza wersja standardu ECMAScript definiuje dziewięć typów danych:</p> - -<ul> - <li>Six <strong>Data Types</strong> that are <a href="/en-US/docs/Glossary/Primitive">primitives</a>, checked by <a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a> operator: - - <ul> - <li><a href="/en-US/docs/Glossary/Undefined">undefined</a> : <code>typeof instance === "undefined"</code></li> - <li><a href="/en-US/docs/Glossary/Boolean">Boolean</a> : <code>typeof instance === "boolean"</code></li> - <li><a href="/en-US/docs/Glossary/Number">Number</a> : <code>typeof instance === "number"</code></li> - <li><a href="/en-US/docs/Glossary/String">String</a> : <code>typeof instance === "string"</code></li> - <li><a href="/en-US/docs/Glossary/BigInt">BigInt</a><span> : </span><code>typeof instance === "bigint"</code></li> - <li><a href="/en-US/docs/Glossary/Symbol">Symbol</a><span> : </span><code>typeof instance === "symbol"</code></li> - </ul> - </li> - <li><a href="/en-US/docs/Glossary/Null">null</a><span> : </span><code>typeof instance === "object"</code>. Special <a href="/en-US/docs/Glossary/Primitive">primitive</a> type having additional usage for it's value: if object is not inherited, then <code>null</code> is shown;</li> - <li><a href="/en-US/docs/Glossary/Object">Object</a><span> : </span><code>typeof instance === "object"</code>. Special non-data but structural type for any <a href="/en-US/docs/Learn/JavaScript/Objects#The_Constructor">constructed</a> object instance also used as data structures: new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap">WeakMap</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet">WeakSet</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a> and almost everything made with <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new keyword</a>;</li> - <li><a href="/en-US/docs/Glossary/Function">Function</a><span> non data structure, though it also answers for typeof operator: </span><code>typeof instance === "function"</code>. This answer is done as a special shorthand for Functions, though every Function constructor is derived from Object constructor.</li> -</ul> - -<p>Keep in mind the only valuable purpose of <code>typeof</code> operator usage is checking the Data Type. If we wish to check any Structural Type derived from Object it is pointless to use <code>typeof</code> for that, as we will always receive <code>"object"</code>. The indeed proper way to check what sort of Object we are using an <a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a> keyword. But even in that case there might be misconceptions.</p> - -<h2 id="Wartości_prymitywne">Wartości prymitywne</h2> - -<p>All types except objects define immutable values (that is, values which can't be changed). For example (and unlike in C), Strings are immutable. We refer to values of these types as "<em>primitive values</em>".</p> - -<h3 id="Boolean_type">Boolean type</h3> - -<p>Boolean represents a logical entity and can have two values: <code>true</code> and <code>false</code>. See <a href="/en-US/docs/Glossary/Boolean">Boolean</a> and {{jsxref("Boolean")}} for more details.</p> - -<h3 id="Null_type">Null type</h3> - -<p>The Null type has exactly one value: <code>null</code>. See {{jsxref("null")}} and <a href="/en-US/docs/Glossary/Null">Null</a> for more details.</p> - -<h3 id="Undefined_type">Undefined type</h3> - -<p>A variable that has not been assigned a value has the value <code>undefined</code>. See {{jsxref("undefined")}} and <a href="/en-US/docs/Glossary/Undefined">Undefined</a> for more details.</p> - -<h3 id="Number_type">Number type</h3> - -<p>ECMAScript has two built-in numeric types: <strong>Number</strong> and <strong>BigInt</strong> (see below).</p> - -<p>The Number type is a <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">double-precision 64-bit binary format IEEE 754 value</a> (numbers between -(2<sup>53</sup> − 1) and 2<sup>53</sup> − 1). In addition to representing floating-point numbers, the number type has three symbolic values: <code>+Infinity</code>, <code>-Infinity</code>, and {{jsxref("NaN")}} ("<strong>N</strong>ot a <strong>N</strong>umber").</p> - -<p>To check for the largest available value or smallest available value within {{jsxref("Infinity", "±Infinity")}}, you can use the constants {{jsxref("Number.MAX_VALUE")}} or {{jsxref("Number.MIN_VALUE")}}.</p> - -<p>Starting with ECMAScript 2015, you are also able to check if a number is in the double-precision floating-point number range using {{jsxref("Number.isSafeInteger()")}} as well as {{jsxref("Number.MAX_SAFE_INTEGER")}} and {{jsxref("Number.MIN_SAFE_INTEGER")}}. Beyond this range, integers in JavaScript are not safe anymore and will be a double-precision floating point approximation of the value.</p> - -<p>The number type has only one integer with two representations: <code>0</code> is represented as both <code>-0</code> and <code>+0</code>. (<code>0</code> is an alias for <code>+0</code>.) </p> - -<p>In the praxis, this has almost no impact. For example, <code>+0 === -0</code> is <code>true</code>. However, you are able to notice this when you divide by zero:</p> - -<pre class="brush: js notranslate">> 42 / +0 -Infinity -> 42 / -0 --Infinity -</pre> - -<p>Although a number often represents only its value, JavaScript provides {{jsxref("Operators/Bitwise_Operators", "binary (bitwise) operators")}}.</p> - -<p>These bitwise operators can be used to represent several Boolean values within a single number using <a class="external" href="http://en.wikipedia.org/wiki/Mask_%28computing%29">bit masking</a>. However, this is usually considered a bad practice, since JavaScript offers other means to represent a set of Booleans (like an array of Booleans, or an object with Boolean values assigned to named properties). Bit masking also tends to make the code more difficult to read, understand, and maintain.</p> - -<p>It may be necessary to use such techniques in very constrained environments, like when trying to cope with the limitations of local storage, or in extreme cases (such as when each bit over the network counts). This technique should only be considered when it is the last measure that can be taken to optimize size.</p> - -<h3 id="BigInt_type">BigInt type</h3> - -<p>The {{jsxref("BigInt")}} type is a numeric primitive in JavaScript that can represent integers with arbitrary precision. With <code>BigInt</code>s, you can safely store and operate on large integers even beyond the safe integer limit for <code>Number</code>s.</p> - -<p>A <code>BigInt</code> is created by appending <code>n</code> to the end of an integer or by calling the constructor.</p> - -<p>You can obtain the safest value that can be incremented with <code>Number</code>s by using the constant {{jsxref("Number.MAX_SAFE_INTEGER")}}. With the introduction of <code>BigInt</code>s, you can operate with numbers beyond the {{jsxref("Number.MAX_SAFE_INTEGER")}}.</p> - -<p>This example demonstrates, where incrementing the {{jsxref("Number.MAX_SAFE_INTEGER")}} returns the expected result:</p> - -<pre class="brush: js notranslate">> const x = 2n ** 53n; -9007199254740992n -> const y = x + 1n; -9007199254740993n -</pre> - -<p>You can use the operators <code>+</code>, <code>*</code>, <code>-</code>, <code>**</code>, and <code>%</code> with <code>BigInt</code>s—just like with <code>Number</code>s. A <code>BigInt</code> is not strictly equal to a <code>Number</code>, but it is loosely so.</p> - -<p>A <code>BigInt</code> behaves like a <code>Number</code> in cases where it is converted to <code>Boolean</code>: <code>if</code>, <code>||</code>, <code>&&</code>, <code>Boolean</code>, <code>!</code>.</p> - -<p><code>BigInt</code>s cannot be operated on interchangeably with <code>Number</code>s. Instead a {{jsxref("TypeError")}} will be thrown.</p> - -<h3 id="String_type">String type</h3> - -<p>JavaScript's {{jsxref("String")}} type is used to represent textual data. It is a set of "elements" of 16-bit unsigned integer values. Each element in the String occupies a position in the String. The first element is at index <code>0</code>, the next at index <code>1</code>, and so on. The length of a String is the number of elements in it.</p> - -<p>Unlike some programming languages (such as C), JavaScript strings are immutable. This means that once a string is created, it is not possible to modify it.</p> - -<p>However, it is still possible to create another string based on an operation on the original string. For example:</p> - -<ul> - <li>A substring of the original by picking individual letters or using {{jsxref("String.substr()")}}.</li> - <li>A concatenation of two strings using the concatenation operator (<code>+</code>) or {{jsxref("String.concat()")}}.</li> -</ul> - -<h4 id="Beware_of_stringly-typing_your_code!">Beware of "stringly-typing" your code!</h4> - -<p>It can be tempting to use strings to represent complex data. Doing this comes with short-term benefits:</p> - -<ul> - <li>It is easy to build complex strings with concatenation.</li> - <li>Strings are easy to debug (what you see printed is always what is in the string).</li> - <li>Strings are the common denominator of a lot of APIs (<a href="/en-US/docs/Web/API/HTMLInputElement" title="HTMLInputElement">input fields</a>, <a href="/en-US/docs/Storage" title="Storage">local storage</a> values, <a href="/en-US/docs/Web/API/XMLHttpRequest" title="Use XMLHttpRequest (XHR) objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> responses when using <code>responseText</code>, etc.) and it can be tempting to only work with strings.</li> -</ul> - -<p>With conventions, it is possible to represent any data structure in a string. This does not make it a good idea. For instance, with a separator, one could emulate a list (while a JavaScript array would be more suitable). Unfortunately, when the separator is used in one of the "list" elements, then, the list is broken. An escape character can be chosen, etc. All of this requires conventions and creates an unnecessary maintenance burden.</p> - -<p>Use strings for textual data. When representing complex data, parse strings and use the appropriate abstraction.</p> - -<h3 id="Symbol_type">Symbol type</h3> - -<p>Symbols are new to JavaScript in ECMAScript 2015. A Symbol is a <strong>unique</strong> and <strong>immutable</strong> primitive value and may be used as the key of an Object property (see below). In some programming languages, Symbols are called "atoms".</p> - -<p>For more details see <a href="/en-US/docs/Glossary/Symbol">Symbol</a> and the {{jsxref("Symbol")}} object wrapper in JavaScript.</p> - -<h2 id="Obiekty">Obiekty</h2> - -<p>In computer science, an object is a value in memory which is possibly referenced by an <a href="/en-US/docs/Glossary/Identifier">identifier</a>.</p> - -<h3 id="Properties">Properties</h3> - -<p>In JavaScript, objects can be seen as a collection of properties. With the <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Object_literals">object literal syntax</a>, a limited set of properties are initialized; then properties can be added and removed. Property values can be values of any type, including other objects, which enables building complex data structures. Properties are identified using <em>key</em> values. A <em>key</em> value is either a String or a Symbol value.</p> - -<p>There are two types of object properties which have certain attributes: The <em>data</em> property and the <em>accessor</em> property.</p> - -<h4 id="Data_property">Data property</h4> - -<p>Associates a key with a value, and has the following attributes:</p> - -<table class="standard-table"> - <caption>Attributes of a data property</caption> - <thead> - <tr> - <th scope="col">Attribute</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - <th scope="col">Default value</th> - </tr> - </thead> - <tbody> - <tr> - <td>[[Value]]</td> - <td>Any JavaScript type</td> - <td>The value retrieved by a get access of the property.</td> - <td><code>undefined</code></td> - </tr> - <tr> - <td>[[Writable]]</td> - <td>Boolean</td> - <td>If <code>false</code>, the property's [[Value]] cannot be changed.</td> - <td><code>false</code></td> - </tr> - <tr> - <td>[[Enumerable]]</td> - <td>Boolean</td> - <td> - <p>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops.<br> - See also <a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a>.</p> - </td> - <td><code>false</code></td> - </tr> - <tr> - <td>[[Configurable]]</td> - <td>Boolean</td> - <td>If <code>false</code>, the property cannot be deleted, cannot be changed to an accessor property, and attributes other than [[Value]] and [[Writable]] cannot be changed.</td> - <td><code>false</code></td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>Obsolete attributes (as of ECMAScript 3, renamed in ECMAScript 5)</caption> - <thead> - <tr> - <th scope="col">Attribute</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>Read-only</td> - <td>Boolean</td> - <td>Reversed state of the ES5 [[Writable]] attribute.</td> - </tr> - <tr> - <td>DontEnum</td> - <td>Boolean</td> - <td>Reversed state of the ES5 [[Enumerable]] attribute.</td> - </tr> - <tr> - <td>DontDelete</td> - <td>Boolean</td> - <td>Reversed state of the ES5 [[Configurable]] attribute.</td> - </tr> - </tbody> -</table> - -<h4 id="Accessor_property">Accessor property</h4> - -<p>Associates a key with one of two accessor functions (<code>get</code> and <code>set</code>) to retrieve or store a value, and has the following attributes:</p> - -<table class="standard-table"> - <caption>Attributes of an accessor property</caption> - <thead> - <tr> - <th scope="col">Attribute</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - <th scope="col">Default value</th> - </tr> - </thead> - <tbody> - <tr> - <td>[[Get]]</td> - <td>Function object or <code>undefined</code></td> - <td>The function is called with an empty argument list and retrieves the property value whenever a get access to the value is performed.<br> - See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/get"><code>get</code></a>.</td> - <td><code>undefined</code></td> - </tr> - <tr> - <td>[[Set]]</td> - <td>Function object or <code>undefined</code></td> - <td>The function is called with an argument that contains the assigned value and is executed whenever a specified property is attempted to be changed.<br> - See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/set"><code>set</code></a>.</td> - <td><code>undefined</code></td> - </tr> - <tr> - <td>[[Enumerable]]</td> - <td>Boolean</td> - <td>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops.</td> - <td><code>false</code></td> - </tr> - <tr> - <td>[[Configurable]]</td> - <td>Boolean</td> - <td>If <code>false</code>, the property can't be deleted and can't be changed to a data property.</td> - <td><code>false</code></td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Note: </strong>Attribute is usually used by JavaScript engine, so you can't directly access it (see more about {{jsxref("Object.defineProperty()")}}). That's why the attribute is put in double square brackets instead of single.</p> -</div> - -<h3 id="Normal_objects_and_functions">"Normal" objects, and functions</h3> - -<p>A JavaScript object is a mapping between <em>keys</em> and <em>values</em>. Keys are strings (or {{jsxref("Symbol")}}s), and <em>values</em> can be anything. This makes objects a natural fit for <a class="external" href="http://en.wikipedia.org/wiki/Hash_table">hashmaps</a>.</p> - -<p>Functions are regular objects with the additional capability of being <em>callable</em>.</p> - -<h3 id="Dates">Dates</h3> - -<p>When representing dates, the best choice is to use the built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code> utility</a> in JavaScript.</p> - -<h3 id="Indexed_collections_Arrays_and_typed_Arrays">Indexed collections: Arrays and typed Arrays</h3> - -<p><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="Array">Arrays</a> are regular objects for which there is a particular relationship between integer-key-ed properties and the <code>length</code> property.</p> - -<p>Additionally, arrays inherit from <code>Array.prototype</code>, which provides to them a handful of convenient methods to manipulate arrays. For example, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf" title="en/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a></code> (searching a value in the array) or <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/push" title="en/JavaScript/Reference/Global_Objects/Array/push">push</a></code> (adding an element to the array), and so on. This makes Arrays a perfect candidate to represent lists or sets.</p> - -<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a> are new to JavaScript with ECMAScript 2015, and present an array-like view of an underlying binary data buffer. The following table helps determine the equivalent C data types:</p> - -<table class="standard-table"> - <thead> - <tr> - <th class="header" scope="col">Type</th> - <th class="header" scope="col">Value Range</th> - <th class="header" scope="col">Size in bytes</th> - <th class="header" scope="col">Description</th> - <th class="header" scope="col">Web IDL type</th> - <th class="header" scope="col">Equivalent C type</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{jsxref("Int8Array")}}</td> - <td><code>-128</code> to <code>127</code></td> - <td>1</td> - <td>8-bit two's complement signed integer</td> - <td><code>byte</code></td> - <td><code>int8_t</code></td> - </tr> - <tr> - <td>{{jsxref("Uint8Array")}}</td> - <td><code>0</code> to <code>255</code></td> - <td>1</td> - <td>8-bit unsigned integer</td> - <td><code>octet</code></td> - <td><code>uint8_t</code></td> - </tr> - <tr> - <td>{{jsxref("Uint8ClampedArray")}}</td> - <td><code>0</code> to <code>255</code></td> - <td>1</td> - <td>8-bit unsigned integer (clamped)</td> - <td><code>octet</code></td> - <td><code>uint8_t</code></td> - </tr> - <tr> - <td>{{jsxref("Int16Array")}}</td> - <td><code>-32768</code> to <code>32767</code></td> - <td>2</td> - <td>16-bit two's complement signed integer</td> - <td><code>short</code></td> - <td><code>int16_t</code></td> - </tr> - <tr> - <td>{{jsxref("Uint16Array")}}</td> - <td><code>0</code> to <code>65535</code></td> - <td>2</td> - <td>16-bit unsigned integer</td> - <td><code>unsigned short</code></td> - <td><code>uint16_t</code></td> - </tr> - <tr> - <td>{{jsxref("Int32Array")}}</td> - <td><code>-2147483648</code> to <code>2147483647</code></td> - <td>4</td> - <td>32-bit two's complement signed integer</td> - <td><code>long</code></td> - <td><code>int32_t</code></td> - </tr> - <tr> - <td>{{jsxref("Uint32Array")}}</td> - <td><code>0</code> to <code>4294967295</code></td> - <td>4</td> - <td>32-bit unsigned integer</td> - <td><code>unsigned long</code></td> - <td><code>uint32_t</code></td> - </tr> - <tr> - <td>{{jsxref("Float32Array")}}</td> - <td><code>1.2</code><span>×</span><code>10<sup>-38</sup></code> to <code>3.4</code><span>×</span><code>10<sup>38</sup></code></td> - <td>4</td> - <td>32-bit IEEE floating point number (7 significant digits e.g., <code>1.1234567</code>)</td> - <td><code>unrestricted float</code></td> - <td><code>float</code></td> - </tr> - <tr> - <td>{{jsxref("Float64Array")}}</td> - <td><code>5.0</code><span>×</span><code>10<sup>-324</sup></code> to <code>1.8</code><span>×</span><code>10<sup>308</sup></code></td> - <td>8</td> - <td>64-bit IEEE floating point number (16 significant digits e.g., <code>1.123...15</code>)</td> - <td><code>unrestricted double</code></td> - <td><code>double</code></td> - </tr> - <tr> - <td>{{jsxref("BigInt64Array")}}</td> - <td><code>-2<sup>63</sup></code> to <code>2<sup>63</sup>-1</code></td> - <td>8</td> - <td>64-bit two's complement signed integer</td> - <td><code>bigint</code></td> - <td><code>int64_t (signed long long)</code></td> - </tr> - <tr> - <td>{{jsxref("BigUint64Array")}}</td> - <td><code>0</code> to <code>2<sup>64</sup>-1</code></td> - <td>8</td> - <td>64-bit unsigned integer</td> - <td><code>bigint</code></td> - <td><code>uint64_t (unsigned long long)</code></td> - </tr> - </tbody> -</table> - -<h3 id="Keyed_collections_Maps_Sets_WeakMaps_WeakSets">Keyed collections: Maps, Sets, WeakMaps, WeakSets</h3> - -<p>These data structures, introduced in ECMAScript Edition 6, take object references as keys. {{jsxref("Set")}} and {{jsxref("WeakSet")}} represent a set of objects, while {{jsxref("Map")}} and {{jsxref("WeakMap")}} associate a value to an object.</p> - -<p>The difference between <code>Map</code>s and <code>WeakMap</code>s is that in the former, object keys can be enumerated over. This allows garbage collection optimizations in the latter case.</p> - -<p>One could implement <code>Map</code>s and <code>Set</code>s in pure ECMAScript 5. However, since objects cannot be compared (in the sense of <code><</code> "less than", for instance), look-up performance would necessarily be linear. Native implementations of them (including <code>WeakMap</code>s) can have look-up performance that is approximately logarithmic to constant time.</p> - -<p>Usually, to bind data to a DOM node, one could set properties directly on the object, or use <code>data-*</code> attributes. This has the downside that the data is available to any script running in the same context. <code>Map</code>s and <code>WeakMap</code>s make it easy to <em>privately</em> bind data to an object.</p> - -<h3 id="Structured_data_JSON">Structured data: JSON</h3> - -<p>JSON (<strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation) is a lightweight data-interchange format, derived from JavaScript, but used by many programming languages. JSON builds universal data structures.</p> - -<p>See <a href="/en-US/docs/Glossary/JSON">JSON</a> and {{jsxref("JSON")}} for more details.</p> - -<h3 id="More_objects_in_the_standard_library">More objects in the standard library</h3> - -<p>JavaScript has a standard library of built-in objects.</p> - -<p>Please have a look at the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">reference</a> to find out about more objects.</p> - -<h2 id="Określanie_typu_za_pomocą_operatora_typeof">Określanie typu za pomocą operatora <code>typeof</code></h2> - -<p>Operator <code>typeof</code> może być pomocny przy określeniu typu twojej zmiennej.</p> - -<p>Więcej szczegółów znajdziecie na stronie poświęconej operatorowi <code>typeof</code>.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td> - </tr> - </tbody> -</table> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Nicholas Zakas collection of common data structure and common algorithms in JavaScript.</a></li> - <li><a href="https://github.com/monmohan/DataStructures_In_Javascript" title="https://github.com/monmohan/DataStructures_In_Javascript">Search Tre(i)es implemented in JavaScript</a></li> -</ul> diff --git a/files/pl/web/javascript/reference/deprecated_and_obsolete_features/index.html b/files/pl/web/javascript/reference/deprecated_and_obsolete_features/index.html deleted file mode 100644 index e937d7c66d..0000000000 --- a/files/pl/web/javascript/reference/deprecated_and_obsolete_features/index.html +++ /dev/null @@ -1,293 +0,0 @@ ---- -title: Przestarzałe własności i metody -slug: Web/JavaScript/Reference/Deprecated_and_obsolete_features -tags: - - Dokumentacja_JavaScript - - Dokumentacje - - JavaScript - - Strony_wymagające_dopracowania - - Wszystkie_kategorie -translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features -original_slug: Web/JavaScript/Referencje/Przestarzałe_własności_i_metody ---- -<div>{{JsSidebar("More")}}</div> - -<p>This page lists features of JavaScript that are deprecated (that is, still available but planned for removal) and obsolete (that is, no longer usable).</p> - -<h2 id="Deprecated_features">Deprecated features</h2> - -<p>These deprecated features can still be used, but should be used with caution because they are expected to be removed entirely sometime in the future. You should work to remove their use from your code.</p> - -<h3 id="RegExp_properties">RegExp properties</h3> - -<p>The following properties are deprecated. This does not affect their use in {{jsxref("String.replace", "replacement strings", "", 1)}}:</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Property</th> - <th>Description</th> - </tr> - <tr> - <td>{{jsxref("RegExp.n", "$1-$9")}}</td> - <td> - <p>Parenthesized substring matches, if any.<br> - <strong>Warning:</strong> Using these properties can result in problems, since browser extensions can modify them. Avoid them!</p> - </td> - </tr> - <tr> - <td>{{jsxref("RegExp.input", "$_")}}</td> - <td>See <code>input</code>.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.multiline", "$*")}}</td> - <td>See <code>multiline</code>.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.lastMatch", "$&")}}</td> - <td>See <code>lastMatch</code>.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.lastParen", "$+")}}</td> - <td>See <code>lastParen</code>.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.leftContext", "$`")}}</td> - <td>See <code>leftContext</code>.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.rightContext", "$'")}}</td> - <td>See <code>rightContext</code>.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.input", "input")}}</td> - <td>The string against which a regular expression is matched.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.lastMatch", "lastMatch")}}</td> - <td>The last matched characters.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.lastParen", "lastParen")}}</td> - <td>The last parenthesized substring match, if any.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.leftContext", "leftContext")}}</td> - <td>The substring preceding the most recent match.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.rightContext", "rightContext")}}</td> - <td>The substring following the most recent match.</td> - </tr> - </tbody> -</table> - -<p>The following are now properties of <code>RegExp</code> instances, no longer of the <code>RegExp</code> object:</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Property</th> - <th>Description</th> - </tr> - <tr> - <td>{{jsxref("RegExp.global", "global")}}</td> - <td>Whether or not to test the regular expression against all possible matches in a string, or only against the first.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.ignoreCase", "ignoreCase")}}</td> - <td>Whether or not to ignore case while attempting a match in a string.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.lastIndex", "lastIndex")}}</td> - <td>The index at which to start the next match.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.multiline", "multiline")}}</td> - <td>Whether or not to search in strings across multiple lines.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.source", "source")}}</td> - <td>The text of the pattern.</td> - </tr> - </tbody> -</table> - -<h3 id="RegExp_methods">RegExp methods</h3> - -<ul> - <li>The {{jsxref("RegExp.compile", "compile()")}} method is deprecated.</li> - <li>The <code>valueOf</code> method is no longer specialized for <code>RegExp</code>. Use {{jsxref("Object.valueOf()")}}.</li> -</ul> - -<h3 id="Function_properties">Function properties</h3> - -<ul> - <li>The {{jsxref("Global_Objects/Function/caller", "caller")}} and {{jsxref("Global_Objects/Function/arguments", "arguments")}} properties are deprecated, because they leak the function caller. Instead of the arguments property, you should use the {{jsxref("Functions/arguments", "arguments")}} object inside function closures.</li> -</ul> - -<h3 id="Legacy_generator">Legacy generator</h3> - -<ul> - <li>{{jsxref("Statements/Legacy_generator_function", "Legacy generator function statement")}} and {{jsxref("Operators/Legacy_generator_function", "Legacy generator function expression")}} are deprecated. Use {{jsxref("Statements/function*", "function* statement")}} and {{jsxref("Operators/function*", "function* expression")}} instead.</li> - <li>{{jsxref("Operators/Array_comprehensions", "JS1.7/JS1.8 Array comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} and {{jsxref("Operators/Generator_comprehensions", "JS1.7/JS1.8 Generator comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} are deprecated.</li> -</ul> - -<h3 id="Iterator">Iterator</h3> - -<ul> - <li>{{jsxref("Global_Objects/StopIteration", "StopIteration")}} is deprecated.</li> - <li>{{jsxref("Global_Objects/Iterator", "Iterator")}} is deprecated.</li> -</ul> - -<h3 id="Object_methods">Object methods</h3> - -<ul> - <li>{{jsxref("Object.watch", "watch")}} and {{jsxref("Object.unwatch", "unwatch")}} are deprecated. Use {{jsxref("Proxy")}} instead.</li> - <li><code>__iterator__</code> is deprecated.</li> - <li>{{jsxref("Object.noSuchMethod", "__noSuchMethod__")}} is deprecated. Use {{jsxref("Proxy")}} instead.</li> -</ul> - -<h3 id="Date_methods">Date methods</h3> - -<ul> - <li>{{jsxref("Global_Objects/Date/getYear", "getYear")}} and {{jsxref("Global_Objects/Date/setYear", "setYear")}} are affected by the Year-2000-Problem and have been subsumed by {{jsxref("Global_Objects/Date/getFullYear", "getFullYear")}} and {{jsxref("Global_Objects/Date/setFullYear", "setFullYear")}}.</li> - <li>You should use {{jsxref("Global_Objects/Date/toISOString", "toISOString")}} instead of the deprecated {{jsxref("Global_Objects/Date/toGMTString", "toGMTString")}} method in new code.</li> - <li>{{jsxref("Global_Objects/Date/toLocaleFormat", "toLocaleFormat")}} is deprecated.</li> -</ul> - -<h3 id="Functions">Functions</h3> - -<ul> - <li>{{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}} are deprecated. Use regular {{jsxref("Operators/function", "functions")}} or {{jsxref("Functions/Arrow_functions", "arrow functions", "", 1)}} instead.</li> -</ul> - -<h3 id="Proxy">Proxy</h3> - -<ul> - <li><a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.create</a> and <a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.createFunction</a> are deprecated. Use {{jsxref("Proxy")}} instead.</li> - <li>The following traps are obsolete: - <ul> - <li><code>hasOwn</code> ({{bug(980565)}}, Firefox 33).</li> - <li><code>getEnumerablePropertyKeys</code> ({{bug(783829)}}, Firefox 37)</li> - <li><code>getOwnPropertyNames</code> ({{bug(1007334)}}, Firefox 33)</li> - <li><code>keys</code> ({{bug(1007334)}}, Firefox 33)</li> - </ul> - </li> -</ul> - -<h3 id="Escape_sequences">Escape sequences</h3> - -<ul> - <li>Octal escape sequences (\ followed by one, two, or three octal digits) are deprecated in string and regular expression literals.</li> - <li>The {{jsxref("Global_Objects/escape", "escape")}} and {{jsxref("Global_Objects/unescape", "unescape")}} functions are deprecated. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}}, {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}}, {{jsxref("Global_Objects/decodeURI", "decodeURI")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} to encode and decode escape sequences for special characters.</li> -</ul> - -<h3 id="String_methods">String methods</h3> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/tag/HTML%20wrapper%20methods">HTML wrapper methods</a> like {{jsxref("String.prototype.fontsize")}} and {{jsxref("String.prototype.big")}}.</li> - <li>{{jsxref("String.prototype.quote")}} is removed from Firefox 37.</li> - <li>non standard <code>flags</code> parameter in {{jsxref("String.prototype.search")}}, {{jsxref("String.prototype.match")}}, and {{jsxref("String.prototype.replace")}} are deprecated.</li> -</ul> - -<h2 id="Obsolete_features">Obsolete features</h2> - -<p>These obsolete features have been entirely removed from JavaScript and can no longer be used as of the indicated version of JavaScript.</p> - -<h3 id="Object">Object</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Property</th> - <th>Description</th> - </tr> - <tr> - <td>{{jsxref("Global_Objects/Object/count", "__count__")}}</td> - <td>Returns the number of enumerable properties directly on a user-defined object.</td> - </tr> - <tr> - <td>{{jsxref("Global_Objects/Object/Parent", "__parent__")}}</td> - <td>Points to an object's context.</td> - </tr> - <tr> - <td>{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}</td> - <td>Evaluates a string of JavaScript code in the context of the specified object.</td> - </tr> - <tr> - <td>{{jsxref("Object.observe()")}}</td> - <td>Asynchronously observing the changes to an object.</td> - </tr> - <tr> - <td>{{jsxref("Object.unobserve()")}}</td> - <td>Remove observers.</td> - </tr> - <tr> - <td>{{jsxref("Object.getNotifier()")}}</td> - <td>Creates an object that allows to synthetically trigger a change.</td> - </tr> - </tbody> -</table> - -<h3 id="Function">Function</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Property</th> - <th>Description</th> - </tr> - <tr> - <td>{{jsxref("Global_Objects/Function/arity", "arity")}}</td> - <td>Number of formal arguments.</td> - </tr> - </tbody> -</table> - -<h3 id="Array">Array</h3> - -<table class="standard-table"> - <tbody> - <tr> - <td>Property</td> - <td>Description</td> - </tr> - <tr> - <td>{{jsxref("Array.observe()")}}</td> - <td>Asynchronously observing changes to Arrays.</td> - </tr> - <tr> - <td>{{jsxref("Array.unobserve()")}}</td> - <td>Remove observers.</td> - </tr> - </tbody> -</table> - -<h3 id="Number">Number</h3> - -<ul> - <li>{{jsxref("Number.toInteger()")}}</li> -</ul> - -<h3 id="ParallelArray">ParallelArray</h3> - -<ul> - <li>{{jsxref("ParallelArray")}}</li> -</ul> - -<h3 id="Statements">Statements</h3> - -<ul> - <li>{{jsxref("Statements/for_each...in", "for each...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.</li> - <li>Destructuring {{jsxref("Statements/for...in", "for...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.</li> - <li>let blocks and let expressions are obsolete.</li> -</ul> - -<h3 id="E4X">E4X</h3> - -<p>See <a href="/en-US/docs/Archive/Web/E4X">E4X</a> for more information.</p> - -<h3 id="Sharp_variables">Sharp variables</h3> - -<p>See <a href="/en-US/docs/Archive/Web/Sharp_variables_in_JavaScript">Sharp variables in JavaScript</a> for more information.</p> diff --git a/files/pl/web/javascript/reference/global_objects/escape/index.html b/files/pl/web/javascript/reference/global_objects/escape/index.html deleted file mode 100644 index 2fcf67431d..0000000000 --- a/files/pl/web/javascript/reference/global_objects/escape/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: escape() -slug: Web/JavaScript/Reference/Global_Objects/escape -translation_of: Web/JavaScript/Reference/Global_Objects/escape -original_slug: Web/JavaScript/Referencje/Obiekty/escape ---- -<div>{{jsSidebar("Objects")}}</div> - -<p>The deprecated <code><strong>escape()</strong></code> function computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use {{jsxref("encodeURI")}} or {{jsxref("encodeURIComponent")}} instead.</p> - -<h2 id="Składnia">Składnia</h2> - -<pre class="syntaxbox"><code>escape(str)</code></pre> - -<h3 id="Parametry">Parametry</h3> - -<dl> - <dt><code>str</code></dt> - <dd>A string to be encoded.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>The <code>escape</code> function is a property of the <em>global object</em>. Special characters are encoded with the exception of: @*_+-./</p> - -<p>The hexadecimal form for characters, whose code unit value is 0xFF or less, is a two-digit escape sequence: %xx. For characters with a greater code unit, the four-digit format %<strong>u</strong>xxxx is used.</p> - -<h2 id="Przykłady">Przykłady</h2> - -<pre class="brush: js">escape("abc123"); // "abc123" -escape("äöü"); // "%E4%F6%FC" -escape("ć"); // "%u0107" - -// znaki specjalne -escape("@*_+-./"); // "@*_+-./"</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('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-B.2.1', 'escape')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Defined in the (informative) Compatibility Annex B</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-escape-string', 'escape')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers</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>{{jsxref("encodeURI")}}</li> - <li>{{jsxref("encodeURIComponent")}}</li> -</ul> diff --git a/files/pl/web/javascript/reference/global_objects/generator/index.html b/files/pl/web/javascript/reference/global_objects/generator/index.html deleted file mode 100644 index a84467e7ca..0000000000 --- a/files/pl/web/javascript/reference/global_objects/generator/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Generator -slug: Web/JavaScript/Reference/Global_Objects/Generator -translation_of: Web/JavaScript/Reference/Global_Objects/Generator -original_slug: Web/JavaScript/Referencje/Obiekty/Generator ---- -<div>{{JSRef}}</div> - -<p>Obiekt <code><strong>Generator</strong></code> jest zwracany przez {{jsxref("Polecenia/function*", "generator function", "", 1)}} i odpowiada obu: <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable protocol</a> i <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">iterator protocol</a>.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">function* gen() { - yield 1; - yield 2; - yield 3; -} - -var g = gen(); // "Generator { }"</pre> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{jsxref("Generator.prototype.next()")}}</dt> - <dd>Returns a value yielded by the {{jsxref("Operators/yield", "yield")}} expression.</dd> - <dt>{{jsxref("Generator.prototype.return()")}}</dt> - <dd>Returns the given value and finishes the generator.</dd> - <dt>{{jsxref("Generator.prototype.throw()")}}</dt> - <dd>Throws an error to a generator.</dd> -</dl> - -<h2 id="Example">Example</h2> - -<h3 id="An_infinite_iterator">An infinite iterator</h3> - -<pre class="brush: js">function* idMaker() { - var index = 0; - while(true) - yield index++; -} - -var gen = idMaker(); // "Generator { }" - -console.log(gen.next().value); // 0 -console.log(gen.next().value); // 1 -console.log(gen.next().value); // 2 -// ...</pre> - -<h2 id="Legacy_generator_objects">Legacy generator objects</h2> - -<p>Firefox (SpiderMonkey) also implements an earlier version of generators in <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a>, where the star (*) in the function declaration was not necessary (you just use the <code>yield</code> keyword in the function body). However, legacy generators are deprecated. Do not use them; they are going to be removed ({{bug(1083482)}}).</p> - -<h3 id="Legacy_generator_methods">Legacy generator methods</h3> - -<dl> - <dt><code>Generator.prototype.next() </code>{{non-standard_inline}}</dt> - <dd>Returns a value yielded by the {{jsxref("Operatory/yield", "yield")}} expression. This corresponds to <code>next()</code> in the ES2015 generator object.</dd> - <dt><code>Generator.prototype.close()</code> {{non-standard_inline}}</dt> - <dd>Closes the generator, so that when calling <code>next()</code> an {{jsxref("StopIteration")}} error will be thrown. This corresponds to the <code>return()</code> method in the ES2015 generator object.</dd> - <dt><code>Generator.prototype.send()</code> {{non-standard_inline}}</dt> - <dd>Used to send a value to a generator. The value is returned from the {{jsxref("Operatory/yield", "yield")}} expression, and returns a value yielded by the next {{jsxref("Operatory/yield", "yield")}} expression. <code>send(x)</code> corresponds to <code>next(x)</code> in the ES2015 generator object.</dd> - <dt><strong><code>Generator.</code></strong><code>prototype.</code><strong><code>throw()</code> </strong> {{non-standard_inline}}</dt> - <dd>Throws an error to a generator. This corresponds to the <code>throw()</code> method in the ES2015 generator object.</dd> -</dl> - -<h3 id="Legacy_generator_example">Legacy generator example</h3> - -<pre class="brush: js">function fibonacci() { - var a = yield 1; - yield a * 2; -} - -var it = fibonacci(); -console.log(it); // "Generator { }" -console.log(it.next()); // 1 -console.log(it.send(10)); // 20 -console.log(it.close()); // undefined -console.log(it.next()); // throws StopIteration (as the generator is now closed) -</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('ES2015', '#sec-generator-objects', 'Generator objects')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(39.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(39.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(39.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<h3 id="Legacy_generators">Legacy generators</h3> - -<ul> - <li>{{jsxref("Statements/Legacy_generator_function", "The legacy generator function", "", 1)}}</li> - <li>{{jsxref("Operators/Legacy_generator_function", "The legacy generator function expression", "", 1)}}</li> - <li>{{jsxref("StopIteration")}}</li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol">The legacy Iterator protocol</a></li> -</ul> - -<h3 id="ES2015_generators">ES2015 generators</h3> - -<ul> - <li>{{jsxref("Functions", "Functions", "", 1)}}</li> - <li>{{jsxref("Statements/function", "function")}}</li> - <li>{{jsxref("Operators/function", "function expression")}}</li> - <li>{{jsxref("Function")}}</li> - <li>{{jsxref("Statements/function*", "function*")}}</li> - <li>{{jsxref("Operators/function*", "function* expression")}}</li> - <li>{{jsxref("GeneratorFunction")}}</li> - <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> -</ul> diff --git a/files/pl/web/javascript/reference/global_objects/string/blink/index.html b/files/pl/web/javascript/reference/global_objects/string/blink/index.html deleted file mode 100644 index 7430744309..0000000000 --- a/files/pl/web/javascript/reference/global_objects/string/blink/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: String.prototype.blink() -slug: Web/JavaScript/Reference/Global_Objects/String/blink -tags: - - Deprecated - - JavaScript - - Method - - Prototype - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/blink -original_slug: Web/JavaScript/Referencje/Obiekty/String/blink ---- -<div>{{JSRef}} {{deprecated_header}}</div> - -<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> - -<p>Powoduje, iż łańcuch będzie migotał tak, jakby był on wewnątrz znacznika {{HTMLElement("blink")}}.</p> - -<div class="warning"> -<p><strong>Warning:</strong> Blinking text is frowned upon by several accessibility standards. The <code><blink></code> element itself is non-standard and deprecated!</p> -</div> - -<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> - -<pre class="syntaxbox"><code><var>str</var>.blink()</code></pre> - -<h2 id="Opis" name="Opis">Opis</h2> - -<p>The <code>blink()</code> method embeds a string in a <code><blink></code> tag: <code>"<blink>str</blink>"</code>.</p> - -<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> - -<h3 id="Przyk.C5.82ad:_Zastosowanie_metody_string_do_zmiany_formatowania_.C5.82a.C5.84cucha_znak.C3.B3w" name="Przyk.C5.82ad:_Zastosowanie_metody_string_do_zmiany_formatowania_.C5.82a.C5.84cucha_znak.C3.B3w">Przykład: Zastosowanie <code>blink()</code></h3> - -<p>Następujący przykład stosuje metodę string do zmiany formatowania łańcucha znaków:</p> - -<pre class="brush: js">var worldString="Witaj, Świecie"; - -console.log(worldString.blink()); // <blink>Witaj, Świecie</blink> -console.log(worldString.bold()); // <bold>Witaj, Świecie</bold> -console.log(worldString.italics()); // <i>Witaj, Świecie</i> -console.log(worldString.strike()); // <s>Witaj, Świecie</s> -</pre> - -<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> - -<ul> - <li>{{jsxref("String.prototype.bold()")}}</li> - <li>{{jsxref("String.prototype.italics()")}}</li> - <li>{{jsxref("String.prototype.strike()")}}</li> -</ul> diff --git a/files/pl/web/javascript/reference/global_objects/string/fromcodepoint/index.html b/files/pl/web/javascript/reference/global_objects/string/fromcodepoint/index.html deleted file mode 100644 index 0a3bacc072..0000000000 --- a/files/pl/web/javascript/reference/global_objects/string/fromcodepoint/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: String.fromCodePoint() -slug: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint -translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint -original_slug: Web/JavaScript/Referencje/Obiekty/String/fromCodePoint ---- -<div>{{JSRef}}</div> - -<p>The static <strong><code>String.fromCodePoint()</code></strong> method returns a string created by using the specified sequence of code points.</p> - -<div>{{EmbedInteractiveExample("pages/js/string-fromcodepoint.html","shorter")}}</div> - - - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox notranslate">String<code>.fromCodePoint(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code><var>num1</var>, ..., <var>numN</var></code></dt> - <dd>A sequence of code points.</dd> -</dl> - -<h3 id="Return_value">Return value</h3> - -<p>A string created by using the specified sequence of code points.</p> - -<h3 id="Exceptions">Exceptions</h3> - -<ul> - <li>A {{jsxref("Errors/Not_a_codepoint", "RangeError")}} is thrown if an invalid Unicode code point is given (e.g. <code>"RangeError: NaN is not a valid code point"</code>).</li> -</ul> - -<h2 id="Description">Description</h2> - -<p>This method returns a string (and <em>not</em> a {{jsxref("String")}} object).</p> - -<p>Because <code>fromCodePoint()</code> is a static method of {{jsxref("String")}}, you must call it as <code>String.fromCodePoint()</code>, rather than as a method of a {{jsxref("String")}} object you created.</p> - -<h2 id="Polyfill">Polyfill</h2> - -<p>The <code>String.fromCodePoint()</code> method has been added to ECMAScript 2015 and may not be supported in all web browsers or environments yet.</p> - -<p>Use the code below for a polyfill:</p> - -<pre class="brush: js notranslate">if (!String.fromCodePoint) (function(stringFromCharCode) { - var fromCodePoint = function(_) { - var codeUnits = [], codeLen = 0, result = ""; - for (var index=0, len = arguments.length; index !== len; ++index) { - var codePoint = +arguments[index]; - // correctly handles all cases including `NaN`, `-Infinity`, `+Infinity` - // The surrounding `!(...)` is required to correctly handle `NaN` cases - // The (codePoint>>>0) === codePoint clause handles decimals and negatives - if (!(codePoint < 0x10FFFF && (codePoint>>>0) === codePoint)) - throw RangeError("Invalid code point: " + codePoint); - if (codePoint <= 0xFFFF) { // BMP code point - codeLen = codeUnits.push(codePoint); - } else { // Astral code point; split in surrogate halves - // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae - codePoint -= 0x10000; - codeLen = codeUnits.push( - (codePoint >> 10) + 0xD800, // highSurrogate - (codePoint % 0x400) + 0xDC00 // lowSurrogate - ); - } - if (codeLen >= 0x3fff) { - result += stringFromCharCode.apply(null, codeUnits); - codeUnits.length = 0; - } - } - return result + stringFromCharCode.apply(null, codeUnits); - }; - try { // IE 8 only supports `Object.defineProperty` on DOM elements - Object.defineProperty(String, "fromCodePoint", { - "value": fromCodePoint, "configurable": true, "writable": true - }); - } catch(e) { - String.fromCodePoint = fromCodePoint; - } -}(String.fromCharCode)); -</pre> - -<h2 id="Examples">Examples</h2> - -<h3 id="Using_fromCodePoint">Using <code>fromCodePoint()</code></h3> - -<p>Valid input:</p> - -<pre class="brush: js notranslate">String.fromCodePoint(42); // "*" -String.fromCodePoint(65, 90); // "AZ" -String.fromCodePoint(0x404); // "\u0404" == "Є" -String.fromCodePoint(0x2F804); // "\uD87E\uDC04" -String.fromCodePoint(194564); // "\uD87E\uDC04" -String.fromCodePoint(0x1D306, 0x61, 0x1D307); // "\uD834\uDF06a\uD834\uDF07" -</pre> - -<p>Invalid input:</p> - -<pre class="brush: js notranslate">String.fromCodePoint('_'); // RangeError -String.fromCodePoint(Infinity); // RangeError -String.fromCodePoint(-1); // RangeError -String.fromCodePoint(3.14); // RangeError -String.fromCodePoint(3e-2); // RangeError -String.fromCodePoint(NaN); // RangeError -</pre> - -<h3 id="Compared_to_fromCharCode">Compared to <code>fromCharCode()</code></h3> - -<p>{{jsxref("String.fromCharCode()")}} cannot return supplementary characters (i.e. code points <code>0x010000</code> – <code>0x10FFFF</code>) by specifying their code point. Instead, it requires the UTF-16 surrogate pair in order to return a supplementary character:</p> - -<pre class="brush: js notranslate">String.fromCharCode(0xD83C, 0xDF03); // Code Point U+1F303 "Night with -String.fromCharCode(55356, 57091); // Stars" == "\uD83C\uDF03" -</pre> - -<p><code>String.fromCodePoint()</code>, on the other hand, can return 4-byte supplementary characters, as well as the more common 2-byte BMP characters, by specifying their code point (which is equivalent to the UTF-32 code unit):</p> - -<pre class="brush: js notranslate">String.fromCodePoint(0x1F303); // or 127747 in decimal -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("javascript.builtins.String.fromCodePoint")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("String.fromCharCode()")}}</li> - <li>{{jsxref("String.prototype.charAt()")}}</li> - <li>{{jsxref("String.prototype.codePointAt()")}}</li> - <li>{{jsxref("String.prototype.charCodeAt()")}}</li> -</ul> diff --git a/files/pl/web/javascript/reference/global_objects/string/repeat/index.html b/files/pl/web/javascript/reference/global_objects/string/repeat/index.html deleted file mode 100644 index a6542a4bb7..0000000000 --- a/files/pl/web/javascript/reference/global_objects/string/repeat/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: String.prototype.repeat() -slug: Web/JavaScript/Reference/Global_Objects/String/repeat -translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat -original_slug: Web/JavaScript/Referencje/Obiekty/String/repeat ---- -<div>{{JSRef}}</div> - -<p>The <strong><code>repeat()</code></strong> method constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.</p> - -<h2 id="Składnia">Składnia</h2> - -<pre class="syntaxbox"><var>str</var>.repeat(<var>count</var>)</pre> - -<h3 id="Parametry">Parametry</h3> - -<dl> - <dt><code>count</code></dt> - <dd>An integer between 0 and +∞: [0, +∞), indicating the number of times to repeat the string in the newly-created string that is to be returned.</dd> -</dl> - -<h3 id="Zwracana_wartość">Zwracana wartość</h3> - -<p>A new string containing the specified number of copies of the given string.</p> - -<h3 id="Exceptions">Exceptions</h3> - -<ul> - <li>{{jsxref("Errors/Negative_repetition_count", "RangeError")}}: repeat count must be non-negative.</li> - <li>{{jsxref("Errors/Resulting_string_too_large", "RangeError")}}: repeat count must be less than infinity and not overflow maximum string size.</li> -</ul> - -<h2 id="Przykłady">Przykłady</h2> - -<pre class="brush: js">'abc'.repeat(-1); // RangeError -'abc'.repeat(0); // '' -'abc'.repeat(1); // 'abc' -'abc'.repeat(2); // 'abcabc' -'abc'.repeat(3.5); // 'abcabcabc' (count will be converted to integer) -'abc'.repeat(1/0); // RangeError - -({ toString: () => 'abc', repeat: String.prototype.repeat }).repeat(2); -// 'abcabc' (repeat() is a generic method) -</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>This method has been added to the ECMAScript 6 specification and may not be available in all JavaScript implementations yet. However, you can polyfill <code>String.prototype.repeat()</code> with the following snippet:</p> - -<pre class="brush: js">if (!String.prototype.repeat) { - String.prototype.repeat = function(count) { - 'use strict'; - if (this == null) { - throw new TypeError('can\'t convert ' + this + ' to object'); - } - var str = '' + this; - count = +count; - if (count != count) { - count = 0; - } - if (count < 0) { - throw new RangeError('repeat count must be non-negative'); - } - if (count == Infinity) { - throw new RangeError('repeat count must be less than infinity'); - } - count = Math.floor(count); - if (str.length == 0 || count == 0) { - return ''; - } - // Ensuring count is a 31-bit integer allows us to heavily optimize the - // main part. But anyway, most current (August 2014) browsers can't handle - // strings 1 << 28 chars or longer, so: - if (str.length * count >= 1 << 28) { - throw new RangeError('repeat count must not overflow maximum string size'); - } - var rpt = ''; - for (;;) { - if ((count & 1) == 1) { - rpt += str; - } - count >>>= 1; - if (count == 0) { - break; - } - str += str; - } - // Could we try: - // return Array(count + 1).join(this); - return rpt; - } -} -</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('ES6', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome("41")}} </td> - <td>{{CompatGeckoDesktop("24")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatSafari("9")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome("36")}}</td> - <td>{{CompatGeckoMobile("24")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/pl/web/javascript/reference/global_objects/uint16array/index.html b/files/pl/web/javascript/reference/global_objects/uint16array/index.html deleted file mode 100644 index 759ad9d56e..0000000000 --- a/files/pl/web/javascript/reference/global_objects/uint16array/index.html +++ /dev/null @@ -1,225 +0,0 @@ ---- -title: Uint16Array -slug: Web/JavaScript/Reference/Global_Objects/Uint16Array -translation_of: Web/JavaScript/Reference/Global_Objects/Uint16Array -original_slug: Web/JavaScript/Referencje/Obiekty/Uint16Array ---- -<div>{{JSRef("Global_Objects", "TypedArray", "Int8Array,Uint8Array,Uint8ClampedArray,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array")}}</div> - -<h2 id="Summary">Summary</h2> - -<p>The <strong><code>Uint16Array</code></strong> typed array represents an array of 16-bit unsigned integers in the platform byte order. If control over byte order is needed, use {{jsxref("DataView")}} instead. The contents are initialized to <code>0</code>. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">Uint16Array(length); -Uint16Array(typedArray); -Uint16Array(object); -Uint16Array(buffer [, byteOffset [, length]]);</pre> - -<p>For more information about the constructor syntax and the parameters, see <em><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax">TypedArray</a></em>.</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint16Array.BYTES_PER_ELEMENT")}}</dt> - <dd>Returns a number value of the element size. <code>2</code> in the case of an <code>Uint16Array</code>.</dd> - <dt>Uint16Array.length</dt> - <dd>Length property whose value is 3.</dd> - <dt>{{jsxref("TypedArray.name", "Uint16Array.name")}}</dt> - <dd>Returns the string value of the constructor name. In the case of the <code>Uint16Array</code> type: "Uint16Array".</dd> - <dt>{{jsxref("TypedArray.prototype", "Uint16Array.prototype")}}</dt> - <dd>Prototype for the <em>TypedArray</em> objects.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{jsxref("TypedArray.from", "Uint16Array.from()")}}</dt> - <dd>Creates a new <code>Uint16Array</code> from an array-like or iterable object. See also {{jsxref("Array.from()")}}.</dd> - <dt>{{jsxref("TypedArray.of", "Uint16Array.of()")}}</dt> - <dd>Creates a new <code>Uint16Array</code> with a variable number of arguments. See also {{jsxref("Array.of()")}}.</dd> -</dl> - -<h2 id="Boolean_instances" name="Boolean_instances"><code>Uint16Array</code> prototype</h2> - -<p>All <code>Uint16Array</code> objects inherit from {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p> - -<h3 id="Properties_2">Properties</h3> - -<dl> - <dt><code>Uint16Array.prototype.constructor</code></dt> - <dd>Returns the function that created an instance's prototype. This is the <code>Uint16Array</code> constructor by default.</dd> - <dt>{{jsxref("TypedArray.prototype.buffer", "Uint16Array.prototype.buffer")}} {{readonlyInline}}</dt> - <dd>Returns the {{jsxref("ArrayBuffer")}} referenced by the <code>Uint16Array</code> Fixed at construction time and thus <strong>read only</strong>.</dd> - <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint16Array.prototype.byteLength")}} {{readonlyInline}}</dt> - <dd>Returns the length (in bytes) of the <code>Uint16Array</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd> - <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint16Array.prototype.byteOffset")}} {{readonlyInline}}</dt> - <dd>Returns the offset (in bytes) of the <code>Uint16Array</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd> - <dt>{{jsxref("TypedArray.prototype.length", "Uint16Array.prototype.length")}} {{readonlyInline}}</dt> - <dd>Returns the number of elements hold in the <code>Uint16Array</code>. Fixed at construction time and thus <strong>read only.</strong></dd> -</dl> - -<h3 id="Methods_2">Methods</h3> - -<dl> - <dt>{{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}</dt> - <dd>Copies a sequence of array elements within the array. See also {{jsxref("Array.prototype.copyWithin()")}}.</dd> - <dt>{{jsxref("TypedArray.entries", "Uint16Array.prototype.entries()")}}</dt> - <dd>Returns a new <code>Array Iterator</code> object that contains the key/value pairs for each index in the array. See also {{jsxref("Array.prototype.entries()")}}.</dd> - <dt>{{jsxref("TypedArray.every", "Uint16Array.prototype.every()")}}</dt> - <dd>Tests whether all elements in the array pass the test provided by a function. See also {{jsxref("Array.prototype.every()")}}.</dd> - <dt>{{jsxref("TypedArray.fill", "Uint16Array.prototype.fill()")}}</dt> - <dd>Fills all the elements of an array from a start index to an end index with a static value. See also {{jsxref("Array.prototype.fill()")}}.</dd> - <dt>{{jsxref("TypedArray.filter", "Uint16Array.prototype.filter()")}}</dt> - <dd>Creates a new array with all of the elements of this array for which the provided filtering function returns true. See also {{jsxref("Array.prototype.filter()")}}.</dd> - <dt>{{jsxref("TypedArray.find", "Uint16Array.prototype.find()")}}</dt> - <dd>Returns the found value in the array, if an element in the array satisfies the provided testing function or <code>undefined</code> if not found. See also {{jsxref("Array.prototype.find()")}}.</dd> - <dt>{{jsxref("TypedArray.findIndex", "Uint16Array.prototype.findIndex()")}}</dt> - <dd>Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found. See also {{jsxref("Array.prototype.findIndex()")}}.</dd> - <dt>{{jsxref("TypedArray.forEach", "Uint16Array.prototype.forEach()")}}</dt> - <dd>Calls a function for each element in the array. See also {{jsxref("Array.prototype.forEach()")}}.</dd> - <dt>{{jsxref("TypedArray.includes", "Uint16Array.prototype.includes()")}} {{experimental_inline}}</dt> - <dd>Determines whether a typed array includes a certain element, returning <code>true</code> or <code>false</code> as appropriate. See also {{jsxref("Array.prototype.includes()")}}.</dd> - <dt>{{jsxref("TypedArray.indexOf", "Uint16Array.prototype.indexOf()")}}</dt> - <dd>Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.indexOf()")}}.</dd> - <dt>{{jsxref("TypedArray.join", "Uint16Array.prototype.join()")}}</dt> - <dd>Joins all elements of an array into a string. See also {{jsxref("Array.prototype.join()")}}.</dd> - <dt>{{jsxref("TypedArray.keys", "Uint16Array.prototype.keys()")}}</dt> - <dd>Returns a new <code>Array Iterator</code> that contains the keys for each index in the array. See also {{jsxref("Array.prototype.keys()")}}.</dd> - <dt>{{jsxref("TypedArray.lastIndexOf", "Uint16Array.prototype.lastIndexOf()")}}</dt> - <dd>Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.lastIndexOf()")}}.</dd> - <dt>{{jsxref("TypedArray.map", "Uint16Array.prototype.map()")}}</dt> - <dd>Creates a new array with the results of calling a provided function on every element in this array. See also {{jsxref("Array.prototype.map()")}}.</dd> - <dt>{{jsxref("TypedArray.move", "Uint16Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt> - <dd>Former non-standard version of {{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}.</dd> - <dt>{{jsxref("TypedArray.reduce", "Uint16Array.prototype.reduce()")}}</dt> - <dd>Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduce()")}}.</dd> - <dt>{{jsxref("TypedArray.reduceRight", "Uint16Array.prototype.reduceRight()")}}</dt> - <dd>Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduceRight()")}}.</dd> - <dt>{{jsxref("TypedArray.reverse", "Uint16Array.prototype.reverse()")}}</dt> - <dd>Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first. See also {{jsxref("Array.prototype.reverse()")}}.</dd> - <dt>{{jsxref("TypedArray.set", "Uint16Array.prototype.set()")}}</dt> - <dd>Stores multiple values in the typed array, reading input values from a specified array.</dd> - <dt>{{jsxref("TypedArray.slice", "Uint16Array.prototype.slice()")}}</dt> - <dd>Extracts a section of an array and returns a new array. See also {{jsxref("Array.prototype.slice()")}}.</dd> - <dt>{{jsxref("TypedArray.some", "Uint16Array.prototype.some()")}}</dt> - <dd>Returns true if at least one element in this array satisfies the provided testing function. See also {{jsxref("Array.prototype.some()")}}.</dd> - <dt>{{jsxref("TypedArray.sort", "Uint16Array.prototype.sort()")}}</dt> - <dd>Sorts the elements of an array in place and returns the array. See also {{jsxref("Array.prototype.sort()")}}.</dd> - <dt>{{jsxref("TypedArray.subarray", "Uint16Array.prototype.subarray()")}}</dt> - <dd>Returns a new <code>Uint16Array</code> from the given start and end element index.</dd> - <dt>{{jsxref("TypedArray.values", "Uint16Array.prototype.values()")}}</dt> - <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array. See also {{jsxref("Array.prototype.values()")}}.</dd> - <dt>{{jsxref("TypedArray.toLocaleString", "Uint16Array.prototype.toLocaleString()")}}</dt> - <dd>Returns a localized string representing the array and its elements. See also {{jsxref("Array.prototype.toLocaleString()")}}.</dd> - <dt>{{jsxref("TypedArray.toString", "Uint16Array.prototype.toString()")}}</dt> - <dd>Returns a string representing the array and its elements. See also {{jsxref("Array.prototype.toString()")}}.</dd> - <dt>{{jsxref("TypedArray.@@iterator", "Uint16Array.prototype[@@iterator]()")}}</dt> - <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<pre class="brush: js">// From a length -var uint16 = new Uint16Array(2); -uint16[0] = 42; -console.log(uint16[0]); // 42 -console.log(uint16.length); // 2 -console.log(uint16.BYTES_PER_ELEMENT); // 2 - -// From an array -var arr = new Uint16Array([21,31]); -console.log(arr[1]); // 31 - -// From another TypedArray -var x = new Uint16Array([21, 31]); -var y = new Uint16Array(x); -console.log(y[0]); // 21 - -// From an ArrayBuffer -var buffer = new ArrayBuffer(8); -var z = new Uint16Array(buffer, 0, 4); -</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><a href="https://www.khronos.org/registry/typedarray/specs/latest/#7">Typed Array Specification</a></td> - <td>Obsolete</td> - <td><span><span>Superseded by ECMAScript 6.</span></span></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#table-45', 'TypedArray constructors')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition in an ECMA standard.</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>7.0</td> - <td>{{ CompatGeckoDesktop("2") }}</td> - <td>10</td> - <td>11.6</td> - <td>5.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>4.0</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoMobile("2") }}</td> - <td>10</td> - <td>11.6</td> - <td>4.2</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li> - <li>{{jsxref("ArrayBuffer")}}</li> - <li>{{jsxref("DataView")}}</li> -</ul> diff --git a/files/pl/web/javascript/reference/operators/instanceof/index.html b/files/pl/web/javascript/reference/operators/instanceof/index.html deleted file mode 100644 index bd98d29e0f..0000000000 --- a/files/pl/web/javascript/reference/operators/instanceof/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Operator instanceof -slug: Web/JavaScript/Reference/Operators/instanceof -tags: - - Dokumentacja_JavaScript - - Dokumentacje - - JavaScript - - Strony_wymagające_dopracowania - - Wszystkie_kategorie -translation_of: Web/JavaScript/Reference/Operators/instanceof -original_slug: Web/JavaScript/Referencje/Operatory/Operator_instanceof ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>Operator</strong> <strong><code>instanceof</code> </strong>sprawdza czy właściwość konstruktora <code>prototype</code> pojawia się gdziekolwiek w łańcuchu prototypowym obiektu.</p> - -<p>{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}</p> - - - -<h2 id="Składnia">Składnia</h2> - -<pre class="syntaxbox"><em>object</em> instanceof <em>constructor</em></pre> - -<dl> - <dt> - <h3 id="Parametry">Parametry</h3> - <code>object</code></dt> - <dd>Obiekt do testowania.</dd> -</dl> - -<dl> - <dt><code>constructor</code></dt> - <dd>Funkcja przeciwko której testujemy.</dd> -</dl> - -<h2 id="Opis">Opis</h2> - -<p>Operator <code>instanceof</code> sprawdza obecność <code>constructor.prototype</code> w łańcuchu prototypowym obiektu <code>object</code></p> - -<pre class="brush: js">// definiowanie konstruktorów -function C() {} -function D() {} - -var o = new C(); - -// true, ponieważ: Object.getPrototypeOf(o) === C.prototype -o instanceof C; - -// false, ponieważ D.prototype nie występuje w łańcuchu prototypowym o. -o instanceof D; - -o instanceof Object; // true, ponieważ: -C.prototype instanceof Object // true - -C.prototype = {}; -var o2 = new C(); - -o2 instanceof C; // true - -// false, ponieważ C.prototype nie ma już w łańcuchu prototypowym o -o instanceof C; - -D.prototype = new C(); // add C to [[Prototype]] linkage of D -var o3 = new D(); -o3 instanceof D; // true -o3 instanceof C; // true since C.prototype is now in o3's prototype chain -</pre> - -<p>Note that the value of an <code>instanceof</code> test can change based on changes to the <code>prototype</code> property of constructors, and it can also be changed by changing an object prototype using <code>Object.setPrototypeOf</code>. It is also possible using the non-standard <code>__proto__</code> pseudo-property.</p> - -<h3 id="instanceof_and_multiple_context_(e.g._frames_or_windows)"><code>instanceof</code> and multiple context (e.g. frames or windows)</h3> - -<p>Different scopes have different execution environments. This means that they have different built-ins (different global object, different constructors, etc.). This may result in unexpected results. For instance, <code>[] instanceof window.frames[0].Array</code> will return <code>false</code>, because <code>Array.prototype !== </code><code>window.frames[0].Array</code> and arrays inherit from the former.</p> - -<p>This may not make sense at first but when you start dealing with multiple frames or windows in your script and pass objects from one context to another via functions, this will be a valid and strong issue. For instance, you can securely check if a given object is, in fact, an Array using <code>Array.isArray(myObj)</code></p> - -<p>For example checking if a <a href="/en-US/docs/Web/API/Node">Nodes</a> is a <a href="/en-US/docs/Web/API/SVGElement">SVGElement</a> in a different context you can use <code>myNode instanceof myNode.ownerDocument.defaultView.SVGElement</code></p> - -<div class="note"><strong>Note for Mozilla developers:</strong><br> -In code using XPCOM <code>instanceof</code> has special effect: <code>obj instanceof </code><em><code>xpcomInterface</code></em> (e.g. <code>Components.interfaces.nsIFile</code>) calls <code>obj.QueryInterface(<em>xpcomInterface</em>)</code> and returns <code>true</code> if QueryInterface succeeded. A side effect of such call is that you can use <em><code>xpcomInterface</code></em>'s properties on <code>obj</code> after a successful <code>instanceof</code> test. Unlike standard JavaScript globals, the test <code>obj instanceof xpcomInterface</code> works as expected even if <code>obj</code> is from a different scope.</div> - -<h2 id="Examples">Examples</h2> - -<h3 id="Demonstrating_that_String_and_Date_are_of_type_Object_and_exceptional_cases">Demonstrating that <code>String</code> and <code>Date</code> are of type <code>Object</code> and exceptional cases</h3> - -<p>The following code uses <code>instanceof</code> to demonstrate that <code>String</code> and <code>Date</code> objects are also of type <code>Object</code> (they are derived from <code>Object</code>).</p> - -<p>However, objects created with the object literal notation are an exception here: Although the prototype is undefined, <code>instanceof Object</code> returns <code>true</code>.</p> - -<pre class="brush: js">var simpleStr = 'This is a simple string'; -var myString = new String(); -var newStr = new String('String created with constructor'); -var myDate = new Date(); -var myObj = {}; - -simpleStr instanceof String; // returns false, checks the prototype chain, finds undefined -myString instanceof String; // returns true -newStr instanceof String; // returns true -myString instanceof Object; // returns true - -myObj instanceof Object; // returns true, despite an undefined prototype -({}) instanceof Object; // returns true, same case as above - -myString instanceof Date; // returns false - -myDate instanceof Date; // returns true -myDate instanceof Object; // returns true -myDate instanceof String; // returns false -</pre> - -<h3 id="Demonstrating_that_mycar_is_of_type_Car_and_type_Object">Demonstrating that <code>mycar</code> is of type <code>Car</code> and type <code>Object</code></h3> - -<p>The following code creates an object type <code>Car</code> and an instance of that object type, <code>mycar</code>. The <code>instanceof</code> operator demonstrates that the <code>mycar</code> object is of type <code>Car</code> and of type <code>Object</code>.</p> - -<pre class="brush: js">function Car(make, model, year) { - this.make = make; - this.model = model; - this.year = year; -} -var mycar = new Car('Honda', 'Accord', 1998); -var a = mycar instanceof Car; // returns true -var b = mycar instanceof Object; // returns true -</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('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-11.8.6', 'The instanceof operator')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Initial definition. Implemented in JavaScript 1.4.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.operators.instanceof")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof" title="/en-US/docs/JavaScript/Reference/Operators/typeof">typeof</a></code></li> - <li>{{jsxref("Symbol.hasInstance")}}</li> -</ul> diff --git a/files/pl/web/javascript/reference/operators/this/index.html b/files/pl/web/javascript/reference/operators/this/index.html deleted file mode 100644 index 427d3f843e..0000000000 --- a/files/pl/web/javascript/reference/operators/this/index.html +++ /dev/null @@ -1,347 +0,0 @@ ---- -title: this -slug: Web/JavaScript/Reference/Operators/this -translation_of: Web/JavaScript/Reference/Operators/this -original_slug: Web/JavaScript/Referencje/Operatory/this ---- -<div> -<div>{{jsSidebar("Operators")}}</div> -</div> - -<h2 id="Summary">Summary</h2> - -<p>W JavaScript słówko kluczowe <code>this</code> zachowuje się nieco inaczej w porównaniu do innych języków programowania. Istnieje również kilka różnic między trybem <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a> oraz non-strict mode.</p> - -<p>W większości przypadków wartość <code>this</code> jest ustalana na podstawie tego, jak wywołana została dana funkcja. Wartość ta nie może być przypisana podczas wykonywania się funkcji i może być inna za każdym wywołaniem. ES5 wprowadziło metodę <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a></code> dzięki której <a href="#The_bind_method">możemy przypisać wartość <code>this</code> w funkcji, niezależnie od tego jak została ona wywołana.</a></p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">this</pre> - -<h2 id="Global_context">Global context</h2> - -<p>In the global execution context (outside of any function), <code>this</code> refers to the global object, whether in strict mode or not.</p> - -<pre class="brush:js">console.log(this.document === document); // true - -// In web browsers, the window object is also the global object: -console.log(this === window); // true - -this.a = 37; -console.log(window.a); // 37 -</pre> - -<h2 id="Function_context">Function context</h2> - -<p>Inside a function, the value of <code>this</code> depends on how the function is called.</p> - -<h3 id="Simple_call">Simple call</h3> - -<pre class="brush:js">function f1(){ - return this; -} - -f1() === window; // global object -</pre> - -<p>In this case, the value of <code>this</code> is not set by the call. Since the code is not in strict mode, the value of <code>this</code> must always be an object so it defaults to the global object.</p> - -<pre class="brush:js">function f2(){ - "use strict"; // see strict mode - return this; -} - -f2() === undefined; -</pre> - -<p>In strict mode, the value of <code>this</code> remains at whatever it's set to when entering the execution context. If it's not defined, it remains undefined. It can also be set to any value, such as <code>null</code> or <code>42</code> or <code>"I am not this"</code>.</p> - -<div class="note"><strong>Note:</strong> In the second example, <code>this</code> should be <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>, because <code>f2</code> was called without providing any base (e.g. <code>window.f2()</code>). This feature wasn't implemented in some browsers when they first started to support <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="Strict mode">strict mode</a>. As a result, they incorrectly returned the <code>window</code> object.</div> - -<h3 id="As_an_object_method">As an object method</h3> - -<p>When a function is called as a method of an object, its <code>this</code> is set to the object the method is called on.</p> - -<p>In the following example, when <code>o.f()</code> is invoked, inside the function <code>this</code> is bound to the <code>o</code> object.</p> - -<pre class="brush:js">var o = { - prop: 37, - f: function() { - return this.prop; - } -}; - -console.log(o.f()); // logs 37 -</pre> - -<p>Note that this behavior is not at all affected by how or where the function was defined. In the previous example, we defined the function inline as the <code>f</code> member during the definition of <code>o</code>. However, we could have just as easily defined the function first and later attached it to <code>o.f</code>. Doing so results in the same behavior:</p> - -<pre class="brush:js">var o = {prop: 37}; - -function independent() { - return this.prop; -} - -o.f = independent; - -console.log(o.f()); // logs 37 -</pre> - -<p>This demonstrates that it matters only that the function was invoked from the <code>f</code> member of <code>o</code>.</p> - -<p>Similarly, the <code>this</code> binding is only affected by the most immediate member reference. In the following example, when we invoke the function, we call it as a method <code>g</code> of the object <code>o.b</code>. This time during execution, <code>this</code> inside the function will refer to <code>o.b</code>. The fact that the object is itself a member of <code>o</code> has no consequence; the most immediate reference is all that matters.</p> - -<pre class="brush:js">o.b = {g: independent, prop: 42}; -console.log(o.b.g()); // logs 42 -</pre> - -<h4 id="this_on_the_objects_prototype_chain"><code>this</code> on the object's prototype chain</h4> - -<p>The same notion holds true for methods defined somewhere on the object's prototype chain. If the method is on an object's prototype chain, <code>this</code> refers to the object the method was called on, as if the method was on the object.</p> - -<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }}; -var p = Object.create(o); -p.a = 1; -p.b = 4; - -console.log(p.f()); // 5 -</pre> - -<p>In this example, the object assigned to the variable <code>p</code> doesn't have its own <code>f</code> property, it inherits it from its prototype. But it doesn't matter that the lookup for <code>f</code> eventually finds a member with that name on <code>o</code>; the lookup began as a reference to <code>p.f</code>, so <code>this</code> inside the function takes the value of the object referred to as <code>p</code>. That is, since <code>f</code> is called as a method of <code>p</code>, its <code>this</code> refers to <code>p</code>. This is an interesting feature of JavaScript's prototype inheritance.</p> - -<h4 id="this_with_a_getter_or_setter"><code>this</code> with a getter or setter</h4> - -<p>Again, the same notion holds true when a function is invoked from a getter or a setter. A function used as getter or setter has its <code>this</code> bound to the object from which the property is being set or gotten.</p> - -<pre class="brush:js">function modulus(){ - return Math.sqrt(this.re * this.re + this.im * this.im); -} - -var o = { - re: 1, - im: -1, - get phase(){ - return Math.atan2(this.im, this.re); - } -}; - -Object.defineProperty(o, 'modulus', { - get: modulus, enumerable:true, configurable:true}); - -console.log(o.phase, o.modulus); // logs -0.78 1.4142 -</pre> - -<h3 id="As_a_constructor">As a constructor</h3> - -<p>When a function is used as a constructor (with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword), its <code>this</code> is bound to new object being constructed.</p> - -<p>Note: while the default for a constructor is to return the object referenced by <code>this</code>, it can instead return some other object (if the return value isn't an object, then the <code>this</code> object is returned).</p> - -<pre class="brush:js">/* - * Constructors work like this: - * - * function MyConstructor(){ - * // Actual function body code goes here. - * // Create properties on |this| as - * // desired by assigning to them. E.g., - * this.fum = "nom"; - * // et cetera... - * - * // If the function has a return statement that - * // returns an object, that object will be the - * // result of the |new| expression. Otherwise, - * // the result of the expression is the object - * // currently bound to |this| - * // (i.e., the common case most usually seen). - * } - */ - -function C(){ - this.a = 37; -} - -var o = new C(); -console.log(o.a); // logs 37 - - -function C2(){ - this.a = 37; - return {a:38}; -} - -o = new C2(); -console.log(o.a); // logs 38 -</pre> - -<p>In the last example (<code>C2</code>), because an object was returned during construction, the new object that <code>this</code> was bound to simply gets discarded. (This essentially makes the statement "<code>this.a = 37;</code>" dead code. It's not exactly dead, because it gets executed, but it can be eliminated with no outside effects.)</p> - -<h3 id="call_and_apply"><code>call</code> and <code>apply</code></h3> - -<p>Where a function uses the <code>this</code> keyword in its body, its value can be bound to a particular object in the call using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a></code> or <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a></code> methods that all functions inherit from <code>Function.prototype</code>.</p> - -<pre class="brush:js">function add(c, d){ - return this.a + this.b + c + d; -} - -var o = {a:1, b:3}; - -// The first parameter is the object to use as -// 'this', subsequent parameters are passed as -// arguments in the function call -add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 - -// The first parameter is the object to use as -// 'this', the second is an array whose -// members are used as the arguments in the function call -add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 -</pre> - -<p>Note that with <code>call</code> and <code>apply</code>, if the value passed as <code>this</code> is not an object, an attempt will be made to convert it to an object using the internal <code>ToObject</code> operation. So if the value passed is a primitive like <code>7</code> or <code>'foo'</code>, it will be converted to an Object using the related constructor, so the primitive number <code>7</code> is converted to an object as if by <code>new Number(7)</code> and the string <code>'foo'</code> to an object as if by <code>new String('foo'), e.g.</code></p> - -<pre class="brush:js">function bar() { - console.log(Object.prototype.toString.call(this)); -} - -bar.call(7); // [object Number] -</pre> - -<h3 id="The_bind_method">The <code>bind</code> method</h3> - -<p>ECMAScript 5 introduced <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind</a></code>. Calling <code>f.bind(someObject)</code> creates a new function with the same body and scope as <code>f</code>, but where <code>this</code> occurs in the original function, in the new function it is permanently bound to the first argument of <code>bind</code>, regardless of how the function is being used.</p> - -<pre class="brush:js">function f(){ - return this.a; -} - -var g = f.bind({a:"azerty"}); -console.log(g()); // azerty - -var o = {a:37, f:f, g:g}; -console.log(o.f(), o.g()); // 37, azerty -</pre> - -<h3 id="As_a_DOM_event_handler">As a DOM event handler</h3> - -<p>When a function is used as an event handler, its <code>this</code> is set to the element the event fired from (some browsers do not follow this convention for listeners added dynamically with methods other than <code>addEventListener</code>).</p> - -<pre class="brush:js">// When called as a listener, turns the related element blue -function bluify(e){ - // Always true - console.log(this === e.currentTarget); - // true when currentTarget and target are the same object - console.log(this === e.target); - this.style.backgroundColor = '#A5D9F3'; -} - -// Get a list of every element in the document -var elements = document.getElementsByTagName('*'); - -// Add bluify as a click listener so when the -// element is clicked on, it turns blue -for(var i=0 ; i<elements.length ; i++){ - elements[i].addEventListener('click', bluify, false); -}</pre> - -<h3 id="In_an_in–line_event_handler">In an in–line event handler</h3> - -<p>When code is called from an in–line handler, its <code>this</code> is set to the DOM element on which the listener is placed:</p> - -<pre class="brush:js"><button onclick="alert(this.tagName.toLowerCase());"> - Show this -</button> -</pre> - -<p>The above alert shows <code>button</code>. Note however that only the outer code has its <code>this</code> set this way:</p> - -<pre class="brush:js"><button onclick="alert((function(){return this}()));"> - Show inner this -</button> -</pre> - -<p>In this case, the inner function's <code>this</code> isn't set so it returns the global/window object (i.e. the default object in non–strict mode where <code>this</code> isn't set by the call).</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>ECMAScript 1st Edition.</td> - <td>Standard</td> - <td>Initial definition. Implemented in JavaScript 1.0</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-this-keyword', 'The this keyword')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li> - <li><a href="http://bjorn.tipling.com/all-this">All this</a>, an article about <code>this</code> in different contexts</li> -</ul> diff --git a/files/pl/web/javascript/reference/statements/throw/index.html b/files/pl/web/javascript/reference/statements/throw/index.html deleted file mode 100644 index d47ab9803b..0000000000 --- a/files/pl/web/javascript/reference/statements/throw/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: throw -slug: Web/JavaScript/Reference/Statements/throw -tags: - - Dokumentacja_JavaScript - - Dokumentacje - - JavaScript - - Strony_wymagające_dopracowania - - Wszystkie_kategorie -translation_of: Web/JavaScript/Reference/Statements/throw -original_slug: Web/JavaScript/Referencje/Polecenia/throw ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>The <strong><code>throw</code> statement</strong> throws a user-defined exception. Execution of the current function will stop (the statements after <code>throw</code> won't be executed), and control will be passed to the first <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>catch</code></a> block in the call stack. If no <code>catch</code> block exists among caller functions, the program will terminate.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-throw.html")}}</div> - - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">throw <em>expression</em>; </pre> - -<dl> - <dt><code>expression</code></dt> - <dd>The expression to throw.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>Use the <code>throw</code> statement to throw an exception. When you throw an exception, <code>expression</code> specifies the value of the exception. Each of the following throws an exception:</p> - -<pre class="brush: js">throw 'Error2'; // generates an exception with a string value -throw 42; // generates an exception with the value 42 -throw true; // generates an exception with the value true</pre> - -<p>Also note that the <code>throw</code> statement is affected by <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">automatic semicolon insertion (ASI)</a> as no line terminator between the <code>throw</code> keyword and the expression is allowed.</p> - -<h2 id="Examples">Examples</h2> - -<h3 id="Throw_an_object">Throw an object</h3> - -<p>You can specify an object when you throw an exception. You can then reference the object's properties in the <code>catch</code> block. The following example creates an object of type <code>UserException</code> and uses it in a <code>throw</code> statement.</p> - -<pre class="brush: js">function UserException(message) { - this.message = message; - this.name = 'UserException'; -} -function getMonthName(mo) { - mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec) - var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', - 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; - if (months[mo] !== undefined) { - return months[mo]; - } else { - throw new UserException('InvalidMonthNo'); - } -} - -try { - // statements to try - var myMonth = 15; // 15 is out of bound to raise the exception - var monthName = getMonthName(myMonth); -} catch (e) { - monthName = 'unknown'; - console.log(e.message, e.name); // pass exception object to err handler -} -</pre> - -<h3 id="Another_example_of_throwing_an_object">Another example of throwing an object</h3> - -<p>The following example tests an input string for a U.S. zip code. If the zip code uses an invalid format, the throw statement throws an exception by creating an object of type <code>ZipCodeFormatException</code>.</p> - -<pre class="brush: js">/* - * Creates a ZipCode object. - * - * Accepted formats for a zip code are: - * 12345 - * 12345-6789 - * 123456789 - * 12345 6789 - * - * If the argument passed to the ZipCode constructor does not - * conform to one of these patterns, an exception is thrown. - */ - -function ZipCode(zip) { - zip = new String(zip); - pattern = /[0-9]{5}([- ]?[0-9]{4})?/; - if (pattern.test(zip)) { - // zip code value will be the first match in the string - this.value = zip.match(pattern)[0]; - this.valueOf = function() { - return this.value - }; - this.toString = function() { - return String(this.value) - }; - } else { - throw new ZipCodeFormatException(zip); - } -} - -function ZipCodeFormatException(value) { - this.value = value; - this.message = 'does not conform to the expected format for a zip code'; - this.toString = function() { - return this.value + this.message; - }; -} - -/* - * This could be in a script that validates address data - * for US addresses. - */ - -const ZIPCODE_INVALID = -1; -const ZIPCODE_UNKNOWN_ERROR = -2; - -function verifyZipCode(z) { - try { - z = new ZipCode(z); - } catch (e) { - if (e instanceof ZipCodeFormatException) { - return ZIPCODE_INVALID; - } else { - return ZIPCODE_UNKNOWN_ERROR; - } - } - return z; -} - -a = verifyZipCode(95060); // returns 95060 -b = verifyZipCode(9560); // returns -1 -c = verifyZipCode('a'); // returns -1 -d = verifyZipCode('95060'); // returns 95060 -e = verifyZipCode('95060 1234'); // returns 95060 1234 -</pre> - -<h3 id="Rethrow_an_exception">Rethrow an exception</h3> - -<p>You can use <code>throw</code> to rethrow an exception after you catch it. The following example catches an exception with a numeric value and rethrows it if the value is over 50. The rethrown exception propagates up to the enclosing function or to the top level so that the user sees it.</p> - -<pre class="brush: js">try { - throw n; // throws an exception with a numeric value -} catch (e) { - if (e <= 50) { - // statements to handle exceptions 1-50 - } else { - // cannot handle this exception, so rethrow - throw e; - } -} -</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('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Initial definition. Implemented in JavaScript 1.4</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.statements.throw")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a></li> -</ul> diff --git a/files/pl/web/javascript/typed_arrays/index.html b/files/pl/web/javascript/typed_arrays/index.html deleted file mode 100644 index b36127886f..0000000000 --- a/files/pl/web/javascript/typed_arrays/index.html +++ /dev/null @@ -1,274 +0,0 @@ ---- -title: Tablice reprezentujące typy JavaScript -slug: Web/JavaScript/Typed_arrays -translation_of: Web/JavaScript/Typed_arrays ---- -<div> -<div>{{JsSidebar("Advanced")}}</div> -</div> - -<p>Jako, że aplikacje internetowe stają się coraz bardziej potężne, zapewniając takie możliwości jak chociażby manipulacja audio i wideo, dostęp do surowych danych używając WebSocket, i tak dalej, stało się jasne, że są sytuacje, w których przydałoby się, żeby kod JavaScript był w stanie szybko i łatwo manipulować surowymi danymi binarnymi. W przeszłości, musiało być to symulowane przez traktowanie surowych danych jako <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="JavaScript/Reference/Global Objects/String">string</a> i używanie metody <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/charCodeAt" title="JavaScript/Reference/Global Objects/String/charCodeAt">charCodeAt()</a>,</code> aby przeczytać bajty z buforu danych.</p> - -<p>Jakkolwiek, jest to wolne i podatne na błędy, ze względu na potrzebę wielu konwersji (szczególnie jeśli dane binarne nie są tak naprawdę danymi w formacie bajtów, ale, na przykład, 32-bitowymi liczbami całkowitymi lub zmiennoprzecinkowymi).</p> - -<p>Tablice zawierające typy JavaScript zapewniają mechanizm dostępu do danych binarnych dużo bardziej wydajnie.</p> - -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="Documentation" name="Documentation">Dokumentacja</h2> - - <dl> - <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a></dt> - <dd>The <code>ArrayBuffer</code> is a data type that is used to represent a generic, fixed-length binary data buffer. You can't directly manipulate the contents of an <code>ArrayBuffer</code>; instead, you create an <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView" title="en/JavaScript typed arrays/ArrayBufferView"><code>ArrayBufferView</code></a> object which represents the buffer in a specific format, and use that to read and write the contents of the buffer.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView"><code>ArrayBufferView</code></a></dt> - <dd>The <code>ArrayBufferView</code> type describes a particular view on the contents of an <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer">ArrayBuffer</a>'s data. Of note is that you may create multiple views into the same buffer, each looking at the buffer's contents starting at a particular offset. This makes it possible to set up views of different data types to read the contents of a buffer based on the types of data at specific offsets into the buffer</dd> - <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays/DataView" title="/en-US/docs/Web/JavaScript/Typed_arrays/DataView"><code>DataView</code></a></dt> - <dd> - <p>The <code>DataView</code> view provides a low-level interface for reading data from and writing it to an <code><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer" title="en/JavaScript_typed_arrays/ArrayBuffer">ArrayBuffer</a></code>.</p> - </dd> - <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> <span class="inlineIndicator" style="font-weight: normal;" title="This API is not native.">Non native</span></dt> - <dd>In this article is published a library of ours whose aims are: - <ul> - <li>creating a <strong><a href="http://en.wikipedia.org/wiki/C_%28programming_language%29">C</a>-like interface for strings</strong> (i.e. array of characters codes — an<a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView"> <code>ArrayBufferView</code></a> in JavaScript) based upon the JavaScript <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> interface,</li> - <li>creating an <strong>highly scalable</strong> library, that anyone can extend by adding methods to the object <code>StringView.prototype</code>,</li> - <li>creating a collection of methods for such string-like objects (since now: <code>stringView</code>s) which <strong>work strictly on arrays of numbers</strong> rather than on creating new immutable JavaScript strings,</li> - <li><strong>working with other Unicode encodings</strong> different from default JavaScript's UTF-16 {{domxref("DOMString")}}s,</li> - </ul> - </dd> - <dt><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Getting <code>ArrayBuffer</code>s or typed arrays from <em>Base64</em>-encoded strings</a></dt> - <dd>Code snippets to get <code>ArrayBuffer</code>s or typed arrays from <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding" title="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding"><em>Base64</em>-encoded</a> strings.</dd> - <dt><a href="/en-US/docs/Web/API/FileReader#readAsArrayBuffer()" title="/en-US/docs/Web/API/FileReader#readAsArrayBuffer()"><code>FileReader.prototype.readAsArrayBuffer()</code></a></dt> - <dd>The <code>FileReader.prototype.readAsArrayBuffer()</code> method starts reading the contents of the specified <a href="/en-US/docs/Web/API/Blob" title="/en-US/docs/DOM/Blob"><code>Blob</code></a> or <a href="/en-US/docs/Web/API/File" title="/en-US/docs/DOM/File"><code>File</code></a>.</dd> - <dt><a href="/en-US/docs/Web/API/XMLHttpRequest#send()" title="/en-US/docs/Web/API/XMLHttpRequest#send()"><code>XMLHttpRequest.prototype.send()</code></a></dt> - <dd><code>XMLHttpRequest</code> instances' <code>send()</code> method now supports typed arrays and <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a>s as argument.</dd> - </dl> - - </td> - <td> - <h2 class="Community" id="Community" name="Community">Społeczność</h2> - - <ul> - <li>Zobacz forum Mozilla... {{ DiscussionList("dev-web-development", "mozilla.dev.web.development") }}</li> - </ul> - - <h2 class="Tools" id="Tools" name="Tools">Narzędzia</h2> - - <ul> - <li><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Getting <code>ArrayBuffer</code>s or typed arrays from <em>Base64</em>-encoded strings</a></li> - <li><a href="/en-US/docs/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li> - </ul> - - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Powiązane tematy</h2> - - <ul> - <li><a href="/en-US/docs/Web/API/File" title="/en-US/docs/DOM/File"><code>File</code></a></li> - <li><code><a href="/en-US/docs/Web/API/Blob" title="/en-US/docs/DOM/Blob">Blob</a></code></li> - </ul> - </td> - </tr> - </tbody> -</table> - -<h2 id="Bufory_i_widoki_struktura_tablic_reprezentujących_typy">Bufory i widoki: struktura tablic reprezentujących typy</h2> - -<p>To achieve maximum flexibility and efficiency, JavaScript typed arrays split the implementation into a <strong>buffer</strong> and a <strong>view</strong>. A buffer (implemented by the <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a> class) is an object representing a chunk of data; it has no format to speak of, and offers no mechanism for accessing its contents. In order to access the memory contained in a buffer, you need to use a view. A view provides a context—that is, a data type, starting offset, and number of elements—that turns the data into an actual typed array. Views are implemented by the <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBufferView" title="JavaScript typed arrays/ArrayBufferView"><code>ArrayBufferView</code></a> class and its subclasses.</p> - -<h2 id="Podklasy_tablic_reprezentujących_typy">Podklasy tablic reprezentujących typy</h2> - -<p>The following subclasses provide buffer views allowing access to the data in specific data types. Note that the classes that work with more than one byte (e.g. Int16Array) use the platform byte order. If control over byte order is needed, use DataView instead.</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Typ</td> - <td class="header">Rozmiar</td> - <td class="header">Opis</td> - <td class="header">Odpowiednik C</td> - </tr> - <tr> - <td><a href="/en/JavaScript_typed_arrays/Int8Array" title="en/JavaScript typed arrays/Int8Array"><code>Int8Array</code></a></td> - <td>1</td> - <td>8-bitowa liczba całkowita ze znakiem w zapisie dopełnienia do dwóch</td> - <td><code>signed char</code></td> - </tr> - <tr> - <td><code><a href="/en/JavaScript_typed_arrays/Uint8Array" title="en/JavaScript typed arrays/Uint8Array">Uint8Array</a></code></td> - <td>1</td> - <td>8-bitowa liczba całkowita bez znaku</td> - <td><code>unsigned char</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray" title="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray"><code>Uint8ClampedArray</code></a></td> - <td>1</td> - <td>8-bitowa liczba całkowita bez znaku</td> - <td><code>unsigned char</code></td> - </tr> - <tr> - <td><code><a href="/en/JavaScript_typed_arrays/Int16Array" title="en/JavaScript typed arrays/Int16Array">Int16Array</a></code></td> - <td>2</td> - <td>16-bitowa liczba całkowita ze znakiem w zapisie dopełnienia do dwóch</td> - <td><code>short</code></td> - </tr> - <tr> - <td><code><a href="/en/JavaScript_typed_arrays/Uint16Array" title="en/JavaScript typed arrays/Uint16Array">Uint16Array</a></code></td> - <td>2</td> - <td>16-bitowa liczba całkowita bez znaku</td> - <td><code>unsigned short</code></td> - </tr> - <tr> - <td><code><a href="/en/JavaScript_typed_arrays/Int32Array" title="en/JavaScript typed arrays/Int32Array">Int32Array</a></code></td> - <td>4</td> - <td>32-bitowa liczba całkowita ze znakiem w zapisie dopełnienia do dwóch</td> - <td><code>int</code></td> - </tr> - <tr> - <td><code><a href="/en/JavaScript_typed_arrays/Uint32Array" title="en/JavaScript typed arrays/Uint32Array">Uint32Array</a></code></td> - <td>4</td> - <td>32-bitowa liczba całkowita bez znaku</td> - <td><code>unsigned int</code></td> - </tr> - <tr> - <td><code><a href="/en/JavaScript_typed_arrays/Float32Array" title="en/JavaScript typed arrays/Float32Array">Float32Array</a></code></td> - <td>4</td> - <td>32-bitowa liczba zmiennoprzecinkowa IEEE</td> - <td><code>float</code></td> - </tr> - <tr> - <td><code><a href="/en/JavaScript_typed_arrays/Float64Array" title="en/JavaScript typed arrays/Float64Array">Float64Array</a></code></td> - <td>8</td> - <td>64-bitowa liczba zmiennoprzecinkowa IEEE</td> - <td><code>double</code></td> - </tr> - </tbody> -</table> - -<h2 id="Superklasy_tablic_reprezentujących_typy">Superklasy tablic reprezentujących typy</h2> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Typ</td> - <td class="header">Opis</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Typed_arrays/DataView" title="/en-US/docs/Web/JavaScript/Typed_arrays/DataView"><code>DataView</code></a></td> - <td>The <code>DataView</code> view provides a low-level interface for reading data from and writing it to an <code><a href="https://developer.mozilla.org/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript_typed_arrays/ArrayBuffer">ArrayBuffer</a></code>.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> <span class="inlineIndicator" title="This API is not native.">Non native</span></td> - <td>The <code>StringView</code> view provides a <strong><a class="external" href="http://en.wikipedia.org/wiki/C_%28programming_language%29">C</a>-like interface for strings</strong> (i.e. array of characters codes — an<a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView"> <code>ArrayBufferView</code></a> in JavaScript) based upon the JavaScript <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> interface,</td> - </tr> - </tbody> -</table> - -<h2 id="Używanie_widoków_z_buforami">Używanie widoków z buforami</h2> - -<p>Stwórzmy 16-bajtowy bufor:</p> - -<pre class="brush:js">var buffer = new ArrayBuffer(16); -</pre> - -<p>At this point, we have a chunk of memory whose bytes are all pre-initialized to 0. There's not a lot we can do with it, though. We can confirm that it is indeed 16 bytes long, and that's about it:</p> - -<pre class="brush:js">if (buffer.byteLength == 16) { - alert("Yes, it's 16 bytes."); -} else { - alert("Oh no, it's the wrong size!"); -} -</pre> - -<p>Before we can really work with this buffer, we need to create a view. Let's create a view that treats the data in the buffer as an array of 32-bit signed integers:</p> - -<pre class="brush:js">var int32View = new Int32Array(buffer); -</pre> - -<p>Now we can access the fields in the array just like a normal array:</p> - -<pre class="brush:js">for (var i=0; i<int32View.length; i++) { - int32View[i] = i*2; -} -</pre> - -<p>This fills out the 4 entries in the array (4 entries at 4 bytes each makes 16 total bytes) with the values 0, 2, 4, and 6.</p> - -<h3 id="Wiele_widoków_tych_samych_danych">Wiele widoków tych samych danych</h3> - -<p>Things start to get really interesting when you consider that you can create multiple views onto the same data. For example, given the code above, we can continue like this:</p> - -<pre class="brush:js">var int16View = new Int16Array(buffer); - -for (var i=0; i<int16View.length; i++) { - console.log("Entry " + i + ": " + int16View[i]); -} -</pre> - -<p>Here we create a 16-bit integer view that shares the same buffer as the existing 32-bit view and we output all the values in the buffer as 16-bit integers. Now we get the output 0, 0, 2, 0, 4, 0, 6, 0.</p> - -<p>You can go a step farther, though. Consider this:</p> - -<pre class="brush:js">int16View[0] = 32; -console.log("Entry 0 in the 32-bit array is now " + int32View[0]); -</pre> - -<p>The output from this is "Entry 0 in the 32-bit array is now 32". In other words, the two arrays are indeed simply views on the same data buffer, treating it as different formats. You can do this with any <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBufferView#Typed_array_subclasses" title="JavaScript typed arrays/ArrayBufferView#Typed array subclasses">view types</a>.</p> - -<h2 id="Praca_ze_złożonymi_strukturami_danych">Praca ze złożonymi strukturami danych</h2> - -<p>By combining a single buffer with multiple views of different types, starting at different offsets into the buffer, you can interact with data objects containing multiple data types. This lets you, for example, interact with complex data structures from <a href="/en-US/docs/WebGL" title="WebGL">WebGL</a>, data files, or C structures you need to use while using <a href="/en-US/docs/js-ctypes" title="js-ctypes">js-ctypes</a>.</p> - -<p>Rozważ tą strukturę C:</p> - -<pre class="brush:cpp">struct someStruct { - unsigned long id; - char username[16]; - float amountDue; -};</pre> - -<p>Możesz uzyskać dostęp do bufora zawierającego dane w tych formacie w ten sposób:</p> - -<pre class="brush:js">var buffer = new ArrayBuffer(24); - -// ... zczytaj dane do bufora ... - -var idView = new Uint32Array(buffer, 0, 1); -var usernameView = new Uint8Array(buffer, 4, 16); -var amountDueView = new Float32Array(buffer, 20, 1);</pre> - -<p>Potem możesz uzyskać dostęp, na przykład, do kwoty należnej używając <code>amountDueView[0]</code>.</p> - -<div class="note"><strong>Note:</strong> The <a href="http://en.wikipedia.org/wiki/Data_structure_alignment" title="http://en.wikipedia.org/wiki/Data_structure_alignment">data structure alignment</a> in a C structure is platform-dependent. Take precautions and considerations for these padding differences.</div> - -<h2 id="Konwersja_do_zwykłych_tablic">Konwersja do zwykłych tablic</h2> - -<p>After processing a typed array, it is sometimes useful to convert it back to a normal array in order to benefit from the <code>Array</code> prototype. Following is a way to do that.</p> - -<pre>var typedArray = new Uint8Array( [ 1, 2, 3, 4 ] ), - normalArray = Array.apply( [], typedArray ); -normalArray.length === 4; -normalArray.constructor === Array; -</pre> - -<h2 id="Kompatybilność">Kompatybilność</h2> - -<p>Typed arrays are available in WebKit as well. Chrome 7 includes support for <code>ArrayBuffer</code>, <code>Float32Array</code>, <code>Int16Array</code>, and <code>Uint8Array</code>. Chrome 9 and Firefox 15 add support for <code>DataView</code> objects. Internet Explorer 10 supports all types except <code>Uint8ClampedArray</code> and <code>ArrayBuffer.prototype.slice</code>.</p> - -<h2 id="Specyfikacja">Specyfikacja</h2> - -<ul> - <li><a class="link-https" href="http://www.khronos.org/registry/typedarray/specs/latest/">Typed Array Specification</a></li> -</ul> - -<h2 id="See_also" name="See_also">Zobacz także</h2> - -<ul> - <li><a href="/en-US/docs/JavaScript/Typed_arrays/Int8Array" title="Int8Array"><code>Int8Array</code></a>, <a href="/en-US/docs/JavaScript/Typed_arrays/Int16Array" title="Int8Array"><code>Int16Array</code></a>, <a href="/en-US/docs/JavaScript/Typed_arrays/Int32Array" title="Int8Array"><code>Int32Array</code></a></li> - <li><a href="/en-US/docs/JavaScript/Typed_arrays/Uint8Array" title="Uint8Array"><code>Uint8Array</code></a>, <a href="/en-US/docs/JavaScript/Typed_arrays/Uint16Array" title="Uint8Array"><code>Uint16Array</code></a>, <a href="/en-US/docs/JavaScript/Typed_arrays/Uint32Array" title="Uint8Array"><code>Uint32Array</code></a>, <a href="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray" title="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray"><code>Uint8ClampedArray</code></a></li> - <li><a href="/en-US/docs/JavaScript/Typed_arrays/Float32Array" title="Float32Array"><code>Float32Array</code></a>, <a href="/en-US/docs/JavaScript/Typed_arrays/Float64Array" title="Float64Array"><code>Float64Array</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/DataView" title="/en-US/docs/Web/JavaScript/Typed_arrays/DataView"><code>DataView</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Getting <code>ArrayBuffer</code>s or typed arrays from <em>Base64</em>-encoded strings</a></li> -</ul> - -<div id="cke_pastebin" style="position: absolute; top: 617.817px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> </div> diff --git a/files/pl/web/security/securing_your_site/index.html b/files/pl/web/security/securing_your_site/index.html deleted file mode 100644 index 59682ddf82..0000000000 --- a/files/pl/web/security/securing_your_site/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Securing your site -slug: Web/Security/Securing_your_site -tags: - - HTTP - - NeedsTranslation - - Security - - TopicStub - - Web Development - - Website Security -translation_of: Web/Security/Securing_your_site ---- -<p>{{ draft() }}</p> - -<p>There are a number of things you can do to help secure your site. This article offers an assortment of suggestions, as well as links to other articles providing more useful information.</p> - -<div class="note"><strong>Note:</strong> This article is a work in progress, and is neither complete nor does following its suggestions guarantee your site will be fully secure.</div> - -<h2 id="User_information_security">User information security</h2> - -<dl> - <dt><a href="/en/How_to_Turn_Off_Form_Autocompletion" title="en/How to Turn Off Form Autocompletion">How to turn off form autocompletion</a></dt> - <dd>Form fields support autocompletion in Gecko; that is, their values can be remembered and automatically brought back the next time the user visits your site. For certain types of data, you may wish to disable this feature.</dd> - <dt><a href="/en/CSS/Privacy_and_the_:visited_selector" title="en/CSS/Privacy and the :visited selector">Privacy and the :visited selector</a></dt> - <dd>This article discusses changes made to the <code>getComputedStyle()</code> method that eliminates the ability for malicious sites to figure out the user's browsing history.</dd> - <dt><a href="https://www.owasp.org/index.php/Password_Storage_Cheat_Sheet">Hash passwords using a secure algorithm</a> (OWASP)</dt> - <dd>Storing passwords in plain text can lead to attackers knowing and leaking the exact password of your site's users, potentially putting the users at risk. The same issues can arise if you use an old or insecure algorithm for hashing (such as md5). You should use a password-specific hashing algorithm (such as Argon2, PBKDF2, scrypt or bcrypt) instead of message digest algorithms (such as md5 and sha). This article showcases best practices to use when storing passwords.</dd> -</dl> - -<h2 id="Content_security">Content security</h2> - -<dl> - <dt><a href="/en/Properly_Configuring_Server_MIME_Types" title="en/Properly Configuring Server MIME Types">Properly configuring server MIME types</a></dt> - <dd>There are several ways incorrect MIME types can cause potential security problems with your site. This article explains some of those and shows how to configure your server to serve files with the correct MIME types.</dd> - <dt><a href="/en/Security/HTTP_Strict_Transport_Security" title="en/Security/HTTP Strict Transport Security">HTTP Strict Transport Security</a></dt> - <dd>The <code>Strict-Transport-Security:</code> <a href="/en/HTTP" title="en/HTTP">HTTP</a> header lets a website specify that it may only be accessed using HTTPS.</dd> - <dt><a href="/en-US/docs/Web/HTTP/CORS" title="En/HTTP access control">HTTP access control</a></dt> - <dd>The Cross-Origin Resource Sharing standard provides a way to specify what content may be loaded from other domains. You can use this to prevent your site from being used improperly; in addition, you can use it to establish resources that other sites are expressly permitted to use.</dd> - <dt><a href="/en/Security/CSP">Content Security Policy</a></dt> - <dd>An added layer of security that helps to detect and mitigate certain types of attacks, including {{Glossary("Cross-site_scripting", "Cross Site Scripting (XSS)")}} and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware. Code is executed by the victims and lets the attackers bypass access controls and impersonate users. According to the Open Web Application Security Project, XSS was the <a class="external external-icon" href="https://www.owasp.org/images/7/72/OWASP_Top_10-2017_%28en%29.pdf.pdf" rel="noopener">seventh most common Web app vulnerability</a> in 2017.</dd> - <dt><a href="/en-US/docs/Web/HTTP/X-Frame-Options">The X-Frame-Options response header</a></dt> - <dd> - <p>The <code>X-Frame-Options:</code> <a href="/en/HTTP" title="en/HTTP">HTTP</a> response header can be used to indicate whether or not a browser should be allowed to render a page in a {{ HTMLElement("frame") }}. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.</p> - </dd> - <dt>Securing Your Site using Htaccess</dt> - <dd>It is the best way to secure your site using the .htaccess file. You can blacklist IPs, restrict access to certain areas of website, protect different files, protect against image hotlinking, and a lot more.</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="external" href="https://www.owasp.org/">Open Web Application Security Project (OWASP)</a></li> -</ul> - -<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</div> |