From 037a4118c4324d39fdef8bd23f9dd21b02f50946 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Thu, 15 Jul 2021 13:01:50 -0400 Subject: delete pages that were never translated from en-US (pl, part 1) (#1549) --- .../index.html | 172 ------ files/pl/web/api/audiocontext/index.html | 293 --------- files/pl/web/api/element/queryselector/index.html | 180 ------ .../pl/web/api/htmlelement/offsetheight/index.html | 62 -- files/pl/web/api/htmlselectelement/index.html | 164 ----- .../web/api/mediaelementaudiosourcenode/index.html | 84 --- files/pl/web/api/mousescrollevent/index.html | 126 ---- files/pl/web/api/node/nodetype/index.html | 45 -- files/pl/web/api/push_api/index.html | 167 ------ files/pl/web/api/response/index.html | 132 ----- files/pl/web/api/screen/width/index.html | 108 ---- files/pl/web/api/web_audio_api/index.html | 503 ---------------- files/pl/web/api/webgl_api/tutorial/index.html | 40 -- files/pl/web/api/window/content/index.html | 43 -- files/pl/web/api/window/opendialog/index.html | 75 --- files/pl/web/api/window/sidebar/index.html | 56 -- .../xmlhttprequest/using_xmlhttprequest/index.html | 658 --------------------- files/pl/web/css/attribute_selectors/index.html | 238 -------- files/pl/web/css/background-size/index.html | 187 ------ files/pl/web/css/box-decoration-break/index.html | 202 ------- .../auto-placement_in_css_grid_layout/index.html | 609 ------------------- .../media_queries/using_media_queries/index.html | 643 -------------------- .../pl/web/guide/html/editable_content/index.html | 216 ------- files/pl/web/guide/performance/index.html | 14 - .../web/html/element/heading_elements/index.html | 250 -------- files/pl/web/html/element/input/button/index.html | 341 ----------- files/pl/web/html/element/meta/index.html | 144 ----- .../html/global_attributes/spellcheck/index.html | 64 -- files/pl/web/http/authentication/index.html | 135 ----- files/pl/web/http/headers/date/index.html | 82 --- files/pl/web/javascript/data_structures/index.html | 444 -------------- .../deprecated_and_obsolete_features/index.html | 293 --------- .../reference/global_objects/escape/index.html | 121 ---- .../reference/global_objects/generator/index.html | 179 ------ .../global_objects/string/blink/index.html | 51 -- .../global_objects/string/fromcodepoint/index.html | 148 ----- .../global_objects/string/repeat/index.html | 167 ------ .../global_objects/uint16array/index.html | 225 ------- .../reference/operators/instanceof/index.html | 169 ------ .../javascript/reference/operators/this/index.html | 347 ----------- .../reference/statements/throw/index.html | 198 ------- files/pl/web/javascript/typed_arrays/index.html | 274 --------- .../pl/web/security/securing_your_site/index.html | 55 -- 43 files changed, 8704 deletions(-) delete mode 100644 files/pl/web/accessibility/keyboard-navigable_javascript_widgets/index.html delete mode 100644 files/pl/web/api/audiocontext/index.html delete mode 100644 files/pl/web/api/element/queryselector/index.html delete mode 100644 files/pl/web/api/htmlelement/offsetheight/index.html delete mode 100644 files/pl/web/api/htmlselectelement/index.html delete mode 100644 files/pl/web/api/mediaelementaudiosourcenode/index.html delete mode 100644 files/pl/web/api/mousescrollevent/index.html delete mode 100644 files/pl/web/api/node/nodetype/index.html delete mode 100644 files/pl/web/api/push_api/index.html delete mode 100644 files/pl/web/api/response/index.html delete mode 100644 files/pl/web/api/screen/width/index.html delete mode 100644 files/pl/web/api/web_audio_api/index.html delete mode 100644 files/pl/web/api/webgl_api/tutorial/index.html delete mode 100644 files/pl/web/api/window/content/index.html delete mode 100644 files/pl/web/api/window/opendialog/index.html delete mode 100644 files/pl/web/api/window/sidebar/index.html delete mode 100644 files/pl/web/api/xmlhttprequest/using_xmlhttprequest/index.html delete mode 100644 files/pl/web/css/attribute_selectors/index.html delete mode 100644 files/pl/web/css/background-size/index.html delete mode 100644 files/pl/web/css/box-decoration-break/index.html delete mode 100644 files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html delete mode 100644 files/pl/web/css/media_queries/using_media_queries/index.html delete mode 100644 files/pl/web/guide/html/editable_content/index.html delete mode 100644 files/pl/web/guide/performance/index.html delete mode 100644 files/pl/web/html/element/heading_elements/index.html delete mode 100644 files/pl/web/html/element/input/button/index.html delete mode 100644 files/pl/web/html/element/meta/index.html delete mode 100644 files/pl/web/html/global_attributes/spellcheck/index.html delete mode 100644 files/pl/web/http/authentication/index.html delete mode 100644 files/pl/web/http/headers/date/index.html delete mode 100644 files/pl/web/javascript/data_structures/index.html delete mode 100644 files/pl/web/javascript/reference/deprecated_and_obsolete_features/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/escape/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/generator/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/blink/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/fromcodepoint/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/repeat/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/uint16array/index.html delete mode 100644 files/pl/web/javascript/reference/operators/instanceof/index.html delete mode 100644 files/pl/web/javascript/reference/operators/this/index.html delete mode 100644 files/pl/web/javascript/reference/statements/throw/index.html delete mode 100644 files/pl/web/javascript/typed_arrays/index.html delete mode 100644 files/pl/web/security/securing_your_site/index.html (limited to 'files/pl/web') 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 ---- -

Overview

- -

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.

- -

Using tabindex

- -

By default, when people use the tab key to browse a webpage, only interactive elements (like links, form controls) get focused. With the tabindex global attribute, authors can make other elements focusable, too. When set to 0, the element becomes focusable by keyboard and script. When set to -1, the element becomes focusable by script, but it does not become part of the keyboard focus order.

- -

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 tabindex to any positive number.

- -
-

Warning: avoid using positive values for tabindex.  Elements with a positive tabindex are put before the default interactive elements on the page, which means page authors will have to set (and maintain) tabindex values for all focusable elements on the page whenever they use one or more positive values for tabindex.

-
- -

The following table describes tabindex behavior in modern browsers:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
tabindex attributeFocusable with mouse or JavaScript via element.focus()Tab navigable
not presentFollows the platform convention of the element (yes for form controls, links, etc.).Follows the platform convention of the element.
Negative (i.e. tabindex="-1")YesNo; author must focus the element with focus() in response to arrow or other key presses.
Zero (i.e. tabindex="0")YesIn 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).
Positive (e.g. tabindex="33")Yestabindex 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, tabindex="7" will be positioned before tabindex="11").
- -

Non-native controls

- -

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.

- -

Authors can also make a {{ HTMLElement("div") }} or {{ HTMLElement("span") }} keyboard accessible by adding a tabindex of 0. This is particularly useful for components that use interactive elements that do not exist in HTML.

- -

Grouping controls

- -

For grouping widgets such as menus, tablists, grids, or tree views, the parent element should be in the tab order (tabindex="0"), and each descendent choice/tab/cell/row should be removed from the tab order (tabindex="-1"). 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 WAI-ARIA Authoring Practices.)

- -

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.

- -

Example 2: A menu control using tabindex to control keyboard access

- -
<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>
- -

Disabled controls

- -

When a custom control becomes disabled, remove it from the tab order by setting tabindex="-1". Note that disabled items within a grouped widget (such as menu items in a menu) should remain navigable using arrow keys.

- -

Managing focus inside groups

- -

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:

- -
    -
  1. Roving tabindex: programmatically moving focus
    2. -
  2. aria-activedescendant: managing a 'virtual' focus
    3. -
- -

Technique 1: Roving tabindex

- -

Setting the tabindex 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 tabindex to "0" requires also updating the previously selected item to tabindex="-1". This technique involves programmatically moving focus in response to key events and updating the tabindex to reflect the currently focused item. To do this:

- -

Bind a key down handler to each element in the group, and when an arrow key is used to move to another element:

- -
    -
  1. programmatically apply focus to the new element,
    2. -
  2. update the tabindex of the focused element to "0", and
    3. -
  3. update the tabindex of the previously focused element to "-1".
    4. -
- -

Here's an example of a WAI-ARIA tree view using this technique.

- -
Tips
- -
Use element.focus() to set focus
- -

Do not use createEvent(), initEvent() and dispatchEvent() 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 element.focus() instead.

- -
Use onfocus to track the current focus
- -

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 onfocus and onblur instead.

- -

onfocus and onblur 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 document.activeElement to get the active element. You can also use document.hasFocus to make sure if the current document focus. 

- -

Technique 2: aria-activedescendant

- -

This technique involves binding a single event handler to the container widget and using the aria-activedescendant to track a "virtual" focus. (For more information about ARIA, see this overview of accessible web applications and widgets.)

- -

The aria-activedescendant 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 aria-activedescendant and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this ARIA radiogroup example for a direct illustration of how this works.

- -

General Guidelines

- -

Use onkeydown to trap key events, not onkeypress

- -

IE will not fire keypress events for non-alphanumeric keys. Use onkeydown instead.

- -

Ensure that keyboard and mouse produce the same experience

- -

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 tabindex or the styling when users navigate using the arrow keys should also be used by mouse click handlers to produce the same changes.

- -

Ensure that the keyboard can be used to activate element

- -

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 onclick="doSomething()", you should bind doSomething() to the key down event as well: onkeydown="return event.keyCode != 13 || doSomething();".

- -

Always draw the focus for tabindex="-1" items and elements that receive focus programatically

- -

IE will not automatically draw the focus outline for items that programatically receive focus. Choose between changing the background color via something like this.style.backgroundColor = "gray"; or add a dotted border via this.style.border = "1px dotted invert". 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).

- -

Prevent used key events from performing browser functions

- -

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 false, the event will not be propagated beyond your handler.

- -

For example:

- -
<span tabindex="-1" onkeydown="return handleKeyDown();">
- -

If handleKeyDown() returns false, the event will be consumed, preventing the browser from performing any action based on the keystroke.

- -

Don't rely on consistent behavior for key repeat, at this point

- -

Unfortunately onkeydown may or may not repeat depending on what browser and OS you're running on.

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 ---- -

{{APIRef("Web Audio API")}}

- -
-

Interfejs AudioContext 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.

-
- -

AudioCintext może stanowić cel (target) eventów, dlatego implementuje inferfejs {{domxref("EventTarget")}}.

- -

Konstruktor

- -
-
{{domxref("AudioContext.AudioContext", "AudioContext()")}}
-
Tworzy i zwraca nowy obiekt AudioContext.
-
- -

Właściwości

- -
-
{{domxref("AudioContext.currentTime")}} {{readonlyInline}}
-
Zwraca double reprezentujące stale liczony czas w sekundach, używany do przyporządkowywania. Rozpoczyna się od 0.
-
{{domxref("AudioContext.destination")}} {{readonlyInline}}
-
Zwraca {{domxref("AudioDestinationNode")}} reprezentujące ostateczny cel wszyskich audio w kontekście. Należy traktować go jako urządzenie interpretujące audio.
-
{{domxref("AudioContext.listener")}} {{readonlyInline}}
-
Zwraca obiekt {{domxref("AudioListener")}}, używany do przestrzenności 3D.
-
{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}
-
Zwraca float 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.
-
{{domxref("AudioContext.state")}} {{readonlyInline}}
-
Zwraca aktualny status AudioContext.
-
{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}
-
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.
-
- -

Event handlers

- -
-
{{domxref("AudioContext.onstatechange")}}
-
An event handler that runs when an event of type {{event("statechange")}} has fired. This occurs when the AudioContext's state changes, due to the calling of one of the state change methods ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, or {{domxref("AudioContext.close")}}).
-
- -

Methods

- -

Also implements methods from the interface {{domxref("EventTarget")}}.

- -
-
{{domxref("AudioContext.close()")}}
-
Closes the audio context, releasing any system audio resources that it uses.
-
{{domxref("AudioContext.createBuffer()")}}
-
Creates a new, empty {{ domxref("AudioBuffer") }} object, which can then be populated by data and played via an {{ domxref("AudioBufferSourceNode") }}.
-
{{domxref("AudioContext.createConstantSource()")}}
-
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.
-
{{domxref("AudioContext.createBufferSource()")}}
-
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.
-
{{domxref("AudioContext.createMediaElementSource()")}}
-
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.
-
{{domxref("AudioContext.createMediaStreamSource()")}}
-
Creates a {{domxref("MediaStreamAudioSourceNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may come from the local computer microphone or other sources.
-
{{domxref("AudioContext.createMediaStreamDestination()")}}
-
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.
-
{{domxref("AudioContext.createScriptProcessor()")}}
-
Creates a {{domxref("ScriptProcessorNode")}}, which can be used for direct audio processing via JavaScript.
-
{{domxref("AudioContext.createStereoPanner()")}}
-
Creates a {{domxref("StereoPannerNode")}}, which can be used to apply stereo panning to an audio source.
-
{{domxref("AudioContext.createAnalyser()")}}
-
Creates an {{domxref("AnalyserNode")}}, which can be used to expose audio time and frequency data and for example to create data visualisations.
-
{{domxref("AudioContext.createBiquadFilter()")}}
-
Creates a {{domxref("BiquadFilterNode")}}, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc.
-
{{domxref("AudioContext.createChannelMerger()")}}
-
Creates a {{domxref("ChannelMergerNode")}}, which is used to combine channels from multiple audio streams into a single audio stream.
-
{{domxref("AudioContext.createChannelSplitter()")}}
-
Creates a {{domxref("ChannelSplitterNode")}}, which is used to access the individual channels of an audio stream and process them separately.
-
{{domxref("AudioContext.createConvolver()")}}
-
Creates a {{domxref("ConvolverNode")}}, which can be used to apply convolution effects to your audio graph, for example a reverberation effect.
-
{{domxref("AudioContext.createDelay()")}}
-
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.
-
{{domxref("AudioContext.createDynamicsCompressor()")}}
-
Creates a {{domxref("DynamicsCompressorNode")}}, which can be used to apply acoustic compression to an audio signal.
-
{{domxref("AudioContext.createGain()")}}
-
Creates a {{domxref("GainNode")}}, which can be used to control the overall volume of the audio graph.
-
{{domxref("AudioContext.createIIRFilter()")}}
-
Creates an {{domxref("IIRFilterNode")}}, which represents a second order filter configurable as several different common filter types.
-
{{domxref("AudioContext.createOscillator()")}}
-
Creates an {{domxref("OscillatorNode")}}, a source representing a periodic waveform. It basically generates a tone.
-
{{domxref("AudioContext.createPanner()")}}
-
Creates a {{domxref("PannerNode")}}, which is used to spatialise an incoming audio stream in 3D space.
-
{{domxref("AudioContext.createPeriodicWave()")}}
-
Creates a {{domxref("PeriodicWave")}}, used to define a periodic waveform that can be used to determine the output of an {{ domxref("OscillatorNode") }}.
-
{{domxref("AudioContext.createWaveShaper()")}}
-
Creates a {{domxref("WaveShaperNode")}}, which is used to implement non-linear distortion effects.
-
{{domxref("AudioContext.createAudioWorker()")}}
-
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.
-
{{domxref("AudioContext.decodeAudioData()")}}
-
Asynchronously decodes audio file data contained in an {{domxref("ArrayBuffer")}}. In this case, the ArrayBuffer is usually loaded from an {{domxref("XMLHttpRequest")}}'s response attribute after setting the responseType to arraybuffer. This method only works on complete files, not fragments of audio files.
-
{{domxref("AudioContext.getOutputTimestamp()")}}
-
Returns a new AudioTimestamp containing two correlated context's audio stream position values: the AudioTimestamp.contextTime 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()")}}.
-
{{domxref("AudioContext.resume()")}}
-
Resumes the progression of time in an audio context that has previously been suspended.
-
{{domxref("AudioContext.suspend()")}}
-
Suspends the progression of time in the audio context, temporarily halting audio hardware access and reducing CPU/battery usage in the process.
-
- -

Obsolete methods

- -
-
{{domxref("AudioContext.createJavaScriptNode()")}}
-
Creates a {{domxref("JavaScriptNode")}}, used for direct audio processing via JavaScript. This method is obsolete, and has been replaced by {{domxref("AudioContext.createScriptProcessor()")}}.
-
{{domxref("AudioContext.createWaveTable()")}}
-
Creates a {{domxref("WaveTableNode")}}, used to define a periodic waveform. This method is obsolete, and has been replaced by {{domxref("AudioContext.createPeriodicWave()")}}.
-
- -

Examples

- -

Basic audio context declaration:

- -
var audioCtx = new AudioContext();
- -

Cross browser variant:

- -
var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
-
-var oscillatorNode = audioCtx.createOscillator();
-var gainNode = audioCtx.createGain();
-var finish = audioCtx.destination;
-// etc.
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#the-audiocontext-interface', 'AudioContext')}}{{Spec2('Web Audio API')}} 
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}
- 35		{{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22		6.0{{property_prefix("webkit")}}
createStereoPanner(){{CompatChrome(42.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(37.0)}} {{CompatNo}}{{CompatNo}}{{CompatNo}}
onstatechange, state, suspend(), resume(){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(40.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
createConstantSource(){{CompatChrome(56.0)}}{{CompatNo}}{{CompatGeckoDesktop(52)}}{{CompatNo}}{{CompatOpera(43)}}{{CompatNo}}
Unprefixed{{CompatVersionUnknown}}{{CompatVersionUnknown}}    
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(37.0)}} 2.2{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
createStereoPanner(){{CompatChrome(42.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(42.0)}}
onstatechange, state, suspend(), resume(){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
createConstantSource(){{CompatChrome(56.0)}}{{CompatNo}}{{CompatGeckoMobile(52)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(56.0)}}
Unprefixed{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(43)}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -

See also

- - 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 ---- -
{{APIRef("DOM")}}
- -

Returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.

- -

Syntax

- -
element = baseElement.querySelector(selectors);
-
- -

Parameters

- -
-
selectors
-
A group of selectors to match the descendant elements of the {{domxref("Element")}} baseElement against; this must be valid CSS syntax, or a SyntaxError exception will occur. The first element found which matches this group of selectors is returned.
-
- -

Return value

- -

The first descendant element of baseElement which matches the specified group of selectors. The entire hierarchy of elements is considered when matching, including those outside the set of elements including baseElement and its descendants; in other words, selectors is first applied to the whole document, not the baseElement, to generate an initial list of potential elements. The resulting elements are then examined to see if they are descendants of baseElement. The first match of those remaining elements is returned by the querySelector() method.

- -

If no matches are found, the returned value is null.

- -

Exceptions

- -
-
SyntaxError
-
The specified selectors are invalid.
-
- -

Examples

- -

Let's consider a few examples.

- -

Find a specific element with specific values of an attribute

- -

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:

- -
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
-
- -

The entire hierarchy counts

- -

The next example, below, demonstrates that the hierarchy of the entire document is considered when applying selectors, so that levels which are outside the specified baseElement are still considered when locating matches.

- -

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>
- -

JavaScript

- -
var baseElement = document.querySelector("p");
-document.getElementById("output").innerHTML =
-         (baseElement.querySelector("div span").innerHTML);
- -

Result

- -

The result looks like this:

- -

{{ EmbedLiveSample('The_entire_hierarchy_counts', 600, 160) }}

- -

Notice how the "div span" selector still matches the {{HTMLElement("span")}} element, even though the baseElement excludes the {{domxref("div")}} element which is part of the specified selector.

- -

The :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the baseElement.

- -

More examples

- -

See {{domxref("Document.querySelector()")}} for additional examples of the proper format for the selectors.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll()')}}{{Spec2('DOM4')}} 
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 2')}} 
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 1')}} 
- -

Browser compatibility

- -

{{ CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(1)}}12{{CompatGeckoDesktop(1.9.1)}}9[1][2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

[1] querySelector() is supported in IE8, but only for CSS 2.1 selectors.
- [2] in IE8 and iE9 document must be in HTML5 mode (HTML5 doctype declaration present)

- -

See also

- - 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 ---- -

{{ ApiRef() }}

- -

offsetHeight

- -

Własność DHTML (Dynamic HyperText Markup Language), która daje wysokość relatywnego elementu do układu strony.

- -

Składnia i wartości

- -
varintElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;
-
- -

intElemOffsetHeightis a variable storing an integer corresponding to the offsetHeight pixel value of the element. offsetHeight is a read-only property.

- -

Opis

- -

Typically, an element's offsetHeight 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.

- -

Przykład

- -
-
-

padding-top

- -

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.

- -

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

- -

Cat image and text coming from www.best-cat-art.com

- -

padding-bottom

-
-LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ 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') }}
- -

grafika:offsetHeight.png

- -

Specyfikacja

- -

offsetHeight is part of the MSIE's DHTML object model. offsetHeight is not part of any W3C specification or technical recommendation.

- -

Uwagi

- -

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.

- -

Dokumentacja

- - 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 ---- -
{{APIRef("HTML DOM")}}
- -

The HTMLSelectElement 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.

- -

{{InheritanceDiagram(600, 120)}}

- -

Properties

- -

This interface inherits the properties of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.

- -
-
{{domxref("HTMLSelectElement.autofocus")}}
-
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")}}
-
{{domxref("HTMLSelectElement.disabled")}}
-
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.
-
{{domxref("HTMLSelectElement.form")}}{{ReadOnlyInline}}
-
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 null.
-
{{domxref("HTMLSelectElement.labels")}}{{ReadOnlyInline}}
-
A {{domxref("NodeList")}} of {{HTMLElement("label")}} elements associated with the element.
-
{{domxref("HTMLSelectElement.length")}}
-
An unsigned long The number of {{HTMLElement("option")}} elements in this select element.
-
{{domxref("HTMLSelectElement.multiple")}}
-
A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("multiple", "select")}} HTML attribute, which indicates whether multiple items can be selected.
-
{{domxref("HTMLSelectElement.name")}}
-
A {{domxref("DOMString")}} reflecting the {{htmlattrxref("name", "select")}} HTML attribute, containing the name of this control used by servers and DOM search functions.
-
{{domxref("HTMLSelectElement.options")}}{{ReadOnlyInline}}
-
An {{domxref("HTMLOptionsCollection")}} representing the set of {{HTMLElement("option")}} ({{domxref("HTMLOptionElement")}}) elements contained by this element.
-
{{domxref("HTMLSelectElement.required")}}
-
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")}}
-
{{domxref("HTMLSelectElement.selectedIndex")}}
-
A long reflecting the index of the first selected {{HTMLElement("option")}} element. The value -1 indicates no element is selected.
-
{{domxref("HTMLSelectElement.selectedOptions")}}{{ReadOnlyInline}}
-
An {{domxref("HTMLCollection")}} representing the set of {{HTMLElement("option")}} elements that are selected.
-
{{domxref("HTMLSelectElement.size")}}
-
A long reflecting the {{htmlattrxref("size", "select")}} HTML attribute, which contains the number of visible items in the control. The default is 1, unless multiple is true, in which case it is 4.
-
{{domxref("HTMLSelectElement.type")}}{{ReadOnlyInline}}
-
A {{domxref("DOMString")}} represeting the form control's type. When multiple is true, it returns "select-multiple"; otherwise, it returns "select-one".
-
{{domxref("HTMLSelectElement.validationMessage")}}{{ReadOnlyInline}}
-
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 (willValidate is false), or it satisfies its constraints.
-
{{domxref("HTMLSelectElement.validity")}}{{ReadOnlyInline}}
-
A {{domxref("ValidityState")}} reflecting the validity state that this control is in.
-
{{domxref("HTMLSelectElement.value")}}
-
A {{domxref("DOMString")}} reflecting the value of the form control. Returns the value property of the first selected option element if there is one, otherwise the empty string.
-
{{domxref("HTMLSelectElement.willValidate")}}{{ReadOnlyInline}}
-
A {{jsxref("Boolean")}} that indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.
-
- -

Methods

- -

This interface inherits the methods of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.

- -
-
{{domxref("HTMLSelectElement.add()")}}
-
Adds an element to the collection of option elements for this select element.
-
{{domxref("HTMLSelectElement.blur()")}}{{obsolete_inline}}
-
Removes input focus from this element. This method is now implemented on {{domxref("HTMLElement")}}.
-
{{domxref("HTMLSelectElement.checkValidity()")}}
-
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 false).
-
{{domxref("HTMLSelectElement.focus()")}}{{obsolete_inline}}
-
Gives input focus to this element. This method is now implemented on {{domxref("HTMLElement")}}.
-
{{domxref("HTMLSelectElement.item()")}}
-
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.
-
{{domxref("HTMLSelectElement.namedItem()")}}
-
Gets the item in the options collection with the specified name. The name string can match either the id or the name 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.
-
{{domxref("HTMLSelectElement.remove()")}}
-
Removes the element at the specified index from the options collection for this select element.
-
{{domxref("HTMLSelectElement.reportValidity()")}}
-
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 false; if there are no problems, it returns true.
-
{{domxref("HTMLSelectElement.setCustomValidity()")}}
-
Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does not have a custom validity error.
-
- -

Events

- -

Listen to these events using {{domxref("EventTarget/addEventListener", "addEventListener()")}} or by assigning an event listener to the oneventname property of this interface:

- -
-
{{domxref("HTMLElement/input_event", "input")}} event
-
Fires when the value of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed.
-
- -

Example

- -

Get information about the selected option

- -
/* 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
-
- -

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 <select>. This will tell you when the value changes, and you can then update anything you need to. See the example provided in the documentation for the change event for details.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}{{Spec2('HTML WHATWG')}}Since the latest snapshot, {{SpecName('HTML5 W3C')}}, it adds the autocomplete property and the reportValidity() method.
{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}{{Spec2('HTML5 W3C')}}Is a snapshot of {{SpecName("HTML WHATWG")}}.
- It adds the autofocus, form, required, labels, selectedOptions, willValidate, validity and validationMessage properties.
- The tabindex property and the blur() and focus() methods have been moved to {{domxref("HTMLElement")}}.
- The methods item(), namedItem(), checkValidity() and setCustomValidity().
{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}{{Spec2('DOM2 HTML')}}options now returns an {{domxref("HTMLOptionsCollection")}}.
- length now returns an unsigned long.
{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}{{Spec2('DOM1')}}Initial definition
- -

Browser compatibility

- -

{{Compat("api.HTMLSelectElement")}}

- -

See also

- - 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 ---- -

{{APIRef("Web Audio API")}}

- -
-

The MediaElementAudioSourceNode 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.

-
- -

A MediaElementSourceNode 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.

- - - - - - - - - - - - - - - - -
Number of inputs0
Number of outputs1
Channel countdefined by the media in the {{domxref("HTMLMediaElement")}} passed to the {{domxref("AudioContext.createMediaElementSource")}} method that created it.
- -

Constructor

- -
-
{{domxref("MediaElementAudioSourceNode.MediaElementAudioSourceNode", "MediaElementAudioSourceNode()")}}
-
Creates a new MediaElementAudioSourceNode object instance.
-
- -

Properties

- -

Inherits properties from its parent, {{domxref("AudioNode")}}.

- -
-
{{domxref("MediaElementAudioSourceNode.mediaElement", "mediaElement")}} {{ReadOnlyInline}}
-
The {{domxref("HTMLMediaElement")}} used when constructing this MediaStreamAudioSourceNode.
-
- -

Methods

- -

Inherits methods from its parent, {{domxref("AudioNode")}}.

- -

Example

- -

{{page("/en-US/docs/Web/API/AudioContext.createMediaElementSource","Example")}}

- -

Specification

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#mediaelementaudiosourcenode', 'MediaElementAudioSourceNode')}}{{Spec2('Web Audio API')}}
- -

Browser compatibility

- -
- - -

{{Compat("api.MediaElementAudioSourceNode")}}

-
- -

See also

- - 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 ---- -

{{APIRef("DOM Events")}}{{ non-standard_header() }}{{deprecated_header}}

- -

The DOM MouseScrollEvent represents events that occur due to the user moving a mouse wheel or similar input device.

- -

Use standardardized {{ domxref("WheelEvent") }} instead of this legacy event object if available.

- -

Method overview

- - - - - - - -
void initMouseScrollEvent(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);
- -

Attributes

- - - - - - - - - - - - - - -
AttributeTypeDescription
axislongIndicates scroll direction. Read only.
- -

Constants

- -

Delta modes

- - - - - - - - - - - - - - - - - - - -
ConstantValueDescription
HORIZONTAL_AXIS0x01The event is caused by horizontal wheel operation.
VERTICAL_AXIS0x02The event is caused by vertical wheel operation.
- -

Methods

- -

initMouseScrollEvent()

- -

See nsIDOMMouseScrollEvent::initMouseScrollEvent().

- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatNo() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatGeckoMobile("1.9.1") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -

See also

- - 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 ---- -
- {{ApiRef}}
-

Podsumowanie

-

Zwraca kod reprezentujący typ węzła.

-

Składnia

-
typ = document.nodeType
-
-

typ jest zmienną liczbową typu unsigned short o jednej z poniższych wartości:

- -

Przykład

-

Ten przykład sprawdza czy pierwszy węzeł wewnątrz elementu document jest comment node, i jeśli nie jest, wyświetli wiadomość.

-
var node = document.documentElement.firstChild;
-
-if(node.nodeType != Node.COMMENT_NODE)
-  alert("You should comment your code well!");
-
-

Specyfikacja

- 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 ---- -
{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}
- -

Push API 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.

- -

Pojęcia i stosowanie

- -

For an app to receive push messages, it has to have an active service worker. When the service worker is active, it can subscribe to push notifications, using {{domxref("PushManager.subscribe()")}}.

- -

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.

- -

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()")}}.)

- -

Each subscription is unique to a service worker.  The endpoint for the subscription is a unique capability URL: 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.

- -

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.

- -
-

Note: 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.

-
- -
-

Note: Chrome versions earlier than 52 require you to set up a project on Google Cloud Messaging 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.

-
- -

Interfejsy

- -
-
{{domxref("PushEvent")}}
-
Represents a push action, sent to the global scope of a {{domxref("ServiceWorker")}}. It contains information sent from an application to a {{domxref("PushSubscription")}}.
-
{{domxref("PushManager")}}
-
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.
-
{{domxref("PushMessageData")}}
-
Provides access to push data sent by a server, and includes methods to manipulate the received data.
-
{{domxref("PushSubscription")}}
-
Provides a subcription's URL endpoint, and allows unsubscription from a push service.
-
- -

Wzbogacenia Service worker

- -

The following additions to the Service Worker API 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.

- -
-
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
-
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.
-
{{domxref("ServiceWorkerGlobalScope.onpush")}}
-
An event handler fired whenever a {{Event("push")}} event occurs; that is, whenever a server push message is received.
-
{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}
-
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.)
-
- -

Przykłady

- -

ServiceWorker Cookbook Mozilli zawiera dużo przydatnych przykładów Push.

- -

Specyfikacje

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Push API")}}{{Spec2("Push API")}}Initial definition
- -

Zgodność przeglądarek

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FunkcjonalnośćChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}[1][3]{{CompatNo}}[2]{{CompatUnknown}}{{CompatUnknown}}
{{domxref("PushEvent.data")}},
- {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatGeckoDesktop(44.0)}}[3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(48.0)}}[4]{{CompatNo}}{{CompatUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
{{domxref("PushEvent.data")}},
- {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(48.0)}}[4]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- - - -

Zobacz również

- - 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 ---- -
{{APIRef("Fetch API")}}
- -

The Response interface of the Fetch API represents the response to a request.

- -

You can create a new Response 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()")}}.

- -

Constructor

- -
-
{{domxref("Response.Response","Response()")}}
-
Creates a new Response object.
-
- -

Properties

- -
-
{{domxref("Response.headers")}} {{readonlyinline}}
-
Contains the {{domxref("Headers")}} object associated with the response.
-
{{domxref("Response.ok")}} {{readonlyinline}}
-
Contains a boolean stating whether the response was successful (status in the range 200-299) or not.
-
{{domxref("Response.redirected")}} {{ReadOnlyInline}}
-
Indicates whether or not the response is the result of a redirect; that is, its URL list has more than one entry.
-
{{domxref("Response.status")}} {{readonlyinline}}
-
Contains the status code of the response (e.g., 200 for a success).
-
{{domxref("Response.statusText")}} {{readonlyinline}}
-
Contains the status message corresponding to the status code (e.g., OK for 200).
-
{{domxref("Response.trailers")}}
-
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.
-
{{domxref("Response.type")}} {{readonlyinline}}
-
Contains the type of the response (e.g., basic, cors).
-
{{domxref("Response.url")}} {{readonlyinline}}
-
Contains the URL of the response.
-
{{domxref("Response.useFinalURL")}}
-
Contains a boolean stating whether this is the final URL of the response.
-
- -

Response implements {{domxref("Body")}}, so it also has the following properties available to it:

- -
-
{{domxref("Body.body")}} {{readonlyInline}}
-
A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.
-
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
-
Stores a {{domxref("Boolean")}} that declares whether the body has been used in a response yet.
-
- -

Methods

- -
-
{{domxref("Response.clone()")}}
-
Creates a clone of a Response object.
-
{{domxref("Response.error()")}}
-
Returns a new Response object associated with a network error.
-
{{domxref("Response.redirect()")}}
-
Creates a new response with a different URL.
-
- -

Response implements {{domxref("Body")}}, so it also has the following methods available to it:

- -
-
{{domxref("Body.arrayBuffer()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.
-
{{domxref("Body.blob()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.
-
{{domxref("Body.formData()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.
-
{{domxref("Body.json()")}}
-
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")}}.
-
{{domxref("Body.text()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text).
-
- -

Examples

- -

In our basic fetch example (run example live) we use a simple fetch() call to grab an image and display it in an {{htmlelement("img")}} tag. The fetch() call returns a promise, which resolves with the Response 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.

- -
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;
-});
- -

You can also use the {{domxref("Response.Response()")}} constructor to create your own custom Response object:

- -
const response = new Response();
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Fetch','#response-class','Response')}}{{Spec2('Fetch')}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("api.Response")}}

- -

See also

- - 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 ---- -
-
{{APIRef("CSSOM View")}}
-
- -

Zwraca szerokość ekranu.

- -

Składnia

- -
lWidth = window.screen.width
-
- -

Przykład

- -
// 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
-}
-
- -

Notes

- -

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 window object, there is a difference in window.screen.width and window.screen.availWidth. See also {{domxref("window.screen.height")}}.

- -

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%.

- -

Specyfikacja

- - - - - - - - - - - - - - - - -
SpecyfikacjaStatusKomentarz
{{ SpecName('CSSOM View', '#dom-screen-width', 'Screen.width') }}{{ Spec2('CSSOM View') }} 
- -

Kompatybilność przeglądarek

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}6{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
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 ---- -
-

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.

-
- -

Założenia Web Audio i jego zastosowanie

- -

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.

- -

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.

- -

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.

- -

A simple, typical workflow for web audio would look something like this:

- -
    -
  1. Create audio context
    2. -
  2. Inside the context, create sources — such as <audio>, oscillator, stream
    3. -
  3. Create effects nodes, such as reverb, biquad filter, panner, compressor
    4. -
  4. Choose final destination of audio, for example your system speakers
    5. -
  5. Connect the sources up to the effects, and the effects to the destination.
    6. -
- -

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.

- -

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.

- -

The Web Audio API also allows us to control how audio is spatialized. Using a system based on a source-listener model, it allows control of the panning model and deals with distance-induced attenuation or doppler shift induced by a moving source (or moving listener).

- -
-

You can read about the theory of the Web Audio API in a lot more detail in our article Basic concepts behind Web Audio API.

-
- -

Web Audio API Interfaces

- -

The Web Audio API has a number of interfaces and associated events, which we have split up into nine categories of functionality.

- -

General audio graph definition

- -

General containers and definitions that shape audio graphs in Web Audio API usage.

- -
-
{{domxref("AudioContext")}}
-
The AudioContext 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 AudioContext before you do anything else, as everything happens inside a context.
-
{{domxref("AudioNode")}}
-
The AudioNode interface represents an audio-processing module like an audio source (e.g. an HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} element), audio destination, intermediate processing module (e.g. a filter like {{domxref("BiquadFilterNode")}}, or volume control like {{domxref("GainNode")}}).
-
{{domxref("AudioParam")}}
-
The AudioParam 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.
-
The {{event("ended")}} event
-
The ended event is fired when playback has stopped because the end of the media was reached.
-
- -

Defining audio sources

- -

Interfaces that define audio sources for use in the Web Audio API.

- -
-
{{domxref("OscillatorNode")}}
-
The OscillatorNode interface represents a periodic waveform, such as a sine or triangle wave. It is an {{domxref("AudioNode")}} audio-processing module that causes a given frequency of wave to be created.
-
{{domxref("AudioBuffer")}}
-
The AudioBuffer 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") }}.
-
{{domxref("AudioBufferSourceNode")}}
-
The AudioBufferSourceNode 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.
-
{{domxref("MediaElementAudioSourceNode")}}
-
The MediaElementAudioSourceNode 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.
-
{{domxref("MediaStreamAudioSourceNode")}}
-
The MediaStreamAudioSourceNode interface represents an audio source consisting of a WebRTC {{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.
-
- -

Defining audio effects filters

- -

Interfaces for defining effects that you want to apply to your audio sources.

- -
-
{{domxref("BiquadFilterNode")}}
-
The BiquadFilterNode 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 BiquadFilterNode always has exactly one input and one output.
-
{{domxref("ConvolverNode")}}
-
The ConvolverNode interface is an {{domxref("AudioNode")}} that performs a Linear Convolution on a given {{domxref("AudioBuffer")}}, and is often used to achieve a reverb effect.
-
{{domxref("DelayNode")}}
-
The DelayNode interface represents a delay-line; an {{domxref("AudioNode")}} audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.
-
{{domxref("DynamicsCompressorNode")}}
-
The DynamicsCompressorNode 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.
-
{{domxref("GainNode")}}
-
The GainNode interface represents a change in volume. It is an {{domxref("AudioNode")}} audio-processing module that causes a given gain to be applied to the input data before its propagation to the output.
-
{{domxref("StereoPannerNode")}}
-
The StereoPannerNode interface represents a simple stereo panner node  that can be used to pan an audio stream left or right.
-
{{domxref("WaveShaperNode")}}
-
The WaveShaperNode 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.
-
{{domxref("PeriodicWave")}}
-
Describes a periodic waveform that can be used to shape the output of an {{ domxref("OscillatorNode") }}.
-
- -

Defining audio destinations

- -

Once you are done processing your audio, these interfaces define where to output it.

- -
-
{{domxref("AudioDestinationNode")}}
-
The AudioDestinationNode interface represents the end destination of an audio source in a given context — usually the speakers of your device.
-
{{domxref("MediaStreamAudioDestinationNode")}}
-
The MediaStreamAudioDestinationNode interface represents an audio destination consisting of a WebRTC {{domxref("MediaStream")}} with a single AudioMediaStreamTrack, 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.
-
- -

Data analysis and visualization

- -

If you want to extract time, frequency, and other data from your audio, the AnalyserNode is what you need.

- -
-
{{domxref("AnalyserNode")}}
-
The AnalyserNode interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.
-
- -

Splitting and merging audio channels

- -

To split and merge audio channels, you'll use these interfaces.

- -
-
{{domxref("ChannelSplitterNode")}}
-
The ChannelSplitterNode interface separates the different channels of an audio source out into a set of mono outputs.
-
{{domxref("ChannelMergerNode")}}
-
The ChannelMergerNode interface reunites different mono inputs into a single output. Each input will be used to fill a channel of the output.
-
- -

Audio spatialization

- -

These interfaces allow you to add audio spatialization panning effects to your audio sources.

- -
-
{{domxref("AudioListener")}}
-
The AudioListener interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.
-
{{domxref("PannerNode")}}
-
The PannerNode 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.
-
- -

Audio processing in JavaScript

- -

You can write JavaScript code to process audio data. To do so, you use the interfaces and events listed below.

- -
-

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") }}.

-
- -
-
{{domxref("ScriptProcessorNode")}}
-
The ScriptProcessorNode 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.
-
{{event("audioprocess")}} (event)
-
The audioprocess event is fired when an input buffer of a Web Audio API {{domxref("ScriptProcessorNode")}} is ready to be processed.
-
{{domxref("AudioProcessingEvent")}}
-
The Web Audio API AudioProcessingEvent represents events that occur when a {{domxref("ScriptProcessorNode")}} input buffer is ready to be processed.
-
- -

Offline/background audio processing

- -

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.

- -
-
{{domxref("OfflineAudioContext")}}
-
The OfflineAudioContext interface is an {{domxref("AudioContext")}} interface representing an audio-processing graph built from linked together {{domxref("AudioNode")}}s. In contrast with a standard AudioContext, an OfflineAudioContext doesn't really render the audio but rather generates it, as fast as it can, in a buffer.
-
{{event("complete")}} (event)
-
The complete event is fired when the rendering of an {{domxref("OfflineAudioContext")}} is terminated.
-
{{domxref("OfflineAudioCompletionEvent")}}
-
The OfflineAudioCompletionEvent represents events that occur when the processing of an {{domxref("OfflineAudioContext")}} is terminated. The {{event("complete")}} event implements this interface.
-
- -

Audio Workers

- -

Audio workers provide the ability for direct scripted audio processing to be done inside a web worker 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 Audio processing in JavaScript section above.

- -
-
{{domxref("AudioWorkerNode")}}
-
The AudioWorkerNode interface represents an {{domxref("AudioNode")}} that interacts with a worker thread to generate, process, or analyse audio directly.
-
{{domxref("AudioWorkerGlobalScope")}}
-
The AudioWorkerGlobalScope interface is a DedicatedWorkerGlobalScope-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.
-
{{domxref("AudioProcessEvent")}}
-
This is an Event object that is dispatched to {{domxref("AudioWorkerGlobalScope")}} objects to perform processing.
-
- -

Obsolete interfaces

- -

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.

- -
-
{{domxref("JavaScriptNode")}}
-
Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by {{domxref("ScriptProcessorNode")}}.
-
{{domxref("WaveTableNode")}}
-
Used to define a periodic waveform. This interface is obsolete, and has been replaced by {{domxref("PeriodicWave")}}.
-
- -

Example

- -

This example shows a wide variety of Web Audio API functions being used. You can see this code in action on the Voice-change-o-matic demo (also check out the full source code at Github) — this is an experimental voice changer toy demo; keep your speakers turned down low when you use it, at least to start!

- -

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.

- -
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";
-  }
-}
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API')}}{{Spec2('Web Audio API')}} 
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support14 {{property_prefix("webkit")}}{{CompatVersionUnknown}}23{{CompatNo}}15 {{property_prefix("webkit")}}
- 22 (unprefixed)		6 {{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChromeEdgeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}28 {{property_prefix("webkit")}}{{CompatVersionUnknown}}251.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
-
- -

See also

- - - - 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 ---- -
{{WebGLSidebar}}
- -
-

WebGL enables web content to use an API based on OpenGL ES 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.

-
- -

This tutorial describes how to use the <canvas> 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.

- -

Before you start

- -

Using the <canvas> element is not very difficult, but you do need a basic understanding of HTML and JavaScript. The <canvas> 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.

- -

In this tutorial

- -
-
Getting started with WebGL
-
How to set up a WebGL context.
-
Adding 2D content to a WebGL context
-
How to render simple flat shapes using WebGL.
-
Using shaders to apply color in WebGL
-
Demonstrates how to add color to shapes using shaders.
-
Animating objects with WebGL
-
Shows how to rotate and translate objects to create simple animations.
-
Creating 3D objects using WebGL
-
Shows how to create and animate a 3D object (in this case, a cube).
-
Using textures in WebGL
-
Demonstrates how to map textures onto the faces of an object.
-
Lighting in WebGL
-
How to simulate lighting effects in your WebGL context.
-
Animating textures in WebGL
-
Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.
-
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 ---- -

{{ ApiRef() }}

- -

Podsumowanie

- -

Zwraca obiekt Window dla zawartości głównego okna. This is useful in XUL windows that have a <browser> (or tabbrowser or <iframe>) with type="content-primary" attribute on it - the most famous example is Firefox main window, browser.xul. In such cases, content returns a reference to the Window object for the document currently displayed in the browser. It is a shortcut for browserRef.contentWindow.

- -

In unprivileged content (webpages), content is normally equivalent to top (except in the case of a webpage loaded in a sidebar, content still refers to the Window of the currently selected tab).

- -

Some examples use _content instead of content. The former has been deprecated for a long time, and you should use content in the new code.

- -

Składnia

- -
var windowObject = window.content;
-
- -

Przykład

- -

Executing the following code in a chrome XUL window with a <browser type="content-primary"/> element in it draws a red border around the first div on the page currently displayed in the browser:

- -
content.document.getElementsByTagName("div")[0].style.border = "solid red 1px";
-
- -

Specyfikacja

- -

Nie jest częścią żadnej specyfikacji.

- -

Zobacz także

- - 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 ---- -

{{ ApiRef() }}

-

Podsumowanie

-

window.openDialog jest rozszerzeniem do window.open. Zachowuje się w taki sam sposób, oprócz tego, że opcjonalnie pobiera jeden lub więcej parametrów przeszłego windowFeatures i windowFeatures itself is treated a little differently.

-

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 window.arguments. They may be referenced in the JavaScript of the window at any time, including during the execution of a load handler. These parameters may be used, then, to pass arguments to and from the dialog window.

-

Note that the call to openDialog() returns immediately. If you want the call to block until the user has closed the dialog, supply modal as a windowFeatures parameter. Note that this also means the user won't be able to interact with the opener window until he closes the modal dialog.

-

Składnia

-
newWindow = openDialog(url, name, features, arg1, arg2, ...)
-
-
-
- newWindow 
-
- Otwarte okno.
-
- url 
-
- Adres URL który będzie wczytany do nowego okna.
-
- name 
-
- Nazwa okna (opcjonalnie). Zobacz opis window.open, aby dowiedzieć się więcej.
-
- features 
-
- Zobacz opis window.open, aby dowiedzieć się więcej.
-
- arg1, arg2, ... 
-
- Argumenty dopasowujące nowe okno (opcjonalnie).
-
-

Przykład

-
var win = openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);
-
-

Uwagi

-

Nowe możliwości

-

all - Initially activates (or deactivates ("all=no")) all chrome (except the behaviour flags chrome, dialog and modal). These can be overridden (so "menubar=no,all" turns on all chrome except the menubar.) This feature is explicitly ignored by DOM:window.open. window.openDialog finds it useful because of its different default assumptions.

-

Domyślne zachowanie

-

Możliwości chrome i dialog są zawsze assumed on, unless explicitly turned off ("chrome=no"). openDialog treats the absence of the features parameter as does DOM:window.open, (that is, an empty string sets all features to off) except chrome and dialog, which default to on. If the features parameter is a zero-length string, or contains only one or more of the behaviour features (chrome, dependent, dialog and modal) 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.

-

Passing extra parameters to the dialog

-

To pass extra parameters into the dialog, you can simply supply them after the windowFeatures parameter:

-
openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);
-
-

The extra parameters will then get packed into a property named arguments of type Array, and this property gets added to the newly opened dialog window.

-

To access these extra parameters from within dialog code, use the following scheme:

-
var food  = window.arguments[0];
-var price = window.arguments[1];
-
-

Note that you can access this property from within anywhere in the dialog code.

-

Zwracanie wartości z okienka dialogowego

-

Since window.close() 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).

-

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 window.close() operation.

-
var retVals = { address: null, delivery: null };
-openDialog("http://example.tld/zzz.xul", "dlg", "modal", "pizza", 6.98, retVals);
-
-

If you set the properties of the retVals object in the dialog code as described below, you can now access them via the retVals array after the openDialog() call returns.

-

Inside the dialog code, you can set the properties as follows:

-
var retVals = window.arguments[2];
-retVals.address  = enteredAddress;
-retVals.delivery = "immediate";
-
-

Zobacz także .

-

Specyfikacja

-

{{ DOM0() }}

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 ---- -
{{APIRef}} {{Non-standard_header}}
- -

Returns a sidebar object, which contains several methods for registering add-ons with the browser.

- -

Notes

- -

The sidebar object returned has the following methods:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodDescription (SeaMonkey)Description (Firefox)
addPanel(title, contentURL, "")Adds a sidebar panel.Obsolete since Firefox 23 (only present in SeaMonkey).
- End users can use the "load this bookmark in the sidebar" option instead. Also see Creating a Firefox sidebar.
addPersistentPanel(title, contentURL, "")Adds a sidebar panel, which is able to work in the background.
AddSearchProvider(descriptionURL)Installs a search provider (OpenSearch). Adding OpenSearch search engines contains more details. Added in Firefox 2.
addSearchEngine(engineURL, iconURL, suggestedTitle, suggestedCategory) {{Obsolete_inline(44)}}Installs a search engine (Sherlock). Adding Sherlock search engines contains more details.
IsSearchProviderInstalled(descriptionURL)Indicates if a specific search provider (OpenSearch) is installed.
- -

Specification

- -

Mozilla-specific. Not part of any standard.

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 ---- -

XMLHttpRequest makes sending HTTP requests very easy.  You simply create an instance of the object, open a URL, and send the request.  The HTTP status 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.

-
function reqListener () {
-  console.log(this.responseText);
-}
-
-var oReq = new XMLHttpRequest();
-oReq.onload = reqListener;
-oReq.open("get", "yourFile.txt", true);
-oReq.send();
-

Types of requests

-

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 async argument (the third argument) that is set on the XMLHttpRequest open() method. If this argument is true or not specified, the XMLHttpRequest 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 synchronous and asynchronous requests page. In general, you should rarely if ever use synchronous requests.

-
- Note: 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.
-

Handling responses

-

There are several types of response attributes defined by the W3C specification for XMLHttpRequest.  These tell the client making the XMLHttpRequest important information about the status of the response. Some cases where dealing with non-text response types may involve some manipulation and analysis as outlined in the following sections.

-

Analyzing and manipulating the responseXML property

-

If you use XMLHttpRequest to get the content of a remote XML document, the responseXML 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:

-
    -
  1. Using XPath to address (point to) parts of it.
    2. -
  2. Using JXON to convert it into a JavaScript Object tree.
    3. -
  3. Manually Parsing and serializing XML to strings or objects.
    4. -
  4. Using XMLSerializer to serialize DOM trees to strings or to files.
    5. -
  5. RegExp can be used if you always know the content of the XML document beforehand. You might want to remove line breaks, if you use 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.
    6. -
-

Analyzing and manipulating a responseText property containing an HTML document

-
- Note: The W3C XMLHttpRequest specification allows HTML parsing via the XMLHttpRequest.responseXML property. Read the article about HTML in XMLHttpRequest for details.
-

If you use XMLHttpRequest to get the content of a remote HTML webpage, the responseText 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:

-
    -
  1. Use the XMLHttpRequest.responseXML property.
    2. -
  2. Inject the content into the body of a document fragment via fragment.body.innerHTML and traverse the DOM of the fragment.
    3. -
  3. RegExp can be used if you always know the content of the HTML responseText 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.
    4. -
-

Handling binary data

-

Although XMLHttpRequest is most commonly used to send and receive textual data, it can be used to send and receive binary content. There are several well tested methods for coercing the response of an XMLHttpRequest into sending binary data. These involve utilizing the .overrideMimeType() method on the XMLHttpRequest object and is a workable solution.

-
var oReq = new XMLHttpRequest();
-oReq.open("GET", url, true);
-// retrieve data unprocessed as a binary string
-oReq.overrideMimeType("text/plain; charset=x-user-defined");
-/* ... */
-
-

The XMLHttpRequest Level 2 Specification adds new responseType attributes which make sending and receiving binary data much easier.

-
var oReq = new XMLHttpRequest();
-
-
-oReq.onload = function(e) {
-  var arraybuffer = oReq.response; // not responseText
-  /* ... */
-}
-oReq.open("GET", url, true);
-oReq.responseType = "arraybuffer";
-oReq.send();
-

For more examples check out the Sending and Receiving Binary Data page

-

Monitoring progress

-

XMLHttpRequest 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.

-

Support for DOM progress event monitoring of XMLHttpRequest transfers follows the Web API specification for progress events: these events implement the {{domxref("ProgressEvent")}} interface.

-
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.");
-}
-

Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using XMLHttpRequest.

-
- Note: You need to add the event listeners before calling open() on the request.  Otherwise the progress events will not fire.
-

The progress event handler, specified by the updateProgress() 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 total and loaded fields.  However, if the lengthComputable field is false, the total length is not known and will be zero.

-

Progress events exist for both download and upload transfers. The download events are fired on the XMLHttpRequest object itself, as shown in the above sample. The upload events are fired on the XMLHttpRequest.upload object, as shown below:

-
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();
-
-
- Note: Progress events are not available for the file: protocol.
-
- Note: Currently there are open bugs for the progress event that are still affecting version 25 of Firefox on OS X and Linux.
-
-

Note: 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.

-
-
-

Note: As of {{Gecko("12.0")}}, if your progress event is called with a responseType of "moz-blob", the value of response is a {{domxref("Blob")}} containing the data received so far.

-
-

One can also detect all three load-ending conditions (abort, load, or error) using the loadend event:

-
req.addEventListener("loadend", loadEnd, false);
-
-function loadEnd(e) {
-  alert("The transfer finished (although we don't know if it succeeded or not).");
-}
-
-

Note that there's no way to be certain from the information received by the loadend 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.

-

Submitting forms and uploading files

-

Instances of XMLHttpRequest can be used to submit forms in two ways:

- -

The second way (using the FormData API) is the simplest and the fastest, but has the disadvantage that the data collected can not be stringified.
- The first way is instead the most complex but also lends itself to be the most flexible and powerful.

-

Using nothing but XMLHttpRequest

-

Submitting forms without the FormData API does not require other APIs, except that, only if you want to upload one or more files, the FileReader API.

-

A brief introduction to the submit methods

-

An html {{ HTMLElement("form") }} can be sent in four ways:

- -

Now, consider to submit a form containing only two fields, named foo and baz. If you are using the POST method, the server will receive a string similar to one of the following three ones depending on the encoding type you are using:

- -

Instead, if you are using the GET method, a string like the following will be simply added to the URL:

-
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
-

A little vanilla framework

-

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 all things. So, how to send forms in pure AJAX is too complex to be explained in detail here. For this reason we posted here a complete (but still didactic) framework, which is able to use all the four ways of submit and, also, to upload files:

-
- 
<!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>
-
-

To test it, create a page named register.php (which is the action attribute of these sample forms) and just put the following minimalistic content:

-
<?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);
-
-
-

The syntax of this script is the following:

-
AJAXSubmit(myForm);
-
- Note: This framework uses the FileReader API to transmit file uploads. This is a recent API and is not implemented in IE9 or below. For this reason, the AJAX-only upload is considered an experimental technique. If you do not need to upload binary files, this framework work fine in most browsers.
-
- Note: The best way to send binary content is via ArrayBuffers or Blobs in conjuncton with the send() method and possibly the readAsArrayBuffer() method of the FileReader API. But, since the aim of this script is to work with a stringifiable raw data, we used the sendAsBinary() method in conjunction with the readAsBinaryString() method of the FileReader 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 FormData API.
-
- Note: The non-standard sendAsBinary method is considered deprecated as of Gecko 31 {{ geckoRelease(31) }} and will be removed soon. The standard send(Blob data) method can be used instead.
-

Using FormData objects

-

The FormData constructor lets you compile a set of key/value pairs to send using XMLHttpRequest. 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 submit() 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 Using FormData Objects page. For didactic purpose only we post here a translation of the previous example transformed so as to make use of the FormData API. Note the brevity of the code:

-
- 
<!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>
-
-
- Note: As we said, {{domxref("FormData")}} objects are not stringifiable objects. If you want to stringify a submitted data, use the previous pure-AJAX example. Note also that, although in this example there are some file {{ HTMLElement("input") }} fields, when you submit a form through the FormData API you do not need to use the FileReader API also: files are automatically loaded and uploaded.
-

Get last modified date

-
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();
-

Do something when last modified date changes

-

Let's create these two functions:

-
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();
-}
-

Test:

-
/* 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() + "!");
-});
-

If you want to know whether the current page has changed, please read the article about document.lastModified.

-

Cross-site XMLHttpRequest

-

Modern browsers support cross-site requests by implementing the web applications working group's Access Control for Cross-Site Requests standard.  As long as the server is configured to allow requests from your web application's origin, XMLHttpRequest will work.  Otherwise, an INVALID_ACCESS_ERR exception is thrown.

-

Bypassing the cache

-

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:

-
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
-
-

Since the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.

-

You can automatically adjust URLs using the following code:

-
var oReq = new XMLHttpRequest();
-
-oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true);
-oReq.send(null);
-

Security

-

{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy.<policyname>.XMLHttpRequest.open</policyname> to allAccess to give specific sites cross-site access.  This is no longer supported.")}}

-

{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}

-

The recommended way to enable cross-site scripting is to use the Access-Control-Allow-Origin HTTP header in the response to the XMLHttpRequest.

-

XMLHttpRequests being stopped

-

If you end up with an XMLHttpRequest having status=0 and statusText=null, it means that the request was not allowed to be performed. It was UNSENT. A likely cause for this is when the XMLHttpRequest origin (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then open(). 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 open()) 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.

-

Using XMLHttpRequest from JavaScript modules / XPCOM components

-

Instantiating XMLHttpRequest from a JavaScript module or an XPCOM component works a little differently; it can't be instantiated using the XMLHttpRequest() 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.

-
const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest");
-
-

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.

-
const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
-                                     .getService(Components.interfaces.nsIAppShellService)
-                                     .hiddenDOMWindow;
-var oReq = new XMLHttpRequest();
-

See also

-
    -
  1. MDN AJAX introduction
    2. -
  2. HTTP access control
    3. -
  3. How to check the security state of an XMLHTTPRequest over SSL
    4. -
  4. XMLHttpRequest - REST and the Rich User Experience
    5. -
  5. Microsoft documentation
    6. -
  6. Apple developers' reference
    7. -
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. -
  8. The XMLHttpRequest Object: W3C Specification
    9. -
  9. Web Progress Events specification
    10. -
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 ---- -
{{CSSRef}}
- -

Selektor atrybutów CSS dopasowuje elementy w oparciu o obecność lub wartość danego atrybutu.

- -
/* <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;
-}
- -

Syntax

- -
-
[attr]
-
- -

Reprezentuje elementy z atrybutem o nazwie attr.

- -
-
[attr=value]
-
Reprezentuje elementy z atrybutem o nazwie attr, którego wartością jest "value".
-
[attr~=value]
-
Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.
-
[attr|=value]
-
Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches.
-
[attr^=value]
-
Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.
-
[attr$=value]
-
Represents elements with an attribute name of attr whose value is suffixed (followed) by value.
-
[attr*=value]
-
Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.
-
[attr operator value i]
-
Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).
-
[attr operator value s] {{Experimental_Inline}}
-
Adding an s (or S) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).
-
- -

Examples

- - - -

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;
-}
- -

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>
- -

Result

- -

{{EmbedLiveSample("Links")}}

- -

Languages

- -

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]) {
-  font-style: italic;
-}
-
-/* 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;
-}
-
- -

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>
-
- -

Result

- -

{{EmbedLiveSample("Languages")}}

- -

HTML ordered lists

- -

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 case-sensitive modifier.

- -

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;
-}
- -

HTML

- -
<ol type="A">
-  <li>Example list</li>
-</ol>
- -

Result

- -

{{EmbedLiveSample("HTML_ordered_lists")}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS4 Selectors")}}Adds modifier for ASCII case-sensitive and case-insensitive attribute value selection.
{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}{{Spec2("CSS2.1")}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("css.selectors.attribute")}}

- -

See also

- - 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 ---- -
{{CSSRef}}
- -

Właściwość background-size określa wielkość elementu background-image. 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.

- -
{{EmbedInteractiveExample("pages/css/background-size.html")}}
- - - -

Przestrzenie nie zapełnione przez background-image wypełnia {{cssxref("background-color")}}, background-color będzie widoczny jeżeli obrazek jest przezroczysty.

- -

Syntax

- -
/* 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;
-
- -

Właściwość background-size jest określana w jeden z podanych sposobów:

- - - -

Aby określić wielkość wielu teł, odziel wartości dla każdego tła przecinkami.

- -

Values

- -
-
contain
-
Skaluje obrazek do jak największych rozmiarów, bez jego rozciągania czy przycinania.
-
cover
-
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.
-
auto
-
Skaluje tło w odpowiednim kierunku, po to aby zachować jego nieodłączne proporcje.
-
{{cssxref("<length>")}}
-
Rozciąga obrazek w odpowiednim kierunku do określonej długości. Nie można używać wartości ujemnych.
-
{{cssxref("<percentage>")}}
-
[do przetłumaczenia na: Polski]
-
Stretches the image in the corresponding dimension to the specified percentage of the background positioning area. 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 fixed, the positioning area is instead the entire {{glossary("viewport")}}. Negative values are not allowed.
-
- -

Intrinsic dimensions and proportions

- -

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:

- - - -
-

Note: The behavior of <gradient>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.

-
- -
-

Note: 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.

-
- -

Based on the intrinsic dimensions and proportions, the rendered size of the background image is computed as follows:

- -
-
If both components of background-size are specified and are not auto:
-
The background image is rendered at the specified size.
-
If the background-size is contain or cover:
-
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.
-
If the background-size is auto or auto auto:
-
-
    -
  • If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.
    • -
  • If the image has no intrinsic dimensions and has no intrinsic proportions, it's rendered at the size of the background positioning area.
    • -
  • If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if contain had been specified instead.
    • -
  • 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.
    • -
  • 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.
    • -
-
-
-
Note: SVG images have a preserveAspectRatio attribute that defaults to the equivalent of contain. In Firefox 43, as opposed to Chrome 52, an explicit background-size causes preserveAspectRatio to be ignored.
-
-
If the background-size has one auto component and one non-auto component:
-
-
    -
  • 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.
    • -
  • 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.
    • -
-
-
- -
-

Note: 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.

-
- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

Please see Scaling background images for examples.

- -

Notes

- -

If you use a <gradient> as the background and specify a background-size to go with it, it's best not to specify a size that uses a single auto component, or is specified using only a width value (for example, background-size: 50%). Rendering of <gradient>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 the CSS3 background-size specification and with the CSS3 Image Values gradient specification.

- -
.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%;
-}
-
- -

Note that it's particularly not recommended to use a pixel dimension and an auto dimension with a <gradient>, 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.

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}{{Spec2('CSS3 Backgrounds')}}Initial definition.
- -

{{cssinfo}}

- -

Browser compatibility

- -

{{Compat("css.properties.background-size")}}

- -

See also

- - 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 ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

Summary

- -

The box-decoration-break 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.

- -

{{cssinfo}}

- -

Syntax

- -
box-decoration-break: slice;
-box-decoration-break: clone;
-
-box-decoration-break: initial;
-box-decoration-break: inherit;
-box-decoration-break: unset;
-
- -

Values

- -
-
slice
-
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.
-
clone
-
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") }}: no-repeat may be repeated multiple times.
-
- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

Inline box fragments

- -

An inline element that contains line-breaks styled with:

- -
.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>
- -

Results in:

- -

A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.

- -

Adding box-decoration-break:clone to the above styles:

- -
  -webkit-box-decoration-break: clone;
-  -o-box-decoration-break: clone;
-  box-decoration-break: clone;
-
- -

Results in:

- -

A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example

- -

You can try the two inline examples above in your browser.

- -

Here's an example of an inline element using a large border-radius value. The second "iM" has a line-break between the "i" and the "M". For comparison, the first "iM" 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.

- -

A screenshot of the rendering of the second inline element example.

- -

Try the above example in your browser.

- -

Block box fragments

- -

A block element with similar styles as above, first without any fragmentation:

- -

A screenshot of the rendering of the block element used in the examples without any fragmentation.

- -

Fragmenting the above block into three columns results in:

- -

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.

- -

Note that stacking these pieces vertically will result in the non-fragmented rendering.

- -

Now the same example styled with box-decoration-break:clone

- -

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.

- -

Note here that each fragment has an identical replicated border, box-shadow and background.

- -

You can try the block examples above in your browser.

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break') }}{{ Spec2('CSS3 Fragmentation') }}Initial definition
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support on inline elements{{ CompatVersionUnknown() }}{{property_prefix("-webkit")}}{{CompatGeckoDesktop(32.0)}} [1]{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{property_prefix("-o")}}{{ CompatUnknown() }}
Support on non-inline element{{CompatNo}}{{CompatGeckoDesktop(32.0)}} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support on inline elements{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile("32.0")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Support on non-inline element{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("32.0")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}
-
- -

[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.

- -

See also

- - 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 ---- -

Poza możliwością umieszczania elementów

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-}
-
- -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -

{{ EmbedLiveSample('placement_1', '500', '230') }}

-
- -

Default rules for auto-placement

- -

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 grid-template-rows 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 implicit rows will be created.

- -

Sizing rows in the implicit grid

- -

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.

- -

You can however control the size of these rows with the property grid-auto-rows. To cause all created rows to be 100 pixels tall for example you would use:

- -
- - -
<div class="wrapper">
-    <div>One</div>
-    <div>Two</div>
-    <div>Three</div>
-    <div>Four</div>
-    <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: 100px;
-}
-
- -

{{ EmbedLiveSample('placement_2', '500', '330') }}

-
- -

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.

- -
- - -
<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>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: minmax(100px, auto);
-}
-
- -

{{ EmbedLiveSample('placement_3', '500', '330') }}

-
- -

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 200px. This will continue for as long as content is added to the implicit grid. Track listings are not supported in Firefox.

- -
- - -
<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>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: 100px 200px;
-}
-
- -

{{ EmbedLiveSample('placement_4', '500', '330') }}

-
- -

Auto-placement by column

- -

You can also ask grid to auto-place items by column. Using the property {{cssxref("grid-auto-flow")}} with a value of column. 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")}}.

- -

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.

- -
-
.wrapper {
-    display: grid;
-    grid-template-rows: repeat(3, 200px);
-    grid-gap: 10px;
-    grid-auto-flow: column;
-    grid-auto-columns: 300px 100px;
-}
-
- - - -
<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>
-
- -

{{ EmbedLiveSample('placement_5', '500', '640') }}

-
- -

The order of auto placed items

- -

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 Grid item placement algorithm, however for most of us we just need to remember a few simple rules for our items.

- -

Order modified document order

- -

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 order 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.

- -

Items with placement properties

- -

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.

- -
- - -
<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>
-
- -
.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;
-}
-
- -

{{ EmbedLiveSample('placement_6', '500', '450') }}

-
- -

Deal with items that span tracks

- -

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 span 2. 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.

- -

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.

- -
- - -
<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>
-
- -
.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;
-}
-
- -

{{ EmbedLiveSample('placement_7', '500', '770') }}

-
- -

Filling in the gaps

- -

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.

- -

To do this, add the property {{cssxref("grid-auto-flow")}} with a value of dense to the container. This is the same property you use to change the flow order to column, so if you were working in columns you would add both values grid-auto-flow: column dense.

- -

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.

- -
- - -
<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>
-
- -
.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;
-}
-
- -

{{ EmbedLiveSample('placement_8', '500', '730') }}

-
- -

Anonymous grid items

- -

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 grid to display: grid. 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.

- -
<div class="grid">
-  I am a string and will become an anonymous item
-  <div>A grid item</div>
-  <div>A grid item</div>
-</div>
-
- -

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.

- -

Use cases for auto-placement

- -

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 landscape to span two column tracks. I then use grid-auto-flow: dense to create a densely packed grid.

- -
-
.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%;
-}
-
- -
<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>
-
- -

{{ EmbedLiveSample('placement_9', '500', '1300') }}

-
- -

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 dt and dd items. In my example I am allowing auto-placement to place the items, however I have classes that start a dt in column 1, and dd in column 2, this ensure that terms go on one side and definitions on the other - no matter how many of each we have.

- -
- - -
<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>
-
- -
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;
- }
-
- -

{{ EmbedLiveSample('placement_10', '500', '230') }}

-
- -

What can’t we do with auto-placement (yet)?

- -

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 an issue raised about this on the CSSWG GitHub repository, and you would be welcome to add your own use cases to this.

- -

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.

- - 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 ---- -

Media query 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 CSS3, 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. 

- -

Składnia

- -

Każda Media query składa się z typu medium docelowego, 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 będą prawdziwe. 

- -
<!-- 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>
-
- -

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 link będą pobierane niezależnie od tego czy media query zostanie wykonana.

- -

Dopóki nie użyjesz operatorów not lub optional, typ medium nie jest wymagany i dla danej query nadany zostanie typ all.

- -

Operatory logiczne

- -

Możesz tworzyć zaawansowane media queries za pomocą operatorów logicznych - not, and oraz only. Operator and 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 not używany jest do zanegowanie całej media query. Celem operatora only 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 only oraz not musisz określić typ medium.

- -

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 or

- -

and

- -

The and 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 all media type, could look like this:

- -
@media (min-width: 700px) { ... }
- -

If, however, you wanted this to apply only if the display is in landscape, you could use an and operator to chain the media features together.

- -
@media (min-width: 700px) and (orientation: landscape) { ... }
- -

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 and operator.

- -
@media tv and (min-width: 700px) and (orientation: landscape) { ...  }
- -

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.

- -

comma-separated lists

- -

Comma-separated lists behave like the logical operator or 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.

- -

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:

- -
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
- -

Above, if I were on a screen device with a viewport width of 800px, the media statement would return true because the first part, interpreted as @media all and (min-width: 700px) would apply to my device and therefore return true, despite the fact that my screen device would fail the handheld media type check in the second media query. Likewise, if I were on a handheld 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.

- -

not

- -

The not keyword applies to the whole media query and returns true if the media query would otherwise return false (such as monochrome on a color display or a screen width of 600px with a min-width: 700px feature query). A not 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 not keyword cannot be used to negate an individual feature query, only an entire media query. For example, the not is evaluated last in the following query:

- -
@media not all and (monochrome) { ... }
-
- -

This means that the query is evaluated like this:

- -
@media not (all and (monochrome)) { ... }
-
- -

... rather than like this:

- -
@media (not all) and (monochrome) { ... }
- -

As another example, look at the following media query:

- -
@media not screen and (color), print and (color)
-
- -

It is evaluated like this:

- -
@media (not (screen and (color))), print and (color)
- -

only

- -

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles:

- -
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
-
- -

Pseudo-BNF (for those of you that like that kind of thing)

- -
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
- -

Media queries are case insensitive.  Media queries involving unknown media types are always false.

- -
Note: Parentheses are required around expressions; failing to use them is an error.
- -

Media features

- -

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.

- -
Note: 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.
- -

color

- -

Value: {{cssxref("<color>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: yes

- -

Indicates the number of bits per color component of the output device.  If the device is not a color device, this value is zero.

- -
Note: 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.
- -

Examples

- -

To apply a style sheet to all color devices:

- -
@media all and (color) { ... }
-
- -

To apply a style sheet to devices with at least 4 bits per color component:

- -
@media all and (min-color: 4) { ... }
-
- -

color-index

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: yes

- -

Indicates the number of entries in the color look-up table for the output device.

- -

Examples

- -

To indicate that a style sheet should apply to all devices using indexed color, you can do:

- -
@media all and (color-index) { ... }
-
- -

To apply a style sheet to indexed color devices with at least 256 colors:

- -
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
-
- -

aspect-ratio

- -

Value: {{cssxref("<ratio>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Accepts min/max prefixes: yes

- -

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).

- -

Example

- -

The following selects a special style sheet to use for when the display area is at least as wide as it is high.

- -
@media screen and (min-aspect-ratio: 1/1) { ... }
- -

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.

- -

device-aspect-ratio

- -

Value: {{cssxref("<ratio>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Accepts min/max prefixes: yes

- -

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).

- -

Example

- -

The following selects a special style sheet to use for widescreen displays.

- -
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
- -

This selects the style when the aspect ratio is either 16:9 or 16:10.

- -

device-height

- -

Value: {{cssxref("<length>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Accepts min/max prefixes: yes

- -

Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

- -

Example

- -

To apply a style sheet to a document when displayed on a screen that is less than 800 pixels long, you can use this:

- -
<link rel="stylesheet" media="screen and (max-device-height: 799px)" />
-
- -

device-width

- -

Value: {{cssxref("<length>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Accepts min/max prefixes: yes

- -

Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

- -

Example

- -

To apply a style sheet to a document when displayed on a screen that is less than 800 pixels wide, you can use this:

- -
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
- -

grid

- -

Value: <mq-boolean> which is an {{cssxref("<integer>")}} that can only have the 0 and 1 value.
- Media: all
- Accepts min/max prefixes: no

- -

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.

- -

Example

- -

To apply a style to handheld devices with a 15-character or narrower display:

- -
@media handheld and (grid) and (max-width: 15em) { ... }
-
- -
Note: 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.
- -

height

- -

Value: {{cssxref("<length>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Accepts min/max prefixes: yes

- -

The height 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).

- -
Note: As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the width and height media features.
- -

monochrome

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: yes

- -

Indicates the number of bits per pixel on a monochrome (greyscale) device.  If the device isn't monochrome, the device's value is 0.

- -

Examples

- -

To apply a style sheet to all monochrome devices:

- -
@media all and (monochrome) { ... }
-
- -

To apply a style sheet to monochrome devices with at least 8 bits per pixel:

- -
@media all and (min-monochrome: 8) { ... }
-
- -

orientation

- -

Value: landscape | portrait
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

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.

- -

Example

- -

To apply a style sheet only in portrait orientation:

- -
@media all and (orientation: portrait) { ... }
- -
Note: 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.
- -

resolution

- -

Value: {{cssxref("<resolution>")}}
- Media: {{cssxref("Media/Bitmap", "bitmap")}}
- Accepts min/max prefixes: yes

- -

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).

- -

Example

- -

To apply a style sheet to devices with at least 300 dots per inch of resolution:

- -
@media print and (min-resolution: 300dpi) { ... }
-
- -

To replace the old (min-device-pixel-ratio: 2) syntax:

- -
@media screen and (min-resolution: 2dppx) { ... }
- -

scan

- -

Value: progressive | interlace
- Media: {{cssxref("Media/TV")}}
- Accepts min/max prefixes: no

- -

Describes the scanning process of television output devices.

- -

Example

- -

To apply a style sheet only to progressive scanning televisions:

- -
@media tv and (scan: progressive) { ... }
-
- -

width

- -

Value: {{cssxref("<length>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Accepts min/max prefixes: yes

- -

The width 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).

- -
Note: As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the width and height media features.
- -

Examples

- -

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:

- -
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
-
- -

This media query specifies a style sheet that applies to printed media wider than 8.5 inches:

- -
<link rel="stylesheet" media="print and (min-width: 8.5in)"
-    href="http://foo.com/mystyle.css" />
-
- -

This query specifies a style sheet that is usable when the viewport is between 500 and 800 pixels wide:

- -
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
-
- -

Mozilla-specific media features

- -

Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.

- -

{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

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 pseudo-class.

- -

{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

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.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}

- -

Value: {{cssxref("<number>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: yes

- -

Gives the number of device pixels per CSS pixel.

- -
-

Do not use this feature.

- -

Use the resolution feature with the dppx unit instead.
-
- -moz-device-pixel-ratio may be used for compatibility with Firefox older than 16 and -webkit-device-pixel-ratio with WebKit-based browsers that do not support dppx.

- -

Example:

- -
@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 */
- -

See this CSSWG article for compatibility good practices regarding resolution and dppx.

-
- -
Note: This media feature is also implemented by Webkit and by IE 11 for Windows Phone 8.1 as -webkit-device-pixel-ratio. The min and max prefixes as implemented by Gecko are named min--moz-device-pixel-ratio and max--moz-device-pixel-ratio; but the same prefixes as implemented by Webkit are named -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio.
- -

{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

- -

Value: windows-xp | windows-vista | windows-win7 | windows-win8 | windows-win10
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

Indicates which operating system version is currently being used. Currently only implemented on Windows. Possible values are:

- - - -

This is provided for application skins and other chrome code to be able to adapt to work well with the current operating system version.

- -

{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

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.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS pseudo-class.

- -

Example

- -

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.

- -

{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

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.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

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.

- -

{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

- -

Value: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

- - - -

This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.

- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome("21") }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE("9.0") }}{{ CompatOpera("9") }}{{ CompatSafari("4") }}
grid{{ CompatUnknown() }}{{ CompatNo() }} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
resolution{{ CompatChrome("29") }}{{ CompatGeckoDesktop("1.9.1") }} [2]
- {{ CompatGeckoDesktop("8.0") }} [3]		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
scan{{ CompatUnknown() }}{{ CompatNo() }} [4]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

[1] grid media type is not supported

- -

[2] Supports {{cssxref("<integer>")}} values;

- -

[3] Supports {{cssxref("<number>")}} values, as per the spec.

- -

[4] tv media type is not supported

- -

 

- -

See also

- - 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 ---- -

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.

- -

How does it work?

- -

All you have to do is set the {{htmlattrxref("contenteditable")}} attribute on nearly any HTML element to make it editable.

- -

Here's a simple example which creates a {{HTMLElement("div")}} element whose contents the user can edit.

- -
<div contenteditable="true">
-  This text can be edited by the user.
-</div>
- -

Here's the above HTML in action:

- -

{{ EmbedLiveSample('How_does_it_work') }}

- -

Executing commands

- -

When an HTML element has contenteditable set to true, the {{ domxref("document.execCommand()") }} method is made available. This lets you run commands 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 contentEditable, calling execCommand() will affect the currently active editable element.

- -

Differences in markup generation

- -

Use of contenteditable 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")}}).

- -

Fortunately, in modern browsers things are somewhat more consistent. As of Firefox 55, Firefox has been updated to wrap the separate lines in {{htmlelement("div")}} elements, matching the behavior of Chrome, modern Opera, Edge, and Safari.

- -

Try it out in the above example.

- -
-

Note: Internet Explorer, which is no longer being developed, uses {{htmlelement("p")}} elements instead of <div>.

-
- -

If you want to use a different paragraph separator, the above browsers all support {{domxref("document.execCommand")}}, which provides a DefaultParagraphSeparator command to allow you to change it. For example, to use {{htmlelement("p")}} elements:

- -
document.execCommand("DefaultParagraphSeparator", false, "p");
- -

Security

- -

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 about:config:

- -
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");
- -

Example: A simple but complete rich text editor

- -
-
<!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>
-
-
- -
Note: if you want to see how to standardize the creation and the insertion of your editor in your page, please see our more complete rich-text editor example.
- -

See also

- - 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 ---- -

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.

-

{{LandingPageListSubpages}}

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: '

–

: The HTML Section Heading elements' -slug: Web/HTML/Element/Heading_Elements -translation_of: Web/HTML/Element/Heading_Elements ---- -
{{HTMLRef}}
- -

Element języka HTML <h1>–<h6> reprezentuje sześć poziomów zawartości nagłówka. Zawartość nagłówka <h1> jest prezentowana największą czcionką, a nagłówków <h6> najmniejszą.

- -
{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Content categoriesFlow content, heading content, palpable content.
Permitted contentPhrasing content.
Tag omission{{no_tag_omission}}
Permitted parentsAny element that accepts flow content; don't use a heading element as a child of the {{HTMLElement("hgroup")}} element — it is now deprecated.
Implicit ARIA roleheading
Permitted ARIA roles{{ARIARole("tab")}}, {{ARIARole("presentation")}} or {{ARIARole("none")}}
DOM interface{{domxref("HTMLHeadingElement")}}
- -

Attributes

- -

These elements only include the global attributes.

- -
-

The align attribute is obsolete; don't use it.

-
- -

Usage notes

- - - -

Examples

- -

All headings

- -

The following code shows all the heading levels, in use.

- -
<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>
-
- -

Here is the result of this code:

- -

{{ EmbedLiveSample('All_headings', '280', '300', '') }}

- -

Example page

- -

The following code shows a few headings with some content under them.

- -
<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>
-
- -

Here is the result of this code:

- -

{{ EmbedLiveSample('Example_page', '280', '480', '') }}

- -

Accessibility concerns

- - - -

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.

- -

Don't

- -
<h1>Heading level 1</h1>
-<h3>Heading level 3</h3>
-<h4>Heading level 4</h4>
-
- -

Do

- -
<h1>Heading level 1</h1>
-<h2>Heading level 2</h2>
-<h3>Heading level 3</h3>
-
- -

Nesting

- -

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:

- -
    -
  1. h1 Beetles - -
      -
    1. h2 Etymology
      2. -
    2. h2 Distribution and Diversity
      3. -
    3. h2 Evolution -
        -
      1. h3 Late Paleozoic
        2. -
      2. h3 Jurassic
        3. -
      3. h3 Cretaceous
        4. -
      4. h3 Cenozoic
        5. -
      -
      4. -
    4. h2 External Morphology -
        -
      1. h3 Head -
          -
        1. h4 Mouthparts
          2. -
        -
        2. -
      2. h3 Thorax -
          -
        1. h4 Prothorax
          2. -
        2. h4 Pterothorax
          3. -
        -
        3. -
      3. h3 Legs
        4. -
      4. h3 Wings
        5. -
      5. h3 Abdomen
        6. -
      -
      5. -
    -
    2. -
- -

When headings are nested, heading levels may be "skipped" when closing a subsection.

- - - -

Labeling section content

- -

Another common navigation technique for users of screen reading software is to generate a list of sectioning content and use it to determine the page's layout.

- -

Sectioning content can be labeled using a combination of the aria-labelledby 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.

- -

Example

- -
<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>
-
- -

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 nav element's contents to determine their purpose.

- - - -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'sections.html#the-h1-h2-h3-h4-h5-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML4.01')}}
- -

Browser compatibility

- - - -

{{Compat("html.elements.h1")}}

- -

See also

- - 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: -slug: Web/HTML/Element/Input/button -translation_of: Web/HTML/Element/input/button ---- -
{{HTMLRef}}
- -

{{HTMLElement("input")}} elements of type button 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).

- -
{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}
- - - -
-

Note: While <input> elements of type button 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.

-
- - - - - - - - - - - - - - - - - - - - - - - - -
{{anch("Value")}}A {{domxref("DOMString")}} used as the button's label
Events{{event("click")}}
Supported common attributes{{htmlattrxref("type", "input")}}, and {{htmlattrxref("value", "input")}}
IDL attributesvalue
MethodsNone
- -

Value

- -

An <input type="button"> elements' {{htmlattrxref("value", "input")}} attribute contains a {{domxref("DOMString")}} that is used as the button's label.

- -
-
<input type="button" value="Click Me">
-
- -

{{EmbedLiveSample("summary-example3", 650, 30)}}

- -

If you don't specify a value, you get an empty button:

- -
-
<input type="button">
-
- -

{{EmbedLiveSample("summary-example1", 650, 30)}}

- -

Using buttons

- -

<input type="button"> elements have no default behavior (their cousins, <input type="submit"> and <input type="reset"> are used to submit and reset forms, respectively). To make buttons do anything, you have to write JavaScript code to do the work.

- -

A simple button

- -

We'll begin by creating a simple button with a {{event("click")}} event handler that starts our machine (well, it toggles the value of the button and the text content of the following paragraph):

- -
<form>
-  <input type="button" value="Start machine">
-</form>
-<p>The machine is stopped.</p>
- -
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.';
-  }
-}
- -

The script gets a reference to the {{domxref("HTMLInputElement")}} object representing the <input> in the DOM, saving this refence in the variable button. {{domxref("EventTarget.addEventListener", "addEventListener()")}} is then used to establish a function that will be run when {{event("click")}} events occur on the button.

- -

{{EmbedLiveSample("A_simple_button", 650, 100)}}

- -

Adding keyboard shortcuts to buttons

- -

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.

- -

In this example, s is specified as the access key (you'll need to press s plus the particular modifier keys for your browser/OS combination; see accesskey for a useful list of those).

- -
-
<form>
-  <input type="button" value="Start machine" accesskey="s">
-</form>
-<p>The machine is stopped.</p>
-
-
- - - -

{{EmbedLiveSample("Adding_keyboard_shortcuts_to_buttons", 650, 100)}}

- -
-

Note: 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).

-
- -

Disabling and enabling a button

- -

To disable a button, simply specify the {{htmlattrxref("disabled")}} global attribute on it, like so:

- -
-
<input type="button" value="Disable me" disabled>
-
- -

You can enable and disable buttons at run time by simply setting disabled to true or false. In this example our button starts off enabled, but if you press it, it is disabled using button.disabled = true. A {{domxref("WindowTimers.setTimeout","setTimeout()")}} function is then used to reset the button back to its enabled state after two seconds.

- - - -

{{EmbedLiveSample("Hidden_code_1", 650, 60)}}

- -

If the disabled attribute isn't specified, the button inherits its disabled 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 disabled on the container.

- -

The example below shows this in action. This is very similar to the previous example, except that the disabled attribute is set on the <fieldset> when the first button is pressed — this causes all three buttons to be disabled until the two second timeout has passed.

- - - -

{{EmbedLiveSample("Hidden_code_2", 650, 60)}}

- -
-

Note: Firefox will, unlike other browsers, by default, persist the dynamic disabled state of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.

-
- -

Validation

- -

Buttons don't participate in constraint validation; they have no real value to be constrained.

- -

Examples

- -

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.

- -
<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>
- - - -
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();
- -

{{EmbedLiveSample("Examples", '100%', 600)}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComments
{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '<input type="button">')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}}{{Spec2('HTML5 W3C')}}
- -

Browser compatibility

- - - -

{{Compat("html.elements.input.input-button")}}

- -

See also

- - 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: ': Element metadanych na poziomie dokumentów' -slug: Web/HTML/Element/meta -translation_of: Web/HTML/Element/meta ---- -
{{HTMLRef}}
- -

Element HTML <meta> 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")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Kategorie treściMetadata content. If the {{htmlattrxref("itemprop")}} attribute is present: flow content, phrasing content.
Dozwolona zawartośćNone, it is an {{Glossary("empty element")}}.
Pominięcie znacznikaAs it is a void element, the start tag must be present and the end tag must not be present.
Dozwoleni rodzice<meta charset>, <meta http-equiv>: 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.
Domniemane role ARIANo corresponding role
Dozwolone role ARIANo role permitted
Interfejs DOM{{domxref("HTMLMetaElement")}}
- -

The type of metadata provided by the meta element can be one of the following:

- - - -

Attributes

- -

This element includes the global attributes.

- -
-

Note: the attribute {{htmlattrxref("name", "meta")}} has a specific meaning for the <meta> element, and the {{htmlattrxref("itemprop")}} attribute must not be set on the same <meta> element that has any existing {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} or {{htmlattrxref("charset", "meta")}} attributes.

-
- -
-
{{htmlattrdef("charset")}}
-
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 "utf-8".
-
{{htmlattrdef("content")}}
-
This attribute contains the value for the {{htmlattrxref("http-equiv", "meta")}} or {{htmlattrxref("name", "meta")}} attribute, depending on which is used.
-
{{htmlattrdef("http-equiv")}}
-
-

Defines a pragma directive. The attribute is named http-equiv(alent) because all the allowed values are names of particular HTTP headers:

- -
    -
  • content-security-policy - -

    Allows page authors to define a content policy for the current page. Content policies mostly specify allowed server origins and script endpoints which help guard against cross-site scripting attacks.

    -
    • -
  • content-type -

    If specified, the content attribute must have the value "text/html; charset=utf-8". Note: Can only be used in documents served with a text/html MIME type — not in documents served with an XML MIME type.

    -
    • -
  • default-style -

    Sets the name of the default CSS style sheet set.

    -
    • -
  • x-ua-compatible -

    If specified, the content attribute must have the value "IE=edge". User agents are required to ignore this pragma.

    -
    • -
  • refresh -
    This instruction specifies:
    - -
      -
    • The number of seconds until the page should be reloaded - only if the {{htmlattrxref("content", "meta")}} attribute contains a positive integer.
      • -
    • 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 ';url=', and a valid URL.
      • -
    - -
    Accessibility concerns
    - -
    Pages set with a refresh 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.
    - - -
    • -
-
-
{{htmlattrdef("name")}}
-
-

The name and content attributes can be used together to provide document metadata in terms of name-value pairs, with the name attribute giving the metadata name, and the content attribute giving the value.

- -

See standard metadata names for details about the set of standard metadata names defined in the HTML specification.

-
-
- -

Examples

- -
<meta charset="utf-8">
-
-<!-- Redirect page after 3 seconds -->
-<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '<meta>')}}{{Spec2('HTML WHATWG')}}
- -

Browser compatibility

- - - -
{{Compat("html.elements.meta")}}
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 ---- -
{{HTMLSidebar("Global_attributes")}}
- -

The spellcheck global attribute is an enumerated attribute defines whether the element may be checked for spelling errors.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}
- - - -

It may have the following values:

- - - -
-

Note: The spellcheck attribute is an enumerated one and not a Boolean one. This means that the explicit usage of one of the values true or false is mandatory, and that a shorthand like <textarea spellcheck></textarea> is not allowed. The correct usage is <textarea spellcheck="true"></textarea>.

-
- -

If this attribute is not set, its default value is element-type and browser-defined. This default value may also be inherited, which means that the element content will be checked for spelling errors only if its nearest ancestor has a spellcheck state of true.

- -

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 spellcheck attribute is set to true and the browser supports spellchecking.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, initial definition
- -

Browser compatibility

- - - -

{{Compat("html.global_attributes.spellcheck")}}

- -

See also

- - 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 ---- -
{{HTTPSidebar}}
- -

Protokół HTTP zapewnia ogólną strukturę kontroli dostępu i uwierzytelniania. 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”.

- -

Ogólna struktura uwierzytelniania HTTP

- -

{{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.

- -

Wyzwanie i przepływ odpowiedzi działają w następujący sposób:

- -
    -
  1. 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.
    2. -
  2. A client that wants to authenticate itself with the server can then do so by including an {{HTTPHeader("Authorization")}} request header with the credentials.
    3. -
  3. Usually a client will present a password prompt to the user and will then issue the request including the correct Authorization header.
    4. -
- -

A sequence diagram illustrating HTTP messages between a client and a server lifeline.

- -

In the case of a "Basic" authentication like shown in the figure, the exchange must happen over an HTTPS (TLS) connection to be secure.

- -

Proxy authentication

- -

The same challenge and response mechanism can be used for proxy authentication. 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.

- -

Access forbidden

- -

If a (proxy) server receives valid credentials that are inadequate to access a given resource, the server should respond with the {{HTTPStatus("403")}} Forbidden status code. Unlike {{HTTPStatus("401")}} Unauthorized or {{HTTPStatus("407")}} Proxy Authentication Required, authentication is impossible for this user.

- -

Authentication of cross-origin images

- -

A potential security hole recently been fixed by browsers is authentication of cross-site images. From Firefox 59 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.

- -

Character encoding of HTTP authentication

- -

Browsers use utf-8 encoding for usernames and passwords.

- -

Firefox once used ISO-8859-1, but changed to utf-8 for parity with other browsers and to avoid potential problems as described in {{bug(1419658)}}.

- -

WWW-Authenticate and Proxy-Authenticate headers

- -

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.

- -

The syntax for these headers is the following:

- -
WWW-Authenticate: <type> realm=<realm>
-Proxy-Authenticate: <type> realm=<realm>
-
- -

Here, <type> is the authentication scheme ("Basic" is the most common scheme and introduced below). The realm 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.

- -

Authorization and Proxy-Authorization headers

- -

The {{HTTPHeader("Authorization")}} and {{HTTPHeader("Proxy-Authorization")}} request headers contain the credentials to authenticate a user agent with a (proxy) server. Here, the <type> is needed again followed by the credentials, which can be encoded or encrypted depending on which authentication scheme is used.

- -
Authorization: <type> <credentials>
-Proxy-Authorization: <type> <credentials>
-
- -

Authentication schemes

- -

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.

- -

The most common authentication scheme is the "Basic" authentication scheme, which is introduced in more detail below. IANA maintains a list of authentication schemes, but there are other schemes offered by host services, such as Amazon AWS. Common authentication schemes include:

- -
-
Basic
-
See {{rfc(7617)}}, base64-encoded credentials. More information below.
-
Bearer
-
See {{rfc(6750)}}, bearer tokens to access OAuth 2.0-protected resources
-
Digest
-
See {{rfc(7616)}}, only md5 hashing is supported in Firefox, see {{bug(472823)}} for SHA encryption support
-
HOBA
-
See {{rfc(7486)}}, Section 3, HTTP Origin-Bound Authentication, digital-signature-based
-
Mutual
-
See {{rfc(8120)}}
-
AWS4-HMAC-SHA256
-
See AWS docs
-
- -

Basic authentication scheme

- -

The "Basic" HTTP authentication scheme is defined in {{rfc(7617)}}, which transmits credentials as user ID/password pairs, encoded using base64.

- -

Security of basic authentication

- -

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 is not secure. 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.

- -

Restricting access with Apache and basic authentication

- -

To password-protect a directory on an Apache server, you will need a .htaccess and a .htpasswd file.

- -

The .htaccess file typically looks like this:

- -
AuthType Basic
-AuthName "Access to the staging site"
-AuthUserFile /path/to/.htpasswd
-Require valid-user
- -

The .htaccess file references a .htpasswd file in which each line consists of a username and a password separated by a colon (:). You cannot see the actual passwords as they are hashed (using MD5-based hashing, in this case). Note that you can name your .htpasswd 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 .ht* files).

- -
aladdin:$apr1$ZjTqBB3f$IF9gdYAGlMrs2fuINjHsz.
-user2:$apr1$O04r.y2H$/vEkesPhVInBByJUkXitA/
-
- -

Restricting access with nginx and basic authentication

- -

For nginx, you will need to specify a location that you are going to protect and the auth_basic directive that provides the name to the password-protected area. The auth_basic_user_file directive then points to a .htpasswd file containing the encrypted user credentials, just like in the Apache example above.

- -
location /status {
-    auth_basic           "Access to the staging site";
-    auth_basic_user_file /etc/apache2/.htpasswd;
-}
- -

Access using credentials in the URL

- -

Many clients also let you avoid the login prompt by using an encoded URL containing the username and the password like this:

- -
https://username:password@www.example.com/
- -

The use of these URLs is deprecated. In Chrome, the username:password@ part in URLs is even stripped out 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."

- -

See also

- - 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 ---- -
{{HTTPSidebar}}
- -

Date jest to ogólny nagłówek HTTP zawierający datę i czas w jakiej wiadomość została stworzona.

- - - - - - - - - - - - -
Header type{{Glossary("General header")}}
{{Glossary("Forbidden header name")}}yes
- -

Składnia

- -
Date: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT
-
- -

Dyrektywy

- -
-
<day-name>
-
One of "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", or "Sun" (case-sensitive).
-
<day>
-
2 digit day number, e.g. "04" or "23".
-
<month>
-
One of "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" (case sensitive).
-
<year>
-
4 digit year number, e.g. "1990" or "2016".
-
<hour>
-
2 digit hour number, e.g. "09" or "23".
-
<minute>
-
2 digit minute number, e.g. "04" or "59".
-
<second>
-
2 digit second number, e.g. "04" or "59".
-
GMT
-
-

Greenwich Mean Time. HTTP dates are always expressed in GMT, never in local time.

-
-
- -

Przykłady

- -
Date: Wed, 21 Oct 2015 07:28:00 GMT
-
- -

Specyfikacja

- - - - - - - - - - - - -
SpecificationTitle
{{RFC("7231", "Date", "7.1.1.2")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
- -

Zgodność z przeglądarką

- - - -

{{Compat("http.headers.Date")}}

- -

Zobacz również

- - 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 ---- -
{{jsSidebar("More")}}
- -
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.
- -

Dynamiczne typowanie

- -

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:

- -
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)
-
- -

Data and Structure types

- -

Najnowsza wersja standardu ECMAScript definiuje dziewięć typów danych:

- - - -

Keep in mind the only valuable purpose of typeof operator usage is checking the Data Type. If we wish to check any Structural Type derived from Object it is pointless to use typeof for that, as we will always receive "object". The indeed proper way to check what sort of Object we are using an instanceof keyword. But even in that case there might be misconceptions.

- -

Wartości prymitywne

- -

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 "primitive values".

- -

Boolean type

- -

Boolean represents a logical entity and can have two values: true and false. See Boolean and {{jsxref("Boolean")}} for more details.

- -

Null type

- -

The Null type has exactly one value: null. See {{jsxref("null")}} and Null for more details.

- -

Undefined type

- -

A variable that has not been assigned a value has the value undefined. See {{jsxref("undefined")}} and Undefined for more details.

- -

Number type

- -

ECMAScript has two built-in numeric types: Number and BigInt (see below).

- -

The Number type is a double-precision 64-bit binary format IEEE 754 value (numbers between -(253 − 1) and 253 − 1). In addition to representing floating-point numbers, the number type has three symbolic values: +Infinity, -Infinity, and {{jsxref("NaN")}} ("Not a Number").

- -

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")}}.

- -

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.

- -

The number type has only one integer with two representations: 0 is represented as both -0 and +0. (0 is an alias for +0.) 

- -

In the praxis, this has almost no impact. For example, +0 === -0 is true. However, you are able to notice this when you divide by zero:

- -
> 42 / +0
-Infinity
-> 42 / -0
--Infinity
-
- -

Although a number often represents only its value, JavaScript provides {{jsxref("Operators/Bitwise_Operators", "binary (bitwise) operators")}}.

- -

These bitwise operators can be used to represent several Boolean values within a single number using bit masking. 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.

- -

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.

- -

BigInt type

- -

The {{jsxref("BigInt")}} type is a numeric primitive in JavaScript that can represent integers with arbitrary precision. With BigInts, you can safely store and operate on large integers even beyond the safe integer limit for Numbers.

- -

A BigInt is created by appending n to the end of an integer or by calling the constructor.

- -

You can obtain the safest value that can be incremented with Numbers by using the constant {{jsxref("Number.MAX_SAFE_INTEGER")}}. With the introduction of BigInts, you can operate with numbers beyond the {{jsxref("Number.MAX_SAFE_INTEGER")}}.

- -

This example demonstrates, where incrementing the {{jsxref("Number.MAX_SAFE_INTEGER")}} returns the expected result:

- -
> const x = 2n ** 53n;
-9007199254740992n
-> const y = x + 1n;
-9007199254740993n
-
- -

You can use the operators +, *, -, **, and % with BigInts—just like with Numbers. A BigInt is not strictly equal to a Number, but it is loosely so.

- -

A BigInt behaves like a Number in cases where it is converted to Boolean: if, ||, &&, Boolean, !.

- -

BigInts cannot be operated on interchangeably with Numbers. Instead a {{jsxref("TypeError")}} will be thrown.

- -

String type

- -

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 0, the next at index 1, and so on. The length of a String is the number of elements in it.

- -

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.

- -

However, it is still possible to create another string based on an operation on the original string. For example:

- - - -

Beware of "stringly-typing" your code!

- -

It can be tempting to use strings to represent complex data. Doing this comes with short-term benefits:

- - - -

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.

- -

Use strings for textual data. When representing complex data, parse strings and use the appropriate abstraction.

- -

Symbol type

- -

Symbols are new to JavaScript in ECMAScript 2015. A Symbol is a unique and immutable primitive value and may be used as the key of an Object property (see below). In some programming languages, Symbols are called "atoms".

- -

For more details see Symbol and the {{jsxref("Symbol")}} object wrapper in JavaScript.

- -

Obiekty

- -

In computer science, an object is a value in memory which is possibly referenced by an identifier.

- -

Properties

- -

In JavaScript, objects can be seen as a collection of properties. With the object literal syntax, 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 key values. A key value is either a String or a Symbol value.

- -

There are two types of object properties which have certain attributes: The data property and the accessor property.

- -

Data property

- -

Associates a key with a value, and has the following attributes:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attributes of a data property
AttributeTypeDescriptionDefault value
[[Value]]Any JavaScript typeThe value retrieved by a get access of the property.undefined
[[Writable]]BooleanIf false, the property's [[Value]] cannot be changed.false
[[Enumerable]]Boolean -

If true, the property will be enumerated in for...in loops.
- See also Enumerability and ownership of properties.

- 		false
[[Configurable]]BooleanIf false, the property cannot be deleted, cannot be changed to an accessor property, and attributes other than [[Value]] and [[Writable]] cannot be changed.false
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Obsolete attributes (as of ECMAScript 3, renamed in ECMAScript 5)
AttributeTypeDescription
Read-onlyBooleanReversed state of the ES5 [[Writable]] attribute.
DontEnumBooleanReversed state of the ES5 [[Enumerable]] attribute.
DontDeleteBooleanReversed state of the ES5 [[Configurable]] attribute.
- -

Accessor property

- -

Associates a key with one of two accessor functions (get and set) to retrieve or store a value, and has the following attributes:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attributes of an accessor property
AttributeTypeDescriptionDefault value
[[Get]]Function object or undefinedThe function is called with an empty argument list and retrieves the property value whenever a get access to the value is performed.
- See also get.		undefined
[[Set]]Function object or undefinedThe function is called with an argument that contains the assigned value and is executed whenever a specified property is attempted to be changed.
- See also set.		undefined
[[Enumerable]]BooleanIf true, the property will be enumerated in for...in loops.false
[[Configurable]]BooleanIf false, the property can't be deleted and can't be changed to a data property.false
- -
-

Note: 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.

-
- -

"Normal" objects, and functions

- -

A JavaScript object is a mapping between keys and values. Keys are strings (or {{jsxref("Symbol")}}s), and values can be anything. This makes objects a natural fit for hashmaps.

- -

Functions are regular objects with the additional capability of being callable.

- -

Dates

- -

When representing dates, the best choice is to use the built-in Date utility in JavaScript.

- -

Indexed collections: Arrays and typed Arrays

- -

Arrays are regular objects for which there is a particular relationship between integer-key-ed properties and the length property.

- -

Additionally, arrays inherit from Array.prototype, which provides to them a handful of convenient methods to manipulate arrays. For example, indexOf (searching a value in the array) or push (adding an element to the array), and so on. This makes Arrays a perfect candidate to represent lists or sets.

- -

Typed Arrays 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:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TypeValue RangeSize in bytesDescriptionWeb IDL typeEquivalent C type
{{jsxref("Int8Array")}}-128 to 12718-bit two's complement signed integerbyteint8_t
{{jsxref("Uint8Array")}}0 to 25518-bit unsigned integeroctetuint8_t
{{jsxref("Uint8ClampedArray")}}0 to 25518-bit unsigned integer (clamped)octetuint8_t
{{jsxref("Int16Array")}}-32768 to 32767216-bit two's complement signed integershortint16_t
{{jsxref("Uint16Array")}}0 to 65535216-bit unsigned integerunsigned shortuint16_t
{{jsxref("Int32Array")}}-2147483648 to 2147483647432-bit two's complement signed integerlongint32_t
{{jsxref("Uint32Array")}}0 to 4294967295432-bit unsigned integerunsigned longuint32_t
{{jsxref("Float32Array")}}1.2×10-38 to 3.4×1038432-bit IEEE floating point number (7 significant digits e.g., 1.1234567)unrestricted floatfloat
{{jsxref("Float64Array")}}5.0×10-324 to 1.8×10308864-bit IEEE floating point number (16 significant digits e.g., 1.123...15)unrestricted doubledouble
{{jsxref("BigInt64Array")}}-263 to 263-1864-bit two's complement signed integerbigintint64_t (signed long long)
{{jsxref("BigUint64Array")}}0 to 264-1864-bit unsigned integerbigintuint64_t (unsigned long long)
- -

Keyed collections: Maps, Sets, WeakMaps, WeakSets

- -

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.

- -

The difference between Maps and WeakMaps is that in the former, object keys can be enumerated over. This allows garbage collection optimizations in the latter case.

- -

One could implement Maps and Sets in pure ECMAScript 5. However, since objects cannot be compared (in the sense of < "less than", for instance), look-up performance would necessarily be linear. Native implementations of them (including WeakMaps) can have look-up performance that is approximately logarithmic to constant time.

- -

Usually, to bind data to a DOM node, one could set properties directly on the object, or use data-* attributes. This has the downside that the data is available to any script running in the same context. Maps and WeakMaps make it easy to privately bind data to an object.

- -

Structured data: JSON

- -

JSON (JavaScript Object Notation) is a lightweight data-interchange format, derived from JavaScript, but used by many programming languages. JSON builds universal data structures.

- -

See JSON and {{jsxref("JSON")}} for more details.

- -

More objects in the standard library

- -

JavaScript has a standard library of built-in objects.

- -

Please have a look at the reference to find out about more objects.

- -

Określanie typu za pomocą operatora typeof

- -

Operator typeof może być pomocny przy określeniu typu twojej zmiennej.

- -

Więcej szczegółów znajdziecie na stronie poświęconej operatorowi typeof.

- -

Specifications

- - - - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}
- -

See also

- - 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 ---- -
{{JsSidebar("More")}}
- -

This page lists features of JavaScript that are deprecated (that is, still available but planned for removal) and obsolete (that is, no longer usable).

- -

Deprecated features

- -

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.

- -

RegExp properties

- -

The following properties are deprecated. This does not affect their use in {{jsxref("String.replace", "replacement strings", "", 1)}}:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
{{jsxref("RegExp.n", "$1-$9")}} -

Parenthesized substring matches, if any.
- Warning: Using these properties can result in problems, since browser extensions can modify them. Avoid them!

-
{{jsxref("RegExp.input", "$_")}}See input.
{{jsxref("RegExp.multiline", "$*")}}See multiline.
{{jsxref("RegExp.lastMatch", "$&")}}See lastMatch.
{{jsxref("RegExp.lastParen", "$+")}}See lastParen.
{{jsxref("RegExp.leftContext", "$`")}}See leftContext.
{{jsxref("RegExp.rightContext", "$'")}}See rightContext.
{{jsxref("RegExp.input", "input")}}The string against which a regular expression is matched.
{{jsxref("RegExp.lastMatch", "lastMatch")}}The last matched characters.
{{jsxref("RegExp.lastParen", "lastParen")}}The last parenthesized substring match, if any.
{{jsxref("RegExp.leftContext", "leftContext")}}The substring preceding the most recent match.
{{jsxref("RegExp.rightContext", "rightContext")}}The substring following the most recent match.
- -

The following are now properties of RegExp instances, no longer of the RegExp object:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
{{jsxref("RegExp.global", "global")}}Whether or not to test the regular expression against all possible matches in a string, or only against the first.
{{jsxref("RegExp.ignoreCase", "ignoreCase")}}Whether or not to ignore case while attempting a match in a string.
{{jsxref("RegExp.lastIndex", "lastIndex")}}The index at which to start the next match.
{{jsxref("RegExp.multiline", "multiline")}}Whether or not to search in strings across multiple lines.
{{jsxref("RegExp.source", "source")}}The text of the pattern.
- -

RegExp methods

- - - -

Function properties

- - - -

Legacy generator

- - - -

Iterator

- - - -

Object methods

- - - -

Date methods

- - - -

Functions

- - - -

Proxy

- - - -

Escape sequences

- - - -

String methods

- - - -

Obsolete features

- -

These obsolete features have been entirely removed from JavaScript and can no longer be used as of the indicated version of JavaScript.

- -

Object

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
{{jsxref("Global_Objects/Object/count", "__count__")}}Returns the number of enumerable properties directly on a user-defined object.
{{jsxref("Global_Objects/Object/Parent", "__parent__")}}Points to an object's context.
{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}Evaluates a string of JavaScript code in the context of the specified object.
{{jsxref("Object.observe()")}}Asynchronously observing the changes to an object.
{{jsxref("Object.unobserve()")}}Remove observers.
{{jsxref("Object.getNotifier()")}}Creates an object that allows to synthetically trigger a change.
- -

Function

- - - - - - - - - - - - -
PropertyDescription
{{jsxref("Global_Objects/Function/arity", "arity")}}Number of formal arguments.
- -

Array

- - - - - - - - - - - - - - - - -
PropertyDescription
{{jsxref("Array.observe()")}}Asynchronously observing changes to Arrays.
{{jsxref("Array.unobserve()")}}Remove observers.
- -

Number

- - - -

ParallelArray

- - - -

Statements

- - - -

E4X

- -

See E4X for more information.

- -

Sharp variables

- -

See Sharp variables in JavaScript for more information.

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 ---- -
{{jsSidebar("Objects")}}
- -

The deprecated escape() function computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use {{jsxref("encodeURI")}} or {{jsxref("encodeURIComponent")}} instead.

- -

Składnia

- -
escape(str)
- -

Parametry

- -
-
str
-
A string to be encoded.
-
- -

Description

- -

The escape function is a property of the global object. Special characters are encoded with the exception of: @*_+-./

- -

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 %uxxxx is used.

- -

Przykłady

- -
escape("abc123");     // "abc123"
-escape("äöü");        // "%E4%F6%FC"
-escape("ć");          // "%u0107"
-
-// znaki specjalne
-escape("@*_+-./");    // "@*_+-./"
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-B.2.1', 'escape')}}{{Spec2('ES5.1')}}Defined in the (informative) Compatibility Annex B
{{SpecName('ES6', '#sec-escape-string', 'escape')}}{{Spec2('ES6')}}Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

See also

- - 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 ---- -
{{JSRef}}
- -

Obiekt Generator jest zwracany przez {{jsxref("Polecenia/function*", "generator function", "", 1)}} i odpowiada obu: iterable protocol i iterator protocol.

- -

Syntax

- -
function* gen() {
-  yield 1;
-  yield 2;
-  yield 3;
-}
-
-var g = gen(); // "Generator { }"
- -

Methods

- -
-
{{jsxref("Generator.prototype.next()")}}
-
Returns a value yielded by the {{jsxref("Operators/yield", "yield")}} expression.
-
{{jsxref("Generator.prototype.return()")}}
-
Returns the given value and finishes the generator.
-
{{jsxref("Generator.prototype.throw()")}}
-
Throws an error to a generator.
-
- -

Example

- -

An infinite iterator

- -
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
-// ...
- -

Legacy generator objects

- -

Firefox (SpiderMonkey) also implements an earlier version of generators in JavaScript 1.7, where the star (*) in the function declaration was not necessary (you just use the yield keyword in the function body). However, legacy generators are deprecated. Do not use them; they are going to be removed ({{bug(1083482)}}).

- -

Legacy generator methods

- -
-
Generator.prototype.next() {{non-standard_inline}}
-
Returns a value yielded by the {{jsxref("Operatory/yield", "yield")}} expression. This corresponds to next() in the ES2015 generator object.
-
Generator.prototype.close() {{non-standard_inline}}
-
Closes the generator, so that when calling next() an {{jsxref("StopIteration")}} error will be thrown. This corresponds to the return() method in the ES2015 generator object.
-
Generator.prototype.send() {{non-standard_inline}}
-
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. send(x) corresponds to next(x) in the ES2015 generator object.
-
Generator.prototype.throw() {{non-standard_inline}}
-
Throws an error to a generator. This corresponds to the throw() method in the ES2015 generator object.
-
- -

Legacy generator example

- -
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)
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES2015', '#sec-generator-objects', 'Generator objects')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}{{Spec2('ESDraft')}} 
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(39.0)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(39.0)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(39.0)}}
-
- -

See also

- -

Legacy generators

- - - -

ES2015 generators

- - 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 ---- -
{{JSRef}} {{deprecated_header}}
- -

Podsumowanie

- -

Powoduje, iż łańcuch będzie migotał tak, jakby był on wewnątrz znacznika {{HTMLElement("blink")}}.

- -
-

Warning: Blinking text is frowned upon by several accessibility standards. The <blink> element itself is non-standard and deprecated!

-
- -

Składnia

- -
str.blink()
- -

Opis

- -

The blink() method embeds a string in a <blink> tag: "<blink>str</blink>".

- -

Przykłady

- -

Przykład: Zastosowanie blink()

- -

Następujący przykład stosuje metodę string do zmiany formatowania łańcucha znaków:

- -
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>
-
- -

Zobacz także

- - 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 ---- -
{{JSRef}}
- -

The static String.fromCodePoint() method returns a string created by using the specified sequence of code points.

- -
{{EmbedInteractiveExample("pages/js/string-fromcodepoint.html","shorter")}}
- - - -

Syntax

- -
String.fromCodePoint(num1[, ...[, numN]])
- -

Parameters

- -
-
num1, ..., numN
-
A sequence of code points.
-
- -

Return value

- -

A string created by using the specified sequence of code points.

- -

Exceptions

- - - -

Description

- -

This method returns a string (and not a {{jsxref("String")}} object).

- -

Because fromCodePoint() is a static method of {{jsxref("String")}}, you must call it as String.fromCodePoint(), rather than as a method of a {{jsxref("String")}} object you created.

- -

Polyfill

- -

The String.fromCodePoint() method has been added to ECMAScript 2015 and may not be supported in all web browsers or environments yet.

- -

Use the code below for a polyfill:

- -
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));
-
- -

Examples

- -

Using fromCodePoint()

- -

Valid input:

- -
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"
-
- -

Invalid input:

- -
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
-
- -

Compared to fromCharCode()

- -

{{jsxref("String.fromCharCode()")}} cannot return supplementary characters (i.e. code points 0x010000 – 0x10FFFF) by specifying their code point. Instead, it requires the UTF-16 surrogate pair in order to return a supplementary character:

- -
String.fromCharCode(0xD83C, 0xDF03); // Code Point U+1F303 "Night with
-String.fromCharCode(55356, 57091);   // Stars" == "\uD83C\uDF03"
-
- -

String.fromCodePoint(), 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):

- -
String.fromCodePoint(0x1F303); // or 127747 in decimal
-
- -

Specifications

- - - - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}
- -

Browser compatibility

- -

{{Compat("javascript.builtins.String.fromCodePoint")}}

- -

See also

- - 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 ---- -
{{JSRef}}
- -

The repeat() method constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.

- -

Składnia

- -
str.repeat(count)
- -

Parametry

- -
-
count
-
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.
-
- -

Zwracana wartość

- -

A new string containing the specified number of copies of the given string.

- -

Exceptions

- - - -

Przykłady

- -
'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)
-
- -

Polyfill

- -

This method has been added to the ECMAScript 6 specification and may not be available in all JavaScript implementations yet. However, you can polyfill String.prototype.repeat() with the following snippet:

- -
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;
-  }
-}
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES6', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}{{Spec2('ESDraft')}} 
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("41")}} {{CompatGeckoDesktop("24")}}{{CompatNo}}{{CompatNo}}{{CompatSafari("9")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatChrome("36")}}{{CompatGeckoMobile("24")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
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 ---- -
{{JSRef("Global_Objects", "TypedArray", "Int8Array,Uint8Array,Uint8ClampedArray,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array")}}
- -

Summary

- -

The Uint16Array 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 0. 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).

- -

Syntax

- -
Uint16Array(length);
-Uint16Array(typedArray);
-Uint16Array(object);
-Uint16Array(buffer [, byteOffset [, length]]);
- -

For more information about the constructor syntax and the parameters, see TypedArray.

- -

Properties

- -
-
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint16Array.BYTES_PER_ELEMENT")}}
-
Returns a number value of the element size. 2 in the case of an Uint16Array.
-
Uint16Array.length
-
Length property whose value is 3.
-
{{jsxref("TypedArray.name", "Uint16Array.name")}}
-
Returns the string value of the constructor name. In the case of the Uint16Array type: "Uint16Array".
-
{{jsxref("TypedArray.prototype", "Uint16Array.prototype")}}
-
Prototype for the TypedArray objects.
-
- -

Methods

- -
-
{{jsxref("TypedArray.from", "Uint16Array.from()")}}
-
Creates a new Uint16Array from an array-like or iterable object. See also {{jsxref("Array.from()")}}.
-
{{jsxref("TypedArray.of", "Uint16Array.of()")}}
-
Creates a new Uint16Array with a variable number of arguments. See also {{jsxref("Array.of()")}}.
-
- -

Uint16Array prototype

- -

All Uint16Array objects inherit from {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

- -

Properties

- -
-
Uint16Array.prototype.constructor
-
Returns the function that created an instance's prototype. This is the Uint16Array constructor by default.
-
{{jsxref("TypedArray.prototype.buffer", "Uint16Array.prototype.buffer")}} {{readonlyInline}}
-
Returns the {{jsxref("ArrayBuffer")}} referenced by the Uint16Array Fixed at construction time and thus read only.
-
{{jsxref("TypedArray.prototype.byteLength", "Uint16Array.prototype.byteLength")}} {{readonlyInline}}
-
Returns the length (in bytes) of the Uint16Array from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus read only.
-
{{jsxref("TypedArray.prototype.byteOffset", "Uint16Array.prototype.byteOffset")}} {{readonlyInline}}
-
Returns the offset (in bytes) of the Uint16Array from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus read only.
-
{{jsxref("TypedArray.prototype.length", "Uint16Array.prototype.length")}} {{readonlyInline}}
-
Returns the number of elements hold in the Uint16Array. Fixed at construction time and thus read only.
-
- -

Methods

- -
-
{{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}
-
Copies a sequence of array elements within the array. See also {{jsxref("Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.entries", "Uint16Array.prototype.entries()")}}
-
Returns a new Array Iterator object that contains the key/value pairs for each index in the array. See also {{jsxref("Array.prototype.entries()")}}.
-
{{jsxref("TypedArray.every", "Uint16Array.prototype.every()")}}
-
Tests whether all elements in the array pass the test provided by a function. See also {{jsxref("Array.prototype.every()")}}.
-
{{jsxref("TypedArray.fill", "Uint16Array.prototype.fill()")}}
-
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()")}}.
-
{{jsxref("TypedArray.filter", "Uint16Array.prototype.filter()")}}
-
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()")}}.
-
{{jsxref("TypedArray.find", "Uint16Array.prototype.find()")}}
-
Returns the found value in the array, if an element in the array satisfies the provided testing function or undefined if not found. See also {{jsxref("Array.prototype.find()")}}.
-
{{jsxref("TypedArray.findIndex", "Uint16Array.prototype.findIndex()")}}
-
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()")}}.
-
{{jsxref("TypedArray.forEach", "Uint16Array.prototype.forEach()")}}
-
Calls a function for each element in the array. See also {{jsxref("Array.prototype.forEach()")}}.
-
{{jsxref("TypedArray.includes", "Uint16Array.prototype.includes()")}} {{experimental_inline}}
-
Determines whether a typed array includes a certain element, returning true or false as appropriate. See also {{jsxref("Array.prototype.includes()")}}.
-
{{jsxref("TypedArray.indexOf", "Uint16Array.prototype.indexOf()")}}
-
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()")}}.
-
{{jsxref("TypedArray.join", "Uint16Array.prototype.join()")}}
-
Joins all elements of an array into a string. See also {{jsxref("Array.prototype.join()")}}.
-
{{jsxref("TypedArray.keys", "Uint16Array.prototype.keys()")}}
-
Returns a new Array Iterator that contains the keys for each index in the array. See also {{jsxref("Array.prototype.keys()")}}.
-
{{jsxref("TypedArray.lastIndexOf", "Uint16Array.prototype.lastIndexOf()")}}
-
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()")}}.
-
{{jsxref("TypedArray.map", "Uint16Array.prototype.map()")}}
-
Creates a new array with the results of calling a provided function on every element in this array. See also {{jsxref("Array.prototype.map()")}}.
-
{{jsxref("TypedArray.move", "Uint16Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
-
Former non-standard version of {{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.reduce", "Uint16Array.prototype.reduce()")}}
-
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()")}}.
-
{{jsxref("TypedArray.reduceRight", "Uint16Array.prototype.reduceRight()")}}
-
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()")}}.
-
{{jsxref("TypedArray.reverse", "Uint16Array.prototype.reverse()")}}
-
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()")}}.
-
{{jsxref("TypedArray.set", "Uint16Array.prototype.set()")}}
-
Stores multiple values in the typed array, reading input values from a specified array.
-
{{jsxref("TypedArray.slice", "Uint16Array.prototype.slice()")}}
-
Extracts a section of an array and returns a new array. See also {{jsxref("Array.prototype.slice()")}}.
-
{{jsxref("TypedArray.some", "Uint16Array.prototype.some()")}}
-
Returns true if at least one element in this array satisfies the provided testing function. See also {{jsxref("Array.prototype.some()")}}.
-
{{jsxref("TypedArray.sort", "Uint16Array.prototype.sort()")}}
-
Sorts the elements of an array in place and returns the array. See also {{jsxref("Array.prototype.sort()")}}.
-
{{jsxref("TypedArray.subarray", "Uint16Array.prototype.subarray()")}}
-
Returns a new Uint16Array from the given start and end element index.
-
{{jsxref("TypedArray.values", "Uint16Array.prototype.values()")}}
-
Returns a new Array Iterator object that contains the values for each index in the array. See also {{jsxref("Array.prototype.values()")}}.
-
{{jsxref("TypedArray.toLocaleString", "Uint16Array.prototype.toLocaleString()")}}
-
Returns a localized string representing the array and its elements. See also {{jsxref("Array.prototype.toLocaleString()")}}.
-
{{jsxref("TypedArray.toString", "Uint16Array.prototype.toString()")}}
-
Returns a string representing the array and its elements. See also {{jsxref("Array.prototype.toString()")}}.
-
{{jsxref("TypedArray.@@iterator", "Uint16Array.prototype[@@iterator]()")}}
-
Returns a new Array Iterator object that contains the values for each index in the array.
-
- -

Examples

- -
// 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);
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
Typed Array SpecificationObsoleteSuperseded by ECMAScript 6.
{{SpecName('ES6', '#table-45', 'TypedArray constructors')}}{{Spec2('ES6')}}Initial definition in an ECMA standard.
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support7.0{{ CompatGeckoDesktop("2") }}1011.65.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.0{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("2") }}1011.64.2
-
- -

See also

- - 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 ---- -
{{jsSidebar("Operators")}}
- -

Operator instanceof sprawdza czy właściwość konstruktora prototype pojawia się gdziekolwiek w łańcuchu prototypowym obiektu.

- -

{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}

- - - -

Składnia

- -
object instanceof constructor
- -
-
-

Parametry

- object
-
Obiekt do testowania.
-
- -
-
constructor
-
Funkcja przeciwko której testujemy.
-
- -

Opis

- -

Operator instanceof sprawdza obecność constructor.prototype w łańcuchu prototypowym obiektu object

- -
// 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
-
- -

Note that the value of an instanceof test can change based on changes to the prototype property of constructors, and it can also be changed by changing an object prototype using Object.setPrototypeOf. It is also possible using the non-standard __proto__ pseudo-property.

- -

instanceof and multiple context (e.g. frames or windows)

- -

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, [] instanceof window.frames[0].Array will return false, because Array.prototype !== window.frames[0].Array and arrays inherit from the former.

- -

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 Array.isArray(myObj)

- -

For example checking if a Nodes is a SVGElement in a different context you can use myNode instanceof myNode.ownerDocument.defaultView.SVGElement

- -
Note for Mozilla developers:
-In code using XPCOM instanceof has special effect: obj instanceof xpcomInterface (e.g. Components.interfaces.nsIFile) calls obj.QueryInterface(xpcomInterface) and returns true if QueryInterface succeeded. A side effect of such call is that you can use xpcomInterface's properties on obj after a successful instanceof test. Unlike standard JavaScript globals, the test obj instanceof xpcomInterface works as expected even if obj is from a different scope.
- -

Examples

- -

Demonstrating that String and Date are of type Object and exceptional cases

- -

The following code uses instanceof to demonstrate that String and Date objects are also of type Object (they are derived from Object).

- -

However, objects created with the object literal notation are an exception here: Although the prototype is undefined, instanceof Object returns true.

- -
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
-
- -

Demonstrating that mycar is of type Car and type Object

- -

The following code creates an object type Car and an instance of that object type, mycar. The instanceof operator demonstrates that the mycar object is of type Car and of type Object.

- -
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
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-11.8.6', 'The instanceof operator')}}{{Spec2('ES3')}}Initial definition. Implemented in JavaScript 1.4.
- -

Browser compatibility

- - - -

{{Compat("javascript.operators.instanceof")}}

- -

See also

- - 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 ---- -
-
{{jsSidebar("Operators")}}
-
- -

Summary

- -

W JavaScript słówko kluczowe this zachowuje się nieco inaczej w porównaniu do innych języków programowania. Istnieje również kilka różnic między trybem strict mode oraz non-strict mode.

- -

W większości przypadków wartość this 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ę bind dzięki której możemy przypisać wartość this w funkcji, niezależnie od tego jak została ona wywołana.

- -

Syntax

- -
this
- -

Global context

- -

In the global execution context (outside of any function), this refers to the global object, whether in strict mode or not.

- -
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
-
- -

Function context

- -

Inside a function, the value of this depends on how the function is called.

- -

Simple call

- -
function f1(){
-  return this;
-}
-
-f1() === window; // global object
-
- -

In this case, the value of this is not set by the call. Since the code is not in strict mode, the value of this must always be an object so it defaults to the global object.

- -
function f2(){
-  "use strict"; // see strict mode
-  return this;
-}
-
-f2() === undefined;
-
- -

In strict mode, the value of this 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 null or 42 or "I am not this".

- -
Note: In the second example, this should be undefined, because f2 was called without providing any base (e.g. window.f2()). This feature wasn't implemented in some browsers when they first started to support strict mode. As a result, they incorrectly returned the window object.
- -

As an object method

- -

When a function is called as a method of an object, its this is set to the object the method is called on.

- -

In the following example, when o.f() is invoked, inside the function this is bound to the o object.

- -
var o = {
-  prop: 37,
-  f: function() {
-    return this.prop;
-  }
-};
-
-console.log(o.f()); // logs 37
-
- -

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 f member during the definition of o. However, we could have just as easily defined the function first and later attached it to o.f. Doing so results in the same behavior:

- -
var o = {prop: 37};
-
-function independent() {
-  return this.prop;
-}
-
-o.f = independent;
-
-console.log(o.f()); // logs 37
-
- -

This demonstrates that it matters only that the function was invoked from the f member of o.

- -

Similarly, the this 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 g of the object o.b. This time during execution, this inside the function will refer to o.b. The fact that the object is itself a member of o has no consequence; the most immediate reference is all that matters.

- -
o.b = {g: independent, prop: 42};
-console.log(o.b.g()); // logs 42
-
- -

this on the object's prototype chain

- -

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, this refers to the object the method was called on, as if the method was on the object.

- -
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
-
- -

In this example, the object assigned to the variable p doesn't have its own f property, it inherits it from its prototype. But it doesn't matter that the lookup for f eventually finds a member with that name on o; the lookup began as a reference to p.f, so this inside the function takes the value of the object referred to as p. That is, since f is called as a method of p, its this refers to p. This is an interesting feature of JavaScript's prototype inheritance.

- -

this with a getter or setter

- -

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 this bound to the object from which the property is being set or gotten.

- -
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
-
- -

As a constructor

- -

When a function is used as a constructor (with the new keyword), its this is bound to new object being constructed.

- -

Note: while the default for a constructor is to return the object referenced by this, it can instead return some other object (if the return value isn't an object, then the this object is returned).

- -
/*
- * 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
-
- -

In the last example (C2), because an object was returned during construction, the new object that this was bound to simply gets discarded. (This essentially makes the statement "this.a = 37;" dead code. It's not exactly dead, because it gets executed, but it can be eliminated with no outside effects.)

- -

call and apply

- -

Where a function uses the this keyword in its body, its value can be bound to a particular object in the call using the call or apply methods that all functions inherit from Function.prototype.

- -
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
-
- -

Note that with call and apply, if the value passed as this is not an object, an attempt will be made to convert it to an object using the internal ToObject operation. So if the value passed is a primitive like 7 or 'foo', it will be converted to an Object using the related constructor, so the primitive number 7 is converted to an object as if by new Number(7) and the string 'foo' to an object as if by new String('foo'), e.g.

- -
function bar() {
-  console.log(Object.prototype.toString.call(this));
-}
-
-bar.call(7); // [object Number]
-
- -

The bind method

- -

ECMAScript 5 introduced Function.prototype.bind. Calling f.bind(someObject) creates a new function with the same body and scope as f, but where this occurs in the original function, in the new function it is permanently bound to the first argument of bind, regardless of how the function is being used.

- -
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
-
- -

As a DOM event handler

- -

When a function is used as an event handler, its this is set to the element the event fired from (some browsers do not follow this convention for listeners added dynamically with methods other than addEventListener).

- -
// 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);
-}
- -

In an in–line event handler

- -

When code is called from an in–line handler, its this is set to the DOM element on which the listener is placed:

- -
<button onclick="alert(this.tagName.toLowerCase());">
-  Show this
-</button>
-
- -

The above alert shows button. Note however that only the outer code has its this set this way:

- -
<button onclick="alert((function(){return this}()));">
-  Show inner this
-</button>
-
- -

In this case, the inner function's this isn't set so it returns the global/window object (i.e. the default object in non–strict mode where this isn't set by the call).

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
ECMAScript 1st Edition.StandardInitial definition. Implemented in JavaScript 1.0
{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-this-keyword', 'The this keyword')}}{{Spec2('ES6')}}
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

See also

- - 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 ---- -
{{jsSidebar("Statements")}}
- -

The throw statement throws a user-defined exception. Execution of the current function will stop (the statements after throw won't be executed), and control will be passed to the first catch block in the call stack. If no catch block exists among caller functions, the program will terminate.

- -
{{EmbedInteractiveExample("pages/js/statement-throw.html")}}
- - -

Syntax

- -
throw expression;
- -
-
expression
-
The expression to throw.
-
- -

Description

- -

Use the throw statement to throw an exception. When you throw an exception, expression specifies the value of the exception. Each of the following throws an exception:

- -
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
- -

Also note that the throw statement is affected by automatic semicolon insertion (ASI) as no line terminator between the throw keyword and the expression is allowed.

- -

Examples

- -

Throw an object

- -

You can specify an object when you throw an exception. You can then reference the object's properties in the catch block. The following example creates an object of type UserException and uses it in a throw statement.

- -
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
-}
-
- -

Another example of throwing an object

- -

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 ZipCodeFormatException.

- -
/*
- * 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
-
- -

Rethrow an exception

- -

You can use throw 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.

- -
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;
-   }
-}
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}Initial definition. Implemented in JavaScript 1.4
{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}{{Spec2('ESDraft')}}
- -

Browser compatibility

- - - -

{{Compat("javascript.statements.throw")}}

- -

See also

- - 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 ---- -
-
{{JsSidebar("Advanced")}}
-
- -

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 string i używanie metody charCodeAt(), aby przeczytać bajty z buforu danych.

- -

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).

- -

Tablice zawierające typy JavaScript zapewniają mechanizm dostępu do danych binarnych dużo bardziej wydajnie.

- - - - - - - - -
-

Dokumentacja

- -
-
ArrayBuffer
-
The ArrayBuffer 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 ArrayBuffer; instead, you create an ArrayBufferView object which represents the buffer in a specific format, and use that to read and write the contents of the buffer.
-
ArrayBufferView
-
The ArrayBufferView type describes a particular view on the contents of an ArrayBuffer'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
-
DataView
-
-

The DataView view provides a low-level interface for reading data from and writing it to an ArrayBuffer.

-
-
StringView Non native
-
In this article is published a library of ours whose aims are: -
    -
  • creating a C-like interface for strings (i.e. array of characters codes — an ArrayBufferView in JavaScript) based upon the JavaScript ArrayBuffer interface,
    • -
  • creating an highly scalable library, that anyone can extend by adding methods to the object StringView.prototype,
    • -
  • creating a collection of methods for such string-like objects (since now: stringViews) which work strictly on arrays of numbers rather than on creating new immutable JavaScript strings,
    • -
  • working with other Unicode encodings different from default JavaScript's UTF-16 {{domxref("DOMString")}}s,
    • -
-
-
Getting ArrayBuffers or typed arrays from Base64-encoded strings
-
Code snippets to get ArrayBuffers or typed arrays from Base64-encoded strings.
-
FileReader.prototype.readAsArrayBuffer()
-
The FileReader.prototype.readAsArrayBuffer() method starts reading the contents of the specified Blob or File.
-
XMLHttpRequest.prototype.send()
-
XMLHttpRequest instances' send() method now supports typed arrays and ArrayBuffers as argument.
-
- - 		-

Społeczność

- -
    -
  • Zobacz forum Mozilla... {{ DiscussionList("dev-web-development", "mozilla.dev.web.development") }}
    • -
- -

Narzędzia

- - - - - - -
- -

Bufory i widoki: struktura tablic reprezentujących typy

- -

To achieve maximum flexibility and efficiency, JavaScript typed arrays split the implementation into a buffer and a view. A buffer (implemented by the ArrayBuffer 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 ArrayBufferView class and its subclasses.

- -

Podklasy tablic reprezentujących typy

- -

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TypRozmiarOpisOdpowiednik C
Int8Array18-bitowa liczba całkowita ze znakiem w zapisie dopełnienia do dwóchsigned char
Uint8Array18-bitowa liczba całkowita bez znakuunsigned char
Uint8ClampedArray18-bitowa liczba całkowita bez znakuunsigned char
Int16Array216-bitowa liczba całkowita ze znakiem w zapisie dopełnienia do dwóchshort
Uint16Array216-bitowa liczba całkowita bez znakuunsigned short
Int32Array432-bitowa liczba całkowita ze znakiem w zapisie dopełnienia do dwóchint
Uint32Array432-bitowa liczba całkowita bez znakuunsigned int
Float32Array432-bitowa liczba zmiennoprzecinkowa IEEEfloat
Float64Array864-bitowa liczba zmiennoprzecinkowa IEEEdouble
- -

Superklasy tablic reprezentujących typy

- - - - - - - - - - - - - - - - -
TypOpis
DataViewThe DataView view provides a low-level interface for reading data from and writing it to an ArrayBuffer.
StringView Non nativeThe StringView view provides a C-like interface for strings (i.e. array of characters codes — an ArrayBufferView in JavaScript) based upon the JavaScript ArrayBuffer interface,
- -

Używanie widoków z buforami

- -

Stwórzmy 16-bajtowy bufor:

- -
var buffer = new ArrayBuffer(16);
-
- -

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:

- -
if (buffer.byteLength == 16) {
-  alert("Yes, it's 16 bytes.");
-} else {
-  alert("Oh no, it's the wrong size!");
-}
-
- -

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:

- -
var int32View = new Int32Array(buffer);
-
- -

Now we can access the fields in the array just like a normal array:

- -
for (var i=0; i<int32View.length; i++) {
-  int32View[i] = i*2;
-}
-
- -

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.

- -

Wiele widoków tych samych danych

- -

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:

- -
var int16View = new Int16Array(buffer);
-
-for (var i=0; i<int16View.length; i++) {
-  console.log("Entry " + i + ": " + int16View[i]);
-}
-
- -

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.

- -

You can go a step farther, though. Consider this:

- -
int16View[0] = 32;
-console.log("Entry 0 in the 32-bit array is now " + int32View[0]);
-
- -

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 view types.

- -

Praca ze złożonymi strukturami danych

- -

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 WebGL, data files, or C structures you need to use while using js-ctypes.

- -

Rozważ tą strukturę C:

- -
struct someStruct {
-  unsigned long id;
-  char username[16];
-  float amountDue;
-};
- -

Możesz uzyskać dostęp do bufora zawierającego dane w tych formacie w ten sposób:

- -
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);
- -

Potem możesz uzyskać dostęp, na przykład, do kwoty należnej używając amountDueView[0].

- -
Note: The data structure alignment in a C structure is platform-dependent. Take precautions and considerations for these padding differences.
- -

Konwersja do zwykłych tablic

- -

After processing a typed array, it is sometimes useful to convert it back to a normal array in order to benefit from the Array prototype. Following is a way to do that.

- -
var typedArray = new Uint8Array( [ 1, 2, 3, 4 ] ),
-    normalArray = Array.apply( [], typedArray );
-normalArray.length === 4;
-normalArray.constructor === Array;
-
- -

Kompatybilność

- -

Typed arrays are available in WebKit as well. Chrome 7 includes support for ArrayBuffer, Float32Array, Int16Array, and Uint8Array. Chrome 9 and Firefox 15 add support for DataView objects. Internet Explorer 10 supports all types except Uint8ClampedArray and ArrayBuffer.prototype.slice.

- -

Specyfikacja

- - - -

Zobacz także

- - - -
 
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 ---- -

{{ draft() }}

- -

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.

- -
Note: This article is a work in progress, and is neither complete nor does following its suggestions guarantee your site will be fully secure.
- -

User information security

- -
-
How to turn off form autocompletion
-
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.
-
Privacy and the :visited selector
-
This article discusses changes made to the getComputedStyle() method that eliminates the ability for malicious sites to figure out the user's browsing history.
-
Hash passwords using a secure algorithm (OWASP)
-
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.
-
- -

Content security

- -
-
Properly configuring server MIME types
-
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.
-
HTTP Strict Transport Security
-
The Strict-Transport-Security: HTTP header lets a website specify that it may only be accessed using HTTPS.
-
HTTP access control
-
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.
-
Content Security Policy
-
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 seventh most common Web app vulnerability in 2017.
-
The X-Frame-Options response header
-
-

The X-Frame-Options: HTTP 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.

-
-
Securing Your Site using Htaccess
-
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.
-
- -

See also

- - - -
{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}
-- cgit v1.2.3-54-g00ecf