diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2021-07-15 13:01:50 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-07-15 13:01:50 -0400 |
| commit | 037a4118c4324d39fdef8bd23f9dd21b02f50946 (patch) | |
| tree | 22dac72fd38b56df6f2caf0fb7f21cb187179e76 /files/pl | |
| parent | 335d06b805fab26d8d4b3e1378e7722c12f715fe (diff) | |
| download | translated-content-037a4118c4324d39fdef8bd23f9dd21b02f50946.tar.gz translated-content-037a4118c4324d39fdef8bd23f9dd21b02f50946.tar.bz2 translated-content-037a4118c4324d39fdef8bd23f9dd21b02f50946.zip | |
delete pages that were never translated from en-US (pl, part 1) (#1549)
Diffstat (limited to 'files/pl')
61 files changed, 0 insertions, 12604 deletions
diff --git a/files/pl/_redirects.txt b/files/pl/_redirects.txt index ef4b558231..9040e696b0 100644 --- a/files/pl/_redirects.txt +++ b/files/pl/_redirects.txt @@ -15,7 +15,6 @@ /pl/docs/Bugzilla_(link) https://bugzilla.mozilla.org/enter_bug.cgi?format=guided /pl/docs/CSS /pl/docs/Web/CSS /pl/docs/CSS/-moz-appearance /pl/docs/Web/CSS/appearance -/pl/docs/CSS/-moz-background-inline-policy /pl/docs/Web/CSS/box-decoration-break /pl/docs/CSS/-moz-background-origin /pl/docs/Web/CSS/background-origin /pl/docs/CSS/-moz-binding /pl/docs/Web/CSS/-moz-binding /pl/docs/CSS/-moz-border-bottom-colors /pl/docs/Web/CSS/-moz-border-bottom-colors @@ -152,7 +151,6 @@ /pl/docs/CSS/word-spacing /pl/docs/Web/CSS/word-spacing /pl/docs/CSS/z-index /pl/docs/Web/CSS/z-index /pl/docs/CSS:-moz-appearance /pl/docs/Web/CSS/appearance -/pl/docs/CSS:-moz-background-inline-policy /pl/docs/Web/CSS/box-decoration-break /pl/docs/CSS:-moz-background-origin /pl/docs/Web/CSS/background-origin /pl/docs/CSS:-moz-binding /pl/docs/Web/CSS/-moz-binding /pl/docs/CSS:-moz-border-bottom-colors /pl/docs/Web/CSS/-moz-border-bottom-colors @@ -392,10 +390,8 @@ /pl/docs/DOM/element.namespaceURI /pl/docs/Web/API/Element/namespaceURI /pl/docs/DOM/element.nextSibling /pl/docs/Web/API/Node/nextSibling /pl/docs/DOM/element.nodeName /pl/docs/Web/API/Node/nodeName -/pl/docs/DOM/element.nodeType /pl/docs/Web/API/Node/nodeType /pl/docs/DOM/element.nodeValue /pl/docs/Web/API/Node/nodeValue /pl/docs/DOM/element.normalize /pl/docs/Web/API/Node/normalize -/pl/docs/DOM/element.offsetHeight /pl/docs/Web/API/HTMLElement/offsetHeight /pl/docs/DOM/element.offsetLeft /pl/docs/Web/API/HTMLElement/offsetLeft /pl/docs/DOM/element.offsetParent /pl/docs/Web/API/HTMLElement/offsetParent /pl/docs/DOM/element.offsetWidth /pl/docs/Web/API/HTMLElement/offsetWidth @@ -485,7 +481,6 @@ /pl/docs/DOM/window.clearInterval /pl/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval /pl/docs/DOM/window.clearTimeout /pl/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /pl/docs/DOM/window.closed /pl/docs/Web/API/Window/closed -/pl/docs/DOM/window.content /pl/docs/Web/API/Window/content /pl/docs/DOM/window.controllers /pl/docs/Web/API/Window/controllers /pl/docs/DOM/window.crypto /pl/docs/Web/API/Window/crypto /pl/docs/DOM/window.defaultStatus /pl/docs/Web/API/Window/defaultStatus @@ -515,7 +510,6 @@ /pl/docs/DOM/window.navigator.registerProtocolHandler /pl/docs/Web/API/Navigator/registerProtocolHandler /pl/docs/DOM/window.onload /pl/docs/Web/API/GlobalEventHandlers/onload /pl/docs/DOM/window.open /pl/docs/Web/API/Window/open -/pl/docs/DOM/window.openDialog /pl/docs/Web/API/Window/openDialog /pl/docs/DOM/window.opener /pl/docs/Web/API/Window/opener /pl/docs/DOM/window.prompt /pl/docs/Web/API/Window/prompt /pl/docs/DOM/window.resizeBy /pl/docs/Web/API/Window/resizeBy @@ -631,10 +625,8 @@ /pl/docs/DOM:element.namespaceURI /pl/docs/Web/API/Element/namespaceURI /pl/docs/DOM:element.nextSibling /pl/docs/Web/API/Node/nextSibling /pl/docs/DOM:element.nodeName /pl/docs/Web/API/Node/nodeName -/pl/docs/DOM:element.nodeType /pl/docs/Web/API/Node/nodeType /pl/docs/DOM:element.nodeValue /pl/docs/Web/API/Node/nodeValue /pl/docs/DOM:element.normalize /pl/docs/Web/API/Node/normalize -/pl/docs/DOM:element.offsetHeight /pl/docs/Web/API/HTMLElement/offsetHeight /pl/docs/DOM:element.offsetLeft /pl/docs/Web/API/HTMLElement/offsetLeft /pl/docs/DOM:element.offsetParent /pl/docs/Web/API/HTMLElement/offsetParent /pl/docs/DOM:element.offsetWidth /pl/docs/Web/API/HTMLElement/offsetWidth @@ -722,7 +714,6 @@ /pl/docs/DOM:window /pl/docs/Web/API/Window /pl/docs/DOM:window.alert /pl/docs/Web/API/Window/alert /pl/docs/DOM:window.closed /pl/docs/Web/API/Window/closed -/pl/docs/DOM:window.content /pl/docs/Web/API/Window/content /pl/docs/DOM:window.controllers /pl/docs/Web/API/Window/controllers /pl/docs/DOM:window.crypto /pl/docs/Web/API/Window/crypto /pl/docs/DOM:window.defaultStatus /pl/docs/Web/API/Window/defaultStatus @@ -752,7 +743,6 @@ /pl/docs/DOM:window.navigator.registerProtocolHandler /pl/docs/Web/API/Navigator/registerProtocolHandler /pl/docs/DOM:window.onload /pl/docs/Web/API/GlobalEventHandlers/onload /pl/docs/DOM:window.open /pl/docs/Web/API/Window/open -/pl/docs/DOM:window.openDialog /pl/docs/Web/API/Window/openDialog /pl/docs/DOM:window.opener /pl/docs/Web/API/Window/opener /pl/docs/DOM:window.prompt /pl/docs/Web/API/Window/prompt /pl/docs/DOM:window.resizeBy /pl/docs/Web/API/Window/resizeBy @@ -972,7 +962,6 @@ /pl/docs/Dokumentacja_języka_JavaScript_1.5/Obiekty/String /pl/docs/Web/JavaScript/Reference/Global_Objects/String /pl/docs/Dokumentacja_języka_JavaScript_1.5/Obiekty/String/anchor /pl/docs/Web/JavaScript/Reference/Global_Objects/String/anchor /pl/docs/Dokumentacja_języka_JavaScript_1.5/Obiekty/String/big /pl/docs/Web/JavaScript/Reference/Global_Objects/String/big -/pl/docs/Dokumentacja_języka_JavaScript_1.5/Obiekty/String/blink /pl/docs/Web/JavaScript/Reference/Global_Objects/String/blink /pl/docs/Dokumentacja_języka_JavaScript_1.5/Obiekty/String/bold /pl/docs/Web/JavaScript/Reference/Global_Objects/String/bold /pl/docs/Dokumentacja_języka_JavaScript_1.5/Obiekty/String/charAt /pl/docs/Web/JavaScript/Reference/Global_Objects/String/charAt /pl/docs/Dokumentacja_języka_JavaScript_1.5/Obiekty/String/charCodeAt /pl/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt @@ -1005,7 +994,6 @@ /pl/docs/Dokumentacja_języka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_delete /pl/docs/Web/JavaScript/Reference/Operators/delete /pl/docs/Dokumentacja_języka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_function /pl/docs/Web/JavaScript/Reference/Operators/function /pl/docs/Dokumentacja_języka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_in /pl/docs/Web/JavaScript/Reference/Operators/in -/pl/docs/Dokumentacja_języka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_instanceof /pl/docs/Web/JavaScript/Reference/Operators/instanceof /pl/docs/Dokumentacja_języka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_new /pl/docs/Web/JavaScript/Reference/Operators/new /pl/docs/Dokumentacja_języka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_przecinkowy /pl/docs/Web/JavaScript/Reference/Operators/Comma_Operator /pl/docs/Dokumentacja_języka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_typeof /pl/docs/Web/JavaScript/Reference/Operators/typeof @@ -1025,10 +1013,8 @@ /pl/docs/Dokumentacja_języka_JavaScript_1.5/Polecenia/import /pl/docs/Web/JavaScript/Reference/Statements/import /pl/docs/Dokumentacja_języka_JavaScript_1.5/Polecenia/return /pl/docs/Web/JavaScript/Reference/Statements/return /pl/docs/Dokumentacja_języka_JavaScript_1.5/Polecenia/switch /pl/docs/Web/JavaScript/Reference/Statements/switch -/pl/docs/Dokumentacja_języka_JavaScript_1.5/Polecenia/throw /pl/docs/Web/JavaScript/Reference/Statements/throw /pl/docs/Dokumentacja_języka_JavaScript_1.5/Polecenia/var /pl/docs/Web/JavaScript/Reference/Statements/var /pl/docs/Dokumentacja_języka_JavaScript_1.5/Polecenia/while /pl/docs/Web/JavaScript/Reference/Statements/while -/pl/docs/Dokumentacja_języka_JavaScript_1.5/Przestarzałe_własności_i_metody /pl/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features /pl/docs/Dokumentacja_języka_JavaScript_1.5/Wyrażenia /pl/docs/Web/JavaScript/Reference/Statements /pl/docs/Dokumentacja_języka_JavaScript_1.5/Wyrażenia/const /pl/docs/Web/JavaScript/Reference/Statements/const /pl/docs/Dokumentacja_języka_JavaScript_1.5/Własności /pl/docs/Web/JavaScript/Reference/Global_Objects @@ -1212,7 +1198,6 @@ /pl/docs/Dokumentacja_języka_JavaScript_1.5:Obiekty:String /pl/docs/Web/JavaScript/Reference/Global_Objects/String /pl/docs/Dokumentacja_języka_JavaScript_1.5:Obiekty:String:anchor /pl/docs/Web/JavaScript/Reference/Global_Objects/String/anchor /pl/docs/Dokumentacja_języka_JavaScript_1.5:Obiekty:String:big /pl/docs/Web/JavaScript/Reference/Global_Objects/String/big -/pl/docs/Dokumentacja_języka_JavaScript_1.5:Obiekty:String:blink /pl/docs/Web/JavaScript/Reference/Global_Objects/String/blink /pl/docs/Dokumentacja_języka_JavaScript_1.5:Obiekty:String:bold /pl/docs/Web/JavaScript/Reference/Global_Objects/String/bold /pl/docs/Dokumentacja_języka_JavaScript_1.5:Obiekty:String:charAt /pl/docs/Web/JavaScript/Reference/Global_Objects/String/charAt /pl/docs/Dokumentacja_języka_JavaScript_1.5:Obiekty:String:charCodeAt /pl/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt @@ -1245,7 +1230,6 @@ /pl/docs/Dokumentacja_języka_JavaScript_1.5:Operatory:Operatory_specjalne:Operator_delete /pl/docs/Web/JavaScript/Reference/Operators/delete /pl/docs/Dokumentacja_języka_JavaScript_1.5:Operatory:Operatory_specjalne:Operator_function /pl/docs/Web/JavaScript/Reference/Operators/function /pl/docs/Dokumentacja_języka_JavaScript_1.5:Operatory:Operatory_specjalne:Operator_in /pl/docs/Web/JavaScript/Reference/Operators/in -/pl/docs/Dokumentacja_języka_JavaScript_1.5:Operatory:Operatory_specjalne:Operator_instanceof /pl/docs/Web/JavaScript/Reference/Operators/instanceof /pl/docs/Dokumentacja_języka_JavaScript_1.5:Operatory:Operatory_specjalne:Operator_new /pl/docs/Web/JavaScript/Reference/Operators/new /pl/docs/Dokumentacja_języka_JavaScript_1.5:Operatory:Operatory_specjalne:Operator_przecinkowy /pl/docs/Web/JavaScript/Reference/Operators/Comma_Operator /pl/docs/Dokumentacja_języka_JavaScript_1.5:Operatory:Operatory_specjalne:Operator_typeof /pl/docs/Web/JavaScript/Reference/Operators/typeof @@ -1265,10 +1249,8 @@ /pl/docs/Dokumentacja_języka_JavaScript_1.5:Polecenia:import /pl/docs/Web/JavaScript/Reference/Statements/import /pl/docs/Dokumentacja_języka_JavaScript_1.5:Polecenia:return /pl/docs/Web/JavaScript/Reference/Statements/return /pl/docs/Dokumentacja_języka_JavaScript_1.5:Polecenia:switch /pl/docs/Web/JavaScript/Reference/Statements/switch -/pl/docs/Dokumentacja_języka_JavaScript_1.5:Polecenia:throw /pl/docs/Web/JavaScript/Reference/Statements/throw /pl/docs/Dokumentacja_języka_JavaScript_1.5:Polecenia:var /pl/docs/Web/JavaScript/Reference/Statements/var /pl/docs/Dokumentacja_języka_JavaScript_1.5:Polecenia:while /pl/docs/Web/JavaScript/Reference/Statements/while -/pl/docs/Dokumentacja_języka_JavaScript_1.5:Przestarzałe_własności_i_metody /pl/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features /pl/docs/Dokumentacja_języka_JavaScript_1.5:Wyrażenia:const /pl/docs/Web/JavaScript/Reference/Statements/const /pl/docs/Dokumentacja_języka_JavaScript_1.5:Własności /pl/docs/Web/JavaScript/Reference/Global_Objects /pl/docs/Dokumentacja_języka_JavaScript_1.5:Własności:Infinity /pl/docs/Web/JavaScript/Reference/Global_Objects/Infinity @@ -1299,7 +1281,6 @@ /pl/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Stworz_element_Canvas_i_rysuj_na_nim /pl/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it /pl/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/odbijanie_od_scian /pl/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls /pl/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/posusz_pilka /pl/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball -/pl/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/wykrywanie_kolizji /pl/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection /pl/docs/Glossary/AOM /pl/docs/Glossary/Accessibility_tree /pl/docs/Glossary/Abstrakcja /pl/docs/Glossary/Abstraction /pl/docs/Glossary/Hipertekst /pl/docs/Glossary/Hypertext @@ -1452,7 +1433,6 @@ /pl/docs/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Praca_z_wyrażeniami_regularnymi/Globalne_wyszukiwanie,_wielkość_znaków,_wieloliniowe_wejście /pl/docs/Web/JavaScript/Guide/Regular_Expressions /pl/docs/JavaScript/New_in_JavaScript /pl/docs/Web/JavaScript/New_in_JavaScript /pl/docs/JavaScript/Reference/Global_Objects/Function/toString /pl/docs/Web/JavaScript/Reference/Global_Objects/Function/toString -/pl/docs/JavaScript/Typed_arrays /pl/docs/Web/JavaScript/Typed_arrays /pl/docs/Kolumny_CSS3 /pl/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts /pl/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps /pl/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works @@ -1464,7 +1444,6 @@ /pl/docs/Learn/JavaScript/Pierwsze_kroki /pl/docs/Learn/JavaScript/First_steps /pl/docs/Learn/JavaScript/Pierwsze_kroki/A_first_splash /pl/docs/Learn/JavaScript/First_steps/A_first_splash /pl/docs/Learn/JavaScript/Pierwsze_kroki/Co_poszlo_nie_tak /pl/docs/Learn/JavaScript/First_steps/What_went_wrong -/pl/docs/Learn/JavaScript/Pierwsze_kroki/Math /pl/docs/Learn/JavaScript/First_steps/Math /pl/docs/Learn/JavaScript/Pierwsze_kroki/What_is_JavaScript /pl/docs/Learn/JavaScript/First_steps/What_is_JavaScript /pl/docs/Learn/JavaScript/Pierwsze_kroki/Zmienne /pl/docs/Learn/JavaScript/First_steps/Variables /pl/docs/Learn/Server-side/Express_Nodejs/Szkolenie_aplikacja_biblioteka /pl/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website @@ -1472,18 +1451,14 @@ /pl/docs/Lokalizacja /pl/docs/Glossary/Localization /pl/docs/Lokalizacja_opisu_rozszerzeń /pl/docs/Lokalizacja_opisu_rozszerzenia /pl/docs/MDN/Contribute/Content /pl/docs/MDN/Guidelines -/pl/docs/MDN/Contribute/Content/Style_guide /pl/docs/MDN/Guidelines/Writing_style_guide /pl/docs/MDN/Feedback /pl/docs/MDN/Contribute/Feedback -/pl/docs/MDN/Guidelines/Style_guide /pl/docs/MDN/Guidelines/Writing_style_guide /pl/docs/MDN/Kuma /pl/docs/MDN/Yari -/pl/docs/MDN/User_guide /pl/docs/MDN/Tools /pl/docs/MDN/rozpocznij_mdn /pl/docs/MDN/Contribute/Getting_started /pl/docs/Manifest_Instalacji /pl/docs/Manifesty_Instalacji /pl/docs/Manifesty_Chrome /pl/docs/Mozilla/Rejestracja_Chrome /pl/docs/MathML /pl/docs/Web/MathML /pl/docs/Mozilla/Add-ons/WebExtensions/Twój_pierwszy_WebExtension /pl/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension /pl/docs/Narzędzia /pl/docs/Tools -/pl/docs/Narzędzia/Browser_Toolbox /pl/docs/Tools/Browser_Toolbox /pl/docs/Narzędzia/Debugger /pl/docs/Tools/Debugger /pl/docs/Narzędzia/Debugger/How_to /pl/docs/Tools/Debugger/How_to /pl/docs/Narzędzia/Page_Inspector /pl/docs/Tools/Page_Inspector @@ -1491,10 +1466,6 @@ /pl/docs/Narzędzia/Page_Inspector/How_to/Open_the_Inspector /pl/docs/Tools/Page_Inspector/How_to/Open_the_Inspector /pl/docs/Narzędzia/Page_Inspector/Przewodnik_przez_UI /pl/docs/Tools/Page_Inspector/UI_Tour /pl/docs/Narzędzia/Performance /pl/docs/Tools/Performance -/pl/docs/Narzędzia/Performance/Flame_Chart /pl/docs/Tools/Performance/Flame_Chart -/pl/docs/Narzędzia/Storage_Inspector /pl/docs/Tools/Storage_Inspector -/pl/docs/Narzędzia/Tools_Toolbox /pl/docs/Tools/Tools_Toolbox -/pl/docs/Narzędzia/View_source /pl/docs/Tools/View_source /pl/docs/Narzędzia/Walidatory /pl/docs/Tools/Validators /pl/docs/Narzędzia/about:debugging /pl/docs/Tools/about:debugging /pl/docs/Narzędzia:Walidatory /pl/docs/Tools/Validators @@ -1579,10 +1550,8 @@ /pl/docs/Web/API/Element/length /pl/docs/Web/API/NodeList/length /pl/docs/Web/API/Element/nextSibling /pl/docs/Web/API/Node/nextSibling /pl/docs/Web/API/Element/nodeName /pl/docs/Web/API/Node/nodeName -/pl/docs/Web/API/Element/nodeType /pl/docs/Web/API/Node/nodeType /pl/docs/Web/API/Element/nodeValue /pl/docs/Web/API/Node/nodeValue /pl/docs/Web/API/Element/normalize /pl/docs/Web/API/Node/normalize -/pl/docs/Web/API/Element/offsetHeight /pl/docs/Web/API/HTMLElement/offsetHeight /pl/docs/Web/API/Element/offsetLeft /pl/docs/Web/API/HTMLElement/offsetLeft /pl/docs/Web/API/Element/offsetParent /pl/docs/Web/API/HTMLElement/offsetParent /pl/docs/Web/API/Element/offsetWidth /pl/docs/Web/API/HTMLElement/offsetWidth @@ -1653,7 +1622,6 @@ /pl/docs/Web/API/Stylesheet/cssRules /pl/docs/Web/API/CSSRuleList /pl/docs/Web/API/Stylesheet/deleteRule /pl/docs/Web/API/CSSStyleSheet/deleteRule /pl/docs/Web/API/Stylesheet/insertRule /pl/docs/Web/API/CSSStyleSheet/insertRule -/pl/docs/Web/API/Uint16Array /pl/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array /pl/docs/Web/API/Window/clearInterval /pl/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval /pl/docs/Web/API/Window/clearTimeout /pl/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /pl/docs/Web/API/Window/onload /pl/docs/Web/API/GlobalEventHandlers/onload @@ -1672,7 +1640,6 @@ /pl/docs/Web/Bezpieczeństwo/Same-origin_policy /pl/docs/Web/Security/Same-origin_policy /pl/docs/Web/Bezpieczeństwo/Subresource_Integrity /pl/docs/Web/Security/Subresource_Integrity /pl/docs/Web/CSS/-moz-appearance /pl/docs/Web/CSS/appearance -/pl/docs/Web/CSS/-moz-background-inline-policy /pl/docs/Web/CSS/box-decoration-break /pl/docs/Web/CSS/-moz-background-origin /pl/docs/Web/CSS/background-origin /pl/docs/Web/CSS/-moz-border-radius /pl/docs/Web/CSS/border-radius /pl/docs/Web/CSS/-moz-border-radius-bottomleft /pl/docs/Web/CSS/border-bottom-left-radius @@ -1729,7 +1696,6 @@ /pl/docs/Web/CSS/transform-function/matrix /pl/docs/Web/CSS/transform-function/matrix() /pl/docs/Web/Dostępność /pl/docs/Web/Accessibility /pl/docs/Web/Dostępność/An_overview_of_accessible_web_applications_and_widgets /pl/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets -/pl/docs/Web/Dostępność/Keyboard-navigable_JavaScript_widgets /pl/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets /pl/docs/Web/Events/drag /pl/docs/Web/API/Document/drag_event /pl/docs/Web/Guide/AJAX/Na_początek /pl/docs/Web/Guide/AJAX/Getting_Started /pl/docs/Web/Guide/CSS /pl/docs/Learn/CSS @@ -1763,10 +1729,8 @@ /pl/docs/Web/HTML/Elementy/strong /pl/docs/Web/HTML/Element/strong /pl/docs/Web/HTML/Elementy_blokowe /pl/docs/Web/HTML/Block-level_elements /pl/docs/Web/HTML/Elementy_liniowe /pl/docs/Web/HTML/Inline_elements -/pl/docs/Web/HTML/Global_attributes/pisownia /pl/docs/Web/HTML/Global_attributes/spellcheck /pl/docs/Web/HTTP/Ciasteczka /pl/docs/Web/HTTP/Cookies /pl/docs/Web/HTTP/HTTP_wiadomosci_ogólne /pl/docs/Web/HTTP/Overview -/pl/docs/Web/HTTP/Headers/Data /pl/docs/Web/HTTP/Headers/Date /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5 /pl/docs/Web/JavaScript/Reference /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Funkcje /pl/docs/Web/JavaScript/Reference/Global_Objects /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Funkcje/Boolean /pl/docs/Web/JavaScript/Reference/Global_Objects/Boolean @@ -1938,7 +1902,6 @@ /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Obiekty/String /pl/docs/Web/JavaScript/Reference/Global_Objects/String /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Obiekty/String/anchor /pl/docs/Web/JavaScript/Reference/Global_Objects/String/anchor /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Obiekty/String/big /pl/docs/Web/JavaScript/Reference/Global_Objects/String/big -/pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Obiekty/String/blink /pl/docs/Web/JavaScript/Reference/Global_Objects/String/blink /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Obiekty/String/bold /pl/docs/Web/JavaScript/Reference/Global_Objects/String/bold /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Obiekty/String/charAt /pl/docs/Web/JavaScript/Reference/Global_Objects/String/charAt /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Obiekty/String/charCodeAt /pl/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt @@ -1971,7 +1934,6 @@ /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_delete /pl/docs/Web/JavaScript/Reference/Operators/delete /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_function /pl/docs/Web/JavaScript/Reference/Operators/function /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_in /pl/docs/Web/JavaScript/Reference/Operators/in -/pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_instanceof /pl/docs/Web/JavaScript/Reference/Operators/instanceof /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_new /pl/docs/Web/JavaScript/Reference/Operators/new /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_przecinkowy /pl/docs/Web/JavaScript/Reference/Operators/Comma_Operator /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_typeof /pl/docs/Web/JavaScript/Reference/Operators/typeof @@ -1991,10 +1953,8 @@ /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Polecenia/import /pl/docs/Web/JavaScript/Reference/Statements/import /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Polecenia/return /pl/docs/Web/JavaScript/Reference/Statements/return /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Polecenia/switch /pl/docs/Web/JavaScript/Reference/Statements/switch -/pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Polecenia/throw /pl/docs/Web/JavaScript/Reference/Statements/throw /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Polecenia/var /pl/docs/Web/JavaScript/Reference/Statements/var /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Polecenia/while /pl/docs/Web/JavaScript/Reference/Statements/while -/pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Przestarzałe_własności_i_metody /pl/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Wyrażenia /pl/docs/Web/JavaScript/Reference/Statements /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Wyrażenia/const /pl/docs/Web/JavaScript/Reference/Statements/const /pl/docs/Web/JavaScript/Dokumentacja_języka_JavaScript_1.5/Własności /pl/docs/Web/JavaScript/Reference/Global_Objects @@ -2159,7 +2119,6 @@ /pl/docs/Web/JavaScript/Referencje/Obiekty/Function/displayName /pl/docs/Web/JavaScript/Reference/Global_Objects/Function/displayName /pl/docs/Web/JavaScript/Referencje/Obiekty/Function/length /pl/docs/Web/JavaScript/Reference/Global_Objects/Function/length /pl/docs/Web/JavaScript/Referencje/Obiekty/Function/toString /pl/docs/Web/JavaScript/Reference/Global_Objects/Function/toString -/pl/docs/Web/JavaScript/Referencje/Obiekty/Generator /pl/docs/Web/JavaScript/Reference/Global_Objects/Generator /pl/docs/Web/JavaScript/Referencje/Obiekty/Infinity /pl/docs/Web/JavaScript/Reference/Global_Objects/Infinity /pl/docs/Web/JavaScript/Referencje/Obiekty/JSON /pl/docs/Web/JavaScript/Reference/Global_Objects/JSON /pl/docs/Web/JavaScript/Referencje/Obiekty/Math /pl/docs/Web/JavaScript/Reference/Global_Objects/Math @@ -2239,7 +2198,6 @@ /pl/docs/Web/JavaScript/Referencje/Obiekty/String /pl/docs/Web/JavaScript/Reference/Global_Objects/String /pl/docs/Web/JavaScript/Referencje/Obiekty/String/anchor /pl/docs/Web/JavaScript/Reference/Global_Objects/String/anchor /pl/docs/Web/JavaScript/Referencje/Obiekty/String/big /pl/docs/Web/JavaScript/Reference/Global_Objects/String/big -/pl/docs/Web/JavaScript/Referencje/Obiekty/String/blink /pl/docs/Web/JavaScript/Reference/Global_Objects/String/blink /pl/docs/Web/JavaScript/Referencje/Obiekty/String/bold /pl/docs/Web/JavaScript/Reference/Global_Objects/String/bold /pl/docs/Web/JavaScript/Referencje/Obiekty/String/charAt /pl/docs/Web/JavaScript/Reference/Global_Objects/String/charAt /pl/docs/Web/JavaScript/Referencje/Obiekty/String/charCodeAt /pl/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt @@ -2248,10 +2206,8 @@ /pl/docs/Web/JavaScript/Referencje/Obiekty/String/fontcolor /pl/docs/Web/JavaScript/Reference/Global_Objects/String/fontcolor /pl/docs/Web/JavaScript/Referencje/Obiekty/String/fontsize /pl/docs/Web/JavaScript/Reference/Global_Objects/String/fontsize /pl/docs/Web/JavaScript/Referencje/Obiekty/String/fromCharCode /pl/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode -/pl/docs/Web/JavaScript/Referencje/Obiekty/String/fromCodePoint /pl/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint /pl/docs/Web/JavaScript/Referencje/Obiekty/String/italics /pl/docs/Web/JavaScript/Reference/Global_Objects/String/italics /pl/docs/Web/JavaScript/Referencje/Obiekty/String/link /pl/docs/Web/JavaScript/Reference/Global_Objects/String/link -/pl/docs/Web/JavaScript/Referencje/Obiekty/String/repeat /pl/docs/Web/JavaScript/Reference/Global_Objects/String/repeat /pl/docs/Web/JavaScript/Referencje/Obiekty/String/search /pl/docs/Web/JavaScript/Reference/Global_Objects/String/search /pl/docs/Web/JavaScript/Referencje/Obiekty/String/slice /pl/docs/Web/JavaScript/Reference/Global_Objects/String/slice /pl/docs/Web/JavaScript/Referencje/Obiekty/String/small /pl/docs/Web/JavaScript/Reference/Global_Objects/String/small @@ -2267,12 +2223,10 @@ /pl/docs/Web/JavaScript/Referencje/Obiekty/String/valueOf /pl/docs/Web/JavaScript/Reference/Global_Objects/String/valueOf /pl/docs/Web/JavaScript/Referencje/Obiekty/Symbol /pl/docs/Web/JavaScript/Reference/Global_Objects/Symbol /pl/docs/Web/JavaScript/Referencje/Obiekty/SyntaxError /pl/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError -/pl/docs/Web/JavaScript/Referencje/Obiekty/Uint16Array /pl/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array /pl/docs/Web/JavaScript/Referencje/Obiekty/decodeURI /pl/docs/Web/JavaScript/Reference/Global_Objects/decodeURI /pl/docs/Web/JavaScript/Referencje/Obiekty/decodeURIComponent /pl/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent /pl/docs/Web/JavaScript/Referencje/Obiekty/encodeURI /pl/docs/Web/JavaScript/Reference/Global_Objects/encodeURI /pl/docs/Web/JavaScript/Referencje/Obiekty/encodeURIComponent /pl/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent -/pl/docs/Web/JavaScript/Referencje/Obiekty/escape /pl/docs/Web/JavaScript/Reference/Global_Objects/escape /pl/docs/Web/JavaScript/Referencje/Obiekty/isFinite /pl/docs/Web/JavaScript/Reference/Global_Objects/isFinite /pl/docs/Web/JavaScript/Referencje/Obiekty/isNaN /pl/docs/Web/JavaScript/Reference/Global_Objects/isNaN /pl/docs/Web/JavaScript/Referencje/Obiekty/null /pl/docs/Web/JavaScript/Reference/Global_Objects/null @@ -2287,7 +2241,6 @@ /pl/docs/Web/JavaScript/Referencje/Operatory/Operator_delete /pl/docs/Web/JavaScript/Reference/Operators/delete /pl/docs/Web/JavaScript/Referencje/Operatory/Operator_function /pl/docs/Web/JavaScript/Reference/Operators/function /pl/docs/Web/JavaScript/Referencje/Operatory/Operator_in /pl/docs/Web/JavaScript/Reference/Operators/in -/pl/docs/Web/JavaScript/Referencje/Operatory/Operator_instanceof /pl/docs/Web/JavaScript/Reference/Operators/instanceof /pl/docs/Web/JavaScript/Referencje/Operatory/Operator_new /pl/docs/Web/JavaScript/Reference/Operators/new /pl/docs/Web/JavaScript/Referencje/Operatory/Operator_przecinkowy /pl/docs/Web/JavaScript/Reference/Operators/Comma_Operator /pl/docs/Web/JavaScript/Referencje/Operatory/Operator_typeof /pl/docs/Web/JavaScript/Reference/Operators/typeof @@ -2298,7 +2251,6 @@ /pl/docs/Web/JavaScript/Referencje/Operatory/Operatory_specjalne/Operator_delete /pl/docs/Web/JavaScript/Reference/Operators/delete /pl/docs/Web/JavaScript/Referencje/Operatory/Operatory_specjalne/Operator_function /pl/docs/Web/JavaScript/Reference/Operators/function /pl/docs/Web/JavaScript/Referencje/Operatory/Operatory_specjalne/Operator_in /pl/docs/Web/JavaScript/Reference/Operators/in -/pl/docs/Web/JavaScript/Referencje/Operatory/Operatory_specjalne/Operator_instanceof /pl/docs/Web/JavaScript/Reference/Operators/instanceof /pl/docs/Web/JavaScript/Referencje/Operatory/Operatory_specjalne/Operator_new /pl/docs/Web/JavaScript/Reference/Operators/new /pl/docs/Web/JavaScript/Referencje/Operatory/Operatory_specjalne/Operator_przecinkowy /pl/docs/Web/JavaScript/Reference/Operators/Comma_Operator /pl/docs/Web/JavaScript/Referencje/Operatory/Operatory_specjalne/Operator_typeof /pl/docs/Web/JavaScript/Reference/Operators/typeof @@ -2309,7 +2261,6 @@ /pl/docs/Web/JavaScript/Referencje/Operatory/function* /pl/docs/Web/JavaScript/Reference/Operators/function* /pl/docs/Web/JavaScript/Referencje/Operatory/new.target /pl/docs/Web/JavaScript/Reference/Operators/new.target /pl/docs/Web/JavaScript/Referencje/Operatory/super /pl/docs/Web/JavaScript/Reference/Operators/super -/pl/docs/Web/JavaScript/Referencje/Operatory/this /pl/docs/Web/JavaScript/Reference/Operators/this /pl/docs/Web/JavaScript/Referencje/Operatory/yield /pl/docs/Web/JavaScript/Reference/Operators/yield /pl/docs/Web/JavaScript/Referencje/Operatory/yield* /pl/docs/Web/JavaScript/Reference/Operators/yield* /pl/docs/Web/JavaScript/Referencje/Polecenia /pl/docs/Web/JavaScript/Reference/Statements @@ -2332,10 +2283,8 @@ /pl/docs/Web/JavaScript/Referencje/Polecenia/import /pl/docs/Web/JavaScript/Reference/Statements/import /pl/docs/Web/JavaScript/Referencje/Polecenia/return /pl/docs/Web/JavaScript/Reference/Statements/return /pl/docs/Web/JavaScript/Referencje/Polecenia/switch /pl/docs/Web/JavaScript/Reference/Statements/switch -/pl/docs/Web/JavaScript/Referencje/Polecenia/throw /pl/docs/Web/JavaScript/Reference/Statements/throw /pl/docs/Web/JavaScript/Referencje/Polecenia/var /pl/docs/Web/JavaScript/Reference/Statements/var /pl/docs/Web/JavaScript/Referencje/Polecenia/while /pl/docs/Web/JavaScript/Reference/Statements/while -/pl/docs/Web/JavaScript/Referencje/Przestarzałe_własności_i_metody /pl/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features /pl/docs/Web/JavaScript/Referencje/Wyrażenia /pl/docs/Web/JavaScript/Reference/Statements /pl/docs/Web/JavaScript/Referencje/Wyrażenia/const /pl/docs/Web/JavaScript/Reference/Statements/const /pl/docs/Web/JavaScript/Referencje/Własności /pl/docs/Web/JavaScript/Reference/Global_Objects @@ -2345,7 +2294,6 @@ /pl/docs/Web/JavaScript/Referencje/Własnościundefined /pl/docs/Web/JavaScript/Reference/Global_Objects/undefined /pl/docs/Web/JavaScript/Zasoby_języka_JavaScript /pl/docs/Web/JavaScript/Language_Resources /pl/docs/Web/JavaScript/dziedziczenie_lancuch_prototypow /pl/docs/Web/JavaScript/Inheritance_and_the_prototype_chain -/pl/docs/Web/JavaScript/typy_oraz_struktury_danych /pl/docs/Web/JavaScript/Data_structures /pl/docs/Web/SVG/Element/okrąg /pl/docs/Web/SVG/Element/circle /pl/docs/Web/SVG/Inne_zasoby /pl/docs/Web/SVG/Other_Resources /pl/docs/Web/SVG/Przewodnik /pl/docs/Web/SVG/Tutorial @@ -2436,7 +2384,6 @@ /pl/docs/Wprowadzenie_do_XMLa /pl/docs/Web/XML/XML_introduction /pl/docs/XHTML /pl/docs/Glossary/XHTML /pl/docs/XMLHttpRequest /pl/docs/Web/API/XMLHttpRequest -/pl/docs/XMLHttpRequest/Using_XMLHttpRequest /pl/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest /pl/docs/XML_Introduction /pl/docs/Web/XML/XML_introduction /pl/docs/XPConnect:Podstawy_architektury /pl/docs/XPConnect/Podstawy_architektury /pl/docs/XPath /pl/docs/Web/XPath diff --git a/files/pl/_wikihistory.json b/files/pl/_wikihistory.json index 9c4da3afc6..85e8f6414f 100644 --- a/files/pl/_wikihistory.json +++ b/files/pl/_wikihistory.json @@ -28,12 +28,6 @@ "Jacqbus" ] }, - "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection": { - "modified": "2020-03-30T17:04:11.415Z", - "contributors": [ - "Jacqbus" - ] - }, "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it": { "modified": "2020-03-26T16:17:46.952Z", "contributors": [ @@ -655,12 +649,6 @@ "AdrianaOlszak" ] }, - "Learn/Getting_started_with_the_web/Publishing_your_website": { - "modified": "2020-08-03T12:17:14.364Z", - "contributors": [ - "Margo1212" - ] - }, "Learn/Getting_started_with_the_web/What_will_your_website_look_like": { "modified": "2020-08-15T10:22:14.475Z", "contributors": [ @@ -704,12 +692,6 @@ "mat-bi" ] }, - "Learn/HTML/Introduction_to_HTML/Getting_started": { - "modified": "2020-07-16T22:23:05.148Z", - "contributors": [ - "Ambuscade" - ] - }, "Learn/JavaScript": { "modified": "2020-07-16T22:29:43.131Z", "contributors": [ @@ -774,12 +756,6 @@ "mat-bi" ] }, - "Learn/JavaScript/First_steps/Math": { - "modified": "2020-09-03T15:45:26.516Z", - "contributors": [ - "marek-rzepka" - ] - }, "Learn/JavaScript/First_steps/Variables": { "modified": "2020-09-03T15:16:05.291Z", "contributors": [ @@ -825,12 +801,6 @@ "drm404" ] }, - "Learn/Server-side/Django": { - "modified": "2020-07-16T22:36:34.472Z", - "contributors": [ - "kruschk" - ] - }, "Learn/Server-side/Express_Nodejs": { "modified": "2020-07-16T22:37:54.234Z", "contributors": [ @@ -867,12 +837,6 @@ "chrisdavidmills" ] }, - "Learn/Tools_and_testing/Client-side_JavaScript_frameworks": { - "modified": "2020-07-23T12:08:19.939Z", - "contributors": [ - "chrisdavidmills" - ] - }, "MDN": { "modified": "2020-02-19T18:16:07.796Z", "contributors": [ @@ -939,21 +903,6 @@ "klez" ] }, - "MDN/Contribute/Howto/Create_and_edit_pages": { - "modified": "2020-12-04T02:55:11.340Z", - "contributors": [ - "SphinxKnight", - "natusiala88", - "tomekgroos" - ] - }, - "MDN/Contribute/Howto/Tag": { - "modified": "2019-03-23T22:48:19.207Z", - "contributors": [ - "wbamberg", - "apawliszak" - ] - }, "MDN/Guidelines": { "modified": "2020-09-30T15:31:06.666Z", "contributors": [ @@ -963,27 +912,6 @@ "Sheppy" ] }, - "MDN/Guidelines/Writing_style_guide": { - "modified": "2020-09-30T15:31:07.174Z", - "contributors": [ - "chrisdavidmills", - "jswisher", - "killaseo", - "wbamberg", - "Arti", - "grunt666", - "Mlodyemoka", - "BogdanMDN", - "CYGAN" - ] - }, - "MDN/Tools": { - "modified": "2019-01-16T20:46:53.090Z", - "contributors": [ - "wbamberg", - "Mlodyemoka" - ] - }, "MDN/Yari": { "modified": "2019-09-09T15:53:30.248Z", "contributors": [ @@ -1037,12 +965,6 @@ "rebloor" ] }, - "Mozilla/Add-ons/WebExtensions/API/privacy": { - "modified": "2020-10-15T22:30:04.581Z", - "contributors": [ - "hugojavierduran9" - ] - }, "Mozilla/Add-ons/WebExtensions/Your_first_WebExtension": { "modified": "2020-12-12T09:20:57.064Z", "contributors": [ @@ -1276,12 +1198,6 @@ "Dria" ] }, - "Tools/Browser_Toolbox": { - "modified": "2020-07-16T22:35:55.742Z", - "contributors": [ - "Freelancer.MK" - ] - }, "Tools/Debugger": { "modified": "2020-07-16T22:35:05.314Z", "contributors": [ @@ -1332,25 +1248,6 @@ "wbamberg" ] }, - "Tools/Performance/Flame_Chart": { - "modified": "2020-07-16T22:36:20.612Z", - "contributors": [ - "jwhitlock", - "ozzbrain" - ] - }, - "Tools/Storage_Inspector": { - "modified": "2020-07-16T22:36:10.011Z", - "contributors": [ - "edrjen" - ] - }, - "Tools/Tools_Toolbox": { - "modified": "2020-07-16T22:35:27.779Z", - "contributors": [ - "vviruzz" - ] - }, "Tools/Validators": { "modified": "2020-07-16T22:35:03.596Z", "contributors": [ @@ -1362,12 +1259,6 @@ "Chlopczyk" ] }, - "Tools/View_source": { - "modified": "2020-07-16T22:35:03.124Z", - "contributors": [ - "kryspinkras" - ] - }, "Tools/about:debugging": { "modified": "2020-07-16T22:36:32.890Z", "contributors": [ @@ -1417,12 +1308,6 @@ "mateuszdanek" ] }, - "Web/API/AudioContext": { - "modified": "2019-03-23T22:13:45.962Z", - "contributors": [ - "drm404" - ] - }, "Web/API/AudioParam": { "modified": "2019-03-23T22:13:33.465Z", "contributors": [ @@ -2343,12 +2228,6 @@ "Jan Dudek" ] }, - "Web/API/Element/querySelector": { - "modified": "2019-03-23T22:10:41.126Z", - "contributors": [ - "jdrobiecki" - ] - }, "Web/API/Element/removeAttribute": { "modified": "2019-03-23T23:53:07.027Z", "contributors": [ @@ -2761,17 +2640,6 @@ "Ptak82" ] }, - "Web/API/HTMLElement/offsetHeight": { - "modified": "2019-03-23T23:47:13.144Z", - "contributors": [ - "fscholz", - "teoli", - "khalid32", - "Mgjbot", - "Internauta1024A", - "Ptak82" - ] - }, "Web/API/HTMLElement/offsetLeft": { "modified": "2019-03-23T23:49:30.218Z", "contributors": [ @@ -2926,12 +2794,6 @@ "KubaKaszycki" ] }, - "Web/API/HTMLSelectElement": { - "modified": "2020-10-15T22:29:38.928Z", - "contributors": [ - "Loadmaster" - ] - }, "Web/API/HTMLTableElement": { "modified": "2019-03-23T23:46:11.801Z", "contributors": [ @@ -3006,12 +2868,6 @@ "skoczy" ] }, - "Web/API/MediaElementAudioSourceNode": { - "modified": "2020-10-15T22:28:39.656Z", - "contributors": [ - "dawidos2017r" - ] - }, "Web/API/MouseEvent/altKey": { "modified": "2019-03-23T23:48:10.716Z", "contributors": [ @@ -3115,14 +2971,6 @@ "Ptak82" ] }, - "Web/API/MouseScrollEvent": { - "modified": "2019-03-18T21:09:03.294Z", - "contributors": [ - "fscholz", - "teoli", - "iwona1111" - ] - }, "Web/API/Navigator": { "modified": "2019-03-23T23:01:33.543Z", "contributors": [ @@ -3280,17 +3128,6 @@ "Ptak82" ] }, - "Web/API/Node/nodeType": { - "modified": "2019-03-23T23:49:33.390Z", - "contributors": [ - "teoli", - "jsx", - "ethertank", - "Mgjbot", - "Jan Dudek", - "Ptak82" - ] - }, "Web/API/Node/nodeValue": { "modified": "2019-03-24T00:13:13.193Z", "contributors": [ @@ -3394,12 +3231,6 @@ "Arfphis" ] }, - "Web/API/Push_API": { - "modified": "2019-03-23T22:08:29.784Z", - "contributors": [ - "prograamer" - ] - }, "Web/API/Range": { "modified": "2019-03-23T23:45:35.004Z", "contributors": [ @@ -3411,12 +3242,6 @@ "Internauta1024A" ] }, - "Web/API/Response": { - "modified": "2020-10-15T22:26:26.518Z", - "contributors": [ - "ZaneHannanAU" - ] - }, "Web/API/Screen": { "modified": "2019-03-23T23:01:31.157Z", "contributors": [ @@ -3434,12 +3259,6 @@ "Internauta1024A" ] }, - "Web/API/Screen/width": { - "modified": "2019-03-18T21:45:10.635Z", - "contributors": [ - "kasztan" - ] - }, "Web/API/Selection": { "modified": "2019-03-23T23:48:09.616Z", "contributors": [ @@ -3780,12 +3599,6 @@ "Trebor" ] }, - "Web/API/WebGL_API/Tutorial": { - "modified": "2019-03-23T22:48:53.045Z", - "contributors": [ - "fscholz" - ] - }, "Web/API/WebSockets_API": { "modified": "2019-04-12T05:40:44.038Z", "contributors": [ @@ -3794,12 +3607,6 @@ "Jacqbus" ] }, - "Web/API/Web_Audio_API": { - "modified": "2019-03-23T22:11:02.259Z", - "contributors": [ - "drm404" - ] - }, "Web/API/Web_Storage_API": { "modified": "2019-03-23T23:50:43.254Z", "contributors": [ @@ -3857,17 +3664,6 @@ "Internauta1024A" ] }, - "Web/API/Window/content": { - "modified": "2019-03-23T23:49:47.503Z", - "contributors": [ - "SphinxKnight", - "teoli", - "AshfaqHossain", - "Mgjbot", - "Ptak82", - "Internauta1024A" - ] - }, "Web/API/Window/controllers": { "modified": "2019-03-23T23:49:47.613Z", "contributors": [ @@ -4013,15 +3809,6 @@ "Jan Dudek" ] }, - "Web/API/Window/openDialog": { - "modified": "2019-03-24T00:04:19.879Z", - "contributors": [ - "teoli", - "khalid32", - "damien.flament", - "Ptak82" - ] - }, "Web/API/Window/opener": { "modified": "2020-10-15T21:16:48.672Z", "contributors": [ @@ -4113,12 +3900,6 @@ "Bedi" ] }, - "Web/API/Window/sidebar": { - "modified": "2019-03-23T22:02:59.356Z", - "contributors": [ - "IsaacSchemm" - ] - }, "Web/API/WindowOrWorkerGlobalScope": { "modified": "2019-03-23T23:01:35.375Z", "contributors": [ @@ -4190,12 +3971,6 @@ "gandalf" ] }, - "Web/API/XMLHttpRequest/Using_XMLHttpRequest": { - "modified": "2019-03-23T23:07:00.318Z", - "contributors": [ - "sopi" - ] - }, "Web/Accessibility": { "modified": "2019-09-09T14:17:31.130Z", "contributors": [ @@ -4229,12 +4004,6 @@ "lukasz-otowski" ] }, - "Web/Accessibility/Keyboard-navigable_JavaScript_widgets": { - "modified": "2019-11-11T08:36:35.618Z", - "contributors": [ - "kamilbusko" - ] - }, "Web/CSS": { "modified": "2019-09-11T03:38:26.790Z", "contributors": [ @@ -4447,12 +4216,6 @@ "P0lip" ] }, - "Web/CSS/Attribute_selectors": { - "modified": "2020-10-15T22:29:59.639Z", - "contributors": [ - "n.lobodzinski" - ] - }, "Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property": { "modified": "2019-03-23T23:44:57.406Z", "contributors": [ @@ -4501,12 +4264,6 @@ "CreateWWW" ] }, - "Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout": { - "modified": "2020-03-02T06:06:47.611Z", - "contributors": [ - "Miszau" - ] - }, "Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout": { "modified": "2019-05-22T06:37:48.964Z", "contributors": [ @@ -4574,17 +4331,6 @@ "P0lip" ] }, - "Web/CSS/Media_Queries/Using_media_queries": { - "modified": "2019-10-10T16:46:21.792Z", - "contributors": [ - "powelski", - "Hymtos", - "Sebastianz", - "mrstork", - "malayaleecoder", - "Asqan" - ] - }, "Web/CSS/Mozilla_Extensions": { "modified": "2019-03-24T00:14:13.075Z", "contributors": [ @@ -4738,12 +4484,6 @@ "Ptak82" ] }, - "Web/CSS/background-size": { - "modified": "2020-10-15T22:05:20.506Z", - "contributors": [ - "krzmaciek" - ] - }, "Web/CSS/border": { "modified": "2019-03-24T00:08:45.150Z", "contributors": [ @@ -5048,12 +4788,6 @@ "Ptak82" ] }, - "Web/CSS/box-decoration-break": { - "modified": "2019-03-23T22:46:10.684Z", - "contributors": [ - "teoli" - ] - }, "Web/CSS/box-direction": { "modified": "2019-03-23T23:45:19.080Z", "contributors": [ @@ -5587,18 +5321,6 @@ "jswisher" ] }, - "Web/Guide/HTML/Editable_content": { - "modified": "2019-03-23T22:02:03.451Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "Web/Guide/Performance": { - "modified": "2019-03-23T23:11:21.113Z", - "contributors": [ - "Sheppy" - ] - }, "Web/HTML": { "modified": "2019-03-18T20:58:20.320Z", "contributors": [ @@ -5645,24 +5367,12 @@ "Sullei" ] }, - "Web/HTML/Element/Heading_Elements": { - "modified": "2020-10-15T22:34:48.886Z", - "contributors": [ - "Martech42" - ] - }, "Web/HTML/Element/Input": { "modified": "2019-03-23T22:58:57.333Z", "contributors": [ "pkuczynski" ] }, - "Web/HTML/Element/Input/button": { - "modified": "2020-10-15T22:31:02.305Z", - "contributors": [ - "alanos101198" - ] - }, "Web/HTML/Element/a": { "modified": "2020-10-15T21:11:09.186Z", "contributors": [ @@ -5979,12 +5689,6 @@ "VooEak" ] }, - "Web/HTML/Element/meta": { - "modified": "2020-10-15T22:33:44.945Z", - "contributors": [ - "DoctorLarva" - ] - }, "Web/HTML/Element/ol": { "modified": "2019-03-18T21:12:42.613Z", "contributors": [ @@ -6100,12 +5804,6 @@ "sideshowbarker" ] }, - "Web/HTML/Global_attributes/spellcheck": { - "modified": "2020-10-15T22:28:58.291Z", - "contributors": [ - "jacobsfly" - ] - }, "Web/HTML/Global_attributes/tabindex": { "modified": "2019-03-23T22:14:07.727Z", "contributors": [ @@ -6134,12 +5832,6 @@ "sideshowbarker" ] }, - "Web/HTTP/Authentication": { - "modified": "2020-10-01T05:02:44.386Z", - "contributors": [ - "dannyplaster21" - ] - }, "Web/HTTP/Basics_of_HTTP/MIME_types": { "modified": "2019-01-16T14:38:41.628Z", "contributors": [ @@ -6170,12 +5862,6 @@ "stopsopa" ] }, - "Web/HTTP/Headers/Date": { - "modified": "2020-10-15T22:11:47.444Z", - "contributors": [ - "kazek228" - ] - }, "Web/HTTP/Headers/Referrer-Policy": { "modified": "2020-10-15T22:25:31.082Z", "contributors": [ @@ -6255,12 +5941,6 @@ "ewape" ] }, - "Web/JavaScript/Data_structures": { - "modified": "2020-06-14T13:44:23.074Z", - "contributors": [ - "AvantaR" - ] - }, "Web/JavaScript/EventLoop": { "modified": "2020-03-12T19:42:17.470Z", "contributors": [ @@ -6476,19 +6156,6 @@ "jangromko" ] }, - "Web/JavaScript/Reference/Deprecated_and_obsolete_features": { - "modified": "2020-03-12T19:37:30.978Z", - "contributors": [ - "SphinxKnight", - "teoli", - "Bedi", - "Mgjbot", - "Diablownik", - "Ptak82", - "Koziolek", - "Marcoos" - ] - }, "Web/JavaScript/Reference/Errors": { "modified": "2020-03-12T19:45:52.052Z", "contributors": [ @@ -7662,12 +7329,6 @@ "Diablownik" ] }, - "Web/JavaScript/Reference/Global_Objects/Generator": { - "modified": "2019-03-23T22:15:20.748Z", - "contributors": [ - "labs4apps" - ] - }, "Web/JavaScript/Reference/Global_Objects/Infinity": { "modified": "2020-03-12T19:37:41.172Z", "contributors": [ @@ -8380,14 +8041,6 @@ "Internauta1024A" ] }, - "Web/JavaScript/Reference/Global_Objects/String/blink": { - "modified": "2019-03-23T23:48:18.653Z", - "contributors": [ - "teoli", - "Mgjbot", - "Ptak82" - ] - }, "Web/JavaScript/Reference/Global_Objects/String/bold": { "modified": "2019-03-23T23:48:19.144Z", "contributors": [ @@ -8449,12 +8102,6 @@ "Ptak82" ] }, - "Web/JavaScript/Reference/Global_Objects/String/fromCodePoint": { - "modified": "2020-10-15T22:35:16.217Z", - "contributors": [ - "Lukasz257" - ] - }, "Web/JavaScript/Reference/Global_Objects/String/italics": { "modified": "2019-03-23T23:48:17.339Z", "contributors": [ @@ -8471,12 +8118,6 @@ "Ptak82" ] }, - "Web/JavaScript/Reference/Global_Objects/String/repeat": { - "modified": "2019-03-23T22:21:59.718Z", - "contributors": [ - "kamce" - ] - }, "Web/JavaScript/Reference/Global_Objects/String/search": { "modified": "2019-03-23T23:48:27.010Z", "contributors": [ @@ -8607,13 +8248,6 @@ "jangromko" ] }, - "Web/JavaScript/Reference/Global_Objects/Uint16Array": { - "modified": "2019-03-23T23:21:49.403Z", - "contributors": [ - "teoli", - "Kuzirashi" - ] - }, "Web/JavaScript/Reference/Global_Objects/decodeURI": { "modified": "2020-03-12T19:37:41.064Z", "contributors": [ @@ -8654,12 +8288,6 @@ "VooEak" ] }, - "Web/JavaScript/Reference/Global_Objects/escape": { - "modified": "2020-03-12T19:43:04.815Z", - "contributors": [ - "kamce" - ] - }, "Web/JavaScript/Reference/Global_Objects/isFinite": { "modified": "2020-03-12T19:37:33.636Z", "contributors": [ @@ -8860,19 +8488,6 @@ "Diablownik" ] }, - "Web/JavaScript/Reference/Operators/instanceof": { - "modified": "2020-10-15T21:16:54.657Z", - "contributors": [ - "PawelPapuli", - "SphinxKnight", - "mmiarecki", - "teoli", - "Mgjbot", - "Ipluta", - "Ptak82", - "Internauta1024A" - ] - }, "Web/JavaScript/Reference/Operators/new": { "modified": "2020-10-26T06:11:51.853Z", "contributors": [ @@ -8899,13 +8514,6 @@ "jabedek" ] }, - "Web/JavaScript/Reference/Operators/this": { - "modified": "2020-03-12T19:40:39.396Z", - "contributors": [ - "Majek", - "koczas" - ] - }, "Web/JavaScript/Reference/Operators/typeof": { "modified": "2019-03-23T23:48:37.240Z", "contributors": [ @@ -9116,17 +8724,6 @@ "Diablownik" ] }, - "Web/JavaScript/Reference/Statements/throw": { - "modified": "2020-10-15T21:16:56.629Z", - "contributors": [ - "SphinxKnight", - "teoli", - "Rokuzo", - "Mgjbot", - "Ptak82", - "Diablownik" - ] - }, "Web/JavaScript/Reference/Statements/var": { "modified": "2019-01-16T15:49:48.835Z", "contributors": [ @@ -9151,13 +8748,6 @@ "PiotrMuskalski" ] }, - "Web/JavaScript/Typed_arrays": { - "modified": "2020-03-12T19:39:10.889Z", - "contributors": [ - "teoli", - "Kuzirashi" - ] - }, "Web/MathML": { "modified": "2019-03-24T00:03:16.756Z", "contributors": [ @@ -9296,12 +8886,6 @@ "drm404" ] }, - "Web/Security/Securing_your_site": { - "modified": "2019-11-23T17:31:47.688Z", - "contributors": [ - "mfuji09" - ] - }, "Web/Security/Subresource_Integrity": { "modified": "2020-10-15T22:24:54.815Z", "contributors": [ diff --git a/files/pl/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html deleted file mode 100644 index f0883194a9..0000000000 --- a/files/pl/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Wykrywanie kolizji -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection -original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/wykrywanie_kolizji ---- -<div>{{GamesSidebar}}</div> - -<div>{{IncludeSubnav("/en-US/docs/Games")}}</div> - -<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p> - -<div class="summary"> -<p>This is the <strong>7th step</strong> out of 10 of the <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. You can find the source code as it should look after completing this lesson at <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html">Gamedev-Canvas-workshop/lesson7.html</a>.</p> -</div> - -<p><span class="seoSummary">We have the bricks appearing on the screen already, but the game still isn't <em>that</em> interesting as the ball goes through them. We need to think about adding collision detection so it can bounce off the bricks and break them.</span></p> - -<p>It's our decision how to implement this, of course, but it can be tough to calculate whether the ball is touching the rectangle or not because there are no helper functions in Canvas for this. For the sake of this tutorial we will do it the easiest way possible. We will check if the center of the ball is colliding with any of the given bricks. This won't give a perfect result every time, and there are much more sophisticated ways to do collision detection, but this will work fine for teaching you the basic concepts.</p> - -<h2 id="A_collision_detection_function">A collision detection function</h2> - -<p>To kick this all off we want to create a collision detection function that will loop through all the bricks and compare every single brick's position with the ball's coordinates as each frame is drawn. For better readability of the code we will define the <code>b</code> variable for storing the brick object in every loop of the collision detection:</p> - -<pre class="brush: js">function collisionDetection() { - for(var c=0; c<brickColumnCount; c++) { - for(var r=0; r<brickRowCount; r++) { - var b = bricks[c][r]; - // calculations - } - } -}</pre> - -<p>If the center of the ball is inside the coordinates of one of our bricks, we'll change the direction of the ball. For the center of the ball to be inside the brick, all four of the following statements need to be true:</p> - -<ul> - <li>The x position of the ball is greater than the x position of the brick.</li> - <li>The x position of the ball is less than the x position of the brick plus its width.</li> - <li>The y position of the ball is greater than the y position of the brick.</li> - <li>The y position of the ball is less than the y position of the brick plus its height.</li> -</ul> - -<p>Let's write that down in code:</p> - -<pre class="brush: js">function collisionDetection() { - for(var c=0; c<brickColumnCount; c++) { - for(var r=0; r<brickRowCount; r++) { - var b = bricks[c][r]; - if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) { - dy = -dy; - } - } - } -}</pre> - -<p>Add the above block to your code, below the <code>keyUpHandler()</code> function.</p> - -<h2 id="Making_the_bricks_disappear_after_they_are_hit">Making the bricks disappear after they are hit</h2> - -<p>The above code will work as desired and the ball changes its direction. The problem is that the bricks are staying where they are. We have to figure out a way to get rid of the ones we've already hit with the ball. We can do that by adding an extra parameter to indicate whether we want to paint each brick on the screen or not. In the part of the code where we initialize the bricks, let's add a <code>status</code> property to each brick object. Update the following part of the code as indicated by the highlighted line:</p> - -<pre class="brush: js; highlight:[5]">var bricks = []; -for(var c=0; c<brickColumnCount; c++) { - bricks[c] = []; - for(var r=0; r<brickRowCount; r++) { - bricks[c][r] = { x: 0, y: 0, status: 1 }; - } -}</pre> - -<p>Next we'll check the value of each brick's <code>status</code> property in the <code>drawBricks()</code> function before drawing it — if <code>status</code> is <code>1</code>, then draw it, but if it's <code>0</code>, then it was hit by the ball and we don't want it on the screen anymore. Update your <code>drawBricks()</code> function as follows:</p> - -<pre class="brush: js; highlight:[4,5,6,7,8,9,10,11,12,13,14]">function drawBricks() { - for(var c=0; c<brickColumnCount; c++) { - for(var r=0; r<brickRowCount; r++) { - if(bricks[c][r].status == 1) { - var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft; - var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop; - bricks[c][r].x = brickX; - bricks[c][r].y = brickY; - ctx.beginPath(); - ctx.rect(brickX, brickY, brickWidth, brickHeight); - ctx.fillStyle = "#0095DD"; - ctx.fill(); - ctx.closePath(); - } - } - } -}</pre> - -<h2 id="Tracking_and_updating_the_status_in_the_collision_detection_function">Tracking and updating the status in the collision detection function</h2> - -<p>Now we need to involve the brick <code>status</code> property in the <code>collisionDetection()</code> function: if the brick is active (its status is <code>1</code>) we will check whether the collision happens; if a collision does occur we'll set the status of the given brick to <code>0</code> so it won't be painted on the screen. Update your <code>collisionDetection()</code> function as indicated below:</p> - -<pre class="brush: js; highlight:[5,6,7,8,9,10]">function collisionDetection() { - for(var c=0; c<brickColumnCount; c++) { - for(var r=0; r<brickRowCount; r++) { - var b = bricks[c][r]; - if(b.status == 1) { - if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) { - dy = -dy; - b.status = 0; - } - } - } - } -}</pre> - -<h2 id="Activating_our_collision_detection">Activating our collision detection</h2> - -<p>The last thing to do is to add a call to the <code>collisionDetection()</code> function to our main <code>draw()</code> function. Add the following line to the <code>draw()</code> function, just below the <code>drawPaddle()</code> call:</p> - -<pre class="brush: js">collisionDetection(); -</pre> - -<h2 id="Compare_your_code">Compare your code</h2> - -<p>The collision detection of the ball is now checked on every frame, with every brick. Now we can destroy bricks! :-</p> - -<p>{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/kaed3hbu/","","395")}}</p> - -<div class="note"> -<p><strong>Exercise</strong>: change the color of the ball when it hits the brick.</p> -</div> - -<h2 id="Next_steps">Next steps</h2> - -<p>We are definitely getting there now; let's move on! In the eighth chapter we will be looking at how to <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win">Track the score and win</a>.</p> - -<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p> diff --git a/files/pl/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/pl/learn/getting_started_with_the_web/publishing_your_website/index.html deleted file mode 100644 index f3814455b3..0000000000 --- a/files/pl/learn/getting_started_with_the_web/publishing_your_website/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Publikacja strony internetowej -slug: Learn/Getting_started_with_the_web/Publishing_your_website -tags: - - GitHub - - Początkujący - - Silnik Aplikacji Google - - Uczyć się - - serwer internetowy - - sieć -translation_of: Learn/Getting_started_with_the_web/Publishing_your_website ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>Once you finish writing the code and organizing the files that make up your website, you need to put it all online so people can find it. This article explains how to get your simple sample code online with little effort.</p> -</div> - -<h2 id="Jakie_są_możliwości">Jakie są możliwości?</h2> - -<p dir="ltr" id="tw-target-text">Opublikowanie strony internetowej jest tematem złożonym, ponieważ istnieje wiele sposobów, aby to osiągnąć. W tym artykule nie probujemy udokumentować wszystkie możliwe metody. Zamiast tego wyjaśniamy zalety i wady trzech podejść, które są praktyczne dla początkujących. Następnie przechodzimy przez jedną metodę, która może działać od razu dla wielu użytkowników.</p> - -<h3 id="Getting_hosting_and_a_domain_name">Getting hosting and a domain name</h3> - -<p>To have more control over content and website appearance, most people choose to buy web hosting and a domain name:</p> - -<ul> - <li>Web hosting is rented file space on a hosting company's <a href="/en-US/Learn/What_is_a_web_server">web server</a>. You put website files on the web server. The web server provides website content to website visitors.</li> - <li>A <a href="/en-US/Learn/Understanding_domain_names">domain name</a> is the unique address where people find your website, such as <code>http://www.mozilla.org</code> or <code>http://www.bbc.co.uk</code>. You can rent your domain name for as many years as you want from a <strong>domain registrar</strong>.</li> -</ul> - -<p>Many professional websites go online this way.</p> - -<p>In addition, you will need a {{Glossary("FTP", "File Transfer Protocol (FTP)")}} program (see <a href="/en-US/Learn/How_much_does_it_cost#Software">How much does it cost: software</a> for more details) to actually transfer the website files over to the server. FTP programs vary widely, but generally, you have to connect to your web server using details provided by your hosting company (typically username, password, hostname). Then the program shows you your local files and the web server's files in two windows, and provides a way for you to transfer files back and forth.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p> - -<h4 id="Tips_for_finding_hosting_and_domains">Tips for finding hosting and domains</h4> - -<ul> - <li>MDN does not promote specific commercial hosting companies or domain name registrars. To find hosting companies and registrars, just search for "web hosting" and "domain names". All registrars will have a feature to allow you to check if the domain name you want is available.</li> - <li>Your home or office {{Glossary("ISP", "internet service provider")}} may provide some limited hosting for a small website. The available feature set will be limited, but it might be perfect for your first experiments.</li> - <li>There are also free services available like <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogger</a>, and <a href="https://wordpress.com/">WordPress</a>. Sometimes you get what you pay for, but sometimes these resources are good enough for your initial experiments.</li> - <li>Many companies provide hosting and domains.</li> -</ul> - -<h3 id="Using_an_online_tool_like_GitHub_or_Google_App_Engine">Using an online tool like GitHub or Google App Engine</h3> - -<p>Some tools let you publish your website online:</p> - -<ul> - <li><a href="https://github.com/">GitHub</a> is a "social coding" site. It allows you to upload code repositories for storage in the <a href="http://git-scm.com/">Git</a> <strong>version control system. </strong>You can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your GitHub code, use it, learn from it, and improve on it. GitHub has a very useful feature called <a href="https://pages.github.com/">GitHub Pages</a>, which allows you to expose website code live on the web.</li> - <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web & Mobile Backends in Any Language | Google Cloud Platform">Google App Engine</a> is a powerful platform that lets you build and run applications on Google’s infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website. See <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a> for more information.</li> -</ul> - -<p>These options are usually free, but you may outgrow the limited feature-set.</p> - -<h3 id="Using_a_web-based_IDE_such_as_CodePen">Using a web-based IDE such as CodePen</h3> - -<p>There are a number of web apps that emulate a website development environment, allowing you to enter HTML, CSS and JavaScript, and then display the result of that code as a website — all in one browser tab. Generally speaking, these tools are relatively easy, great for learning, good for sharing code (for example, if you want to share a technique with or ask for debugging help from colleagues in a different office), and free (for basic features). They host your rendered page at a unique web address. However, the features are limited, and these apps usually don't provide hosting space for assets (like images).</p> - -<p>Try playing with some of these examples to find out which one works best for you:</p> - -<ul> - <li><a href="https://jsfiddle.net/">JSFiddle</a></li> - <li><a href="https://glitch.com/">Glitch</a></li> - <li><a href="http://jsbin.com/">JS Bin</a></li> - <li><a href="https://codepen.io/">CodePen</a></li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p> - -<h2 id="Publishing_via_GitHub">Publishing via GitHub</h2> - -<p>Now let's examine how to easily publish your site via GitHub Pages.</p> - -<ol> - <li>First of all, <a href="https://github.com/">sign up for GitHub</a> and verify your email address.</li> - <li>Next, you need to <a href="https://github.com/new">create a repository</a> to store files.</li> - <li>On this page, in the <em>Repository name</em> box, enter <em>username</em>.github.io, where <em>username</em> is your username. For example, our friend Bob Smith would enter <em>bobsmith.github.io</em>.<br> - Check the "<em>Initialize this repository with a README" </em>box. Then click <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li> - <li>Drag and drop the content of your website folder into your repository. Then click <em>Commit changes</em>.<br> - - <div class="note"> - <p><strong>Note</strong>: Make sure your folder has an <code>index.html</code> file.</p> - </div> - </li> - <li> - <p>Navigate your browser to <em>username</em>.github.io to see your website online. For example, for the username <em>chrisdavidmills</em>, go to <a href="http://chrisdavidmills.github.io/"><em>chrisdavidmills</em>.github.io</a>.</p> - - <div class="note"> - <p><strong>Note</strong>: It may take a few minutes for your website to go live. If your website does not display immediately, wait a few minutes. Try again.</p> - </div> - </li> -</ol> - -<p>To learn more, see <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p> - -<h2 id="Further_reading">Further reading</h2> - -<ul> - <li><a href="/en-US/Learn/What_is_a_web_server">What is a web server</a></li> - <li><a href="/en-US/Learn/Understanding_domain_names">Understanding domain names</a></li> - <li><a href="/en-US/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li> - <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.</li> - <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a> by Scott Murray has some useful ideas on available services.</li> -</ul> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p> - -<h2 id="W_tym_module"><font><font>W tym module</font></font></h2> - -<ul> - <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software"><font><font>Instalowanie podstawowego oprogramowania</font></font></a></li> - <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like"><font><font>Jak będzie wyglądać Twoja strona internetowa?</font></font></a></li> - <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files"><font><font>Radzenie sobie z plikami</font></font></a></li> - <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics"><font><font>Podstawy HTML</font></font></a></li> - <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics"><font><font>Podstawy CSS</font></font></a></li> - <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics"><font><font>Podstawy JavaScript</font></font></a></li> - <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website"><font><font>Publikowanie Twojej witryny</font></font></a></li> - <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works"><font><font>Jak działa internet</font></font></a></li> -</ul> diff --git a/files/pl/learn/html/introduction_to_html/getting_started/index.html b/files/pl/learn/html/introduction_to_html/getting_started/index.html deleted file mode 100644 index 1f40b24429..0000000000 --- a/files/pl/learn/html/introduction_to_html/getting_started/index.html +++ /dev/null @@ -1,763 +0,0 @@ ---- -title: Rozpoczynanie pracy z HTML -slug: Learn/HTML/Introduction_to_HTML/Getting_started -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started ---- -<div> -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> -</div> - -<p class="summary">W tym artykule omówimy podstawy HTMLa. Żeby ułatwić ci rozpoczęcie nauki, zapoznamy się z elementami, atrybutami i innymi ważnymi terminami, które być może obiły ci się o uszy. Opowiemy też, jak te terminy odnoszą się do HTMLa. Nauczysz się jaką strukturę mają elementy wykorzystywane w HTMLu, jak wygląda struktura całej strony oraz poznasz inne ważne właściwości języka. W międzyczasie będzie okazja, aby też samemu poeksperymentować z pisaniem kodu!</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Warunki wstępne:</th> - <td>Podstawowa umiejętność obsługi komputera, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">posiadanie podstawowego oprogramowania</a> oraz typowa wiedza jak <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">pracować z plikami</a>.</td> - </tr> - <tr> - <th scope="row">Cel:</th> - <td>Zapoznanie się z językiem HTML oraz zastosowanie w praktyce kilku jego elementów</td> - </tr> - </tbody> -</table> - -<h2 id="Czym_jest_HTML">Czym jest HTML?</h2> - -<p>{{glossary("HTML")}} (Hypertext Markup Language) nie jest językiem programowania. Jest to <em>język znaczników</em>, który mówi przeglądarce jaką strukturę ma strona, którą odwiedzasz. Może być ona albo bardzo skomplikowana albo bardzo prosta. Zależy to wyłącznie od osoby piszącej stronę. Na HTML składa się kolekcja {{glossary("Element", "elementów")}}, która służy do opisywania i grupowania treści, dzięki której zachowuje się ona, lub wygląda, w określony sposób. Okalające treść {{glossary("Tag", "tagi")}} mogą sprawić, że treść stanie się ona hiperłączem do innej strony, zostanie napisana kursywą oraz wiele innych rzeczy. Dla przykładu, spójrzmy na ten tekst:</p> - -<pre class="notranslate">Mój kot jest bardzo humorzasty</pre> - -<p>Jeżeli chcielibyśmy aby ten tekst się wyróżniał, możemy wydzielić go do oddzielnego akapitu, za pomocą elementu {{htmlelement("p")}}:</p> - -<pre class="brush: html notranslate"><p>Mój kot jest bardzo humorzasty</p></pre> - -<div class="note"> -<p><strong>Notka</strong>: Tagi HTMLa nie rozróżniają wielkości liter. Dla przykładu, tag {{htmlelement("title")}} może zostać zapisany jako <code><title></code>, <code><TITLE></code>, <code><Title></code>, <code><TiTlE></code>, etc. i nadal będzie działał. Jednakże dobrą praktyką jest pisanie nazw tagów małą literą, dla spójności, czytelność i kilku innych powodów</p> -</div> - -<h2 id="Anatomia_elementu_HTML">Anatomia elementu HTML</h2> - -<p>Zagłębmy się w nasz akapit, który napisaliśmy w poprzedniej sekcji:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> - -<p>Anatomia tego elementu to:</p> - -<ul> - <li><strong>Tag otwierający:</strong> Składa się z nazwy elementu (w naszym przypadku <em>p</em>, pochodzącej od angielskiego słowa określającego akapit - <em>paragraph</em>), otoczonej nawiasami ostrokątnymi. Tag otwierający określa gdzie element się zaczyna, w tym przypadku gdzie zaczyna się akapit</li> - <li><strong>Zawartość:</strong> Jest nią to, co element ma przechowywać. W tym przypadku jest to treść akapitu</li> - <li><strong>Tag zamykający:</strong> Wygląda tak samo jak tag otwierający, z wyjatkiem posiadana przed nazwą ukośnika. Określa gdzie element się kończy. Jego brak może skutkować dziwacznymi błędami, więc szczególnie na początku nauki należy pamiętać o jego umieszczeniu</li> -</ul> - -<p>Podsumowując: Element to tag otwierający, po którym następuje jego treść, a po treści znajduje się tag zamykający</p> - -<h3 id="Aktywne_uczenie_się_tworzenie_twojego_pierwszego_elementu_HTML">Aktywne uczenie się: tworzenie twojego pierwszego elementu HTML</h3> - -<p>Zedytuj poniższą linijkę, otaczając ją tagami <code><em></code> oraz <code></em>.</code> Aby określić początek elementu, umieść tag otwierający <code><em></code> na początku linijki. Aby określić koniec elementu, umieść tag zamykający <code></em></code> na końcu linijki. Zrobienie tego powinno pokazać linijkę tekstu wypisaną kursywą!</p> - -<p>Jeżeli popełnisz błąd, możesz przywrócić pracę do stanu początkowego za pomocą przycisku <em>Reset</em>. Gdybyś nie wiedział jak wykonać to zadanie, możesz kliknąć w przycisk <em>Pokaż rozwiązanie</em>, aby zobaczyć gotowe rozwiązanie</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html notranslate"><h2>Podgląd na żywo</h2> -<div class="output" style="min-height: 50px;"> -</div> - -<h2>Kod do edycji</h2> -<p class="a11y-label">Naciśnij ESC, aby zabrać fokus z pola wejścia (Tab wstawia znak tabulatora).</p> - -<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> - Ten oto tekst jest mój -</textarea> - -<div class="controls"> - <input id="reset" type="button" value="Reset" /> - <input id="solution" type="button" value="Pokaż rozwiązanie" /> -</div> -</pre> - -<pre class="brush: css notranslate">html { - font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -} -</pre> - -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<em>This is my text.</em>'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Zagnieżdżanie_elementów">Zagnieżdżanie elementów</h3> - -<p>Elementy mogą znajdować się wewnątrz innych elementów. Nazywa się to <em>zagnieżdżaniem</em>. Jeżeli chcielibyśmy zaznaczyć, że nasz kot jest <strong>bardzo</strong> humorzasty, możemy zamknąć słowo <em>bardzo</em> w elemencie {{htmlelement("strong")}}, który wytłuści podany mu tekst</p> - -<pre class="brush: html notranslate"><p>Mój kot jest <strong>bardzo</strong> humorzasty.</p></pre> - -<p>Zagnieżdżanie można zrobić w poprawny oraz niepoprawny sposób. W powyższym przykładzie otworzyliśmy najpierw element <code>p</code>, potem element <code>strong</code>. Aby zadnieżdżanie zadziałało, musimy najpier zamknąć element <code>strong</code>, a następnie element <code>p</code>.</p> - -<p>Poniżej znajduje się przykład <em>niepoprawnego</em> zagnieżdżania:</p> - -<pre class="example-bad brush: html notranslate"><p>Mój kot jest <strong>bardzo humorzasty.</p></strong></pre> - -<p><strong>Jeżeli tak jest otwarty w jakimś elemencie, musi też być w nim zamknięty</strong>. Jeżeli pomieszamy tagi zamykające, tak jak w powyższym przykładzie, przeglądarka będzie musiała zgadywać, o co nam chodziło. A to zgadywanie może prowadzić do nieoczekiwanych wyników</p> - -<h3 id="Elementy_blokowe_a_elementy_w_linii">Elementy blokowe, a elementy w linii</h3> - -<p>There are two important categories of elements to know in HTML: block-level elements and inline elements.</p> - -<ul> - <li>Block-level elements form a visible block on a page. A block-level element appears on a new line following the content that precedes it. Any content that follows a block-level element also appears on a new line. Block-level elements are usually structural elements on the page. For example, a block-level element might represent paragraphs, lists, navigation menus, or footers. A block-level element wouldn't be nested inside an inline element, but it might be nested inside another block-level element.</li> - <li>Inline elements are contained within block-level elements, and surround only small parts of the document’s content. (not entire paragraphs or groupings of content) An inline element will not cause a new line to appear in the document. It is typically used with text. For example, as an {{htmlelement("a")}} element (hyperlink) or emphasis elements such as {{htmlelement("em")}} or {{htmlelement("strong")}}.</li> -</ul> - -<p>Consider the following example:</p> - -<pre class="brush: html notranslate"><em>first</em><em>second</em><em>third</em> - -<p>fourth</p><p>fifth</p><p>sixth</p> -</pre> - -<p>{{htmlelement("em")}} is an inline element. As you see below, the first three elements sit on the same line, with no space in between. On the other hand, {{htmlelement("p")}} is a block-level element. Each <em>p</em> element appears on a new line, with space above and below. (The spacing is due to default <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS styling</a> that the browser applies to paragraphs.)</p> - -<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p> - -<div class="note"> -<p><strong>Note</strong>: HTML5 redefined the element categories: see <a href="https://html.spec.whatwg.org/multipage/indices.html#element-content-categories">Element content categories</a>. While these definitions are more accurate and less ambiguous than their predecessors, the new definitions are a lot more complicated to understand than <em>block</em> and <em>inline. </em>This article will stay with these two terms.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: The terms <em>block</em> and <em>inline</em>, as used in this article, should not be confused with <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">the types of CSS boxes</a> that have the same names. While the names correlate by default, changing the CSS display type doesn't change the category of the element, and doesn't affect which elements it can contain and which elements it can be contained in. One reason HTML5 dropped these terms was to prevent this rather common confusion.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: Find useful reference pages that include lists of block and inline elements. See <a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a> and <a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>.</p> -</div> - -<h3 id="Puste_elementy">Puste elementy</h3> - -<p>Not all elements follow the pattern of an opening tag, content, and a closing tag. Some elements consist of a single tag, which is typically used to insert/embed something in the document. For example, the {{htmlelement("img")}} element embeds an image file onto a page:</p> - -<pre class="brush: html notranslate"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> - -<p>This would output the following:</p> - -<p>{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> - -<div class="note"> -<p><strong>Note</strong>: Empty elements are sometimes called <em>void elements</em>.</p> -</div> - -<h2 id="Atrybuty">Atrybuty</h2> - -<p>Elements can also have attributes. Attributes look like this:</p> - -<p><img alt='&amp;amp;amp;amp;amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;amp;amp;amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> - -<p>Attributes contain extra information about the element that won't appear in the content. In this example, the <strong><code>class</code></strong> attribute is an identifying name used to target the element with style information.</p> - -<p>An attribute should have:</p> - -<ul> - <li>A space between it and the element name. (For an element with more than one attribute, the attributes should be separated by spaces too.)</li> - <li>The attribute name, followed by an equal sign.</li> - <li>An attribute value, wrapped with opening and closing quote marks.</li> -</ul> - -<h3 id="Aktywne_uczenie_się_Dodawanie_atrybutów_do_elementu">Aktywne uczenie się: Dodawanie atrybutów do elementu</h3> - -<p>Another example of an element is {{htmlelement("a")}}. This stands for <em>anchor</em>. An anchor can make the text it encloses into a hyperlink. Anchors can take a number of attributes, but several are as follows:</p> - -<ul> - <li><strong><code>href</code></strong>: This attribute's value specifies the web address for the link. For example: <code>href="https://www.mozilla.org/"</code>.</li> - <li><strong><code>title</code></strong>: The <code>title</code> attribute specifies extra information about the link, such as a description of the page that is being linked to. For example, <code>title="The Mozilla homepage"</code>. This appears as a tooltip when a cursor hovers over the element.</li> - <li><strong><code>target</code></strong>: The <code>target</code> attribute specifies the browsing context used to display the link. For example, <code>target="_blank"</code> will display the link in a new tab. If you want to display the linked content in the current tab, just omit this attribute.</li> -</ul> - -<p>Edit the line below in the <em>Input</em> area to turn it into a link to your favorite website.</p> - -<ol> - <li>Add the <code><a></code> element.</li> - <li>Add the <code>href</code> attribute and the <code>title</code> attribute.</li> - <li>Specify the <code>target</code> attribute to open the link in the new tab.</li> -</ol> - -<p>You'll be able to see your changes update live in the <em>Output</em> area. You should see a link—that when hovered over—displays the value of the <code>title</code> attribute, and when clicked, navigates to the web address in the <code>href</code> attribute. Remember that you need to include a space between the element name, and between each attribute.</p> - -<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p> - -<div class="hidden"> -<h6 id="Playable_code2">Playable code2</h6> - -<pre class="brush: html notranslate"><h2>Live output</h2> - -<div class="output" style="min-height: 50px;"> -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="input" style="min-height: 100px;width: 95%"> - &lt;p&gt;A link to my favorite website.&lt;/p&gt; -</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> - -<pre class="brush: css notranslate">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<p>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">favorite website</a>.</p>'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Atrybuty_logiczne">Atrybuty logiczne</h3> - -<p>Sometimes you will see attributes written without values. This is entirely acceptable. These are called Boolean attributes. Boolean attributes can only have one value, which is generally the same as the attribute name. For example, consider the {{htmlattrxref("disabled", "input")}} attribute, which you can assign to form input elements. (You use this to <em>disable</em> the form input elements so the user can't make entries. The disabled elements typically have a grayed-out appearance.) For example:</p> - -<pre class="notranslate"><input type="text" disabled="disabled"></pre> - -<p>As shorthand, it is acceptable to write this as follows:</p> - -<pre class="brush: html notranslate"><!-- using the disabled attribute prevents the end user from entering text into the input box --> -<input type="text" disabled> - -<!-- text input is allowed, as it doesn't contain the disabled attribute --> -<input type="text"> -</pre> - -<p>For reference, the example above also includes a non-disabled form input element.The HTML from the example above produces this result:</p> - -<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Pomijanie_cudzysłowia_przy_wartościach_atrybutu">Pomijanie cudzysłowia przy wartościach atrybutu</h3> - -<p>If you look at code for a lot of other sites, you might come across a number of strange markup styles, including attribute values without quotes. This is permitted in certain circumstances, but it can also break your markup in other circumstances. For example, if we revisit our link example from earlier, we could write a basic version with <em>only</em> the <code>href</code> attribute, like this:</p> - -<pre class="brush: html notranslate"><a href=https://www.mozilla.org/>favorite website</a></pre> - -<p>However, as soon as we add the <code>title</code> attribute in this way, there are problems:</p> - -<pre class="example-bad brush: html notranslate"><a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a></pre> - -<p>As written above, the browser misinterprets the markup, mistaking the <code>title</code> attribute for three attributes: a title attribute with the value <em>The</em>, and two Boolean attributes, <code>Mozilla</code> and <code>homepage</code>. Obviously, this is not intended! It will cause errors or unexpected behavior, as you can see in the live example below. Try hovering over the link to view the title text!</p> - -<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>Always include the attribute quotes. It avoids such problems, and results in more readable code.</p> - -<h3 id="Cudzysłów_pojedynczy_czy_podwójny">Cudzysłów pojedynczy czy podwójny?</h3> - -<p>In this article you will also notice that the attributes are wrapped in double quotes. However, you might see single quotes in some HTML code. This is a matter of style. You can feel free to choose which one you prefer. Both of these lines are equivalent:</p> - -<pre class="brush: html notranslate"><a href="http://www.example.com">A link to my example.</a> - -<a href='http://www.example.com'>A link to my example.</a></pre> - -<p>Make sure you don't mix single quotes and double quotes. This example (below) shows a kind of mixing quotes that will go wrong:</p> - -<pre class="example-bad brush: html notranslate"><a href="http://www.example.com'>A link to my example.</a></pre> - -<p>However, if you use one type of quote, you can include the other type of quote <em>inside</em> your attribute values:</p> - -<pre class="brush: html notranslate"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> - -<p>To use quote marks inside other quote marks of the same type (single quote or double quote), use <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_Including_special_characters_in_HTML">HTML entities</a>. For example, this will break:</p> - -<pre class="example-bad brush: html notranslate"><a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a></pre> - -<p>Instead, you need to do this:</p> - -<pre class="brush: html notranslate"><a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a></pre> - -<h2 id="Anatomia_dokumentu_HTML">Anatomia dokumentu HTML</h2> - -<p>Individual HTML elements aren't very useful on their own. Next, let's examine how individual elements combine to form an entire HTML page:</p> - -<pre class="brush: html notranslate"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>My test page</title> - </head> - <body> - <p>This is my page</p> - </body> -</html></pre> - -<p>Here we have:</p> - -<ol> - <li><code><!DOCTYPE html></code>: The doctype. When HTML was young (1991-1992), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML. Doctypes used to look something like this: - - <pre class="notranslate"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> - More recently, the doctype is a historical artifact that needs to be included for everything else to work right. <code><!DOCTYPE html></code> is the shortest string of characters that counts as a valid doctype. That is all you need to know!</li> - <li><code><html></html></code>: The {{htmlelement("html")}} element. This element wraps all the content on the page. It is sometimes known as the root element.</li> - <li><code><head></head></code>: The {{htmlelement("head")}} element. This element acts as a container for eveything you want to include on the HTML page, <strong>that isn't the content</strong> the page will show to viewers. This includes keywords and a page description that would appear in search results, CSS to style content, character set declarations, and more. You'll learn more about this in the next article of the series.</li> - <li><code><meta charset="utf-8"></code>: This element specifies the character set for your document to UTF-8, which includes most characters from the vast majority of human written languages. With this setting, the page can now handle any textual content it might contain. There is no reason not to set this, and it can help avoid some problems later.</li> - <li><code><title></title></code>: The {{htmlelement("title")}} element. This sets the title of the page, which is the title that appears in the browser tab the page is loaded in. The page title is also used to describe the page when it is bookmarked.</li> - <li><code><body></body></code>: The {{htmlelement("body")}} element. This contains <em>all</em> the content that displays on the page, including text, images, videos, games, playable audio tracks, or whatever else.</li> -</ol> - -<h3 id="Aktywne_uczenie_się_Dodawanie_paru_właściwości_do_dokumentu_HTML">Aktywne uczenie się: Dodawanie paru właściwości do dokumentu HTML</h3> - -<p>If you want to experiment with writing some HTML on your local computer, you can:</p> - -<ol> - <li>Copy the HTML page example listed above.</li> - <li>Create a new file in your text editor.</li> - <li>Paste the code into the new text file.</li> - <li>Save the file as <code>index.html</code>.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: You can also find this basic HTML template on the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p> -</div> - -<p>You can now open this file in a web browser to see what the rendered code looks like. Edit the code and refresh the browser to see what the result is. Initially the page looks like this:</p> - -<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">In this exercise, you can edit the code locally on your computer, as described previously, or you can edit it in the sample window below (the editable sample window represents just the contents of the {{htmlelement("body")}} element, in this case). Sharpen your skills by implementing the following tasks:</p> - -<ul> - <li>Just below the opening tag of the {{htmlelement("body")}} element, add a main title for the document. This should be wrapped inside an <code><h1></code> opening tag and <code></h1></code> closing tag.</li> - <li>Edit the paragraph content to include text about a topic that you find interesting.</li> - <li>Make important words stand out in bold by wrapping them inside a <code><strong></code> opening tag and <code></strong></code> closing tag.</li> - <li>Add a link to your paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">explained earlier in the article</a>.</li> - <li>Add an image to your document. Place it below the paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">explained earlier in the article</a>. Earn bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the web).</li> -</ul> - -<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p> - -<div class="hidden"> -<h6 id="Playable_code3">Playable code3</h6> - -<pre class="brush: html notranslate"><h2>Live output</h2> - -<div class="output" style="min-height: 50px;"> -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="input" style="min-height: 100px;width: 95%"> - &lt;p&gt;This is my page&lt;/p&gt; -</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> - -<pre class="brush: css notranslate">html { - font-family: sans-serif; -} - -h1 { - color: blue; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -img { - max-width: 100%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<h1>Some music</h1><p>I really enjoy <strong>playing the drums</strong>. One of my favorite drummers is Neal Peart, who\ plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Białe_znaki_w_HTMLu">Białe znaki w HTMLu</h3> - -<p>In the examples above, you may have noticed that a lot of whitespace is included in the code. This is optional. These two code snippets are equivalent:</p> - -<pre class="brush: html notranslate"><p>Dogs are silly.</p> - -<p>Dogs are - silly.</p></pre> - -<p>No matter how much whitespace you use inside HTML element content (which can include one or more space character, but also line breaks), the HTML parser reduces each sequence of whitespace to a single space when rendering the code. So why use so much whitespace? The answer is readability.<br> - <br> - It can be easier to understand what is going on in your code if you have it nicely formatted. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you to choose the style of formatting (how many spaces for each level of indentation, for example), but you should consider formatting it.</p> - -<h2 id="Znaki_specjalne_w_HTML">Znaki specjalne w HTML</h2> - -<p>In HTML, the characters <code><</code>, <code>></code>,<code>"</code>,<code>'</code> and <code>&</code> are special characters. They are parts of the HTML syntax itself. So how do you include one of these special characters in your text? For example, if you want to use an ampersand or less-than sign, and not have it interpreted as code.</p> - -<p>You do this with character references. These are special codes that represent characters, to be used in these exact circumstances. Each character reference starts with an ampersand (&), and ends with a semicolon (;).</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Literal character</th> - <th scope="col">Character reference equivalent</th> - </tr> - </thead> - <tbody> - <tr> - <td><</td> - <td>&lt;</td> - </tr> - <tr> - <td>></td> - <td>&gt;</td> - </tr> - <tr> - <td>"</td> - <td>&quot;</td> - </tr> - <tr> - <td>'</td> - <td>&apos;</td> - </tr> - <tr> - <td>&</td> - <td>&amp;</td> - </tr> - </tbody> -</table> - -<p>The character reference equivalent could be easily remembered because the text it uses can be seen as less than for '&lt;' , quotation for ' &quot; ' and similarly for others. To find more about entity reference, see <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a> (Wikipedia).<br> - <br> - In the example below, there are two paragraphs:</p> - -<pre class="brush: html notranslate"><p>In HTML, you define a paragraph using the <p> element.</p> - -<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p></pre> - -<p>In the live output below, you can see that the first paragraph has gone wrong. The browser interprets the second instance of <code><p></code> as starting a new paragraph. The second paragraph looks fine because it has angle brackets with character references.</p> - -<p>{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> - -<div class="note"> -<p><strong>Note</strong>: You don't need to use entity references for any other symbols, as modern browsers will handle the actual symbols just fine as long, as your HTML's <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Specifying_your_document's_character_encoding">character encoding is set to UTF-8</a>.</p> -</div> - -<h2 id="Komentarze_HTML">Komentarze HTML</h2> - -<p>HTML has a mechanism to write comments in the code. Browsers ignore comments, effectively making comments invisible to the user. The purpose of comments is to allow you to include notes in the code to explain your logic or coding. This is very useful if you return to a code base after being away for long enough that you don't completely remember it. Likewise, comments are invaluable as different people are making changes and updates.</p> - -<p>To write an HTML comment, wrap it in the special markers <code><!--</code> and <code>--></code>. For example:</p> - -<pre class="brush: html notranslate"><p>I'm not inside a comment</p> - -<!-- <p>I am!</p> --></pre> - -<p>As you can see below, only the first paragraph displays in the live output.</p> - -<p>{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> - -<h2 id="Podsumowanie">Podsumowanie</h2> - -<p>You made it to the end of the article! We hope you enjoyed your tour of the basics of HTML.<br> - <br> - At this point, you should understand what HTML looks like, and how it works at a basic level. You should also be able to write a few elements and attributes. The subsequent articles of this module go further on some of the topics introduced here, as well as presenting other concepts of the language.</p> - -<div class="note"> -<p><strong>Note</strong>: As you start to learn more about HTML, consider learning the basics of Cascading Style Sheets, or <a href="/en-US/docs/Learn/CSS">CSS</a>. CSS is the language used to style web pages. (for example, changing fonts or colors, or altering the page layout) HTML and CSS work well together, as you will soon discover.</p> -</div> - -<h2 id="Zobacz_również">Zobacz również</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> -</ul> - -<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> - -<div></div> - -<h2 id="W_tym_module">W tym module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> -</ul> diff --git a/files/pl/learn/javascript/first_steps/math/index.html b/files/pl/learn/javascript/first_steps/math/index.html deleted file mode 100644 index b1931711f1..0000000000 --- a/files/pl/learn/javascript/first_steps/math/index.html +++ /dev/null @@ -1,456 +0,0 @@ ---- -title: Basic math in JavaScript — numbers and operators -slug: Learn/JavaScript/First_steps/Math -translation_of: Learn/JavaScript/First_steps/Math -original_slug: Learn/JavaScript/Pierwsze_kroki/Math ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</div> - -<p class="summary">At this point in the course we discuss math in JavaScript — how we can use {{Glossary("Operator","operators")}} and other features to successfully manipulate numbers to do our bidding.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>To gain familiarity with the basics of math in JavaScript.</td> - </tr> - </tbody> -</table> - -<h2 id="Wszyscy_kochają_matematykę">Wszyscy kochają matematykę</h2> - -<p>Ok, może nie. Niektórzy kochają matematykę, inni nienawidzą od kiedy musieli nauczyć się tabliczki mnożenia i dzielenia przez liczby wielocyfrowe w szkole podstawowej, a częśc jest gdzieś pośrodku. Ale nikt z nas nie może zaprzeczyć, temu że matematyka jest fundamentalną częścią życia, bez której nie zajdzie się daleko. Jest to szczególnie prawdziwe kiedy uczymy się programowania w JavaScript (lub jakimkolwiek innym języku) - tak wiele z tego co robimy polega na przetwarzaniu danych liczbowych, obliczaniu nowych wartości i tak dalej, że nie będziesz zaskoczony, że JavaScript posiada w pełni funkcjonalny zestaw funkcji matematycznych.</p> - -<p>Artykuł omawia podstawy, które musisz znać na ten moment.</p> - -<h3 id="Typy_liczb">Typy liczb</h3> - -<p>W programowaniu, nawet na pozór łatwy system dziesiętny, który tak dobrze znamy jest bardziej skąplikowany niż mógłbyś sądzić. Używamy różnych terminów do opisania różnych typów liczb dziesiętnych, dla przykładu: </p> - -<ul> - <li><strong>Integers</strong> są to liczby całkowite, e.g. 10, 400, or -5.</li> - <li><strong>Floating point numbers</strong> (floats) have decimal points and decimal places, for example 12.5, and 56.7786543.</li> - <li><strong>Doubles</strong> are a specific type of floating point number that have greater precision than standard floating point numbers (meaning that they are accurate to a greater number of decimal places).</li> -</ul> - -<p>We even have different types of number systems! Decimal is base 10 (meaning it uses 0–9 in each column), but we also have things like:</p> - -<ul> - <li><strong>Binary</strong> — The lowest level language of computers; 0s and 1s.</li> - <li><strong>Octal</strong> — Base 8, uses 0–7 in each column.</li> - <li><strong>Hexadecimal</strong> — Base 16, uses 0–9 and then a–f in each column. You may have encountered these numbers before when setting <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">colors in CSS</a>.</li> -</ul> - -<p><strong>Before you start to get worried about your brain melting, stop right there!</strong> For a start, we are just going to stick to decimal numbers throughout this course; you'll rarely come across a need to start thinking about other types, if ever.</p> - -<p>The second bit of good news is that unlike some other programming languages, JavaScript only has one data type for numbers, both integers and decimals — you guessed it, {{jsxref("Number")}}. This means that whatever type of numbers you are dealing with in JavaScript, you handle them in exactly the same way.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Actually, JavaScript has a second number type, {{Glossary("BigInt")}}, used for very, very large integers. But for the purposes of this course, we'll just worry about <code>Number</code> values.</p> -</div> - -<h3 id="Its_all_numbers_to_me">It's all numbers to me</h3> - -<p>Let's quickly play with some numbers to reacquaint ourselves with the basic syntax we need. Enter the commands listed below into your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>.</p> - -<ol> - <li>First of all, let's declare a couple of variables and initialize them with an integer and a float, respectively, then type the variable names back in to check that everything is in order: - <pre class="brush: js notranslate">let myInt = 5; -let myFloat = 6.667; -myInt; -myFloat;</pre> - </li> - <li>Number values are typed in without quote marks — try declaring and initializing a couple more variables containing numbers before you move on.</li> - <li>Now let's check that both our original variables are of the same datatype. There is an operator called {{jsxref("Operators/typeof", "typeof")}} in JavaScript that does this. Enter the below two lines as shown: - <pre class="brush: js notranslate">typeof myInt; -typeof myFloat;</pre> - You should get <code>"number"</code> returned in both cases — this makes things a lot easier for us than if different numbers had different data types, and we had to deal with them in different ways. Phew!</li> -</ol> - -<h3 id="Useful_Number_methods">Useful Number methods</h3> - -<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> object, an instance of which represents all standard numbers you'll use in your JavaScript, has a number of useful methods available on it for you to manipulate numbers. We don't cover these in detail in this article because we wanted to keep it as a simple introduction and only cover the real basic essentials for now; however, once you've read through this module a couple of times it is worth going to the object reference pages and learning more about what's available.</p> - -<p>For example, to round your number to a fixed number of decimal places, use the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed">toFixed()</a></code> method. Type the following lines into your browser's <a href="/en-US/docs/Tools/Web_Console">console</a>:</p> - -<pre class="brush: js notranslate">let lotsOfDecimal = 1.766584958675746364; -lotsOfDecimal; -let twoDecimalPlaces = lotsOfDecimal.toFixed(2); -twoDecimalPlaces;</pre> - -<h3 id="Converting_to_number_data_types">Converting to number data types</h3> - -<p>Sometimes you might end up with a number that is stored as a string type, which makes it difficult to perform calculations with it. This most commonly happens when data is entered into a <a href="/en-US/docs/Learn/Forms">form</a> input, and the <a href="/en-US/docs/Web/HTML/Element/input/text">input type is text</a>. There is a way to solve this problem — passing the string value into the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number">Number()</a></code> constructor to return a number version of the same value.</p> - -<p>For example, try typing these lines into your console:</p> - -<pre class="brush: js notranslate">let myNumber = '74'; -myNumber + 3;</pre> - -<p>You end up with the result 743, not 77, because <code>myNumber</code> is actually defined as a string. You can test this by typing in the following:</p> - -<pre class="brush: js notranslate">typeof myNumber;</pre> - -<p>To fix the calculation, you can do this:</p> - -<pre class="brush: js notranslate">Number(myNumber) + 3;</pre> - -<h2 id="Arithmetic_operators">Arithmetic operators</h2> - -<p>Arithmetic operators are the basic operators that we use to do sums in JavaScript:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Operator</th> - <th scope="col">Name</th> - <th scope="col">Purpose</th> - <th scope="col">Example</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>+</code></td> - <td>Addition</td> - <td>Adds two numbers together.</td> - <td><code>6 + 9</code></td> - </tr> - <tr> - <td><code>-</code></td> - <td>Subtraction</td> - <td>Subtracts the right number from the left.</td> - <td><code>20 - 15</code></td> - </tr> - <tr> - <td><code>*</code></td> - <td>Multiplication</td> - <td>Multiplies two numbers together.</td> - <td><code>3 * 7</code></td> - </tr> - <tr> - <td><code>/</code></td> - <td>Division</td> - <td>Divides the left number by the right.</td> - <td><code>10 / 5</code></td> - </tr> - <tr> - <td><code>%</code></td> - <td>Remainder (sometimes called modulo)</td> - <td> - <p>Returns the remainder left over after you've divided the left number into a number of integer portions equal to the right number.</p> - </td> - <td> - <p><code>8 % 3</code> (returns 2, as three goes into 8 twice, leaving 2 left over).</p> - </td> - </tr> - <tr> - <td><code>**</code></td> - <td>Exponent</td> - <td>Raises a <code>base</code> number to the <code>exponent</code> power, that is, the <code>base</code> number multiplied by itself, <code>exponent</code> times. It was first Introduced in EcmaScript 2016.</td> - <td><code>5 ** 2</code> (returns <code>25</code>, which is the same as <code>5 * 5</code>).</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Note</strong>: You'll sometimes see numbers involved in arithmetic referred to as {{Glossary("Operand", "operands")}}.</p> -</div> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: You may sometimes see exponents expressed using the older {{jsxref("Math.pow()")}} method, which works in a very similar way. For example, in <code>Math.pow(7, 3)</code>, <code>7</code> is the base and <code>3</code> is the exponent, so the result of the expression is <code>343</code>. <code>Math.pow(7, 3)</code> is equivalent to <code>7**3</code>.</p> -</div> - -<p>We probably don't need to teach you how to do basic math, but we would like to test your understanding of the syntax involved. Try entering the examples below into your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a> to familiarize yourself with the syntax.</p> - -<ol> - <li>First try entering some simple examples of your own, such as - <pre class="brush: js notranslate">10 + 7 -9 * 8 -60 % 3</pre> - </li> - <li>You can also try declaring and initializing some numbers inside variables, and try using those in the sums — the variables will behave exactly like the values they hold for the purposes of the sum. For example: - <pre class="brush: js notranslate">let num1 = 10; -let num2 = 50; -9 * num1; -num1 ** 3; -num2 / num1;</pre> - </li> - <li>Last for this section, try entering some more complex expressions, such as: - <pre class="brush: js notranslate">5 + 10 * 3; -num2 % 9 * num1; -num2 + num1 / 8 + 2;</pre> - </li> -</ol> - -<p>Some of this last set of calculations might not give you quite the result you were expecting; the section below might well give the answer as to why.</p> - -<h3 id="Operator_precedence">Operator precedence</h3> - -<p>Let's look at the last example from above, assuming that <code>num2</code> holds the value 50 and <code>num1</code> holds the value 10 (as originally stated above):</p> - -<pre class="brush: js notranslate">num2 + num1 / 8 + 2;</pre> - -<p>As a human being, you may read this as <em>"50 plus 10 equals 60"</em>, then <em>"8 plus 2 equals 10"</em>, and finally <em>"60 divided by 10 equals 6"</em>.</p> - -<p>But the browser does <em>"10 divided by 8 equals 1.25"</em>, then <em>"50 plus 1.25 plus 2 equals 53.25"</em>.</p> - -<p>This is because of <strong>operator precedence</strong> — some operators are applied before others when calculating the result of a calculation (referred to as an <em>expression</em>, in programming). Operator precedence in JavaScript is the same as is taught in math classes in school — Multiply and divide are always done first, then add and subtract (the calculation is always evaluated from left to right).</p> - -<p>If you want to override operator precedence, you can put parentheses round the parts that you want to be explicitly dealt with first. So to get a result of 6, we could do this:</p> - -<pre class="brush: js notranslate">(num2 + num1) / (8 + 2);</pre> - -<p>Try it and see.</p> - -<div class="note"> -<p><strong>Note</strong>: A full list of all JavaScript operators and their precedence can be found in <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">Expressions and operators</a>.</p> -</div> - -<h2 id="Increment_and_decrement_operators">Increment and decrement operators</h2> - -<p>Sometimes you'll want to repeatedly add or subtract one to or from a numeric variable value. This can be conveniently done using the increment (<code>++</code>) and decrement (<code>--</code>) operators. We used <code>++</code> in our "Guess the number" game back in our <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">first splash into JavaScript</a> article, when we added 1 to our <code>guessCount</code> variable to keep track of how many guesses the user has left after each turn.</p> - -<pre class="brush: js notranslate">guessCount++;</pre> - -<div class="note"> -<p><strong>Note</strong>: These operators are most commonly used in <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">loops</a>, which you'll learn about later on in the course. For example, say you wanted to loop through a list of prices, and add sales tax to each one. You'd use a loop to go through each value in turn and do the necessary calculation for adding the sales tax in each case. The incrementor is used to move to the next value when needed. We've actually provided a simple example showing how this is done — <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html">check it out live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/maths/loop.html">look at the source code</a> to see if you can spot the incrementors! We'll look at loops in detail later on in the course.</p> -</div> - -<p>Let's try playing with these in your console. For a start, note that you can't apply these directly to a number, which might seem strange, but we are assigning a variable a new updated value, not operating on the value itself. The following will return an error:</p> - -<pre class="brush: js notranslate">3++;</pre> - -<p>So, you can only increment an existing variable. Try this:</p> - -<pre class="brush: js notranslate">let num1 = 4; -num1++;</pre> - -<p>Okay, strangeness number 2! When you do this, you'll see a value of 4 returned — this is because the browser returns the current value, <em>then</em> increments the variable. You can see that it's been incremented if you return the variable value again:</p> - -<pre class="brush: js notranslate">num1;</pre> - -<p>The same is true of <code>--</code> : try the following</p> - -<pre class="brush: js notranslate">let num2 = 6; -num2--; -num2;</pre> - -<div class="note"> -<p><strong>Note</strong>: You can make the browser do it the other way round — increment/decrement the variable <em>then</em> return the value — by putting the operator at the start of the variable instead of the end. Try the above examples again, but this time use <code>++num1</code> and <code>--num2</code>.</p> -</div> - -<h2 id="Assignment_operators">Assignment operators</h2> - -<p>Assignment operators are operators that assign a value to a variable. We have already used the most basic one, <code>=</code>, loads of times — it simply assigns the variable on the left the value stated on the right:</p> - -<pre class="brush: js notranslate">let x = 3; // x contains the value 3 -let y = 4; // y contains the value 4 -x = y; // x now contains the same value y contains, 4</pre> - -<p>But there are some more complex types, which provide useful shortcuts to keep your code neater and more efficient. The most common are listed below:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Operator</th> - <th scope="col">Name</th> - <th scope="col">Purpose</th> - <th scope="col">Example</th> - <th scope="col">Shortcut for</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>+=</code></td> - <td>Addition assignment</td> - <td>Adds the value on the right to the variable value on the left, then returns the new variable value</td> - <td style="white-space: nowrap;"><code>x += 4;</code></td> - <td style="white-space: nowrap;"><code>x = x + 4;</code></td> - </tr> - <tr> - <td><code>-=</code></td> - <td>Subtraction assignment</td> - <td>Subtracts the value on the right from the variable value on the left, and returns the new variable value</td> - <td style="white-space: nowrap;"><code>x -= 3;</code></td> - <td style="white-space: nowrap;"><code>x = x - 3;</code></td> - </tr> - <tr> - <td><code>*=</code></td> - <td>Multiplication assignment</td> - <td>Multiplies the variable value on the left by the value on the right, and returns the new variable value</td> - <td style="white-space: nowrap;"><code>x *= 3;</code></td> - <td style="white-space: nowrap;"><code>x = x * 3;</code></td> - </tr> - <tr> - <td><code>/=</code></td> - <td>Division assignment</td> - <td>Divides the variable value on the left by the value on the right, and returns the new variable value</td> - <td style="white-space: nowrap;"><code>x /= 5;</code></td> - <td style="white-space: nowrap;"><code>x = x / 5;</code></td> - </tr> - </tbody> -</table> - -<p>Try typing some of the above examples into your console, to get an idea of how they work. In each case, see if you can guess what the value is before you type in the second line.</p> - -<p>Note that you can quite happily use other variables on the right hand side of each expression, for example:</p> - -<pre class="brush: js notranslate">let x = 3; // x contains the value 3 -let y = 4; // y contains the value 4 -x *= y; // x now contains the value 12</pre> - -<div class="note"> -<p><strong>Note</strong>: There are lots of <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">other assignment operators available</a>, but these are the basic ones you should learn now.</p> -</div> - -<h2 id="Active_learning_sizing_a_canvas_box">Active learning: sizing a canvas box</h2> - -<p>In this exercise, you will manipulate some numbers and operators to change the size of a box. The box is drawn using a browser API called the {{domxref("Canvas API", "", "", "true")}}. There is no need to worry about how this works — just concentrate on the math for now. The width and height of the box (in pixels) are defined by the variables <code>x</code> and <code>y</code>, which are initially both given a value of 50.</p> - -<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 620)}}</p> - -<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">Open in new window</a></strong></p> - -<p>In the editable code box above, there are two lines marked with a comment that we'd like you to update to make the box grow/shrink to certain sizes, using certain operators and/or values in each case. Let's try the following:</p> - -<ul> - <li>Change the line that calculates x so the box is still 50px wide, but the 50 is calculated using the numbers 43 and 7 and an arithmetic operator.</li> - <li>Change the line that calculates y so the box is 75px high, but the 75 is calculated using the numbers 25 and 3 and an arithmetic operator.</li> - <li>Change the line that calculates x so the box is 250px wide, but the 250 is calculated using two numbers and the remainder (modulo) operator.</li> - <li>Change the line that calculates y so the box is 150px high, but the 150 is calculated using three numbers and the subtraction and division operators.</li> - <li>Change the line that calculates x so the box is 200px wide, but the 200 is calculated using the number 4 and an assignment operator.</li> - <li>Change the line that calculates y so the box is 200px high, but the 200 is calculated using the numbers 50 and 3, the multiplication operator, and the addition assignment operator.</li> -</ul> - -<p>Don't worry if you totally mess the code up. You can always press the Reset button to get things working again. After you've answered all the above questions correctly, feel free to play with the code some more or create your own challenges.</p> - -<h2 id="Comparison_operators">Comparison operators</h2> - -<p>Sometimes we will want to run true/false tests, then act accordingly depending on the result of that test — to do this we use <strong>comparison operators</strong>.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Operator</th> - <th scope="col">Name</th> - <th scope="col">Purpose</th> - <th scope="col">Example</th> - </tr> - <tr> - <td><code>===</code></td> - <td>Strict equality</td> - <td>Tests whether the left and right values are identical to one another</td> - <td><code>5 === 2 + 4</code></td> - </tr> - <tr> - <td><code>!==</code></td> - <td>Strict-non-equality</td> - <td>Tests whether the left and right values are <strong>not</strong> identical to one another</td> - <td><code>5 !== 2 + 3</code></td> - </tr> - <tr> - <td><code><</code></td> - <td>Less than</td> - <td>Tests whether the left value is smaller than the right one.</td> - <td><code>10 < 6</code></td> - </tr> - <tr> - <td><code>></code></td> - <td>Greater than</td> - <td>Tests whether the left value is greater than the right one.</td> - <td><code>10 > 20</code></td> - </tr> - <tr> - <td><code><=</code></td> - <td>Less than or equal to</td> - <td>Tests whether the left value is smaller than or equal to the right one.</td> - <td><code>3 <= 2</code></td> - </tr> - <tr> - <td><code>>=</code></td> - <td>Greater than or equal to</td> - <td>Tests whether the left value is greater than or equal to the right one.</td> - <td><code>5 >= 4</code></td> - </tr> - </thead> -</table> - -<div class="note"> -<p><strong>Note</strong>: You may see some people using <code>==</code> and <code>!=</code> in their tests for equality and non-equality. These are valid operators in JavaScript, but they differ from <code>===</code>/<code>!==</code>. The former versions test whether the values are the same but not whether the values' datatypes are the same. The latter, strict versions test the equality of both the values and their datatypes. The strict versions tend to result in fewer errors, so we recommend you use them.</p> -</div> - -<p>If you try entering some of these values in a console, you'll see that they all return <code>true</code>/<code>false</code> values — those booleans we mentioned in the last article. These are very useful, as they allow us to make decisions in our code, and they are used every time we want to make a choice of some kind. For example, booleans can be used to:</p> - -<ul> - <li>Display the correct text label on a button depending on whether a feature is turned on or off</li> - <li>Display a game over message if a game is over or a victory message if the game has been won</li> - <li>Display the correct seasonal greeting depending what holiday season it is</li> - <li>Zoom a map in or out depending on what zoom level is selected</li> -</ul> - -<p>We'll look at how to code such logic when we look at conditional statements in a future article. For now, let's look at a quick example:</p> - -<pre class="brush: html notranslate"><button>Start machine</button> -<p>The machine is stopped.</p> -</pre> - -<pre class="brush: js notranslate">const btn = document.querySelector('button'); -const txt = document.querySelector('p'); - -btn.addEventListener('click', updateBtn); - -function updateBtn() { - if (btn.textContent === 'Start machine') { - btn.textContent = 'Stop machine'; - txt.textContent = 'The machine has started!'; - } else { - btn.textContent = 'Start machine'; - txt.textContent = 'The machine is stopped.'; - } -}</pre> - -<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p> - -<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">Open in new window</a></strong></p> - -<p>You can see the equality operator being used just inside the <code>updateBtn()</code> function. In this case, we are not testing if two mathematical expressions have the same value — we are testing whether the text content of a button contains a certain string — but it is still the same principle at work. If the button is currently saying "Start machine" when it is pressed, we change its label to "Stop machine", and update the label as appropriate. If the button is currently saying "Stop machine" when it is pressed, we swap the display back again.</p> - -<div class="note"> -<p><strong>Note</strong>: Such a control that swaps between two states is generally referred to as a <strong>toggle</strong>. It toggles between one state and another — light on, light off, etc.</p> -</div> - -<h2 id="Test_your_skills!">Test your skills!</h2> - -<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Math">Test your skills: Math</a>.</p> - -<h2 id="Summary">Summary</h2> - -<p>In this article we have covered the fundamental information you need to know about numbers in JavaScript, for now. You'll see numbers used again and again, all the way through your JavaScript learning, so it's a good idea to get this out of the way now. If you are one of those people that doesn't enjoy math, you can take comfort in the fact that this chapter was pretty short.</p> - -<p>In the next article, we'll explore text and how JavaScript allows us to manipulate it.</p> - -<div class="note"> -<p><strong>Note</strong>: If you do enjoy math and want to read more about how it is implemented in JavaScript, you can find a lot more detail in MDN's main JavaScript section. Great places to start are our <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a> and <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a> articles.</p> -</div> - -<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> -</ul> diff --git a/files/pl/learn/server-side/django/index.html b/files/pl/learn/server-side/django/index.html deleted file mode 100644 index 1eb4d61586..0000000000 --- a/files/pl/learn/server-side/django/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Django Web Framework (Python) -slug: Learn/Server-side/Django -tags: - - Beginner - - CodingScripting - - Intro - - Learn - - NeedsTranslation - - Python - - Server-side programming - - TopicStub - - django -translation_of: Learn/Server-side/Django ---- -<div>{{LearnSidebar}}</div> - -<p>Django is an extremely popular and fully featured server-side web framework, written in Python. This module shows you why Django is one of the most popular web server frameworks, how to set up a development environment, and how to start using it to create your own web applications.</p> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>Before starting this module you don't need to have any knowledge of Django. Ideally, you would need to understand what server-side web programming and web frameworks are by reading the topics in our <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a> module.</p> - -<p>A general knowledge of programming concepts and <a href="/en-US/docs/Glossary/Python">Python</a> is recommended, but is not essential to understanding the core concepts.</p> - -<div class="note"> -<p><strong>Note</strong>: Python is one of the easiest programming languages for novices to read and understand. That said, if you want to understand this module better, there are numerous free books and tutorials available on the Internet to help you out (new programmers might want to check out the <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python for Non Programmers</a> page on the python.org wiki).</p> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></dt> - <dd>In this first Django article we answer the question "What is Django?" and give you an overview of what makes this web framework special. We'll outline the main features, including some advanced functionality that we won't have time to cover in detail in this module. We'll also show you some of the main building blocks of a Django application, to give you an idea of what it can do before you set it up and start playing.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></dt> - <dd>Now that you know what Django is for, we'll show you how to set up and test a Django development environment on Windows, Linux (Ubuntu), and macOS — whatever common operating system you are using, this article should give you what you need to be able to start developing Django apps.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></dt> - <dd>The first article in our practical tutorial series explains what you'll learn, and provides an overview of the "local library" — an example website we'll be working through and evolving in subsequent articles.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></dt> - <dd>This article shows how you can create a "skeleton" website project as a basis, which you can then go on to populate with site-specific settings, urls, models, views, and templates.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></dt> - <dd>This article shows how to define models for the <em>LocalLibrary</em> website — models represent the data structures we want to store our app's data in, and also allow Django to store data in a database for us (and modify it later on). It explains what a model is, how it is declared, and some of the main field types. It also briefly shows a few of the main ways you can access model data.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></dt> - <dd>Now that we've created models for the <em>LocalLibrary </em>website, we'll use the Django Admin site to add some "real" book data. First we'll show you how to register the models with the admin site, then we'll show you how to login and create some data. At the end we show some ways in which you can further improve the presentation of the admin site.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></dt> - <dd>We're now ready to add the code to display our first full page — a home page for the <em>LocalLibrary</em> that shows how many records we have of each model type and provides sidebar navigation links to our other pages. Along the way we'll gain practical experience in writing basic URL maps and views, getting records from the database, and using templates.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></dt> - <dd>This tutorial extends our <em>LocalLibrary</em> website, adding list and detail pages for books and authors. Here we'll learn about generic class-based views, and show how they can reduce the amount of code you have to write for common use cases. We'll also go into URL handling in greater detail, showing how to perform basic pattern matching.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></dt> - <dd>This tutorial extends our <em>LocalLibrary</em> website, adding a session-based visit-counter to the home page. This is a relatively simple example, but it does show how you can use the session framework to provide persistent behaviour for anonymous users in your own sites.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></dt> - <dd>In this tutorial we'll show you how to allow users to login to your site with their own accounts, and how to control what they can do and see based on whether or not they are logged in and their <em>permissions</em>. As part of this demonstration we'll extend the <em>LocalLibrary</em> website, adding login and logout pages, and user- and staff-specific pages for viewing books that have been borrowed.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></dt> - <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Django, and in particular the easiest way to write forms to create, update, and delete model instances. As part of this demonstration we'll extend the <em>LocalLibrary</em> website so that librarians can renew books, and create, update, and delete authors using our own forms (rather than using the admin application).</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></dt> - <dd>As websites grow they become harder to test manually — not only is there more to test, but, as the interactions between components become more complex, a small change in one area can require many additional tests to verify its impact on other areas. One way to mitigate these problems is to write automated tests, which can easily and reliably be run every time you make a change. This tutorial shows how to automate <em>unit testing</em> of your website using Django's test framework.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></dt> - <dd>Now you've created (and tested) an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></dt> - <dd>Protecting user data is an essential part of any website design. We previously explained some of the more common security threats in the article <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> — this article provides a practical demonstration of how Django's built-in protections handle such threats.</dd> -</dl> - -<h2 id="Assessments">Assessments</h2> - -<p>The following assessment will test your understanding of how to create a website using Django, as described in the guides listed above.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></dt> - <dd>In this assessment you'll use some of the knowledge you've learned from this module to create your own blog.</dd> -</dl> diff --git a/files/pl/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/pl/learn/tools_and_testing/client-side_javascript_frameworks/index.html deleted file mode 100644 index 5ddb035fab..0000000000 --- a/files/pl/learn/tools_and_testing/client-side_javascript_frameworks/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Understanding client-side JavaScript frameworks -slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks -tags: - - Beginner - - Frameworks - - JavaScript - - Learn - - NeedsTranslation - - TopicStub - - client-side -translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience.</p> - -<p class="summary">As an aspiring front-end developer, it can be hard to work out where to begin when learning frameworks — there are so many different frameworks to choose from, new ones appear all the time, they mostly work in a similar way but do some things differently, and there are some specific things to be careful about when using frameworks.</p> - -<p class="summary">In this set of articles, we are aiming to give you a comfortable starting point to help you begin learning frameworks. We are not aiming to exhaustively teach you everything you need to know about React/ReactDOM, or Vue, or some other specific framework; the framework teams' own docs do that job already. Instead, we want to back up and first answer more fundamental questions such as:</p> - -<ul> - <li class="summary">Why should I use a framework? What problems do they solve for me?</li> - <li class="summary">What questions should I ask when trying to choose a framework? Do I even need to use a framework?</li> - <li class="summary">What features do frameworks have? How do they work in general, and how do frameworks' implementations of these features differ?</li> - <li class="summary">How do they relate to "vanilla" JavaScript or HTML?</li> -</ul> - -<p class="summary">After that, we'll provide some tutorials covering the essentials of some of the major frameworks, to provide you with enough context and familiarity to start going into greater depth yourself. We want you to go forward and learn about frameworks in a pragmatic way that doesn't forget about web platform fundamental best practices such as accessibility.</p> - -<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Get started now, with "Introduction to client-side frameworks"</a></strong></p> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and especially <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</p> - -<p>Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.</p> - - -<div class="callout"> -<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> - -<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> - -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> -</div> - -<h2 id="Introductory_guides">Introductory guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introduction to client-side frameworks</a></dt> - <dd>We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Framework main features</a></dt> - <dd>Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level and the differences between them.</dd> -</dl> - -<h2 id="React_tutorials">React tutorials</h2> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.</p> - -<p>If you need to check your code against our version, you can find a finished version of the sample React app code in our <a href="https://github.com/mdn/todo-react">todo-react repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>.</p> -</div> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. Getting started with React</a></dt> - <dd>In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Beginning our React todo list</a></dt> - <dd>Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic <code>App</code> component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Componentizing our React app</a></dt> - <dd>At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article, we will show you a sensible way to break our app up into components.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. React interactivity: Events and state</a></dt> - <dd>With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. React interactivity: Editing, filtering, conditional rendering</a></dt> - <dd>As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accessibility in React</a></dt> - <dd>In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screen reader users.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. React resources</a></dt> - <dd>Our final article provides you with a list of React resources that you can use to go further in your learning.</dd> -</dl> - -<h2 id="Ember_tutorials">Ember tutorials</h2> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.</p> - -<p>If you need to check your code against our version, you can find a finished version of the sample Ember app code in the <a href="https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc">ember-todomvc-tutorial repository</a>. For a running live version, see <a href="https://nullvoxpopuli.github.io/ember-todomvc-tutorial/">https://nullvoxpopuli.github.io/ember-todomvc-tutorial/</a> (this also includes a few additional features not covered in the tutorial).</p> -</div> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Getting started with Ember</a></dt> - <dd>In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Ember app structure and componentization</a></dt> - <dd>In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Ember interactivity: Events, classes and state</a></dt> - <dd>At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Ember Interactivity: Footer functionality, conditional rendering</a></dt> - <dd>Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routing in Ember</a></dt> - <dd>In this article we learn about routing or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ember resources and troubleshooting</a></dt> - <dd>Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.</dd> -</dl> - -<h2 id="Vue_tutorials">Vue tutorials</h2> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Vue tutorials last tested in May 2020, with Vue 2.6.11.</p> - -<p>If you need to check your code against our version, you can find a finished version of the sample Vue app code in our <a href="https://github.com/mdn/todo-vue">todo-vue repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a>.</p> -</div> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Getting started with Vue</a></dt> - <dd>Now let's introduce Vue, the third of our frameworks. In this article, we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Creating our first Vue component</a></dt> - <dd>Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props and saving data state.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendering a list of Vue components</a></dt> - <dd><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">At this point we've got a fully working component; we're now ready to add multiple <code>ToDoItem</code> components to our App. In this article we'll look at adding a set of todo item data to our <code>App.vue</code> component, which we'll then loop through and display inside <code>ToDoItem</code> components using the <code>v-for</code> directive. </span></dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Adding a new todo form: Vue events, methods, and models</a></dt> - <dd>We now have sample data in place and a loop that takes each bit of data and renders it inside a <code>ToDoItem</code> in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that, we'll need a text <code><input></code>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styling Vue components with CSS</a></dt> - <dd>The time has finally come to make our app look a bit nicer. In this article, we'll explore the different ways of styling Vue components with CSS.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Using Vue computed properties</a></dt> - <dd>In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods but only re-run when one of their dependencies changes.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Vue conditional rendering: editing existing todos</a></dt> - <dd>Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely <code>v-if</code> and <code>v-else</code> — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Focus management with Vue refs</a></dt> - <dd>We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Vue resources</a></dt> - <dd>Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.</dd> -</dl> - -<h2 id="Which_frameworks_did_we_choose">Which frameworks did we choose?</h2> - -<p>We are publishing our initial set of articles with guides focusing on three of the major frameworks out there — React/ReactDOM, Ember, and Vue. There is a variety of reasons for this:</p> - -<ul> - <li>They are popular choices that will be around for a while — like with any software tool, it is good to stick with actively-developed choices that are likely to not be discontinued next week, and which will be desirable additions to your skill set when looking for a job.</li> - <li>They have strong communities and good documentation. It is very important to be able to get help with learning a complex subject, especially when you are just starting out.</li> - <li>We don't have the resources to cover <em>all</em> modern frameworks. That list would be very difficult to keep up-to-date anyway, as new ones appear all the time.</li> - <li>As a beginner, trying to choose what to focus on out of the huge number of choices available is a very real problem. Keeping the list short is therefore helpful.</li> -</ul> - -<p>We want to say this upfront — we've <strong>not</strong> chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. We just think they score highly on the above criteria.</p> - -<p>Note that we were hoping to have more frameworks included upon initial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. If your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! Get in touch with us via <a href="https://wiki.mozilla.org/Matrix">Matrix</a>, or <a href="https://discourse.mozilla.org/c/mdn">Discourse</a>, or drop us a mail on the <a href="mailto:mdn-admins@mozilla.org">mdn-admins list</a>.</p> diff --git a/files/pl/mdn/contribute/howto/create_and_edit_pages/index.html b/files/pl/mdn/contribute/howto/create_and_edit_pages/index.html deleted file mode 100644 index 4fb13dadc2..0000000000 --- a/files/pl/mdn/contribute/howto/create_and_edit_pages/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: How to create and edit pages -slug: MDN/Contribute/Howto/Create_and_edit_pages -translation_of: MDN/Contribute/Howto/Create_and_edit_pages ---- -<div>{{MDNSidebar}}</div> - -<p><span class="seoSummary">Ten artykuł wdraża nowe osoby wspierające do procesu edycji istniejących stron oraz tworzenia nowych.</span></p> - -<h2 id="Edycja_istniejącej_strony">Edycja istniejącej strony</h2> - -<p>Aby edytować stronę:</p> - -<ol> - <li>Jeśli znajdujesz się na stronie MDN Web Docs w wersji tylko do odczytu (https://developer.mozilla.org), kliknij <strong>Edit in wiki</strong> w nagłówku artykułu. Przeniesiesz się do edytowalnej wersji wiki strony(https://wiki.developer.mozilla.org), ale nie otworzy to jeszcze interfejsu edycji.</li> - <li>Kliknij przycisk <strong>Edit</strong> w nagłówku artykułu wiki strony.</li> - <li>Strona się odświeży wraz z interfejsem edycji gdzie możesz bezpośrednio dodawać i usuwać zawartość strony.</li> - <li>Dodawaj paragrafy, usuwaj tekst, wstawiaj nagłówki i wykonuj więcej podstawowych operacji związanych z pisaniem i edytowaniem.</li> -</ol> - -<p>Zobacz przewodnik <a href="/en-US/docs/MDN/Contribute/Editor/Basics">Editor UI elements</a> w <a href="/en-US/docs/MDN/Contribute/Editor">MDN Editor guide</a> by uzyskać więcej informacji dotyczących wbudowanego edytora <strong>MDN.</strong></p> - -<h3 id="Podgląd_zmian">Podgląd zmian</h3> - -<p>Aby zobaczyć zmiany:</p> - -<ul> - <li>Kliknij przycisk <strong>Podgląd</strong> wewnątrz funkcji edycji, na górze lub na dole strony.</li> - <li>Otworzy się podgląd strony pokazujący twoje poprawki, w nowym oknie lub karcie.</li> - <li>Za każdym razem, kiedy klikniesz ten przycisk, odświeżysz stronę podglądu wraz z ostanimi zmianami.</li> -</ul> - -<p>Uważaj! Podglądanie strony <strong>nie zachowa</strong> twojego postępu prac. Nie zamykaj karty edycji dopóki nie zapiszesz zmian.</p> - -<h3 id="Komentarz_do_wersji">Komentarz do wersji</h3> - -<p>After previewing your changes, you will want to <em>save your revision</em>. Before you <strong>save</strong>, look for the revision comment box, below the editing box, leaving a comment to inform other contributors why you made changes. For example, you might have added a new section, changed some words to make the terminology more consistent, rewritten a paragraph to clarify the language, or removed information because it was redundant.</p> - -<h3 id="Table_of_Contents">Table of Contents</h3> - -<p>The 'On this Page' section of an article, is an auto-generated list of links to the headings on the page. The wording of these can be edited via the headings. It's also possible to remove a table of contents or decrease its number of links, by selecting 'Edit Page Title and Properties', changing the value of the "TOC" drop down.</p> - -<h3 id="Tags">Tags</h3> - -<p>You can add or remove tags, which describe the page content and purpose, below the editing section. See <a href="/en-US/docs/MDN/Contribute/Tagging">How to properly tag pages</a>, for information on which tags to apply.</p> - -<h3 id="Review_needed">Review needed?</h3> - -<p>If an expert or experienced contributor should review your edits, please request a technical review (for code, API's, or technologies), and/or an editorial review (for prose, grammar, and content), making sure the appropriate box is checked before you save.</p> - -<h3 id="Attach_files">Attach files</h3> - -<p>Attaching files requires a special user privilege. See <a href="/en-US/docs/MDN/Contribute/Editor/Basics/Attachments">Attachments in the MDN editor</a> for details, including how to request the upload privilege.</p> - -<h3 id="Publish_Discard_or_Keep_editing">Publish, Discard, or Keep editing</h3> - -<p>When you finish editing and are happy with your preview, publish your work and comments by clicking the <em>green</em> <strong>Publish</strong> button, to the <strong>right of the page title</strong>, or towards the <strong>bottom of the page</strong>. If you wish to continue working, click <strong>Publish and keep editing</strong>, which publishes your changes and keeps the edit interface open.</p> - -<p>If you change your mind, you can discard edits, by clicking the <em>red</em> <strong>Discard</strong> button. Note that discarding changes <em>permanently</em> discards them.</p> - -<p>Pressing <strong>Enter</strong> in the Revision Comment field is equivalent to clicking <strong>Publish and Keep Editing</strong>.</p> - -<div class="note"> -<p>Note: If attempting to save, but changes are rejected as invalid, and you feel the content is appropriate for MDN, <a href="mailto:mdn-admins@mozilla.com?subject=MDN%3A%20Content%20Rejection%20Appeal&body=%3CDescribe%20the%20content%20you%20were%20trying%20to%20save%20and%20where%20you%20were%20trying%20to%20place%20it.%3E">email the MDN admin team</a> for assistance.</p> -</div> - -<h2 id="Getting_page-creation_permissions">Getting page-creation permissions</h2> - -<p>For security reasons, newly-created accounts don't have the ability to create new pages. If you try to do so, you'll see a page instructing you how to get the page created. There are two options:</p> - -<ul> - <li><strong>Ask for the page to be created for you.</strong> To do this, <a href="https://github.com/mdn/sprints/issues/new?template=issue-template.md&projects=mdn/sprints/2&labels=user-report">file a documentation request issue</a>, with the title "Create page: <page title>". Fill out the URL field of the template with the location on MDN where you'd like the page to go if you know where to place it. In the comment text, include information on why this page needs creating.</li> - <li><strong>Request page creation privileges.</strong> If you request page creation privileges, and they're granted to you, you'll be able to add new pages by following the instructions here. To request these privileges, <a href="mailto:mdn-admins@mozilla.org">email the MDN admin</a> team with your request. Include your username, why you would like to have the ability to create new pages. For instance, you're documenting a new API which involves many new pages, or you'd like to add new terms to the glossary. You should also have made useful contributions to this site's content, and been a contributor for some time. This length of time, and the other factors are collectively considered.</li> -</ul> - -<h2 id="Creating_a_new_page">Creating a new page</h2> - -<p>Once you have page-creation permission, you can begin creating pages.</p> - -<p>If you do not know where to place a new article, <strong>do not worry.</strong> Put it anywhere, we will find it, move to where it belongs, or merge it into existing content. Whatever makes the most sense. Do not worry about making it perfect. We have happy helper gnomes who help to make your content clean and rather luscious.</p> - -<p>There are a few ways to create a new page:</p> - -<ul> - <li><a href="#Missing_page_link">'Missing page' link.</a></li> - <li><a href="#New_page_without_link">New page without a link.</a></li> - <li><a href="#Subpage_of_an_existing_page">A subpage of an existing page.</a></li> - <li><a href="#Clone_of_an_existing_page">Clone of an existing page.</a></li> - <li><a href="#Link_from_an_existing_page">Link from an existing page.</a></li> -</ul> - -<h3 id="Missing_page_link">'Missing page' link</h3> - -<p>As with most wikis, it is possible to create a link to a page that is yet to exist. For example, an author might create a list of all the members of an API, before creating the pages for those members. On MDN, links to non-existent pages are typically displayed in red.</p> - -<p>To create a page from a 'missing page' link:</p> - -<ol> - <li>Log into MDN, and have page-creation permission. If not logged in, clicking a 'missing page' link results in a 404 (page not found) error.</li> - <li>Click the 'missing page' link. If you have page creation permission, the <a href="/en-US/docs/MDN/Contribute/Editor">MDN Editor UI</a> opens, ready for you to create the missing page.</li> - <li>Write the content of the page, and save it.</li> -</ol> - -<h3 id="New_page_without_link">New page without link</h3> - -<p><em>To create a new page without linking from another page</em>, enter a unique page name in the URL field of your browser. For example, if you enter:</p> - -<pre class="language-html notranslate">https://wiki.developer.mozilla.org/en-US/docs/FooBar</pre> - -<p>MDN Creates a new page, with the title "FooBar", opening the editor for you to add new content. Refer to the <a href="#Editing_an_existing_page">Editing an existing page</a> section of this article, for information on how to use the editor mode.</p> - -<p><em>To create a new page without linking from another page</em>:</p> - -<ol> - <li>Log in, and have page-creation permission.</li> - <li>Enter the following in the URL field of your browser:</li> -</ol> - -<pre class="language-html notranslate">https://wiki.developer.mozilla.org/en-US/docs/new</pre> - -<p>MDN Creates a new page, with a place for a title, opening the editor to add new content to this page. Refer to <a href="#Editing_an_existing_page">Editing an existing page</a>, for information on using editor mode.</p> - -<h3 id="Subpage_of_an_existing_page">Subpage of an existing page</h3> - -<p>To create a page you want to be below an existing page, in the page hierarchy:</p> - -<ol> - <li>If needed, navigate to the wiki site by clicking <strong>Edit in wiki</strong> in the article header.</li> - <li>On the 'parent' page, click the <strong>Advanced</strong> menu (the gear icon in the toolbar), then click <strong>New sub-page</strong>.</li> - <li>An editor view opens for creating a new document.</li> - <li>Add a title for this document, in the <strong>Title</strong> field.</li> - <li>Change the <strong>Slug</strong> field, if needed. For example, if the title is long, and a shorter URL seems appropriate. This field is automatically filled by the editor, substituting underscores for spaces found in the title, changing only the last part of the URL.</li> - <li>In the <strong>TOC</strong> field, select heading levels you want to be displayed in the table of contents for the page. Or select 'No table of contents', if one is not needed.</li> - <li>Write content of the page in the editor pane, saving your changes. Refer to <a href="#Editing_an_existing_page">Editing an existing page</a>, for further information on using editor mode.</li> -</ol> - -<h3 id="Clone_of_an_existing_page">Clone of an existing page</h3> - -<p>If there is an existing page, whose format you wish to use as a base for your new page, you can 'clone' that page, and then change its content.</p> - -<ol> - <li>If needed, navigate to the wiki site by clicking <strong>Edit in wiki</strong> in the article header.</li> - <li>On the original page, click the <strong>Advanced</strong> menu (the gear icon in the toolbar), and click <strong>Clone this page</strong>. An editor view opens, for creating a new document.</li> - <li>Change the <strong>Title</strong> of the page, as appropriate for the new content. The <strong>Slug</strong> field is updated automatically as you change the <strong>Title</strong> field.</li> - <li>Change the path portion of the <strong>Slug</strong> field, as needed, to put the new document in a different location in the document hierarchy. In most cases, this is not needed. A cloned page often has similar content to its original, and need to be in a similar location.</li> - <li>In the <strong>TOC</strong> field, select the heading levels you want to be automatically displayed in the table of contents for this page. Or select 'No table of contents', if one is not needed.</li> - <li>Write your content in the editor pane, saving your changes. Refer to <a href="#Editing_an_existing_page">Editing an existing page</a>, for more information on using editor mode.</li> -</ol> - -<h3 id="Link_from_an_existing_page">Link from an existing page</h3> - -<p>This is a bit of a hybrid. You can create a link on another page, then click the link you just inserted, to create the new page:</p> - -<ol> - <li>Enter the name of your new page, anywhere that makes sense in the text of an existing page.</li> - <li>Highlight this new name, and <strong>click the Link icon (<img alt="" src="https://developer.mozilla.org/files/3810/link-icon.png" style="float: left; height: 28px; width: 29px;">) </strong>in the editor's toolbar. The <strong>'Update Link'</strong> dialog opens, with the highlighted text in the <strong>'Link To'</strong> field.</li> - <li><strong>"/en-US/docs/"</strong> is inserted by default, to the beginning of the URL field.<em> Enter the name </em>of the page after "/en-US/docs/". The page name does not have to be the same as the link text.</li> - <li>Click <strong>OK</strong>, to create and insert the link.</li> -</ol> - -<p>If the page does not yet exist, the link is displayed in red. If the page <em>does</em> exist, the link is displayed blue. If you want to create a new page, but the page title you desire is already taken, check if it makes sense helping edit and improve the page already there. Otherwise, think of a unique title for your new page, and create a link for it. Refer to <a href="https://developer.mozilla.org/Project:en/Page_Naming_Guide" title="Project:en/Page_Naming_Guide">page naming guide</a> for guidelines.</p> - -<p>To add content to your new page, click on the red link you just created, after saving and closing the editor. The new page opens in editor mode, enabling you to start writing. Refer to <a href="#Editing_an_existing_page">Editing an existing page</a>, for further information on using editor mode.</p> - -<h2 id="Refreshing_page_content">Refreshing page content</h2> - -<p>MDN support of KumaScript macros, and integration of content from other pages can sometimes be hampered by the need for caching of pages, for performance reasons. Pages are built from their source, and this output is cached for future requests. From that moment on, any macros (templates), or integrations (using the macro<span class="templateLink"><code><a href="https://developer.mozilla.org/en-US/docs/Template:Page">Page</a></code></span>), will not reflect later changes made to the macro, its output, or the contents of the integrated material.</p> - -<ul> - <li>To manually update a page, force-refresh your Web browser. MDN detects this, triggering a page rebuild, pulling in updated macro output, and integrating page content.</li> - <li>You can also configure pages to periodically rebuild, automatically. This should not be done unless you expect the page to update frequently. See <a href="/en-US/docs/MDN/Contribute/Tools/Page_regeneration">Page regeneration</a>, for detailed information.</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/MDN/Contribute/Editor">MDN editor guide</a></li> - <li><a href="/en-US/docs/MDN/Contribute/Content/Style_guide">MDN style guide</a></li> -</ul> diff --git a/files/pl/mdn/contribute/howto/tag/index.html b/files/pl/mdn/contribute/howto/tag/index.html deleted file mode 100644 index 8cfb4c7145..0000000000 --- a/files/pl/mdn/contribute/howto/tag/index.html +++ /dev/null @@ -1,376 +0,0 @@ ---- -title: How to properly tag pages -slug: MDN/Contribute/Howto/Tag -translation_of: MDN/Contribute/Howto/Tag ---- -<div>{{MDNSidebar}}</div><p><strong>Article tags</strong> are an important way to put visitors in touch with helpful content. Each page should normally have several tags to help keep content organized. <span class="seoSummary">This page explains the best way to tag pages so that our readers can find information and we can keep ourselves organized.</span></p> - -<p>For a help with the user interface for editing tags, see the <a href="/en-US/docs/MDN/Contribute/Editor/Basics#The_tags_box">tagging section</a> in our editor guide.</p> - -<p>Please use tags properly as explained below. If you don't, our automated tools will not correctly generate lists of content, landing pages, and cross-linking of articles.</p> - -<h2 id="How_MDN_uses_tags">How MDN uses tags</h2> - -<p>Tags get used on MDN several ways:</p> - -<dl> - <dt>Document categorization</dt> - <dd>What type of document is it? Is it a reference? A tutorial? A landing page? Our visitors can use these tags to filter searches, so they're really important!</dd> - <dt>Topic identification</dt> - <dd>What is the article about? Is it about an API? The DOM? Graphics? Again, these tags are important because they can filter searches.</dd> - <dt>Technology status</dt> - <dd>What's the status of the technology? Is it non-standard? Obsolete or deprecated? Experimental?</dd> - <dt>Skill level</dt> - <dd>For tutorials and guides, how advanced is the material covered by the article?</dd> - <dt>Document metadata</dt> - <dd>The writing community uses tags to keep track of which pages need what kind of work.</dd> -</dl> - -<h2 id="Tag_type_guide">Tag type guide</h2> - -<p>Here's a quick guide to the types of tags and possible values for them.</p> - -<h3 id="Document_category">Document category</h3> - -<p>When you tag an article with one of these categories, you help the automated tools more accurately generate landing pages, tables of contents, and so on. Our new search system will also use these terms so that our visitors can locate reference or guide information at will.</p> - -<p>We use the following category names as standard tagging terms:</p> - -<dl> - <dt><code>{{Tag("Intro")}}</code></dt> - <dd>The article provides introductory material about a topic. Ideally each technology area should have only one "Intro".</dd> - <dt><code>{{Tag("Featured")}}</code></dt> - <dd>The article is critical and will display prominently on landing pages. Use this tag sparingly (never more than three documents in each documentation area).</dd> - <dt><code>{{Tag("Reference")}}</code></dt> - <dd>The article contains reference material about an API, element, attribute, property, or the like.</dd> - <dt><code>{{Tag("Landing")}}</code></dt> - <dd>The page is a landing page.</dd> - <dt><code>{{Tag("Guide")}}</code></dt> - <dd>The article is a how-to or guide page.</dd> - <dt><code>{{Tag("Example")}}</code></dt> - <dd>The article is a code sample page, or has code samples (that is, actual snippets of useful code, not one-line "syntax examples").</dd> -</dl> - -<h3 id="Topic">Topic</h3> - -<p>By identifying the article's topic area, you are helping generate better search results (and landing pages and navigation as well).</p> - -<p>While there's some room for flexibility here as we identify new topic areas, we try to limit ourselves to the names of APIs or technologies. Some useful examples:</p> - -<ul> - <li><code>{{Tag("HTML")}}</code></li> - <li><code>{{Tag("CSS")}}</code></li> - <li><code>{{Tag("JavaScript")}}</code> (notice the capital "S"!)</li> - <li><code>{{Tag("Document")}}</code></li> - <li><code>{{Tag("DOM")}}</code></li> - <li><code>{{Tag("API")}}</code> for each interface, method and property.</li> - <li><code>{{Tag("Method")}}</code> for each method of an API</li> - <li><code>{{Tag("Property")}}</code> for each property of an API</li> - <li><code>{{Tag("Graphics")}}</code></li> - <li><code>{{Tag("Firefox OS")}}</code></li> - <li><code>{{Tag("Gecko")}}</code></li> - <li><code>{{Tag("XUL")}}</code></li> - <li><code>{{Tag("XPCOM")}}</code></li> - <li><code>{{Tag("SVG")}}</code></li> - <li><code>{{Tag("WebGL")}}</code></li> - <li><code>{{Tag("Element")}}</code></li> - <li><code>{{Tag("Node")}}</code></li> - <li><code>{{Tag("Tools")}}</code></li> - <li><code>{{Tag("Web")}}</code></li> -</ul> - -<p>In general, your topic identification tag should be the name of an interface with a number of related pages (like <a href="/en-US/docs/Web/API/Node" title="/en-US/docs/Web/API/Node">Node</a>, which has many pages for its various properties and methods), or the name of an overall technology type. You might tag a page about WebGL with <code>Graphics</code> and <code>WebGL</code>, for example, but a page about {{HTMLElement("canvas")}} with <code>HTML</code>, <code>Element</code>, <code>Canvas</code>, and <code>Graphics</code>.</p> - -<h3 id="Technology_status">Technology status</h3> - -<p>To help the reader understand how viable a technology is, we use tags to label pages as to the status of the technology's specification. This isn't as detailed as actually explaining what the spec is and how far the technology has come in the specification process (that's what the Specifications table is for), but it helps the reader judge, at a glance, whether it's a good idea to use the technology described in the article.</p> - -<p>Here are possible values for these tags:</p> - -<dl> - <dt><code>{{Tag("Non-standard")}}</code></dt> - <dd>Indicates that the technology or API described on the page is not part of a standard, but is considered stable in any implementing browser(s). If you don't use this tag, your readers will assume the technology is standard. The compatibility table on the page should clarify which browser(s) support this technology or API.</dd> - <dt><code>{{Tag("Deprecated")}}</code></dt> - <dd>The technology or API covered on the page is marked as deprecated in the specification, and is likely to eventually be removed, but is generally still available in current versions of browsers.</dd> - <dt><code>{{Tag("Obsolete")}}</code></dt> - <dd>The technology or API has been deemed obsolete and has been removed (or actively being removed) from all or most current browsers.</dd> - <dt><code>{{Tag("Experimental")}}</code></dt> - <dd>The technology is not standardized, and is an experimental technology or API that may or may not ever become part of a standard. It is also subject to change in the browser engine (typically only one) that implements it.</dd> - <dt><code>{{Tag("Needs Privileges")}}</code></dt> - <dd>The API requires privileged access to the device on which the code is running.</dd> - <dt><code>{{Tag("Certified Only")}}</code></dt> - <dd>The API only works in certified code.</dd> -</dl> - -<p>These tags are no excuse to leave out the <a href="/en-US/docs/Project:Compatibility_tables" title="/en-US/docs/Project:Compatibility_tables">compatibility table</a> in your article!</p> - -<h3 id="Skill_level">Skill level</h3> - -<p>Use the skill-level tag type only for guides and tutorials (that is, pages tagged <code>Guide</code>) to help users choose tutorials based on how familiar they are with a technology. There are three values for this:</p> - -<dl> - <dt><code>{{Tag("Beginner")}}</code></dt> - <dd>Articles designed to introduce the reader to a technology they've never used or have only a passing familiarity with.</dd> - <dt><code>{{Tag("Intermediate")}}</code></dt> - <dd>Articles for users who have gotten started with the technology but aren't experts.</dd> - <dt><code>{{Tag("Advanced")}}</code></dt> - <dd>Articles about stretching the capabilities of a technology and of the reader.</dd> -</dl> - -<h3 id="Document_metadata">Document metadata</h3> - -<p>The writing community uses tags to label articles as requiring specific types of work. Here's a list of the ones we use most:</p> - -<dl> - <dt><code>{{Tag("junk")}}</code></dt> - <dd>The article needs to be deleted.</dd> - <dt><code>{{Tag("NeedsContent")}}</code></dt> - <dd>The article is a stub, or is otherwise lacking information. This tag means that someone should review the content and add more details and/or finish writing the article.</dd> - <dt><code>{{Tag("NeedsExample")}}</code></dt> - <dd>The article needs one or more examples created to help illustrate the article's point. These examples should use the <a href="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples" title="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples">live sample system</a>.</dd> - <dt><code>{{Tag("NeedsLiveSamples")}}</code></dt> - <dd>The article has one or more examples that need to be updated to use the <a href="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples" title="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples">live sample system</a>.</dd> - <dt><code>{{Tag("NeedsUpdate")}}</code></dt> - <dd>The content is out of date and needs to updating.</dd> - <dt><code>{{Tag("l10n:exclude")}}</code></dt> - <dd>The content is not really worth localizing and will not appear on localization status pages.</dd> - <dt><code>{{Tag("l10n:priority")}}</code></dt> - <dd>The content is important and should be marked as a priority for MDN translators. Shows up in an extra priority table on localization status pages.</dd> -</dl> - -<h3 id="Web_Literacy_Map">Web Literacy Map</h3> - -<p>The <a href="https://webmaker.org" rel="external">WebMaker</a> project, through the <a href="https://webmaker.org/literacy" rel="external">Web Literacy Map</a>, has defined skills needed to optimally read, write, and participate on the Web. We use Web literacy skills as tags on MDN to help our users find the resources that best suit their needs:</p> - -<dl> - <dt>{{Tag("Navigation")}}</dt> - <dd>The article includes information about how to browse the Web.</dd> - <dt>{{Tag("WebMechanics")}}</dt> - <dd>The content has information about how the Web is organized and how it works.</dd> - <dt>{{Tag("Search")}}</dt> - <dd>The article explains how to find information, people, and resources on the Web.</dd> - <dt>{{Tag("Credibility")}}</dt> - <dd>The information in the article helps the reader understand how to critically evaluate information they find on the Web</dd> - <dt>{{Tag("Security")}}</dt> - <dd>The article provides information about how to keep systems, identities, and content safe.</dd> - <dt>{{Tag("Composing")}}</dt> - <dd>The document explains how to create and curate content for the Web.</dd> - <dt>{{Tag("Remixing")}}</dt> - <dd>The article teaches how to modify existing Web resources to create something new.</dd> - <dt>{{Tag("Design")}}</dt> - <dd>Documentation explaining how to enhance visual aesthetics and user experience.</dd> - <dt>{{Tag("Accessibility")}}</dt> - <dd>Documents which describe how to communicate in a universally-recognizable way.</dd> - <dt>{{Tag("CodingScripting")}}</dt> - <dd>How to write code and/or to create interactive experiences on the Web.</dd> - <dt>{{Tag("Infrastructure")}}</dt> - <dd>The document explains how the Internet's technical stack works.</dd> - <dt>{{Tag("Sharing")}}</dt> - <dd>The article's content covers ways to create resources with others.</dd> - <dt>{{Tag("Collaborating")}}</dt> - <dd>The document provides information about how to work with other people.</dd> - <dt>{{Tag("Community")}}</dt> - <dd>The article details how to get involved in Web communities and to understand how they work.</dd> - <dt>{{Tag("Privacy")}}</dt> - <dd>The material helps to examine the consequences of sharing data online.</dd> - <dt>{{Tag("OpenPractices")}}</dt> - <dd>The article provid=deshow to help keep the Web accessible to everybody</dd> -</dl> - -<h2 id="Putting_it_all_together">Putting it all together</h2> - -<p>So to each page you assign tags from several tag types, for example</p> - -<dl> - <dt>A tutorial about WebGL for beginners</dt> - <dd><code>WebGL</code>, <code>Graphics</code>, <code>Guide</code>, <code>Beginner</code></dd> - <dt>Reference page for {{HTMLElement("canvas")}}</dt> - <dd><code>Canvas</code>, <code>HTML</code>, <code>Element</code>, <code>Graphics,</code> <code>Reference</code></dd> - <dt>A landing page for Firefox OS developer tools</dt> - <dd><code>Tools</code>, <code>Firefox OS</code>, <code>Landing</code></dd> -</dl> - -<h2 id="Tagging_and_search_filters">Tagging and search filters</h2> - -<p>Search filters won't work properly unless we tag MDN pages properly. Here's a table of search filters and which tags they look for.</p> - -<div class="note"> -<p><strong>Note:</strong> If multiple tags are listed under "Tag name," that means any one or more of these tags must be present for the article to match.</p> -</div> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Filter group</th> - <th scope="col">Search filter name</th> - <th scope="col">Tag name</th> - </tr> - </thead> - <tbody> - <tr> - <th>Topic</th> - <td>Open Web Apps</td> - <td>{{Tag("Apps")}}</td> - </tr> - <tr> - <th> </th> - <td>HTML</td> - <td>{{Tag("HTML")}}</td> - </tr> - <tr> - <th> </th> - <td>CSS</td> - <td>{{Tag("CSS")}}</td> - </tr> - <tr> - <th> </th> - <td>JavaScript</td> - <td>{{Tag("JavaScript")}}</td> - </tr> - <tr> - <th> </th> - <td>APIs and DOM</td> - <td>{{Tag("API")}}</td> - </tr> - <tr> - <th> </th> - <td>Canvas</td> - <td>{{Tag("Canvas")}}</td> - </tr> - <tr> - <th> </th> - <td>SVG</td> - <td>{{Tag("SVG")}}</td> - </tr> - <tr> - <th> </th> - <td>MathML</td> - <td>{{Tag("MathML")}}</td> - </tr> - <tr> - <th> </th> - <td>WebGL</td> - <td>{{Tag("WebGL")}}</td> - </tr> - <tr> - <th> </th> - <td>XUL</td> - <td>{{Tag("XUL")}}</td> - </tr> - <tr> - <th> </th> - <td>Marketplace</td> - <td>{{Tag("Marketplace")}}</td> - </tr> - <tr> - <th> </th> - <td>Firefox</td> - <td>{{Tag("Firefox")}}</td> - </tr> - <tr> - <th> </th> - <td>Firefox for Android</td> - <td>{{Tag("Firefox Mobile")}}</td> - </tr> - <tr> - <th> </th> - <td>Firefox for Desktop</td> - <td>{{Tag("Firefox Desktop")}}</td> - </tr> - <tr> - <th> </th> - <td>Firefox OS</td> - <td>{{Tag("Firefox OS")}}</td> - </tr> - <tr> - <th> </th> - <td>Mobile</td> - <td>{{Tag("Mobile")}}</td> - </tr> - <tr> - <th> </th> - <td>Web Development</td> - <td>{{Tag("Web Development")}}</td> - </tr> - <tr> - <th> </th> - <td>Add-ons & Extensions</td> - <td>{{Tag("Add-ons ")}}|| {{Tag("Extensions")}} || {{Tag("Plugins")}} || {{Tag("Themes")}}</td> - </tr> - <tr> - <th> </th> - <td>Games</td> - <td>{{Tag("Games")}}</td> - </tr> - <tr> - <th>Skill level</th> - <td>I'm an Expert</td> - <td>{{Tag("Advanced")}}</td> - </tr> - <tr> - <th> </th> - <td>Intermediate</td> - <td>{{Tag("Intermediate")}}</td> - </tr> - <tr> - <th> </th> - <td>I'm Learning</td> - <td>{{Tag("Beginner")}}</td> - </tr> - <tr> - <th>Document type</th> - <td>Docs</td> - <td><em>This restricts the search to docs content, leaving out Hacks and other MDN content.</em></td> - </tr> - <tr> - <th> </th> - <td>Demos</td> - <td><em>This includes Demo Studio content in the search results.</em></td> - </tr> - <tr> - <th> </th> - <td>Tools</td> - <td>{{Tag("Tools")}}</td> - </tr> - <tr> - <th> </th> - <td>Code Samples</td> - <td>{{Tag("Example")}}</td> - </tr> - <tr> - <th> </th> - <td>How-To & Tutorial</td> - <td>{{Tag("Guide")}}</td> - </tr> - <tr> - <th> </th> - <td>Developer Profiles</td> - <td><em>This includes developer profiles from the MDN site in the search results.</em></td> - </tr> - <tr> - <th> </th> - <td>External Resources</td> - <td><em>The dev team is still figuring this out...</em></td> - </tr> - </tbody> -</table> - -<h2 id="Tagging_problems_you_can_fix">Tagging problems you can fix</h2> - -<p>There are several kinds of tag problems you can help fix:</p> - -<dl> - <dt>No tags</dt> - <dd>Generally articles should have at <em>least</em> a "<a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards#Category" title="/en-US/docs/Project:MDN/Contributing/Tagging_standards#Categories">category</a>" tag and a "<a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards#Topic" title="/en-US/docs/Project:MDN/Contributing/Tagging_standards#Topic">topic</a>" tag. Usually other tags are appropriate as well, but if you can help us ensure that the minimum tags are present, you'll be a documentation hero!</dd> - <dt>Tags that don't follow our tagging standards</dt> - <dd>Please fix any documents whose tags don't follow the standards on this page.<br> - Note that due to a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=776048">bug in Kuma</a>, some localized tags (such as <code>Référence</code>) may show up on some English pages. These tags are likely to reappear even if you delete them; don't bother trying to fix them until the Kuma bug is fixed.</dd> - <dt>Incorrect tags</dt> - <dd>If you're looking at an article about HTML and it's tagged "JavaScript", that's probably wrong! Likewise, if an article discusses Mozilla internals but has a "Web" tag, that's probably wrong too. Remove these tags and add the right tags if they aren't already there. Please also correct misspelled tags (e.g., "Javascript" will still match, since tags are case-insensitive, but let's not be sloppy!).</dd> - <dt>Missing tags</dt> - <dd>If an article has some but not all of the tags it needs, feel free to add more. For example, if a page in JavaScript reference is (correctly) tagged "JavaScript" but nothing else, you're invited to tag the page "Reference" as well!</dd> - <dt>Tag spam</dt> - <dd>This insidious beast is the most revolting tag problem of all: some Web vermin has deposited its droppings in the page tags (like "Free warez!" or "Hey I was browsing your site and wanted to ask you if you could help me solve this problem I'm having with Flash crashing all the time"). We've got to delete these right away! They're ugly, they're hard to manage if they're allowed to linger too long, and they're terrible for {{Glossary("SEO")}}.</dd> -</dl> - -<p>If you see one (or more) of these problems, please <a href="/en-US/docs/Project:MDN/Contributing/Getting_started#Logging_into_MDN">log into MDN</a> and click EDIT at the top right of the MDN window. Once the editor loads up, scroll down to the bottom of the page, where you'll see the tag box. For more details on the tagging interface, see "<a href="/en-US/docs/Project:MDN/Contributing/Editor_guide#The_tags_box" title="/en-US/docs/Project:MDN/Contributing/Editor_guide#The_tags_box">The tags box</a>" in the <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide" title="/en-US/docs/Project:MDN/Contributing/Editor_guide">MDN editor guide</a>.</p> diff --git a/files/pl/mdn/guidelines/writing_style_guide/index.html b/files/pl/mdn/guidelines/writing_style_guide/index.html deleted file mode 100644 index 893de382b8..0000000000 --- a/files/pl/mdn/guidelines/writing_style_guide/index.html +++ /dev/null @@ -1,557 +0,0 @@ ---- -title: Przewodnik po stylach dokumentacji MDN -slug: MDN/Guidelines/Writing_style_guide -tags: - - Dokumentacja - - Dokumenty MDN - - Przewodnik - - Przewodnik stylu MDN - - Style w MDN -translation_of: MDN/Guidelines/Writing_style_guide -original_slug: MDN/Guidelines/Style_guide ---- -<div>{{MDNSidebar}}</div> - -<p><font><font>W celu wyświetlenia dokumentacji w zorganizowany, znormalizowany i łatwy do odczytania sposób, przewodnik stylu Mozilla Developer Network opisuje, w jaki sposób tekst powinien być zorganizowany, zapisany, sformatowany i tak dalej. </font><font>Są to wytyczne, a nie surowe zasady. </font></font><font><font>Jesteśmy bardziej zainteresowani treścią niż formatowaniem, nie jesteś zobowiązany do uczenia się całego przewodnika po stylach MDN przed wniesieniem wkładu. </font><font>Nie bądź jednak zdenerwowany lub zaskoczony, jeśli inny tłumacz zmodyfikuje w późniejszym czasie edytowany przez ciebie artykuł, aby dostosować się go, do głównych wytycznych stawianych dokumnetacji MDN.</font></font></p> - -<p>Jeśli szukasz informacji jak dany typ strony powinien być ustrukturyzowany, zobacz poradnik dotyczący <a href="/en-US/docs/MDN/Contribute/Content/Layout">układu stron MDN</a></p> - -<p>Aspekty językowe tego przewodnika dotyczą przede wszystkim dokumentacji w języku angielskim. Inne kraje mogą mieć (i mogą tworzyć) przewodniki po stylach we własnym języku. Tłumaczenia takie powinny być opublikowane jako podstrony, na lokalnych stronach MDN, dedykowanych dla danego języka przez zespół zajmujący się tłumaczeniami tzw. zespół lokalizacyjny.</p> - -<p>Zapoznaj się ze standardami styli stosowanych do treści witryn innych niż MDN, zobacz <a href="http://www.mozilla.org/en-US/styleguide/" title="http://www.mozilla.org/en-US/styleguide/">Przewodnik po stylach One Mozilla</a>.</p> - -<h2 id="Page_name_and_heading_capitalization" name="Page_name_and_heading_capitalization">Podstawy</h2> - -<h3 id="Tytuły_stron">Tytuły stron</h3> - -<p>Tytuły stron używane są w wynikach wyszukiwania, dzięki temu łatwiej jest znaleźć stronę w wynikach organicznych wyszukiwarek. Tytuły służą również do zachowania odpowiedniej struktury strony. Dlatego wraz z menu okruszkowym lub inaczej okruszkami(z ang. breadcrumbs) umieszczane są na górze strony, w celu zachowania odpowiedniej jej hierarchii. Tytuł, wyświetlany na górze w oknie przeglądarki, może różnić się od tzw. slug'a, który jest elemnetem adresu URL, następującym po "<em><locale>/docs/</em>".</p> - -<h4 id="Tytuł_i_wielkie_literykapitaliki">Tytuł i wielkie litery(kapitaliki)</h4> - -<p>Tytuły stron i nagłówki sekcji(H1-H6) powinny być formatowane w taki sam sposób jak zdania. Wielka litera powinna być pisana na początku pierwszego słowa, również powinna wystąpić w nazwach własnych. Powinieneś unikać słów pisanych tzw. pismem wielbłądzim(które w anglojęzycznych krajach jest stosowane w tytułach): </p> - -<ul> - <li><span class="correct"><strong>Poprawnie</strong></span>: "Nowa metoda tworzenia rolloverów w JavaScript"</li> - <li><font color="#ff0000"><strong>Niepoprawnie</strong></font>: "Nowa Metoda Tworzenia Rolloverów w JavaScript"</li> -</ul> - -<p>Mamy wiele starszych stron, które zostały napisane przed ustanowieniem tej reguły stylu. Jeśli chcesz, możesz je aktualizować w razie potrzeby. Stopniowo do nich docieramy.</p> - -<h4 id="Choosing_titles_and_slugs">Choosing titles and slugs</h4> - -<p>Page slugs should be kept short; when creating a new level of hierarchy, the new level's component in the slug should generally just be a word or two.</p> - -<p>Page titles, on the other hand, may be as long as you like, within reason, and they should be descriptive.</p> - -<h4 id="Creating_new_subtrees">Creating new subtrees</h4> - -<p>When you need to add a number of articles about a topic or topic area, you will typically do so by creating a landing page, then adding subpages for each of the individual articles. The landing page should open with a paragraph or two describing the topic or technology, then provide a list of the subpages with descriptions of each page. You can automate the insertion of pages into the list using a number of macros we've created.</p> - -<p>For example, consider the<a href="http://www.mozilla.org/en-US/styleguide/" title="http://www.mozilla.org/en-US/styleguide/"> </a><a href="/en-US/docs/Web/JavaScript">JavaScript</a> guide, which is structured like this:</p> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Guide" title="JavaScript/Guide">JavaScript/Guide</a> - Main table-of-contents page</li> - <li><a href="/en-US/docs/Web/JavaScript/Guide/JavaScript_Overview" title="JavaScript/Guide/JavaScript_Overview">JavaScript/Guide/JavaScript Overview</a></li> - <li><a href="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">JavaScript/Guide/Functions</a></li> - <li><a href="/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model" title="JavaScript/Guide/Details_of_the_Object_Model">JavaScript/Guide/Details of the Object Model</a></li> -</ul> - -<p>Try to avoid putting your article at the top of the hierarchy, which slows the site down and makes search and site navigation less effective.</p> - -<h3 id="Sections.2C_Paragraphs.2C_Newlines" name="Sections.2C_Paragraphs.2C_Newlines">Sections, paragraphs, and newlines</h3> - -<p>Use heading levels in decreasing order: {{HTMLElement("h2")}} then {{HTMLElement("h3")}} then {{HTMLElement("h4")}}, without skipping levels. H2 is the highest level allowed because H1 is reserved for the page title. If you need more than three or four levels of headers you should consider breaking up the article into several smaller articles with a landing page, linking them together using the {{TemplateLink("Next")}}, {{TemplateLink("Previous")}}, and {{TemplateLink("PreviousNext")}} macros.</p> - -<p>The enter (or return) key on your keyboard starts a new paragraph. To insert a newline without a space, hold down the shift key while pressing enter.</p> - -<h3 id="Text_Formatting" name="Text_Formatting">Text formatting and styles</h3> - -<p>Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.</p> - -<div class="note"><strong>Note: </strong>The "Note" style is used to call out important notes, like this one.</div> - -<div class="warning"><strong>Warning:</strong> Similarly, the "Warning" style creates warning boxes like this.</div> - -<p>Unless specifically instructed to do so, <strong>do not</strong> use the HTML <code>style</code> attribute to manually style content. If you can't do it using a predefined class, drop into <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">Matrix</a> and ask for help.</p> - -<h3 id="Code_sample_style_and_formatting">Code sample style and formatting</h3> - -<h4 id="Tabs_and_line_breaks">Tabs and line breaks</h4> - -<p>Use two spaces per tab in all code samples. Code should be indented cleanly, with open-brace ("{") characters on the same line as the statement that opens the block. For example:</p> - -<pre class="brush: js notranslate">if (condition) { - /* handle the condition */ -} else { - /* handle the "else" case */ -} -</pre> - -<p>Long lines shouldn't be allowed to stretch off horizontally to the extent that they require horizontal scrolling to read. Instead, break at natural breaking points. Some examples follow:</p> - -<pre class="brush: js notranslate">if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION - || class.YET_ANOTHER_CONDITION ) { - /* something */ -} - -var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"] - .createInstance(Components.interfaces.nsIToolkitProfileService); -</pre> - -<h4 id="Inline_code_formatting">Inline code formatting</h4> - -<p>Use the "Code" button (labeled with two angle brackets "<>") to apply inline code-style formatting to function names, variable names, and method names (this uses the {{HTMLElement("code")}} element). For example, "the <code class="js plain">frenchText()</code> function".</p> - -<p>Method names should be followed by a pair of parentheses: <code>doSomethingUseful()</code>. This helps to differentiate methods from other code terms.</p> - -<h4 id="Syntax_highlighting">Syntax highlighting</h4> - -<p><img alt='Screenshot of the "syntax highlighting" menu.' src="https://mdn.mozillademos.org/files/7857/syntax-highlighting-menu.png" style="border-style: solid; border-width: 1px; float: right; height: 315px; margin: 2px 4px; width: 183px;">Entire lines (or multiple lines) of code should be formatted using syntax highlighting rather than the {{HTMLElement("code")}} element. Click the "pre" button in the toolbar to create the preformatted content box in which you'll then write your code. Then, with the text entry cursor inside the code box, select the appropriate language from the language list button to the right of the "pre" button, as seen in the screenshot to the right. The following example shows text with JavaScript formatting:</p> - -<div class="line number2 index1 alt1"> -<pre class="brush: js notranslate">for (var i = 0, j = 9; i <= 9; i++, j--) - document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);</pre> -</div> - -<p>If no appropriate transformation is available, use the <code>pre</code> tag without specifying a language ("No Highlight" in the language menu).</p> - -<pre class="notranslate">x = 42;</pre> - -<h4 id="Styling_HTML_element_references">Styling HTML element references</h4> - -<p>There are various specific rules to follow when writing about HTML elements, in order to consistently describe the various components of elements, and to ensure that they're properly linked to detailed documentation.</p> - -<dl> - <dt>Element names</dt> - <dd>Use the {{TemplateLink("HTMLElement")}} macro, which creates a link to the page for that element. For example, writing \{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, <strong>enclose the name in angle brackets</strong> and use "Code (inline)" style (e.g., <code><title></code>).</dd> - <dt>Attribute names</dt> - <dd>Use <strong>bold face</strong>.</dd> - <dt>Attribute definitions</dt> - <dd>Use the {{TemplateLink("htmlattrdef")}} macro (e.g., <span class="nowiki">\{{htmlattrdef("type")}}</span>) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., <span class="nowiki">\{{htmlattrxref("attr","element")}}</span>) to reference attribute definitions.</dd> - <dt>Attribute values</dt> - <dd>Use "Code (inline)" style, and do not use quotation marks around strings, unless needed by the syntax of a code sample. E.g.: When the <strong>type</strong> attribute of an <code><input></code> element is set to <code>email</code> or <code>tel</code> ...</dd> - <dt>Labeling attributes</dt> - <dd>Use labels like {{HTMLVersionInline(5)}} thoughtfully. For example, use them next to the bold attribute name but not for every occurrence in your body text.</dd> -</dl> - -<h3 id="Latin_abbreviations" name="Latin_abbreviations">Latin abbreviations</h3> - -<h4 id="In_notes_and_parentheses" name="In_notes_and_parentheses">In notes and parentheses</h4> - -<ul> - <li>Common Latin abbreviations (etc., i.e., e.g.) may be used in parenthetical expressions and in notes. Use periods in these abbreviations. - <ul> - <li><span class="correct"><strong>Correct</strong></span>: Web browsers (e.g. Firefox) can be used ...</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, e.g. Firefox, can be used ...</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, (eg: Firefox) can be used ...</li> - </ul> - </li> -</ul> - -<h4 id="In_running_text" name="In_running_text">In running text</h4> - -<ul> - <li>In regular text (i.e. text outside of notes or parentheses), use the English equivalent of the abbreviation. - <ul> - <li><span class="correct"><strong>Correct</strong></span>: ... web browsers, and so on.</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: ... web browsers, etc.</li> - <li><span class="correct"><strong>Correct</strong></span>: Web browsers such as Firefox can be used ...</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li> - </ul> - </li> -</ul> - -<h4 id="Meanings_and_English_equivalents_of_Latin_abbreviations" name="Meanings_and_English_equivalents_of_Latin_abbreviations">Meanings and English equivalents of Latin abbreviations</h4> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Abbrev</th> - <th>Latin</th> - <th>English</th> - </tr> - <tr> - <td>cf.</td> - <td><em>confer</em></td> - <td>compare</td> - </tr> - <tr> - <td>e.g.</td> - <td><em>exempli gratia</em></td> - <td>for example</td> - </tr> - <tr> - <td>et al.</td> - <td><em>et alii</em></td> - <td>and others</td> - </tr> - <tr> - <td>etc.</td> - <td><em>et cetera</em></td> - <td>and so forth, and so on</td> - </tr> - <tr> - <td>i.e.</td> - <td><em>id est</em></td> - <td>that is, in other words</td> - </tr> - <tr> - <td>N.B.</td> - <td><em>nota bene</em></td> - <td>note well</td> - </tr> - <tr> - <td>P.S.</td> - <td><em>post scriptum</em></td> - <td>postscript</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Note:</strong> Always consider whether it's truly beneficial to use a Latin abbreviation. Some of these are used so rarely that many readers won't understand the meaning, and others are often confused with one another. And be sure that <strong>you</strong> use them correctly, if you choose to do so. For example, be careful not to confuse "e.g." with "i.e.", which is a common error.</p> -</div> - -<h3 id="Acronyms_and_abbreviations" name="Acronyms_and_abbreviations">Acronyms and abbreviations</h3> - -<h4 id="Capitalization_and_periods" name="Capitalization_and_periods">Capitalization and periods</h4> - -<p>Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: XUL</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: X.U.L.; Xul</li> -</ul> - -<h4 id="Expansion" name="Expansion">Expansion</h4> - -<p>On the first mention of a term on a page, expand acronyms likely to be unfamiliar to users. When in doubt, expand it, or, better, link it to the article or <a href="/en-US/docs/Glossary">glossary</a> entry describing the technology.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: "XUL (XML User Interface Language) is Mozilla's XML-based language..."</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: "XUL is Mozilla's XML-based language..."</li> -</ul> - -<h4 id="Plurals_of_acronyms_and_abbreviations" name="Plurals_of_acronyms_and_abbreviations">Plurals of acronyms and abbreviations</h4> - -<p>For plurals of acronyms or abbreviations, add <em>s</em>. Don't use an apostrophe. Ever. Please.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: CD-ROMs</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: CD-ROM's</li> -</ul> - -<h3 id="Contractions" name="Contractions">Capitalization</h3> - -<p>Use standard English capitalization rules in body text, and capitalize "World Wide Web" and "Web".</p> - -<h3 id="Contractions" name="Contractions">Contractions</h3> - -<p>Use contractions (e.g. "don't", "can't", "shouldn't") if you prefer. We're not that formal!</p> - -<h3 id="Pluralization" name="Pluralization">Pluralization</h3> - -<p>Use English-style plurals, not the Latin- or Greek-influenced forms.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: syllabuses, octopuses</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: syllabi, octopi</li> -</ul> - -<h3 id="Hyphenation" name="Hyphenation">Hyphenation</h3> - -<p>Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.</p> - -<ul> - <li><font color="green"><strong>Correct</strong></font>: email, re-elect, co-op</li> - <li><font color="red"><strong>Incorrect</strong></font>: e-mail, reelect, coop</li> -</ul> - -<h3 id="Gender-neutral_language">Gender-neutral language</h3> - -<p>It is a good idea to use gender-neutral language in any kind of writing where gender is irrelevant to the subject matter, to make the text as inclusive as possible. So for example, if you are talking about the actions of a specific man, usage of he/his would be fine, but if the subject is a person of either gender, he/his isn't really appropriate.<br> - <br> - Let's take the following example:</p> - -<blockquote> -<p>A confirmation dialog appears, asking the user if he allows the web page to make use of his web cam.</p> -</blockquote> - -<blockquote> -<p>A confirmation dialog appears, asking the user if she allows the web page to make use of her web cam.</p> -</blockquote> - -<p>Both versions in this case are gender-specific. This could be fixed by using gender-neutral pronouns:</p> - -<blockquote> -<p>A confirmation dialog appears, asking the user if they allow the web page to make use of their web cam.</p> -</blockquote> - -<div class="note"> -<p><strong>Note:</strong> MDN allows the use of this very common syntax (which is controversial among usage authorities), in order to make up for the lack of a neutral gender in English. The use of the third-person plural as a neutral gender pronoun (that is, using "they," them", "their," and "theirs") is an accepted practice, commonly known as "<a href="http://en.wikipedia.org/wiki/Singular_they">singular 'they.'</a>"</p> -</div> - -<p>You can use both genders:</p> - -<blockquote> -<p>A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.</p> -</blockquote> - -<p>making the users plural:</p> - -<blockquote> -<p>A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.</p> -</blockquote> - -<p>The best solution, of course, is to rewrite and eliminate the pronouns completely:</p> - -<blockquote> -<p>A confirmation dialog appears, requesting the user's permission for web cam access.</p> -</blockquote> - -<blockquote> -<p>A confirmation dialog box appears, which asks the user for permission to use the web cam.</p> -</blockquote> - -<p>The last way of dealing with the problem is arguably better, as it is not only grammatically more correct but removes some of the complexity associated with dealing with genders across different languages that may have wildly varying gender rules. This can make translation easier, both for readers reading English, then translating it into their own language as they read, and for localizers translating articles into their own language.</p> - -<h3 id="Numbers_and_numerals" name="Numbers_and_numerals">Numbers and numerals</h3> - -<h4 id="Dates">Dates</h4> - -<p>For dates (not including dates in code samples) use the format "January 1, 1990".</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: February 24, 2006</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: February 24th, 2006; 24 February, 2006; 24/02/2006</li> -</ul> - -<p>Alternately, you can use the YYYY/MM/DD format.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: 2006/02/24</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: 02/24/2006; 24/02/2006; 02/24/06</li> -</ul> - -<h4 id="Decades" name="Decades">Decades</h4> - -<p>For decades, use the format "1990s". Don't use an apostrophe.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: 1990s</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: 1990's</li> -</ul> - -<h4 id="Plurals_of_numerals" name="Plurals_of_numerals">Plurals of numerals</h4> - -<p>For plurals of numerals add "s". Don't use an apostrophe.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: 486s</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: 486's</li> -</ul> - -<h4 id="Commas" name="Commas">Commas</h4> - -<p>In running text, use commas only in five-digit and larger numbers.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: 4000; 54,000</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: 4,000; 54000</li> -</ul> - -<h3 id="Punctuation" name="Punctuation">Punctuation</h3> - -<h4 id="Serial_comma" name="Serial_comma">Serial comma</h4> - -<p><strong>Use the serial comma</strong>. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: I will travel on trains, planes, and automobiles.</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: I will travel on trains, planes and automobiles.</li> -</ul> - -<div class="note"> -<p><strong>Note:</strong> This is in contrast to the <a href="http://www.mozilla.org/en-US/styleguide/" title="http://www.mozilla.org/en-US/styleguide/">One Mozilla style guide</a>, which specifies that the serial comma is not to be used. MDN is an exception to this rule.</p> -</div> - -<h3 id="Spelling" name="Spelling">Spelling</h3> - -<p>For words with variant spellings, always use the first entry at <a href="http://www.answers.com/library/Dictionary">Answers.com</a>. Do not use variant spellings.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: localize, honor</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: localise, honour</li> -</ul> - -<h3 id="Terminology">Terminology</h3> - -<h4 id="Obsolete_vs._deprecated">Obsolete vs. deprecated</h4> - -<p>It's important to be clear on the difference between the terms <strong>obsolete</strong> and <strong>deprecated</strong>.</p> - -<dl> - <dt>Obsolete:</dt> - <dd>On MDN, the term <strong>obsolete</strong> marks an API or technology that is not only no longer recommended, but also no longer implemented in the browser. For Mozilla-specific technologies, the API is no longer implemented in Mozilla code; for Web standard technology, the API or feature is no longer supported by current, commonly-used browsers.</dd> - <dt>Deprecated:</dt> - <dd>On MDN, the term <strong>deprecated</strong> marks an API or technology that is no longer recommended, but is still implemented and may still work. These technologies will in theory eventually become <em>obsolete</em> and be removed, so you should stop using them. For Mozilla-specific technologies, the API is still supported in Mozilla code; for Web standard technology, the API or feature has been removed or replaced in a recent version of the defining standard.</dd> -</dl> - -<h4 id="HTML_elements">HTML elements</h4> - -<p>Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "<>", and should be in the {{HTMLElement("code")}} style. Also, at least the first time you reference a given element in a section should use the {{TemplateLink("HTMLElement")}} macro, to create a link to the documentation for the element (unless you're writing within that element's reference document page).</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: the {{HTMLElement("span")}} element</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: the span tag</li> -</ul> - -<h4 id="User_interface_actions">User interface actions</h4> - -<p>In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: Click the Edit button.</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Click Edit.</li> -</ul> - -<h3 id="Voice">Voice</h3> - -<p>While the active voice is generally preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.</p> - -<h2 id="Wiki_markup_and_usage">Wiki markup and usage</h2> - -<h3 id="External_links">External links</h3> - -<p>To automatically create a link to a Bugzilla bug, use this template:</p> - -<pre class="notranslate">\{{Bug(322603)}} -</pre> - -<p>This results in:</p> - -<p>{{Bug(322603)}}</p> - -<p>For WebKit bugs, you can use this template:</p> - -<pre class="notranslate">\{{Webkitbug("322603")}} -</pre> - -<p>This results in:</p> - -<p>{{Webkitbug("322603")}}</p> - -<h3 id="Page_tags">Page tags</h3> - -<p>Tags provide meta information about a page and/or indicate that a page has specific improvements needed to its content. Every page in the wiki should have tags. You can find details on tagging in our <a href="/en-US/docs/MDN/Contribute/Howto/Tag">How to properly tag pages</a> guide.</p> - -<p>The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:</p> - -<p><img alt="Screenshot of the UX for adding and removing tags on MDN" src="https://mdn.mozillademos.org/files/7859/tag-interface.png" style="border-style: solid; border-width: 1px; height: 167px; width: 863px;"></p> - -<p>To add a tag, click in the edit box at the end of the tag list and type the tag name you wish to add. Tags will autocomplete as you type. Press enter (or return) to submit the new tag. Each article may have as many tags as needed. For example, an article about using JavaScript in AJAX programming might have both "JavaScript" and "AJAX" as tags.</p> - -<p>To remove a tag, simply click the little "X" icon in the tag.</p> - -<h4 id="Tagging_pages_that_need_work">Tagging pages that need work</h4> - -<p>In addition to using tags to track information about the documentation's quality and content, we also use them to mark articles as needing specific types of work.</p> - -<h4 id="Tagging_obsolete_pages">Tagging obsolete pages</h4> - -<p>Use the following tags for pages that are not current:</p> - -<ul> - <li><em>Junk</em>: Use for spam, pages created by mistake, or content that is so bad that it should be deleted. Pages with this tag are deleted from time to time.</li> - <li><em>Obsolete</em>: Use for content that is technically superceded, but still valid in context. For example an HTML element that is obsolete in HTML5 is still valid in HTML 4.01. You can also use the <span class="nowiki">{{TemplateLink("obsolete_header")}}</span> macro to put a prominent banner on the topic.</li> - <li><em>Archive</em>: Use for content that is technically superceded and no longer useful. If possible, add a note to the topic referring readers to a more current topic. For example, a page that describes how to use the Mozilla CVS repository should refer readers to a current topic on using Mercurial repos. (If no corresponding current topic exists, use the <em>NeedsUpdate</em> tag, and add an explanation on the Talk page.) Pages with the Archive tag are eventually moved from the main content of MDN to the <a href="/en-US/docs/Archive">Archive</a> section.</li> -</ul> - -<h3 id="SEO_summary">SEO summary</h3> - -<p>The SEO summary is a very short summary of the page. It will be reported as a summary of the article to robots crawling the site, and will then appear in search results for the page. It is also used by macros that automate the construction of landing pages inside MDN itself.</p> - -<p>By default, the first pagragraph of the page is used as the SEO summary. However you can override this behavior by marking a section with the <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide/Editing#Formatting_styles">"SEO summary" style in the WYSIWYG editor</a>.</p> - -<h3 id="Landing_pages">Landing pages</h3> - -<p><strong>Landing pages</strong> are pages at the root of a topic area of the site, such as the main <a href="/en-US/docs/CSS" title="CSS">CSS</a> or <a href="/en-US/docs/HTML" title="HTML">HTML</a> pages. They have a standard format that consists of three areas:</p> - -<ol> - <li>A brief (typically one paragraph) overview of what the technology is and what it's used for. See {{anch("Writing a landing page overview")}} for tips.</li> - <li>A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.</li> - <li>An <strong>optional</strong> "Browser compatibility" section at the bottom of the page.</li> -</ol> - -<h4 id="Creating_a_page_link_list">Creating a page link list</h4> - -<p>The link list section of an MDN landing page consists of two columns. These are created using the following HTML:</p> - -<pre class="brush: html notranslate"><div class="row topicpage-table"> - <div class="section"> - ... left column contents ... - </div> - <div class="section"> - ... right column contents ... - </div> -</div></pre> - -<p>The left-hand column should be a list of articles, with an <code><h2></code> header at the top of the left column explaining that it's a list of articles about the topic (for example "Documentation and tutorials about foo"); this header should use the CSS class "Documentation". Below that is a <code><dl></code> list of articles, with each article's link in a <code><dt></code> block and a brief one-or-two sentence summary of the article in the corresponding <code><dd></code> block.</p> - -<p>The right-hand column should contain one or more of the following sections, in order:</p> - -<dl> - <dt>Getting help from the community</dt> - <dd>This should provide information on Matrix chat rooms and mailing lists available about the topic. The heading should use the class "Community".</dd> - <dt>Tools</dt> - <dd>A list of tools the user can look at to help with the use of the technology described in this section of MDN. The heading should use the class "Tools".</dd> - <dt>Related topics</dt> - <dd>A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".</dd> -</dl> - -<p><strong><<<finish this once we finalize the landing page standards>>></strong></p> - -<h2 id="Using_inserting_images">Using, inserting images</h2> - -<p>It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical. To include an image:</p> - -<ol> - <li>Attach the desired image file to the article (at the bottom of every article in edit mode)</li> - <li>Create an image in the WYSIWYG editor</li> - <li>In the WYSIWYG editor in the drop-down list listing attachments, select the newly created attachment which is your image</li> - <li>Press OK.</li> -</ol> - -<h2 id="Other_References">Other References</h2> - -<h3 id="Preferred_style_guides" name="Preferred_style_guides">Preferred style guides</h3> - -<p>If you have questions about usage and style not covered here, we recommend referring to the <a href="http://www.economist.com/research/StyleGuide/">Economist style guide</a> or, failing that, the <a href="http://www.amazon.com/gp/product/0226104036/">Chicago Manual of Style</a>.</p> - -<h3 id="Preferred_dictionary" name="Preferred_dictionary">Preferred dictionary</h3> - -<p>For questions of spelling, please refer to <a href="http://www.answers.com/library/Dictionary">Answers.com</a>. The spell-checker for this site uses American English. Please do not use variant spellings (e.g., use <em>honor</em> rather than <em>honour</em>).</p> - -<p>We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please send them to the <a href="/en-US/docs/Project:Community" title="Project:en/Community">MDC mailing list</a> or <a href="/User:Sheppy" title="User:Sheppy">project lead</a> so we know what should be added.</p> - -<h3 id="MDC-specific" name="MDC-specific">MDN-specific</h3> - -<ul> - <li><a href="/en-US/docs/Project:Custom_CSS_Classes" title="Project:en/Custom_CSS_Classes">Custom CSS classes</a> defined for all MDC pages.</li> - <li><a href="/en-US/docs/Project:Custom_Templates" title="Project:en/Custom_Templates">Custom templates</a> created for use on MDC, with explanations.</li> -</ul> - -<h3 id="Other_resources" name="Other_resources">Language, grammar, spelling</h3> - -<p>If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.</p> - -<ul> - <li><a href="http://www.amazon.com/Writing-Well-30th-Anniversary-Nonfiction/dp/0060891548">On Writing Well</a>, by William Zinsser (Amazon link)</li> - <li><a href="http://www.amazon.com/Style-Basics-Clarity-Grace-4th/dp/0205830765/" title="http://www.amazon.com/Style-Lessons-Clarity-Grace-Edition/dp/0321898680">Style: The Basics of Clarity and Grace</a>, by Joseph Williams and Gregory Colomb (Amazon link)</li> - <li><a href="http://www.bartleby.com/64/">American Heritage Book of English Usage</a></li> - <li><a href="http://www.wsu.edu/~brians/errors/">Common Errors in English</a></li> - <li><a href="http://www-personal.umich.edu/~jlawler/aue.html">English Grammar FAQ</a> (alt.usage.english)</li> - <li><a href="http://www.angryflower.com/bobsqu.gif">Bob's quick guide to the apostrophe, you idiots</a> (funny)</li> - <li><a href="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2" title="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2">Merriam-Webster's Concise Dictionary of English Usage</a> (Amazon link): Scholarly but user-friendly, evidence-based advice; very good for non-native speakers, especially for preposition usage.</li> -</ul> diff --git a/files/pl/mdn/tools/index.html b/files/pl/mdn/tools/index.html deleted file mode 100644 index ad6d18d577..0000000000 --- a/files/pl/mdn/tools/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: MDN user guide -slug: MDN/Tools -translation_of: MDN/Tools -translation_of_original: MDN/User_guide -original_slug: MDN/User_guide ---- -<div>{{MDNSidebar}}</div><p>The Mozilla Developer Network site is an advanced system for finding, reading, and contributing to documentation and sample code for Web developers (as well as for Firefox and Firefox OS developers). The MDN user guide provides articles detailing how to use MDN to find the documentation you need, and, if you wish, how to help make the material better, more expansive, and more complete.</p> -<> diff --git a/files/pl/mozilla/add-ons/webextensions/api/privacy/index.html b/files/pl/mozilla/add-ons/webextensions/api/privacy/index.html deleted file mode 100644 index 321f0f8834..0000000000 --- a/files/pl/mozilla/add-ons/webextensions/api/privacy/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: privacy -slug: Mozilla/Add-ons/WebExtensions/API/privacy -tags: - - API - - Add-ons - - Extensions - - NeedsTranslation - - Privacy - - Reference - - TopicStub - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/API/privacy ---- -<div>{{AddonSidebar}}</div> - -<p>Access and modify various privacy-related browser settings.</p> - -<p>To use the privacy API, you must have the "privacy" <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API permission</a>.</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{WebExtAPIRef("privacy.network")}}</dt> - <dd>Access and modify privacy settings relating to the network.</dd> - <dt>{{WebExtAPIRef("privacy.services")}}</dt> - <dd>Access and modify privacy settings relating to the services provided by the browser or third parties.</dd> - <dt>{{WebExtAPIRef("privacy.websites")}}</dt> - <dd>Access and modify privacy settings relating to the behavior of websites.</dd> -</dl> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("webextensions.api.privacy", 10, 1)}}</p> - -<p>{{WebExtExamples("h2")}}</p> - -<div class="note"><strong>Acknowledgements</strong> - -<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/privacy"><code>chrome.privacy</code></a> API.</p> -</div> - -<div class="hidden"> -<pre class="notranslate">// Copyright 2015 The Chromium Authors. All rights reserved. -// -// Redistribution and use in source and binary forms, with or without -// modification, are permitted provided that the following conditions are -// met: -// -// * Redistributions of source code must retain the above copyright -// notice, this list of conditions and the following disclaimer. -// * Redistributions in binary form must reproduce the above -// copyright notice, this list of conditions and the following disclaimer -// in the documentation and/or other materials provided with the -// distribution. -// * Neither the name of Google Inc. nor the names of its -// contributors may be used to endorse or promote products derived from -// this software without specific prior written permission. -// -// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS -// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT -// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR -// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT -// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, -// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT -// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, -// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY -// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT -// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE -// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -</pre> -</div> diff --git a/files/pl/tools/browser_toolbox/index.html b/files/pl/tools/browser_toolbox/index.html deleted file mode 100644 index 6fad126ff6..0000000000 --- a/files/pl/tools/browser_toolbox/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Browser Toolbox -slug: Tools/Browser_Toolbox -translation_of: Tools/Browser_Toolbox -original_slug: Narzędzia/Browser_Toolbox ---- -<p>The Browser Toolbox enables you to debug add-ons and the browser's own JavaScript code rather than just web pages like the normal <a href="/en-US/docs/Tools_Toolbox">Toolbox</a>. The Browser Toolbox's context is the whole browser rather than just single page on a single tab.</p> - -<p><em>Note: If you want to debug a specific add-on that is restartless or SDK-based then try the <a href="/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a>. Use the Browser Toolbox for add-ons that are neither.</em></p> - -<h2 id="Enabling_the_Browser_Toolbox" style="line-height: 30px; font-size: 2.14285714285714rem;">Enabling the Browser Toolbox </h2> - -<div> -<p>The Browser Toolbox is not enabled by default. To enable it you need to check the settings "Enable chrome and addon debugging" and "Enable remote debugging".</p> - -<p>To do this, open the Developer Tools <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>'s <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Settings">Settings</a>, go to the section "<a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Advanced_settings">Advanced Settings</a>", and check the settings "Enable chrome and addon debugging" and "Enable remote debugging".</p> -</div> - -<h2 id="Opening_the_Browser_Toolbox"><span style="font-size: 2.14285714285714rem;">Opening</span> the Browser Toolbox</h2> - -<p><span style="line-height: 1.5;">Open the Browser Toolbox through the </span><span style="line-height: 1.5;">menu button </span><img alt="new fx menu" class="wiki-image frameless" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2014-01-10-13-08-08-f52b8c.png" style="line-height: 1.5;" title=""><span style="line-height: 1.5;"> and the menu items "Developer" then "Browser Toolbox".</span><span style="line-height: 1.5;"> </span></p> - -<p><span style="line-height: 1.5;">Click the menu item and you'll be presented with a dialog like this (this can be removed by setting the </span><code style="font-style: normal; line-height: 1.5;">devtools.debugger.prompt-connection</code><span style="line-height: 1.5;"> property to false):</span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6663/warning.png" style="width: 554px; height: 243px; display: block; margin-left: auto; margin-right: auto;">Click OK, and the Browser Toolbox will open in its own window:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6665/browser-toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">You'll see, and be able to debug, all the JavaScript files loaded by the browser itself and by any add-ons that are running. Altogether you will have access to the following developer tools:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Debugger">Debugger</a> (<em>Note: If you want to debug a specific add-on that is restartless or SDK-based then try the <a href="/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a>.)</em></li> - <li><a href="/en-US/docs/Tools/Browser_Console">Console</a></li> - <li><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></li> - <li><a href="/en-US/docs/Tools/Profiler">Profiler</a></li> - <li><a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li> - <li><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li> -</ul> - -<h2 id="Debugging_chrome_and_about_pages">Debugging chrome: and about: pages</h2> - -<p>From Firefox 37 onwards, you can debug chrome: and about: pages using the normal <a href="/en-US/docs/Tools/Debugger">Debugger</a>, just as if they were ordinary content pages.</p> diff --git a/files/pl/tools/performance/flame_chart/index.html b/files/pl/tools/performance/flame_chart/index.html deleted file mode 100644 index 60b17d4011..0000000000 --- a/files/pl/tools/performance/flame_chart/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Flame Chart -slug: Tools/Performance/Flame_Chart -translation_of: Tools/Performance/Flame_Chart -original_slug: Narzędzia/Performance/Flame_Chart ---- -<div class="summary"> -<p>The Flame Chart shows you the state of the JavaScript stack for your code at every millisecond during the performance profile.</p> - -<p>This gives you a way to know exactly which function was executing at any point during the recording, how long it ran for, and where it was called from.</p> -</div> - -<p>The Call Tree and the Flame Chart are both used to analyze your site's JavaScript, and they both use the same data: a sample of the JavaScript engine's stack, taken periodically during the recording.</p> - -<p>But while the Call Tree organizes this data to show you where your program is spending most time in aggregate across the recording, the Flame Chart uses it to show you when in the recording particular functions are executing. Essentially it shows you the state of the call stack at any given point during the recording.</p> - -<p>Here's a screenshot showing the Flame Chart for a section of a profile:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/10989/perf-flame-chart-overview.png" style="display: block; height: 622px; margin-left: auto; margin-right: auto; width: 1676px;"></p> - -<p>First of all, you'll see that, in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Recording_overview">recording overview pane</a>, we've selected a small slice of the recording to view in the Flame Chart. The Flame Chart displays a lot of data, so to get readable results, it's usually necessary to zoom in.</p> - -<p>In the Flame Chart view itself, along the X-axis is time. The screenshot above covers the period from 1435ms to a little past 1465ms. Along the Y-axis are the functions on the call stack at that point in time, with the top-level at the top, and the leaf function at the bottom. Functions are color-coded to make them easier to distinguish.</p> - -<p>This gives you a way to know exactly which function was executing at any point during the recording, how long it ran for, and where it was called from.</p> - -<h2 id="Zooming_and_panning">Zooming and panning</h2> - -<p>To work effectively with the Flame Chart, you'll need to be able to navigate it. There are two main controls you can use to navigate the Flame Chart:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td><strong>Zoom</strong>: increase/decrease the selected portion of the complete profile that's displayed in the Flame Chart</td> - <td> - <p>1) Mouse wheel up/down in the Flame Chart.</p> - - <p>2) Trackpad 2 fingers up/down in the Flame Chart.</p> - </td> - </tr> - <tr> - <td><strong>Pan</strong>: move the selected portion of the complete profile left and right</td> - <td> - <p>1) Click and drag the selected portion in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Recording_overview">recording overview pane</a>.</p> - - <p>2) Click and drag anywhere in the Flame Chart.</p> - </td> - </tr> - </tbody> -</table> - -<p>{{EmbedYouTube("BzfkBRFucp8")}}</p> - -<h2 id="An_example">An example</h2> - -<p>To see how the Flame Chart can reveal the behavior of your program, we'll look at a simple example. We'll use the same example as in the <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> page: a program that compares three different sorting algorithms. There's a <a href="/en-US/docs/Tools/Performance/Examples/Sorting_algorithms_comparison">separate page</a> that gives an overview of this program's structure.</p> - -<p>We'll use the same profile file as that used in the Call Tree page. In the call tree page, we figured out that the program call graph in that profile, and the associated sample count, looked like this:</p> - -<pre>sortAll() // 8 - - -> sort() // 37 - - -> bubbleSort() // 1345 - - -> swap() // 252 - - -> selectionSort() // 190 - - -> swap() // 1 - - -> quickSort() // 103 - - -> partition() // 12</pre> - -<p>First, we'll just select the whole section in which the program was active:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/10991/perf-flame-chart-zoomed-out.png" style="display: block; height: 350px; margin-left: auto; margin-right: auto; width: 1212px;"></p> - -<p>At the top, colored purple, is the <code>sortAll()</code> call, running throughout the program from start to finish. Underneath that, colored olive-green, are the calls it's making to <code>sort()</code>. Underneath that, like the teeth of a comb, are all the calls being made to each sorting algorithm.</p> - -<p>Let's zoom in:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/10993/perf-flame-chart-zoom-1.png" style="display: block; height: 350px; margin-left: auto; margin-right: auto; width: 1212px;"></p> - -<p>This slice is about 140 ms long, and shows us more details of the functions being called by <code>sort()</code>. The <code>sort()</code> code is just this:</p> - -<pre class="brush: js">function sort(unsorted) { - console.log(bubbleSort(unsorted)); - console.log(selectionSort(unsorted)); - console.log(quickSort(unsorted)); -}</pre> - -<p>The markers labeled "bubb..." and colored olive-green are presumably <code>bubbleSort()</code>. The ones colored plain green are presumably the other sort functions. Even at a glance, we can see that the bubble sort blocks are much wider (of a longer duration) than the others.</p> - -<p>We can also see some functions being called from <code>bubbleSort()</code>, colored purple.</p> - -<p>Let's zoom in one more time:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/10995/perf-flame-chart-zoom-2.png" style="display: block; height: 348px; margin-left: auto; margin-right: auto; width: 1212px;"></p> - -<p>This slice is about 20ms long. We can see that the purple markers underneath <code>bubbleSort()</code> are the calls to <code>swap()</code>. If you counted them all, the Call Tree view tells us that you'd see 253 of them. All the ones in this zoom are underneath <code>bubbleSort()</code>, but according to the Call Tree view, the profile does contain one under <code>selectionSort()</code>.</p> - -<p>We can also see that two of the green markers are for <code>selectionSort()</code> and <code>quickSort()</code>, but we're also seeing calls to platform (Gecko) code in between our calls to the sorting functions. It seems very likely that this is from the <code>console.log()</code> calls in <code>sort()</code>.</p> diff --git a/files/pl/tools/storage_inspector/index.html b/files/pl/tools/storage_inspector/index.html deleted file mode 100644 index 4919111886..0000000000 --- a/files/pl/tools/storage_inspector/index.html +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: Storage Inspector -slug: Tools/Storage_Inspector -translation_of: Tools/Storage_Inspector -original_slug: Narzędzia/Storage_Inspector ---- -<div>{{ToolsSidebar}}</div> - -<p>The Storage Inspector enables you to inspect various types of storage that a web page can use. Currently it can be used to inspect the following storage types:</p> - -<ul> - <li><em>Cache Storage</em> — any DOM caches created using the <a href="/en-US/docs/Web/API/Cache">Cache API</a>.</li> - <li><em>Cookies</em> — All the <a href="/en-US/docs/Web/API/Document/cookie">cookies</a> created by the page or any iframes inside of the page. Cookies created as a part of response of network calls are also listed, but only for calls that happened while the tool is open.</li> - <li><em>IndexedDB</em> — All <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> databases created by the page or any iframes inside the page, their Object Stores and the items stored in these Object Stores.</li> - <li><em>Local Storage</em> — All <a href="/en-US/docs/Web/API/Window/localStorage">local storage</a> items created by the page or any iframes inside the page.</li> - <li><em>Session Storage</em> — All <a href="/en-US/docs/Web/API/Window/sessionStorage">session storage</a> items created by the page or any iframes inside the page.</li> -</ul> - -<p>For the time being, the Storage Inspector only gives you a read-only view of storage. But we're working to let you edit storage contents in future releases.</p> - -<h2 id="Opening_the_Storage_Inspector">Opening the Storage Inspector</h2> - -<p>You can open the Storage Inspector by selecting "Storage Inspector" from the Web Developer submenu in the Firefox Menu Panel (or Tools menu if you display the menu bar or are on macOS), or by pressing its <kbd>Shift</kbd> + <kbd>F9</kbd> keyboard shortcut.</p> - -<p>The <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> will appear at the bottom of the browser window, with the Storage Inspector activated. It's just called "Storage" in the Developer Toolbox.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16764/storage_inspector.png" style="display: block; margin: 0px auto; width: 600px;"></p> - -<h2 id="Storage_Inspector_User_Interface">Storage Inspector User Interface</h2> - -<p>The Storage Inspector UI is split into three main components:</p> - -<ul> - <li><a href="#storage-tree">Storage tree</a></li> - <li><a href="#table-widget">Table Widget</a></li> - <li><a href="#sidebar">Sidebar</a></li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16765/storage_labeled.png" style="display: block; margin: 0 auto; width: 600px;"></p> - -<h3 id="Storage_tree"><a name="storage-tree">Storage tree</a></h3> - -<p>The storage tree lists all the storage types that the Storage Inspector can inspect:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16766/storage_types.png" style="display: block; height: 129px; margin: 0 auto; width: 400px;"></p> - -<p>Under each type, objects are organized by origin. For cookies, the protocol does not differentiate the origin. For Indexed DB or local storage an origin is a combination of protocol + hostname. For example, "http://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them.</p> - -<p>Under "Cache Storage", objects are organized by origin and then by the name of the cache:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16802/cache_storage.png" style="border: 1px solid black; display: block; height: 215px; margin-left: auto; margin-right: auto; width: 274px;"></p> - -<p>IndexedDB objects are organized by origin, then by database name, then by object store name:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16804/indexedDb_storage.png" style="border: 1px solid black; display: block; height: 193px; margin-left: auto; margin-right: auto; width: 274px;"></p> - -<p>With the Cookies, Local Storage, and Session Storage types, there's only one level in the hierarchy, so stored items are listed directly under each origin:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16803/cookie_storage.png" style="border: 1px solid black; display: block; height: 217px; margin-left: auto; margin-right: auto; width: 274px;"></p> - -<p>You can click on each item in the tree to expand or collapse its children. The tree is live, so if a new origin gets added (by adding an iframe, for example), it will be added to each storage type automatically.</p> - -<p>Clicking on a tree item will display detailed information about that item in the Table Widget on the right. For example, clicking on an origin which is a child of the Cookies storage type will show all the cookies belonging to that domain.</p> - -<h3 id="Table_Widget"><a name="table-widget">Table Widget</a></h3> - -<p>The table widget displays a list of all the items corresponding to the selected tree item (be it an origin, or database) are listed. Depending on the storage type and tree item, the number of columns in the table might differ.</p> - -<p>All the columns in a Table Widget are resizable. You can hide and show columns by context-clicking on the table header and selecting the columns you want to see:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16767/cookie_context_menu.png" style="border: 1px solid black; display: block; height: 330px; margin-left: auto; margin-right: auto; width: 914px;"></p> - -<h3 id="Search">Search</h3> - -<p>There's a search box at the top of the Table Widget:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16808/storage_detail_filter.png" style="border: 1px solid black; display: block; height: 249px; margin-left: auto; margin-right: auto; width: 926px;"></p> - -<p>This filters the table to show only items which match the search term. Items match the search term if any of their fields (including fields whose columns you have hidden) contain the search term.</p> - -<p>You can use <kbd>Ctrl</kbd> + <kbd>F</kbd> (<kbd>Cmd</kbd> + <kbd>F</kbd> on a Mac) to focus the search box.</p> - -<h3 id="Add_and_refresh_storage">Add and refresh storage</h3> - -<p>You'll also have buttons available to add a new storage entry or refresh the view of the currently viewed storage type where applicable (you can't add new entries to IndexedDB or Cache):</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16809/storage_detail_add_refresh.png" style="border: 1px solid black; display: block; height: 249px; margin: 0px auto; width: 926px;"></p> - -<h3 id="Sidebar"><a name="sidebar">Sidebar</a></h3> - -<p>When you select any row in the Storage table widget, the sidebar is shown with details about that row. If a cookie is selected, it will list all the details about that cookie.</p> - -<p>The sidebar can parse the value of the cookie or local storage item or an IndexedDB item and convert it into a meaningful object instead of just a string. For example:</p> - -<ul> - <li>A stringified JSON like <code>'{"foo": "bar"}'</code> is shown as the origin JSON: <code>{foo: "bar"}</code>.</li> - <li>A string containing a key separated value, like <code>"1~2~3~4"</code> or <code>"1=2=3=4"</code> is shown like an array: <code>[1, 2, 3, 4]</code>.</li> - <li>A string containing key-value pairs, like <code>"ID=1234:foo=bar"</code> is shown as JSON: <code>{ID:1234, foo: "bar"}</code>.</li> -</ul> - -<p>The shown values can also be filtered using the search box at the top of the sidebar.</p> - -<h2 id="Cache_Storage">Cache Storage</h2> - -<p>Under the Cache Storage type you can see the contents of any DOM caches created using the <a href="/en-US/docs/Web/API/Cache">Cache API</a>. If you select a cache, you'll see a list of the resources it contains. For each resource, you'll see:</p> - -<ul> - <li>the URL for the resource</li> - <li>the status code for the request that was made to fetch it.</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16810/cache_storage_detail.png" style="border: 1px solid black; display: block; height: 251px; margin-left: auto; margin-right: auto; width: 926px;"></p> - -<h2 id="Cookies">Cookies</h2> - -<p>When you select an origin inside the Cookies storage type from the storage tree, all the cookies present for that origin will be listed in the table widget. The cookies table has the following columns:</p> - -<ul> - <li><em>Name</em> — The name of the cookie</li> - <li><em>Path</em> — The path property of the cookie</li> - <li><em>Domain</em> — The domain of the cookie</li> - <li><em>Expires on</em> — The time when the cookie will expire. If the cookie is a session cookie, the value of this column will be "Session"</li> - <li><em>Last accessed on</em> — When the cookie was last read</li> - <li>Created on — When the cookie was created</li> - <li><em>Value</em> — The value of the cookie</li> - <li><em>HostOnly</em> — Is this cookie a domain cookie: that is, the domain value starts with a "."</li> - <li><em>Secure</em> — Is this cookie a secure cookie</li> - <li><em>HttpOnly</em> — Is this cookie HTTP only</li> - <li><em>sameSite</em> — Is this cookie a same-site cookie? Same-site cookies allow servers to mitigate the risk of CSRF and information leakage attacks by asserting that a particular cookie should only be sent with requests initiated from the same registrable domain.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: Some of the columns are not shown by default — to change the column display, right-click on the existing table headings and use the resulting context menu to show/hide the columns.</p> -</div> - -<p>You can edit cookies by double-clicking inside cells in the <a href="/en-US/docs/Tools/Storage_Inspector#Table_Widget">Table Widget</a> and editing the values they contain, and add new cookies by clicking the "Plus" (+) button and then editing the resulting new row to the value you want.</p> - -<h3 id="Context_menu">Context menu</h3> - -<p>The context menu for each cookie includes the following commands:</p> - -<ul> - <li><em>Add item</em> - add a new cookie.</li> - <li><em>Delete <cookie name>.<domain></em> - deletes the selected cookie</li> - <li><em>Delete All From <domain></em> - deletes all cookies from the selected domain. This must be an exact match. For example, if you select "Delete All From test8.example.com" only cookies from that domain will be deleted. Cookies from "test13.example.com" will not be deleted.</li> - <li><em>Delete All</em> - deletes all cookies for the current host.</li> - <li><em>Delete All Session Cookies</em> - deletes all cookies for the current host that are scheduled to be deleted when the browser shuts down</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16811/cookie_table_widget_context.png" style="border: 1px solid black; display: block; height: 250px; margin-left: auto; margin-right: auto; width: 924px;"></p> - -<h2 id="Local_storage_Session_storage">Local storage / Session storage</h2> - -<p>When an origin corresponding to local storage or session storage is selected, the table will list the name and value of all the items corresponding to local storage or session storage.</p> - -<p>You can edit local and session storage items by double-clicking inside cells in the <a href="/en-US/docs/Tools/Storage_Inspector#Table_Widget">Table Widget</a> and editing the values they contain:</p> - -<p>{{EmbedYouTube("UKLgBBUi11c")}}</p> - -<p>You can delete local storage and session storage entries using the context menu:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16768/delete_storage_menu.png" style="border: 1px solid black; display: block; height: 270px; margin-left: auto; margin-right: auto; width: 914px;"></p> - -<p>In Firefox 68 and later, you can also delete local and session storage entries by selecting the item and pressing the backspace key.</p> - -<p>Finally, you can add new storage items by clicking the "Plus" (+) button and then editing the resulting new row to the value you want.</p> - -<h2 id="IndexedDB">IndexedDB</h2> - -<p>When you select an origin inside the Indexed DB storage type in the storage tree, the table lists the details of all the databases present for that origin.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: The data shown in an IndexedDB database is a snapshot of the data as it was when you opened the Storage Inspector tool.</p> -</div> - -<p>Databases have the following details:</p> - -<ul> - <li><em>Database Name</em> — The name of the database</li> - <li><em>Storage</em> — The <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Different_types_of_data_storage">storage type</a> specified for the database</li> - <li><em>Origin</em> — Its origin</li> - <li><em>Version</em> — The database version</li> - <li><em>Object Stores</em> — Number of object stores in the database</li> -</ul> - -<p>When an IndexedDB database is selected in the storage tree, details about all the object stores are listed in the table. Any object store has the following details:</p> - -<ul> - <li><em>Object Store Name</em> — The name of the object store</li> - <li><em>Key</em> — The keyPath property of the object store.</li> - <li><em>Auto Increment</em> — Whether auto increment is enabled</li> - <li><em>Indexes</em> — Array of indexes present in the object store as shown below</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16812/indexed_db_details.png" style="border: 1px solid black; display: block; height: 250px; margin-left: auto; margin-right: auto; width: 926px;"></p> - -<p>When an object store is selected in the storage tree, all the items in that object store are listed in the table. All items have a key and a value associated with them.</p> - -<p>You can delete an IndexedDB database using the context menu in the Storage tree view:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16813/indexed_db_context_menu.png" style="border: 1px solid black; display: block; height: 249px; margin-left: auto; margin-right: auto; width: 924px;"></p> - -<p>If the database cannot be deleted (most commonly because there are still active connections to the database), a warning message will be displayed in the Storage Inspector:<img alt="" src="https://mdn.mozillademos.org/files/16815/indexedDB_delete_warning.png" style="border: 1px solid black; display: block; height: 250px; margin: 0px auto; width: 926px;"></p> - -<p>You can use the context menu in the table widget to delete all items in an object store, or a particular item:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16814/indexed_db_table_widget_context.png" style="border: 1px solid black; display: block; height: 249px; margin-left: auto; margin-right: auto; width: 924px;"></p> diff --git a/files/pl/tools/tools_toolbox/index.html b/files/pl/tools/tools_toolbox/index.html deleted file mode 100644 index 8d88d8469f..0000000000 --- a/files/pl/tools/tools_toolbox/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Toolbox -slug: Tools/Tools_Toolbox -translation_of: Tools/Tools_Toolbox -original_slug: Narzędzia/Tools_Toolbox ---- -<p>The Toolbox provides a single home for most of the developer tools that are built into Firefox. You can open it by selecting "Toggle Tools" from the Web Developer menu (under "Tools" on OS X and Linux, or "Firefox" on Windows), or by activating any tool hosted in it (for example, the JavaScript Debugger or the Page Inspector). Alternatively you can press Ctrl + Shift + I on Windows and Linux, or Cmd + Opt + I on OS X.</p> -<p>By default, the window appears docked to the bottom side of the Firefox window, but you can detach it if you like. This is what it looks like when it's docked:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/6923/toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">The window itself is split into two parts: a toolbar along the top, and a main pane underneath:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/6925/toolbox-annotated-29.png" style="display: block; margin-left: auto; margin-right: auto;"></p> -<h2 id="Toolbar">Toolbar</h2> -<p>The toolbar contains controls to activate a particular tool, to dock/float the window, and to close the window.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/7913/toolbox-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> -<h3 id="Node_picker">Node picker</h3> -<p>On the far left there's a button to activate the node picker. This lets you select a page element for inspection. See <a href="/en-US/docs/Tools/Page_Inspector#Selecting_elements">"Selecting elements"</a>.</p> -<h3 id="Toolbox-hosted_tools">Toolbox-hosted tools</h3> -<p>Then there is an array of labeled buttons which enables you to switch between the different tools hosted by the Toolbox. The array may include the following tools:</p> -<ul> - <li><a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a></li> - <li><a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector" title="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li> - <li><a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a></li> - <li><a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">Profiler</a></li> - <li><a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">Network Monitor</a></li> -</ul> -<p>Note that not all the hosted tools are always listed here: only the tools actually available in this context are shown (for example, not all tools support remote debugging yet, so if the debugging target is not the Firefox instance that launched the window, not all the hosted tools will be shown).</p> -<h3 id="Extra_tools">Extra tools</h3> -<p>Next there's an array of buttons that can be added or removed in the <a href="#Settings">developer tool settings</a>. By default this array includes:</p> -<ul> - <li><a href="/en-US/docs/Tools/Web_Console#The_split_console">Toggle split console</a></li> - <li><a href="/en-US/docs/Tools/Responsive_Design_View">Responsive Design Mode</a></li> -</ul> -<p>The following tools are not included in the toolbar by default, but you can add them in the <a href="#Settings">settings</a>:</p> -<ul> - <li><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Highlight painted area</a></li> - <li><a href="/en-US/docs/Tools/3D_View">3D view</a></li> - <li><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></li> - <li><a href="/en-US/docs/Tools/Eyedropper">Grab a color from the page</a></li> - <li>Take a full-page screenshot: this is new in Firefox 32. It takes a screenshot of the complete web page and saves it in your Downloads directory</li> - <li><a href="/en-US/docs/tools/Working_with_iframes">Select a frame as the currently targeted document</a>: this is new in Firefox 34.</li> -</ul> -<h3 id="Toolbox_controls">Toolbox controls</h3> -<p>Finally there's a row of buttons to:</p> -<ul> - <li>close the window</li> - <li>toggle the window between attached to the bottom of the browser window, and attached to the side of the browser window</li> - <li>toggle the window between standalone and attached to the browser window</li> - <li>access <a href="#Settings" title="#Settings">developer tool settings</a></li> -</ul> -<h2 id="Settings_2"><a name="Settings">Settings</a></h2> -<p>Clicking the "Settings" button (<img alt="" src="https://mdn.mozillademos.org/files/8623/settings-cog-small.png" style="width: 30px; height: 22px; display: inline-block;">) gives you access to settings for the Toolbox itself and for the tools it hosts:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/8619/devtools-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p> -<h3 id="Default_Firefox_Developer_Tools">Default Firefox Developer Tools</h3> -<p>This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.</p> -<h3 id="Available_Toolbox_Buttons">Available Toolbox Buttons</h3> -<p>This group of checkboxes determines which "standalone tools" get buttons in the <a href="/en-US/docs/Tools_Toolbox#Toolbar">toolbar</a>. This defaults to the node picker, the split console, and responsive design mode.</p> -<p>Firefox 32 adds a button to take a screenshot of the complete web page, which is unchecked by default.</p> -<h3 id="Choose_DevTools_theme">Choose DevTools theme</h3> -<p>This enables you to switch between a light and a dark theme:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/6933/light-theme.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/6931/dark-theme.png" style="display: block; margin-left: auto; margin-right: auto;"></p> -<h3 id="Common_preferences">Common preferences</h3> -<p>Settings that apply to more than one tool. There's just one of these:</p> -<ul> - <li><em>Enable persistent logs</em>: a setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.</li> -</ul> -<h3 id="Inspector">Inspector</h3> -<ul> - <li><em>Show browser styles</em>: a setting to control whether styles applied by the browser (<a href="/en-US/docs/Web/CSS/Cascade">user-agent styles</a>) should be displayed in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector#Rules_view">Rules view</a>. This setting is new in Firefox 32. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector#Computed_view">Computed view</a>.</li> - <li><em>Default color unit</em>: a setting to control how colors are represented in the inspector: - <ul> - <li>Hex</li> - <li>HSL(A)</li> - <li>RGB(A)</li> - <li>name.</li> - </ul> - </li> -</ul> -<h3 id="Web_Console">Web Console</h3> -<ul> - <li><em>Enable timestamps</em>: controls whether the Web Console displays timestamps. From Firefox 28 the Web Console defaults to hiding timestamps.</li> -</ul> -<h3 id="Style_Editor">Style Editor</h3> -<ul> - <li><em>Show original sources</em>: when a CSS preprocessor supporting source maps is used, this enables the Style Editor to display the original, preprocessor, sources rather than the generated CSS. <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">Learn more about Style Editor support for CSS source maps</a>. With this setting checked, the <a href="/en-US/docs/Tools/Page_Inspector#Link_to_CSS_file">Page Inspector Rules view will also provide links to the original sources</a>.</li> - <li><em>Autocomplete CSS</em>: enable the Style Editor to offer <a href="/en-US/docs/Tools/Style_Editor#Autocomplete">autocomplete suggestions</a>.</li> -</ul> -<h3 id="JavaScript_Profiler">JavaScript Profiler</h3> -<ul> - <li><em>Show Gecko platform data</em>: a setting to control whether or not profiles should include Gecko platform symbols.</li> -</ul> -<h3 id="Editor_Preferences">Editor Preferences</h3> -<p>Preferences for the <a href="http://codemirror.net/">CodeMirror</a> source editor, which is included in Firefox and used by several developer tools, including <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a> and the <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p> -<ul> - <li><em>Detect indentation</em>: auto-indent new lines based on the current indentation</li> - <li><em>Autoclose brackets</em></li> - <li><em>Indent using spaces</em></li> - <li><em>Tab size</em></li> - <li><em>Keybindings</em>: choose the default CodeMirror keybindings, or keybindings from one of several popular editors: - <ul> - <li>Vim</li> - <li>Emacs</li> - <li>Sublime Text</li> - </ul> - </li> -</ul> -<h3 id="Advanced_settings">Advanced settings</h3> -<ul> - <li><em>Disable cache</em>: disable the browser cache to simulate first-load performance. From Firefox 33 onwards this setting persists, meaning that if it is set, caching will be disabled whenever you reopen the devtools. Caching is re-enabled when the devtools are closed.</li> - <li><em>Disable JavaScript</em>: reload the current tab with JavaScript disabled</li> - <li><em>Enable chrome debugging</em>: enable you to use developer tools in the context of the browser itself, and not only web content</li> - <li><em>Enable remote debugging</em>: enable the developer tools to <a href="/en-US/docs/Tools/Remote_Debugging">debug remote Firefox instances</a></li> -</ul> -<h2 id="Main_Pane">Main Pane</h2> -<p>The content of the main pane in the window is entirely controlled by, and specific to, the hosted tool currently selected.</p> diff --git a/files/pl/tools/view_source/index.html b/files/pl/tools/view_source/index.html deleted file mode 100644 index 206d54d7da..0000000000 --- a/files/pl/tools/view_source/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: View Source -slug: Tools/View_source -translation_of: Tools/View_source -original_slug: Narzędzia/View_source ---- -<div>{{ToolsSidebar}}</div> - -<p>View Source lets you look at the HTML or XML source for the page you're viewing. To activate View Source:</p> - -<ul> - <li>context-click in the page and select <em>View Page Source</em></li> - <li>press <kbd>Ctrl</kbd> + <kbd>U</kbd> on Windows and Linux, or <kbd>Cmd</kbd> + <kbd>U</kbd> on macOS</li> -</ul> - -<p>The command opens a new tab with the source for the current page.</p> - -<h2 id="View_Source_features">View Source features</h2> - -<p>View Source has three additional features, which can be accessed from the context menu in the View Source tab:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16909/view_source_context_menu.png" style="display: block; height: 359px; margin: 0 auto; width: 225px;"></p> - -<dl> - <dt>Go to Line</dt> - <dd>Scrolls to the specified line. If the number is higher than the lines in a file, you receive an error message.</dd> - <dt>Wrap Long Lines (toggle)</dt> - <dd>Wraps long lines to the width of the page.</dd> - <dt>Syntax Highlighting (toggle)</dt> - <dd>Applies syntax highlighting to the code.When syntax highlighting is on, View Source also highlights parsing errors in red. Hovering your mouse over errors displays a tooltip explaining the error.</dd> -</dl> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16910/view_source_error.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> - -<p>This feature is useful when you're looking for HTML errors.</p> - -<p>To access Go to Line from the keyboard, press <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd>L</kbd> on macOS, or <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd> on Windows or Linux.</p> - -<h2 id="Link_to_a_line_number">Link to a line number</h2> - -<p>It is possible to link to a particular line, by adding the #lineNNN anchor to the url the browser will jump to the NNN line.</p> - -<p>For example <a>view-source:https://www.mozilla.org/#line100</a></p> - -<h2 id="View_Selection_Source">View Selection Source</h2> - -<p>If you select part of a web page and conext-click, you'll see a context menu item labeled "View Selection Source", that behaves just like "View Page Source", except you only see the source for the selection.</p> - -<h2 id="View_MathML_Source">View MathML Source</h2> - -<p>If you context-click while the mouse is over some <a href="/en-US/docs/Web/MathML">MathML</a>, you'll see a context menu item labeled "View MathML Source": click it to see the MathML source.</p> - -<h2 id="Limitations_of_View_Source">Limitations of View Source</h2> - -<p>There are limitations to what View Source does for you that you need to be aware of.</p> - -<h3 id="Error_reporter_≠_validator">Error reporter ≠ validator</h3> - -<p>View Source only reports parsing errors, <strong>not</strong> HTML validity errors. For example, putting a {{ HTMLElement("div") }} element as a child of a {{ HTMLElement("ul") }} element isn't a parse error, but it <strong>is not</strong> valid HTML. Therefore, this error will not be flagged in View Source. If you want to check that HTML is valid, you should use an HTML validator, such as <a class="external" href="http://validator.w3.org/" title="http://validator.w3.org/">the one offered by W3C</a>.</p> - -<h3 id="Not_all_parse_errors_are_reported">Not all parse errors are reported</h3> - -<p>Even though all the reported errors are parse errors according to the HTML specification, not all parse errors are reported by View Source. Among the errors that don't get reported:</p> - -<ul> - <li>Bytes that are illegal according to the document's encoding aren't marked as errors.</li> - <li>Forbidden characters aren't reported as errors.</li> - <li>Errors related to the end-of-file aren't reported.</li> - <li>Tree builder errors relating to text (as opposed to tags, comments, or doctypes) aren't reported.</li> - <li>Parse errors related to <code>xmlns</code> attributes aren't reported.</li> -</ul> - -<h2 id="XML_syntax_highlighting">XML syntax highlighting</h2> - -<p>View Source uses the HTML tokenizer when highlighting XML source. While the tokenizer has support for processing instructions when highlighting XML source, that's the only XML-specific capability provided. Because of this, doctypes that have an internal subset are not highlighted correctly, and entity references to custom entities are also not highlighted correctly.</p> - -<p>This mishighlighting can be seen by viewing the source of Firefox chrome files (such as XUL documents). However, this shouldn't be a problem in practice when viewing typical XML files.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="external" href="http://hsivonen.iki.fi/view-source/" title="http://hsivonen.iki.fi/view-source/">HTML5 Parser-Based View Source Syntax Highlighting</a> (Blog post)</li> -</ul> diff --git a/files/pl/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/pl/web/accessibility/keyboard-navigable_javascript_widgets/index.html deleted file mode 100644 index 3d015d8519..0000000000 --- a/files/pl/web/accessibility/keyboard-navigable_javascript_widgets/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: Keyboard-navigable JavaScript widgets -slug: Web/Accessibility/Keyboard-navigable_JavaScript_widgets -tags: - - Accessibility - - DOM - - Navigation -translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets -original_slug: Web/Dostępność/Keyboard-navigable_JavaScript_widgets ---- -<h3 id="Overview">Overview</h3> - -<p>Web applications often use JavaScript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels. These widgets are typically composed of {{ HTMLElement("div") }} and {{ HTMLElement("span") }} elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do. This document describes techniques to make JavaScript widgets accessible with the keyboard.</p> - -<h3 id="Using_tabindex">Using tabindex</h3> - -<p>By default, when people use the tab key to browse a webpage, only interactive elements (like links, form controls) get focused. With the <code>tabindex</code> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a>, authors can make other elements focusable, too. When set to <code>0</code>, the element becomes focusable by keyboard and script. When set to <code>-1</code>, the element becomes focusable by script, but it does not become part of the keyboard focus order.</p> - -<p>The order in which elements gain focus when using a keyboard, is the source order by default. In exceptional circumstances, authors may want to redefine the order. To do this, authors can set <code>tabindex</code> to any positive number.</p> - -<div class="warning"> -<p><strong>Warning:</strong> avoid using positive values for <code>tabindex</code>. Elements with a positive <code>tabindex</code> are put before the default interactive elements on the page, which means page authors will have to set (and maintain) <code>tabindex</code> values for all focusable elements on the page whenever they use one or more positive values for <code>tabindex</code>.</p> -</div> - -<p>The following table describes <code>tabindex</code> behavior in modern browsers:</p> - -<table class="fullwidth-table" style="width: 75% !important;"> - <tbody> - <tr> - <th><code>tabindex</code> attribute</th> - <th>Focusable with mouse or JavaScript via <code>element.focus()</code></th> - <th>Tab navigable</th> - </tr> - <tr> - <td>not present</td> - <td>Follows the platform convention of the element (yes for form controls, links, etc.).</td> - <td>Follows the platform convention of the element.</td> - </tr> - <tr> - <td>Negative (i.e. <code>tabindex="-1"</code>)</td> - <td>Yes</td> - <td>No; author must focus the element with <code><a class="external text" href="../../../../En/DOM/Element.focus" rel="nofollow" title="https://developer.mozilla.org/En/DOM/Element.focus">focus()</a></code> in response to arrow or other key presses.</td> - </tr> - <tr> - <td>Zero (i.e. <code>tabindex="0"</code>)</td> - <td>Yes</td> - <td>In tab order relative to element's position in document (note that interactive elements like {{ HTMLElement("a") }} have this behavior by default, they don't need the attribute).</td> - </tr> - <tr> - <td>Positive (e.g. <code>tabindex="33"</code>)</td> - <td>Yes</td> - <td><code>tabindex</code> value determines where this element is positioned in the tab order: smaller values will position elements earlier in the tab order than larger values (for example, <code>tabindex="7"</code> will be positioned before <code>tabindex="11"</code>).</td> - </tr> - </tbody> -</table> - -<h4 id="Non-native_controls">Non-native controls</h4> - -<p>Native HTML elements that are interactive, like {{ HTMLElement("a") }}, {{ HTMLElement("input") }} and {{ HTMLElement("select") }}, are already accessible by keyboards, so to use one of them is the fastest path to make components work with keyboards.</p> - -<p>Authors can also make a {{ HTMLElement("div") }} or {{ HTMLElement("span") }} keyboard accessible by adding a <code>tabindex</code> of <code>0</code>. This is particularly useful for components that use interactive elements that do not exist in HTML.</p> - -<h4 id="Grouping_controls">Grouping controls</h4> - -<p>For grouping widgets such as menus, tablists, grids, or tree views, the parent element should be in the tab order (<code>tabindex="0"</code>), and each descendent choice/tab/cell/row should be removed from the tab order (<code>tabindex="-1"</code>). Users should be able to navigate the descendent elements using arrow keys. (For a full description of the keyboard support that is normally expected for typical widgets, see the <a class="external text" href="https://www.w3.org/TR/wai-aria-practices-1.1/" rel="nofollow" title="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices</a>.)</p> - -<p>The example below shows this technique used with a nested menu control. Once keyboard focus lands on the containing {{ HTMLElement("ul") }} element, the JavaScript developer must programmatically manage focus and respond to arrow keys. For techniques for managing focus within widgets, see "Managing focus inside groups" below.</p> - -<p><em>Example 2: A menu control using tabindex to control keyboard access</em></p> - -<pre class="brush: html"><ul id="mb1" tabindex="0"> - <li id="mb1_menu1" tabindex="-1"> Font - <ul id="fontMenu" title="Font" tabindex="-1"> - <li id="sans-serif" tabindex="-1">Sans-serif</li> - <li id="serif" tabindex="-1">Serif</li> - <li id="monospace" tabindex="-1">Monospace</li> - <li id="fantasy" tabindex="-1">Fantasy</li> - </ul> - </li> - <li id="mb1_menu2" tabindex="-1"> Style - <ul id="styleMenu" title="Style" tabindex="-1"> - <li id="italic" tabindex="-1">Italics</li> - <li id="bold" tabindex="-1">Bold</li> - <li id="underline" tabindex="-1">Underlined</li> - </ul> - </li> - <li id="mb1_menu3" tabindex="-1"> Justification - <ul id="justificationMenu" title="Justication" tabindex="-1"> - <li id="left" tabindex="-1">Left</li> - <li id="center" tabindex="-1">Centered</li> - <li id="right" tabindex="-1">Right</li> - <li id="justify" tabindex="-1">Justify</li> - </ul> - </li> -</ul></pre> - -<h4 id="Disabled_controls">Disabled controls</h4> - -<p>When a custom control becomes disabled, remove it from the tab order by setting <code>tabindex="-1"</code>. Note that disabled items within a grouped widget (such as menu items in a menu) should remain navigable using arrow keys.</p> - -<h3 id="Managing_focus_inside_groups">Managing focus inside groups</h3> - -<p>When a user tabs away from a widget and returns, focus should return to the specific element that had focus, for example, the tree item or grid cell. There are two techniques for accomplishing this:</p> - -<ol> - <li>Roving <code>tabindex</code>: programmatically moving focus</li> - <li><code>aria-activedescendant</code>: managing a 'virtual' focus</li> -</ol> - -<h4 id="Technique_1_Roving_tabindex">Technique 1: Roving tabindex</h4> - -<p>Setting the <code>tabindex</code> of the focused element to "0" ensures that if the user tabs away from the widget and then returns, the selected item within the group retains focus. Note that updating the <code>tabindex</code> to "0" requires also updating the previously selected item to <code>tabindex="-1"</code>. This technique involves programmatically moving focus in response to key events and updating the <code>tabindex</code> to reflect the currently focused item. To do this:</p> - -<p>Bind a key down handler to each element in the group, and when an arrow key is used to move to another element:</p> - -<ol> - <li>programmatically apply focus to the new element,</li> - <li>update the <code>tabindex</code> of the focused element to "0", and</li> - <li>update the <code>tabindex</code> of the previously focused element to "-1".</li> -</ol> - -<p>Here's an example of a <a class="external text" href="https://files.paciellogroup.com/training/WWW2012/samples/Samples/aria/tree/index.html" rel="nofollow" title="Paciello Group Tree View example">WAI-ARIA tree view</a> using this technique.</p> - -<h5 id="Tips">Tips</h5> - -<h6 id="Use_element.focus_to_set_focus">Use element.focus() to set focus</h6> - -<p>Do not use <code>createEvent()</code>, <code>initEvent()</code> and <code>dispatchEvent()</code> to send focus to an element. DOM focus events are considered informational only: generated by the system after something is focused, but not actually used to set focus. Use <code>element.focus()</code> instead.</p> - -<h6 id="Use_onfocus_to_track_the_current_focus">Use onfocus to track the current focus</h6> - -<p>Don't assume that all focus changes will come via key and mouse events: assistive technologies such as screen readers can set the focus to any focusable element. Track focus using <code>onfocus</code> and <code>onblur</code> instead.</p> - -<p><code>onfocus</code> and <code>onblur</code> can now be used with every element. There is no standard DOM interface to get the current document focus. If you want to track the focus status, you can use the <a href="/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement">document.activeElement</a> to get the active element. You can also use <a href="/en-US/docs/Web/API/Document/hasFocus">document.hasFocus</a> to make sure if the current document focus. </p> - -<h4 id="Technique_2_aria-activedescendant">Technique 2: aria-activedescendant</h4> - -<p>This technique involves binding a single event handler to the container widget and using the <code>aria-activedescendant</code> to track a "virtual" focus. (For more information about ARIA, see this <a class="external text" href="../../../../An_Overview_of_Accessible_Web_Applications_and_Widgets" rel="nofollow" title="https://developer.mozilla.org/An_Overview_of_Accessible_Web_Applications_and_Widgets">overview of accessible web applications and widgets</a>.)</p> - -<p>The <code>aria-activedescendant</code> property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of <code>aria-activedescendant</code> and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this <a class="external text" href="http://www.oaa-accessibility.org/example/28/" rel="nofollow" title="http://www.oaa-accessibility.org/example/28/">ARIA radiogroup example</a> for a direct illustration of how this works.</p> - -<h3 id="General_Guidelines">General Guidelines</h3> - -<h4 id="Use_onkeydown_to_trap_key_events_not_onkeypress">Use onkeydown to trap key events, not onkeypress</h4> - -<p>IE will not fire <code>keypress</code> events for non-alphanumeric keys. Use <code>onkeydown</code> instead.</p> - -<h4 id="Ensure_that_keyboard_and_mouse_produce_the_same_experience">Ensure that keyboard and mouse produce the same experience</h4> - -<p>To ensure that the user experience is consistent regardless of input device, keyboard and mouse event handlers should share code where appropriate. For example, the code that updates the <code>tabindex</code> or the styling when users navigate using the arrow keys should also be used by mouse click handlers to produce the same changes.</p> - -<h4 id="Ensure_that_the_keyboard_can_be_used_to_activate_element">Ensure that the keyboard can be used to activate element</h4> - -<p>To ensure that the keyboard can be used to activate elements, any handlers bound to mouse events should also be bound to keyboard events. For example, to ensure that the Enter key will activate an element, if you have an <code>onclick="doSomething()"</code>, you should bind <code>doSomething()</code> to the key down event as well: <code>onkeydown="return event.keyCode != 13 || doSomething();"</code>.</p> - -<h4 id="Always_draw_the_focus_for_tabindex-1_items_and_elements_that_receive_focus_programatically">Always draw the focus for tabindex="-1" items and elements that receive focus programatically</h4> - -<p>IE will not automatically draw the focus outline for items that programatically receive focus. Choose between changing the background color via something like <code>this.style.backgroundColor = "gray";</code> or add a dotted border via <code>this.style.border = "1px dotted invert"</code>. In the dotted border case you will need to make sure those elements have an invisible 1px border to start with, so that the element doesn't grow when the border style is applied (borders take up space, and IE doesn't implement CSS outlines).</p> - -<h4 id="Prevent_used_key_events_from_performing_browser_functions">Prevent used key events from performing browser functions</h4> - -<p>If your widget handles a key event, prevent the browser from also handling it (for example, scrolling in response to the arrow keys) by using your event handler's return code. If your event handler returns <code>false</code>, the event will not be propagated beyond your handler.</p> - -<p>For example:</p> - -<pre class="brush: html"><span tabindex="-1" onkeydown="return handleKeyDown();"></pre> - -<p>If <code>handleKeyDown()</code> returns <code>false</code>, the event will be consumed, preventing the browser from performing any action based on the keystroke.</p> - -<h4 id="Dont_rely_on_consistent_behavior_for_key_repeat_at_this_point">Don't rely on consistent behavior for key repeat, at this point</h4> - -<p>Unfortunately <code>onkeydown</code> may or may not repeat depending on what browser and OS you're running on.</p> diff --git a/files/pl/web/api/audiocontext/index.html b/files/pl/web/api/audiocontext/index.html deleted file mode 100644 index db5d07d69c..0000000000 --- a/files/pl/web/api/audiocontext/index.html +++ /dev/null @@ -1,293 +0,0 @@ ---- -title: AudioContext -slug: Web/API/AudioContext -translation_of: Web/API/AudioContext ---- -<p>{{APIRef("Web Audio API")}}</p> - -<div> -<p>Interfejs <code>AudioContext</code> reprezentuje wykres przetwarzania sygnału audio, utworzonego z połączonych ze sobą modułów audio, przy czym każdy z tych modułów reprezentowany jest przez {{domxref("AudioNode")}}. Kontekst audio kontroluje zarówno powstawanie zawartych w nim powiązań, jak również realizację przetwarzania audio lub dekodowania. Niezbędne jest stworzenie AudioContext przez wprowadzeniem czegokolwiek innego, jako że wszystko dzieje się w kontekście.</p> -</div> - -<p>AudioCintext może stanowić cel (target) eventów, dlatego implementuje inferfejs {{domxref("EventTarget")}}.</p> - -<h2 id="Konstruktor">Konstruktor</h2> - -<dl> - <dt>{{domxref("AudioContext.AudioContext", "AudioContext()")}}</dt> - <dd>Tworzy i zwraca nowy obiekt <code>AudioContext</code>.</dd> -</dl> - -<h2 id="Właściwości">Właściwości</h2> - -<dl> - <dt>{{domxref("AudioContext.currentTime")}} {{readonlyInline}}</dt> - <dd>Zwraca <code>double</code> reprezentujące stale liczony czas w sekundach, używany do przyporządkowywania. Rozpoczyna się od 0.</dd> - <dt>{{domxref("AudioContext.destination")}} {{readonlyInline}}</dt> - <dd>Zwraca {{domxref("AudioDestinationNode")}} reprezentujące ostateczny cel wszyskich audio w kontekście. Należy traktować go jako urządzenie interpretujące audio.</dd> - <dt>{{domxref("AudioContext.listener")}} {{readonlyInline}}</dt> - <dd>Zwraca obiekt {{domxref("AudioListener")}}, używany do przestrzenności 3D.</dd> - <dt>{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}</dt> - <dd>Zwraca<code> float</code> reprezentujący wskaźnik próbkowania (w samplach na sekundę) używany we wszystkich połączeniach w tym kontekście. Wskaźnik próbkowania {{domxref("AudioContext")}} nie może być zmieniany.</dd> - <dt>{{domxref("AudioContext.state")}} {{readonlyInline}}</dt> - <dd>Zwraca aktualny status <code>AudioContext</code>.</dd> - <dt>{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}</dt> - <dd>Używany do zwracania kanału audio, tak by grany dźwięk w {{domxref("AudioContext")}} był poprawnie odtwarzany na urządządzeniu Firefox OS.</dd> -</dl> - -<h3 id="Event_handlers">Event handlers</h3> - -<dl> - <dt>{{domxref("AudioContext.onstatechange")}}</dt> - <dd>An event handler that runs when an event of type {{event("statechange")}} has fired. This occurs when the <code>AudioContext</code>'s state changes, due to the calling of one of the state change methods ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, or {{domxref("AudioContext.close")}}).</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Also implements methods from the interface </em>{{domxref("EventTarget")}}.</p> - -<dl> - <dt>{{domxref("AudioContext.close()")}}</dt> - <dd>Closes the audio context, releasing any system audio resources that it uses.</dd> - <dt>{{domxref("AudioContext.createBuffer()")}}</dt> - <dd>Creates a new, empty {{ domxref("AudioBuffer") }} object, which can then be populated by data and played via an {{ domxref("AudioBufferSourceNode") }}.</dd> - <dt>{{domxref("AudioContext.createConstantSource()")}}</dt> - <dd>Creates a {{domxref("ConstantSourceNode")}} object, which is an audio source that continuously outputs a monaural (one-channel) sound signal whose samples all have the same value.</dd> - <dt>{{domxref("AudioContext.createBufferSource()")}}</dt> - <dd>Creates an {{domxref("AudioBufferSourceNode")}}, which can be used to play and manipulate audio data contained within an {{ domxref("AudioBuffer") }} object. {{ domxref("AudioBuffer") }}s are created using {{domxref("AudioContext.createBuffer")}} or returned by {{domxref("AudioContext.decodeAudioData")}} when it successfully decodes an audio track.</dd> - <dt>{{domxref("AudioContext.createMediaElementSource()")}}</dt> - <dd>Creates a {{domxref("MediaElementAudioSourceNode")}} associated with an {{domxref("HTMLMediaElement")}}. This can be used to play and manipulate audio from {{HTMLElement("video")}} or {{HTMLElement("audio")}} elements.</dd> - <dt>{{domxref("AudioContext.createMediaStreamSource()")}}</dt> - <dd>Creates a {{domxref("MediaStreamAudioSourceNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may come from the local computer microphone or other sources.</dd> - <dt>{{domxref("AudioContext.createMediaStreamDestination()")}}</dt> - <dd>Creates a {{domxref("MediaStreamAudioDestinationNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may be stored in a local file or sent to another computer.</dd> - <dt>{{domxref("AudioContext.createScriptProcessor()")}}</dt> - <dd>Creates a {{domxref("ScriptProcessorNode")}}, which can be used for direct audio processing via JavaScript.</dd> - <dt>{{domxref("AudioContext.createStereoPanner()")}}</dt> - <dd>Creates a {{domxref("StereoPannerNode")}}, which can be used to apply stereo panning to an audio source.</dd> - <dt>{{domxref("AudioContext.createAnalyser()")}}</dt> - <dd>Creates an {{domxref("AnalyserNode")}}, which can be used to expose audio time and frequency data and for example to create data visualisations.</dd> - <dt>{{domxref("AudioContext.createBiquadFilter()")}}</dt> - <dd>Creates a {{domxref("BiquadFilterNode")}}, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc.</dd> - <dt>{{domxref("AudioContext.createChannelMerger()")}}</dt> - <dd>Creates a {{domxref("ChannelMergerNode")}}, which is used to combine channels from multiple audio streams into a single audio stream.</dd> - <dt>{{domxref("AudioContext.createChannelSplitter()")}}</dt> - <dd>Creates a {{domxref("ChannelSplitterNode")}}, which is used to access the individual channels of an audio stream and process them separately.</dd> - <dt>{{domxref("AudioContext.createConvolver()")}}</dt> - <dd>Creates a {{domxref("ConvolverNode")}}, which can be used to apply convolution effects to your audio graph, for example a reverberation effect.</dd> - <dt>{{domxref("AudioContext.createDelay()")}}</dt> - <dd>Creates a {{domxref("DelayNode")}}, which is used to delay the incoming audio signal by a certain amount. This node is also useful to create feedback loops in a Web Audio API graph.</dd> - <dt>{{domxref("AudioContext.createDynamicsCompressor()")}}</dt> - <dd>Creates a {{domxref("DynamicsCompressorNode")}}, which can be used to apply acoustic compression to an audio signal.</dd> - <dt>{{domxref("AudioContext.createGain()")}}</dt> - <dd>Creates a {{domxref("GainNode")}}, which can be used to control the overall volume of the audio graph.</dd> - <dt>{{domxref("AudioContext.createIIRFilter()")}}</dt> - <dd>Creates an {{domxref("IIRFilterNode")}}, which represents a second order filter configurable as several different common filter types.</dd> - <dt>{{domxref("AudioContext.createOscillator()")}}</dt> - <dd>Creates an {{domxref("OscillatorNode")}}, a source representing a periodic waveform. It basically generates a tone.</dd> - <dt>{{domxref("AudioContext.createPanner()")}}</dt> - <dd>Creates a {{domxref("PannerNode")}}, which is used to spatialise an incoming audio stream in 3D space.</dd> - <dt>{{domxref("AudioContext.createPeriodicWave()")}}</dt> - <dd>Creates a {{domxref("PeriodicWave")}}, used to define a periodic waveform that can be used to determine the output of an {{ domxref("OscillatorNode") }}.</dd> - <dt>{{domxref("AudioContext.createWaveShaper()")}}</dt> - <dd>Creates a {{domxref("WaveShaperNode")}}, which is used to implement non-linear distortion effects.</dd> - <dt>{{domxref("AudioContext.createAudioWorker()")}}</dt> - <dd>Creates an {{domxref("AudioWorkerNode")}}, which can interact with a web worker thread to generate, process, or analyse audio directly. This was added to the spec on August 29 2014, and is not implemented in any browser yet.</dd> - <dt>{{domxref("AudioContext.decodeAudioData()")}}</dt> - <dd>Asynchronously decodes audio file data contained in an {{domxref("ArrayBuffer")}}. In this case, the ArrayBuffer is usually loaded from an {{domxref("XMLHttpRequest")}}'s <code>response</code> attribute after setting the <code>responseType</code> to <code>arraybuffer</code>. This method only works on complete files, not fragments of audio files.</dd> - <dt>{{domxref("AudioContext.getOutputTimestamp()")}}</dt> - <dd>Returns a new <code>AudioTimestamp</code> containing two correlated context's audio stream position values: the <code>AudioTimestamp.contextTime</code> member contains the time of the sample frame which is currently being rendered by the audio output device (i.e., output audio stream position), in the same units and origin as context's {{domxref("AudioContext.currentTime")}}; the AudioTimestamp.performanceTime member contains the time estimating the moment when the sample frame corresponding to the stored contextTime value was rendered by the audio output device, in the same units and origin as {{domxref("performance.now()")}}.</dd> - <dt>{{domxref("AudioContext.resume()")}}</dt> - <dd>Resumes the progression of time in an audio context that has previously been suspended.</dd> - <dt>{{domxref("AudioContext.suspend()")}}</dt> - <dd>Suspends the progression of time in the audio context, temporarily halting audio hardware access and reducing CPU/battery usage in the process.</dd> -</dl> - -<h2 id="Obsolete_methods">Obsolete methods</h2> - -<dl> - <dt>{{domxref("AudioContext.createJavaScriptNode()")}}</dt> - <dd>Creates a {{domxref("JavaScriptNode")}}, used for direct audio processing via JavaScript. This method is obsolete, and has been replaced by {{domxref("AudioContext.createScriptProcessor()")}}.</dd> - <dt>{{domxref("AudioContext.createWaveTable()")}}</dt> - <dd>Creates a {{domxref("WaveTableNode")}}, used to define a periodic waveform. This method is obsolete, and has been replaced by {{domxref("AudioContext.createPeriodicWave()")}}.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<p>Basic audio context declaration:</p> - -<pre class="brush: js">var audioCtx = new AudioContext();</pre> - -<p>Cross browser variant:</p> - -<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext; -var audioCtx = new AudioContext(); - -var oscillatorNode = audioCtx.createOscillator(); -var gainNode = audioCtx.createGain(); -var finish = audioCtx.destination; -// etc.</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#the-audiocontext-interface', 'AudioContext')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}<br> - 35</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(25.0)}} </td> - <td>{{CompatNo}}</td> - <td>15.0{{property_prefix("webkit")}}<br> - 22</td> - <td>6.0{{property_prefix("webkit")}}</td> - </tr> - <tr> - <td><code>createStereoPanner()</code></td> - <td>{{CompatChrome(42.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(37.0)}} </td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(40.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>createConstantSource()</code></td> - <td>{{CompatChrome(56.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(52)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatOpera(43)}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Unprefixed</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android Webview</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(37.0)}} </td> - <td>2.2</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>createStereoPanner()</code></td> - <td>{{CompatChrome(42.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(42.0)}}</td> - </tr> - <tr> - <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>createConstantSource()</code></td> - <td>{{CompatChrome(56.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile(52)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(56.0)}}</td> - </tr> - <tr> - <td>Unprefixed</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOperaMobile(43)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul style="margin-left: 40px;"> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> - <li>{{domxref("OfflineAudioContext")}}</li> -</ul> diff --git a/files/pl/web/api/element/queryselector/index.html b/files/pl/web/api/element/queryselector/index.html deleted file mode 100644 index 62c6fe2561..0000000000 --- a/files/pl/web/api/element/queryselector/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: Element.querySelector() -slug: Web/API/Element/querySelector -translation_of: Web/API/Element/querySelector ---- -<div>{{APIRef("DOM")}}</div> - -<p>Returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.</p> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<pre class="syntaxbox"><var>element</var> = <em>baseElement</em>.querySelector(<em>selector</em>s); -</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>selectors</code></dt> - <dd>A group of <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a> to match the descendant elements of the {{domxref("Element")}} <code>baseElement</code> against; this must be valid CSS syntax, or a <code>SyntaxError</code> exception will occur. The first element found which matches this group of selectors is returned.</dd> -</dl> - -<h3 id="Return_value">Return value</h3> - -<p>The first descendant element of <code>baseElement</code> which matches the specified group of <code>selectors</code>. The entire hierarchy of elements is considered when matching, including those outside the set of elements including <code>baseElement</code> and its descendants; in other words, <code>selectors</code> is first applied to the whole document, not the <code>baseElement</code>, to generate an initial list of potential elements. The resulting elements are then examined to see if they are descendants of <code>baseElement</code>. The first match of those remaining elements is returned by the <code>querySelector()</code> method.</p> - -<p>If no matches are found, the returned value is <code>null</code>.</p> - -<h3 id="Exceptions">Exceptions</h3> - -<dl> - <dt><code>SyntaxError</code></dt> - <dd>The specified <code>selectors</code> are invalid.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<p>Let's consider a few examples.</p> - -<h3 id="Find_a_specific_element_with_specific_values_of_an_attribute">Find a specific element with specific values of an attribute</h3> - -<p>In this first example, the first {{HTMLElement("style")}} element which either has no type or has type "text/css" in the HTML document body is returned:</p> - -<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])"); -</pre> - -<h3 id="The_entire_hierarchy_counts">The entire hierarchy counts</h3> - -<p>The next example, below, demonstrates that the hierarchy of the entire document is considered when applying <code>selectors</code>, so that levels which are outside the specified <code>baseElement</code> are still considered when locating matches.</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><div> - <h5>Original content</h5> - <p> - inside paragraph - <span>inside span</span> - inside paragraph - </p> -</div> -<div> - <h5>Output</h5> - <div id="output"></div> -</div></pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">var baseElement = document.querySelector("p"); -document.getElementById("output").innerHTML = - (baseElement.querySelector("div span").innerHTML);</pre> - -<h4 id="Result">Result</h4> - -<p>The result looks like this:</p> - -<p>{{ EmbedLiveSample('The_entire_hierarchy_counts', 600, 160) }}</p> - -<p>Notice how the <code>"div span"</code> selector still matches the {{HTMLElement("span")}} element, even though the <code>baseElement</code> excludes the {{domxref("div")}} element which is part of the specified selector.</p> - -<p>The :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the baseElement.</p> - -<h3 id="More_examples">More examples</h3> - -<p>See {{domxref("Document.querySelector()")}} for additional examples of the proper format for the <code>selectors</code>.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll()')}}</td> - <td>{{Spec2('DOM4')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}</td> - <td>{{Spec2('Selectors API Level 2')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}</td> - <td>{{Spec2('Selectors API Level 1')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(1)}}</td> - <td>12</td> - <td>{{CompatGeckoDesktop(1.9.1)}}</td> - <td>9<sup>[1][2]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] <code>querySelector()</code> is supported in IE8, but only for CSS 2.1 selectors.<br> - [2] in IE8 and iE9 document must be in HTML5 mode (HTML5 doctype declaration present)</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("element.querySelectorAll()")}}</li> - <li>{{domxref("document.querySelector()")}}</li> - <li>{{domxref("document.querySelectorAll()")}}</li> - <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li> -</ul> diff --git a/files/pl/web/api/htmlelement/offsetheight/index.html b/files/pl/web/api/htmlelement/offsetheight/index.html deleted file mode 100644 index 1fe35e7691..0000000000 --- a/files/pl/web/api/htmlelement/offsetheight/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: element.offsetHeight -slug: Web/API/HTMLElement/offsetHeight -tags: - - DOM - - Dokumentacja_Gecko_DOM - - Gecko - - Strony_wymagające_dopracowania - - Wszystkie_kategorie -translation_of: Web/API/HTMLElement/offsetHeight -original_slug: Web/API/Element/offsetHeight ---- -<p>{{ ApiRef() }}</p> - -<h3 id="offsetHeight" name="offsetHeight">offsetHeight</h3> - -<p>Własność DHTML (Dynamic HyperText Markup Language), która daje wysokość relatywnego elementu do układu strony.</p> - -<h2 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h2> - -<pre class="eval">var<em>intElemOffsetHeight</em> = document.getElementById(<em>id_attribute_value</em>).offsetHeight; -</pre> - -<p><em>intElemOffsetHeight</em>is a variable storing an integer corresponding to the offsetHeight pixel value of the element. offsetHeight is a read-only property.</p> - -<h2 id="Opis" name="Opis">Opis</h2> - -<p>Typically, an element's <strong>offsetHeight</strong> is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.</p> - -<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> - -<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> -<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> -<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> - -<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> - -<p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> - -<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> - -<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> -</div> -<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> - -<p style="margin-top: 270px;"><img alt="grafika:offsetHeight.png"></p> - -<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> - -<p>offsetHeight is part of the MSIE's DHTML object model. offsetHeight is not part of any W3C specification or technical recommendation.</p> - -<h2 id="Uwagi" name="Uwagi">Uwagi</h2> - -<p>offsetHeight is a property of the DHTML object model which was first introduced by MSIE. It is sometimes referred as an element physical/graphical dimensions or an element's box height.</p> - -<h2 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h2> - -<ul> - <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetheight.asp?frame=true">MSDN's Definicja offsetHeight</a></li> - <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li> - <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/dom_el_ref18.html">Gecko DOM Reference on offsetHeight</a></li> -</ul> diff --git a/files/pl/web/api/htmlselectelement/index.html b/files/pl/web/api/htmlselectelement/index.html deleted file mode 100644 index 72c3ab95d3..0000000000 --- a/files/pl/web/api/htmlselectelement/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: HTMLSelectElement -slug: Web/API/HTMLSelectElement -tags: - - API - - HTML DOM - - HTMLSelectElement - - Interface - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/HTMLSelectElement ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p>The <code><strong>HTMLSelectElement</strong></code> interface represents a {{HTMLElement("select")}} HTML Element. These elements also share all of the properties and methods of other HTML elements via the {{domxref("HTMLElement")}} interface.</p> - -<p>{{InheritanceDiagram(600, 120)}}</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface inherits the properties of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLSelectElement.autofocus")}}</dt> - <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("autofocus", "select")}} HTML attribute, which indicates whether the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified. {{gecko_minversion_inline("2.0")}}</dd> - <dt>{{domxref("HTMLSelectElement.disabled")}}</dt> - <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("disabled", "select")}} HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.</dd> - <dt>{{domxref("HTMLSelectElement.form")}}{{ReadOnlyInline}}</dt> - <dd>An {{domxref("HTMLFormElement")}} referencing the form that this element is associated with. If the element is not associated with of a {{HTMLElement("form")}} element, then it returns <code>null</code>.</dd> - <dt>{{domxref("HTMLSelectElement.labels")}}{{ReadOnlyInline}}</dt> - <dd>A {{domxref("NodeList")}} of {{HTMLElement("label")}} elements associated with the element.</dd> - <dt>{{domxref("HTMLSelectElement.length")}}</dt> - <dd>An <code>unsigned long</code> The number of {{HTMLElement("option")}} elements in this <code>select</code> element.</dd> - <dt>{{domxref("HTMLSelectElement.multiple")}}</dt> - <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("multiple", "select")}} HTML attribute, which indicates whether multiple items can be selected.</dd> - <dt>{{domxref("HTMLSelectElement.name")}}</dt> - <dd>A {{domxref("DOMString")}} reflecting the {{htmlattrxref("name", "select")}} HTML attribute, containing the name of this control used by servers and DOM search functions.</dd> - <dt>{{domxref("HTMLSelectElement.options")}}{{ReadOnlyInline}}</dt> - <dd>An {{domxref("HTMLOptionsCollection")}} representing the set of {{HTMLElement("option")}} ({{domxref("HTMLOptionElement")}}) elements contained by this element.</dd> - <dt>{{domxref("HTMLSelectElement.required")}}</dt> - <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("required", "select")}} HTML attribute, which indicates whether the user is required to select a value before submitting the form. {{gecko_minversion_inline("2.0")}}</dd> - <dt>{{domxref("HTMLSelectElement.selectedIndex")}}</dt> - <dd>A <code>long</code> reflecting the index of the first selected {{HTMLElement("option")}} element. The value <code>-1</code> indicates no element is selected.</dd> - <dt>{{domxref("HTMLSelectElement.selectedOptions")}}{{ReadOnlyInline}}</dt> - <dd>An {{domxref("HTMLCollection")}} representing the set of {{HTMLElement("option")}} elements that are selected.</dd> - <dt>{{domxref("HTMLSelectElement.size")}}</dt> - <dd>A <code>long</code> reflecting the {{htmlattrxref("size", "select")}} HTML attribute, which contains the number of visible items in the control. The default is 1, unless <code>multiple</code> is <code>true</code>, in which case it is 4.</dd> - <dt>{{domxref("HTMLSelectElement.type")}}{{ReadOnlyInline}}</dt> - <dd>A {{domxref("DOMString")}} represeting the form control's type. When <code>multiple</code> is <code>true</code>, it returns <code>"select-multiple"</code>; otherwise, it returns <code>"select-one"</code>.</dd> - <dt>{{domxref("HTMLSelectElement.validationMessage")}}{{ReadOnlyInline}}</dt> - <dd>A {{domxref("DOMString")}} representing a localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is false), or it satisfies its constraints.</dd> - <dt>{{domxref("HTMLSelectElement.validity")}}{{ReadOnlyInline}}</dt> - <dd>A {{domxref("ValidityState")}} reflecting the validity state that this control is in.</dd> - <dt>{{domxref("HTMLSelectElement.value")}}</dt> - <dd>A {{domxref("DOMString")}} reflecting the value of the form control. Returns the <code>value</code> property of the first selected option element if there is one, otherwise the empty string.</dd> - <dt>{{domxref("HTMLSelectElement.willValidate")}}{{ReadOnlyInline}}</dt> - <dd>A {{jsxref("Boolean")}} that indicates whether the button is a candidate for constraint validation. It is <code>false</code> if any conditions bar it from constraint validation.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface inherits the methods of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLSelectElement.add()")}}</dt> - <dd>Adds an element to the collection of <code>option</code> elements for this <code>select</code> element.</dd> - <dt>{{domxref("HTMLSelectElement.blur()")}}{{obsolete_inline}}</dt> - <dd>Removes input focus from this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd> - <dt>{{domxref("HTMLSelectElement.checkValidity()")}}</dt> - <dd>Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable {{domxref("HTMLInputElement/invalid_event", "invalid")}} event at the element (and returns <code>false</code>).</dd> - <dt>{{domxref("HTMLSelectElement.focus()")}}{{obsolete_inline}}</dt> - <dd>Gives input focus to this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd> - <dt>{{domxref("HTMLSelectElement.item()")}}</dt> - <dd>Gets an item from the options collection for this {{HTMLElement("select")}} element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.</dd> - <dt>{{domxref("HTMLSelectElement.namedItem()")}}</dt> - <dd>Gets the item in the options collection with the specified name. The name string can match either the <code>id</code> or the <code>name</code> attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.</dd> - <dt>{{domxref("HTMLSelectElement.remove()")}}</dt> - <dd>Removes the element at the specified index from the options collection for this <code>select</code> element.</dd> - <dt>{{domxref("HTMLSelectElement.reportValidity()")}}</dt> - <dd>This method reports the problems with the constraints on the element, if any, to the user. If there are problems, it fires a cancelable {{domxref("HTMLInputElement/invalid_event", "invalid")}} event at the element, and returns <code>false</code>; if there are no problems, it returns <code>true</code>.</dd> - <dt>{{domxref("HTMLSelectElement.setCustomValidity()")}}</dt> - <dd>Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does <em>not</em> have a custom validity error.</dd> -</dl> - -<h2 id="Events">Events</h2> - -<p>Listen to these events using {{domxref("EventTarget/addEventListener", "addEventListener()")}} or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface:</p> - -<dl> - <dt>{{domxref("HTMLElement/input_event", "input")}} event</dt> - <dd>Fires when the <code>value</code> of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed.</dd> -</dl> - -<h2 id="Example">Example</h2> - -<h3 id="Get_information_about_the_selected_option">Get information about the selected option</h3> - -<pre class="brush: js">/* assuming we have the following HTML -<select id='s'> - <option>First</option> - <option selected>Second</option> - <option>Third</option> -</select> -*/ - -var select = document.getElementById('s'); - -// return the index of the selected option -console.log(select.selectedIndex); // 1 - -// return the value of the selected option -console.log(select.options[select.selectedIndex].value) // Second -</pre> - -<p>A better way to track changes to the user's selection is to watch for the {{domxref("HTMLElement/change_event", "change")}} event to occur on the <code><select></code>. This will tell you when the value changes, and you can then update anything you need to. See <a href="/en-US/docs/Web/API/HTMLElement/change_event#<select>_element">the example provided</a> in the documentation for the <code>change</code> event for details.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Since the latest snapshot, {{SpecName('HTML5 W3C')}}, it adds the <code>autocomplete</code> property and the <code>reportValidity()</code> method.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Is a snapshot of {{SpecName("HTML WHATWG")}}.<br> - It adds the <code>autofocus</code>, <code>form</code>, <code>required</code>, <code>labels</code>, <code>selectedOptions</code>, <code>willValidate</code>, <code>validity</code> and <code>validationMessage</code> properties.<br> - The <code>tabindex</code> property and the <code>blur()</code> and <code>focus()</code> methods have been moved to {{domxref("HTMLElement")}}.<br> - The methods <code>item()</code>, <code>namedItem()</code>, <code>checkValidity()</code> and <code>setCustomValidity()</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td><code>options</code> now returns an {{domxref("HTMLOptionsCollection")}}.<br> - <code>length</code> now returns an <code>unsigned long</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("api.HTMLSelectElement")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{HTMLElement("select")}} HTML element, which implements this interface.</li> -</ul> diff --git a/files/pl/web/api/mediaelementaudiosourcenode/index.html b/files/pl/web/api/mediaelementaudiosourcenode/index.html deleted file mode 100644 index 81bbce3c25..0000000000 --- a/files/pl/web/api/mediaelementaudiosourcenode/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: MediaElementAudioSourceNode -slug: Web/API/MediaElementAudioSourceNode -translation_of: Web/API/MediaElementAudioSourceNode ---- -<p>{{APIRef("Web Audio API")}}</p> - -<div> -<p>The <code>MediaElementAudioSourceNode</code> interface represents an audio source consisting of an HTML5 {{ htmlelement("audio") }} or {{ htmlelement("video") }} element. It is an {{domxref("AudioNode")}} that acts as an audio source.</p> -</div> - -<p>A <code>MediaElementSourceNode</code> has no inputs and exactly one output, and is created using the {{domxref("AudioContext.createMediaElementSource")}} method. The amount of channels in the output equals the number of channels of the audio referenced by the {{domxref("HTMLMediaElement")}} used in the creation of the node, or is 1 if the {{domxref("HTMLMediaElement")}} has no audio.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Number of inputs</th> - <td><code>0</code></td> - </tr> - <tr> - <th scope="row">Number of outputs</th> - <td><code>1</code></td> - </tr> - <tr> - <th scope="row">Channel count</th> - <td>defined by the media in the {{domxref("HTMLMediaElement")}} passed to the {{domxref("AudioContext.createMediaElementSource")}} method that created it.</td> - </tr> - </tbody> -</table> - -<h2 id="Constructor">Constructor</h2> - -<dl> - <dt>{{domxref("MediaElementAudioSourceNode.MediaElementAudioSourceNode", "MediaElementAudioSourceNode()")}}</dt> - <dd>Creates a new <code>MediaElementAudioSourceNode</code> object instance.</dd> -</dl> - -<h2 id="Properties">Properties</h2> - -<p><em>Inherits properties from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p> - -<dl> - <dt>{{domxref("MediaElementAudioSourceNode.mediaElement", "mediaElement")}} {{ReadOnlyInline}}</dt> - <dd>The {{domxref("HTMLMediaElement")}} used when constructing this <code>MediaStreamAudioSourceNode</code>.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Inherits methods from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p> - -<h2 id="Example">Example</h2> - -<p>{{page("/en-US/docs/Web/API/AudioContext.createMediaElementSource","Example")}}</p> - -<h2 id="Specification">Specification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#mediaelementaudiosourcenode', 'MediaElementAudioSourceNode')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("api.MediaElementAudioSourceNode")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> -</ul> diff --git a/files/pl/web/api/mousescrollevent/index.html b/files/pl/web/api/mousescrollevent/index.html deleted file mode 100644 index ed0ab35316..0000000000 --- a/files/pl/web/api/mousescrollevent/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: MouseScrollEvent -slug: Web/API/MouseScrollEvent -translation_of: Web/API/MouseScrollEvent ---- -<p>{{APIRef("DOM Events")}}{{ non-standard_header() }}{{deprecated_header}}</p> - -<p>The DOM <code>MouseScrollEvent</code> represents events that occur due to the user moving a mouse wheel or similar input device.</p> - -<p>Use standardardized {{ domxref("WheelEvent") }} instead of this legacy event object if available.</p> - -<h2 id="Method_overview">Method overview</h2> - -<table class="standard-table"> - <tbody> - <tr> - <td><code>void <a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIDOMMouseScrollEvent#initMouseScrollEvent%28%29">initMouseScrollEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in nsIDOMAbstractView viewArg, in long detailArg, in long screenXArg, in long screenYArg, in long clientXArg, in long clientYArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in unsigned short buttonArg, in nsIDOMEventTarget relatedTargetArg, in long axis);</code></td> - </tr> - </tbody> -</table> - -<h2 id="Attributes">Attributes</h2> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Attribute</td> - <td class="header">Type</td> - <td class="header">Description</td> - </tr> - <tr> - <td><code>axis</code></td> - <td><code>long</code></td> - <td>Indicates scroll direction. <strong>Read only.</strong></td> - </tr> - </tbody> -</table> - -<h2 id="Constants">Constants</h2> - -<h3 id="Delta_modes">Delta modes</h3> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Constant</td> - <td class="header">Value</td> - <td class="header">Description</td> - </tr> - <tr> - <td><code>HORIZONTAL_AXIS</code></td> - <td><code>0x01</code></td> - <td>The event is caused by horizontal wheel operation.</td> - </tr> - <tr> - <td><code><code>VERTICAL_AXIS</code></code></td> - <td><code>0x02</code></td> - <td>The event is caused by vertical wheel operation.</td> - </tr> - </tbody> -</table> - -<h2 id="Methods">Methods</h2> - -<h3 id="initMouseScrollEvent()">initMouseScrollEvent()</h3> - -<p>See <a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIDOMMouseScrollEvent#initMouseScrollEvent%28%29" title="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIDOMMouseScrollEvent#initMouseScrollEvent%28%29">nsIDOMMouseScrollEvent::initMouseScrollEvent()</a>.</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatGeckoMobile("1.9.1") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 class="note" id="See_also">See also</h2> - -<ul> - <li><code>DOMMouseScroll</code></li> - <li><code>MozMousePixelScroll</code></li> - <li>Non-gecko browsers' legacy mouse wheel event object: {{ domxref("MouseWheelEvent") }}</li> - <li>Standardized mouse wheel event object: {{ domxref("WheelEvent") }}</li> -</ul> diff --git a/files/pl/web/api/node/nodetype/index.html b/files/pl/web/api/node/nodetype/index.html deleted file mode 100644 index e829a351b3..0000000000 --- a/files/pl/web/api/node/nodetype/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: element.nodeType -slug: Web/API/Node/nodeType -tags: - - DOM - - Dokumentacja_Gecko_DOM - - Gecko - - Wszystkie_kategorie -translation_of: Web/API/Node/nodeType -original_slug: Web/API/Element/nodeType ---- -<div> - {{ApiRef}}</div> -<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> -<p>Zwraca kod reprezentujący typ węzła.</p> -<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> -<pre class="syntaxbox"><var>typ</var> = document.nodeType -</pre> -<p><code>typ</code> jest zmienną liczbową typu <code>unsigned short</code> o jednej z poniższych wartości:</p> -<ul> - <li>Node.ELEMENT_NODE == 1</li> - <li>Node.ATTRIBUTE_NODE == 2</li> - <li>Node.TEXT_NODE == 3</li> - <li>Node.CDATA_SECTION_NODE == 4</li> - <li>Node.ENTITY_REFERENCE_NODE == 5</li> - <li>Node.ENTITY_NODE == 6</li> - <li>Node.PROCESSING_INSTRUCTION_NODE == 7</li> - <li>Node.COMMENT_NODE == 8</li> - <li>Node.DOCUMENT_NODE == 9</li> - <li>Node.DOCUMENT_TYPE_NODE == 10</li> - <li>Node.DOCUMENT_FRAGMENT_NODE == 11</li> - <li>Node.NOTATION_NODE == 12</li> -</ul> -<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> -<p>Ten przykład sprawdza czy pierwszy węzeł wewnątrz elementu document jest comment node, i jeśli nie jest, wyświetli wiadomość.</p> -<pre class="brush:js">var node = document.documentElement.firstChild; - -if(node.nodeType != Node.COMMENT_NODE) - alert("You should comment your code well!"); -</pre> -<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-111237558">DOM Level 2 Core: nodeType</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-111237558">DOM Level 3 Core: nodeType</a></li> -</ul> diff --git a/files/pl/web/api/push_api/index.html b/files/pl/web/api/push_api/index.html deleted file mode 100644 index e889cb6c01..0000000000 --- a/files/pl/web/api/push_api/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Push API -slug: Web/API/Push_API -translation_of: Web/API/Push_API ---- -<div>{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}</div> - -<p class="summary"><strong>Push API</strong> daje aplikacjom web możliwość odbierania wiadomości przesłanych z serwera, niezależnie do tego czy aplikacja pracuje w tle, lub jest wogóle załadowana w przeglądarce internetowej. To pozwala programistom dostarczać (asynchronicznie) powiadomienia i aktualizacje do użytkowników którzy zezwolili na przesyłanie notyfikacj, w efekcie mamy lepszą komunikację z użytkownikiem, którzy dostają nowe treści w odpowiednim czasie.th timely new content.</p> - -<h2 id="Pojęcia_i_stosowanie">Pojęcia i stosowanie</h2> - -<p>For an app to receive push messages, it has to have an active <a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a>. When the service worker is active, it can subscribe to push notifications, using {{domxref("PushManager.subscribe()")}}.</p> - -<p>The resulting {{domxref("PushSubscription")}} includes all the information that the application needs to send a push message: an endpoint and the encryption key needed for sending data.</p> - -<p>The service worker will be started as necessary to handle incoming push messages, which are delivered to the {{domxref("ServiceWorkerGlobalScope.onpush")}} event handler. This allows apps to react to push messages being received, for example, by displaying a notification (using {{domxref("ServiceWorkerRegistration.showNotification()")}}.)</p> - -<p>Each subscription is unique to a service worker. The endpoint for the subscription is a unique <a href="http://www.w3.org/TR/capability-urls/">capability URL</a>: knowledge of the endpoint is all that is necessary to send a message to your application. The endpoint URL therefore needs to be kept secret, or other applications might be able to send push messages to your application.</p> - -<p>Activating a service worker to deliver a push message can result in increased resource usage, particularly of the battery. Different browsers have different schemes for handling this, there is currently no standard mechanism. Firefox allows a limited number (quota) of push messages to be sent to an application, although Push messages that generate notifications are exempt from this limit. The limit is refreshed each time the site is visited. In comparison, Chrome applies no limit, but requires that every push message causes a notification to be displayed.</p> - -<div class="note"> -<p><strong>Note</strong>: As of Gecko 44, the allowed quota of push messages per application is not incremented when a new notification fires, when another is still visible, for a period of three seconds. This handles cases where a burst of notifications is received, and not all generate a visible notification.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: Chrome versions earlier than 52 require you to set up a project on <a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> to send push messages, and use the associated project number and API key when sending push notifications. It also requires an app manifest, with some special parameters to use this service.</p> -</div> - -<h2 id="Interfejsy">Interfejsy</h2> - -<dl> - <dt>{{domxref("PushEvent")}}</dt> - <dd>Represents a push action, sent to the <a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope">global scope</a> of a {{domxref("ServiceWorker")}}. It contains information sent from an application to a {{domxref("PushSubscription")}}.</dd> - <dt>{{domxref("PushManager")}}</dt> - <dd>Provides a way to receive notifications from third-party servers, as well as request URLs for push notifications. This interface has replaced the functionality offered by the obsolete {{domxref("PushRegistrationManager")}} interface.</dd> - <dt>{{domxref("PushMessageData")}}</dt> - <dd>Provides access to push data sent by a server, and includes methods to manipulate the received data.</dd> - <dt>{{domxref("PushSubscription")}}</dt> - <dd>Provides a subcription's URL endpoint, and allows unsubscription from a push service.</dd> -</dl> - -<h2 id="Wzbogacenia_Service_worker">Wzbogacenia Service worker</h2> - -<p>The following additions to the <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> have been specified in the Push API spec to provide an entry point for using Push messages. They also monitor and respond to push and subscription change events.</p> - -<dl> - <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt> - <dd>Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. This is the entry point into using Push messaging.</dd> - <dt>{{domxref("ServiceWorkerGlobalScope.onpush")}}</dt> - <dd>An event handler fired whenever a {{Event("push")}} event occurs; that is, whenever a server push message is received.</dd> - <dt>{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}</dt> - <dd>An event handler fired whenever a {{Event("pushsubscriptionchange")}} event occurs; for example, when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time.)</dd> -</dl> - -<h2 id="Przykłady">Przykłady</h2> - -<p><a href="https://serviceworke.rs/">ServiceWorker Cookbook</a> Mozilli zawiera dużo przydatnych przykładów Push.</p> - -<h2 id="Specyfikacje">Specyfikacje</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName("Push API")}}</td> - <td>{{Spec2("Push API")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Zgodność_przeglądarek">Zgodność przeglądarek</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funkcjonalność</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(42.0)}}</td> - <td>{{CompatGeckoDesktop(44.0)}}<sup>[1][3]</sup></td> - <td>{{CompatNo}}<sup>[2]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("PushEvent.data")}},<br> - {{domxref("PushMessageData")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(44.0)}}<sup>[3]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile(48.0)}}<sup>[4]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}<sup>[2]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(42.0)}}</td> - </tr> - <tr> - <td>{{domxref("PushEvent.data")}},<br> - {{domxref("PushMessageData")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile(48.0)}}<sup>[4]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<ul> - <li>[1] Aktualnie dostępne tylko dla wersji desktop przeglądarek Firefox; również, wiadomości push są dostarczane tylko wtedy gdy Firefox jest uruchomiony.</li> - <li>[2] Aktualnie nie jest zaimplementowane. Zobacz <a href="https://dev.modern.ie/platform/status/pushapi/">Microsoft Edge status information</a>.</li> - <li>[3] Push (i <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>) zostały zablokowane w wersjach przeglądarek <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</li> - <li>[4] Push jest już dostępny (domoyślnie) w przeglądarkach Firefox oraz Android version 48.</li> -</ul> - -<h2 id="Zobacz_również">Zobacz również</h2> - -<ul> - <li><a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">Sending VAPID identified WebPush Notifications via Mozilla’s Push Service</a></li> - <li><a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>, Matt Gaunt</li> - <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li> -</ul> diff --git a/files/pl/web/api/response/index.html b/files/pl/web/api/response/index.html deleted file mode 100644 index 394a5a4a4d..0000000000 --- a/files/pl/web/api/response/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Response -slug: Web/API/Response -tags: - - API - - Experimental - - Fetch - - Fetch API - - Interface - - NeedsTranslation - - Reference - - Response - - TopicStub -translation_of: Web/API/Response ---- -<div>{{APIRef("Fetch API")}}</div> - -<p>The <strong><code>Response</code></strong> interface of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents the response to a request.</p> - -<p>You can create a new <code>Response</code> object using the {{domxref("Response.Response()")}} constructor, but you are more likely to encounter a Response object being returned as the result of another API operation, for example a service worker {{domxref("Fetchevent.respondWith")}}, or a simple {{domxref("GlobalFetch.fetch()")}}.</p> - -<h2 id="Constructor">Constructor</h2> - -<dl> - <dt>{{domxref("Response.Response","Response()")}}</dt> - <dd>Creates a new <code>Response</code> object.</dd> -</dl> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt> - <dd>Contains the {{domxref("Headers")}} object associated with the response.</dd> - <dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt> - <dd>Contains a boolean stating whether the response was successful (status in the range 200-299) or not.</dd> - <dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt> - <dd>Indicates whether or not the response is the result of a redirect; that is, its URL list has more than one entry.</dd> - <dt>{{domxref("Response.status")}} {{readonlyinline}}</dt> - <dd>Contains the status code of the response (e.g., <code>200</code> for a success).</dd> - <dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt> - <dd>Contains the status message corresponding to the status code (e.g., <code>OK</code> for <code>200</code>).</dd> - <dt>{{domxref("Response.trailers")}}</dt> - <dd>Contains a {{domxref("Promise")}} resolving to a {{domxref("Headers")}} object associated with the response with {{domxref("Response.headers")}} for values of the HTTP {{HTTPHeader("Trailer")}} header.</dd> - <dt>{{domxref("Response.type")}} {{readonlyinline}}</dt> - <dd>Contains the type of the response (e.g., <code>basic</code>, <code>cors</code>).</dd> - <dt>{{domxref("Response.url")}} {{readonlyinline}}</dt> - <dd>Contains the URL of the response.</dd> - <dt>{{domxref("Response.useFinalURL")}}</dt> - <dd>Contains a boolean stating whether this is the final URL of the response.</dd> -</dl> - -<p><code>Response</code> implements {{domxref("Body")}}, so it also has the following properties available to it:</p> - -<dl> - <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt> - <dd>A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.</dd> - <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt> - <dd>Stores a {{domxref("Boolean")}} that declares whether the body has been used in a response yet.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{domxref("Response.clone()")}}</dt> - <dd>Creates a clone of a <code>Response</code> object.</dd> - <dt>{{domxref("Response.error()")}}</dt> - <dd>Returns a new <code>Response</code> object associated with a network error.</dd> - <dt>{{domxref("Response.redirect()")}}</dt> - <dd>Creates a new response with a different URL.</dd> -</dl> - -<p><code>Response</code> implements {{domxref("Body")}}, so it also has the following methods available to it:</p> - -<dl> - <dt>{{domxref("Body.arrayBuffer()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.</dd> - <dt>{{domxref("Body.blob()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd> - <dt>{{domxref("Body.formData()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd> - <dt>{{domxref("Body.json()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.</dd> - <dt>{{domxref("Body.text()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text).</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<p>In our <a href="https://github.com/mdn/fetch-examples/tree/master/basic-fetch">basic fetch example</a> (<a href="http://mdn.github.io/fetch-examples/basic-fetch/">run example live</a>) we use a simple <code>fetch()</code> call to grab an image and display it in an {{htmlelement("img")}} tag. The <code>fetch()</code> call returns a promise, which resolves with the <code>Response</code> object associated with the resource fetch operation. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.</p> - -<pre class="brush: js">const image = document.querySelector('.my-image'); -fetch('flowers.jpg').then(function(response) { - return response.blob(); -}).then(function(blob) { - const objectURL = URL.createObjectURL(blob); - image.src = objectURL; -});</pre> - -<p>You can also use the {{domxref("Response.Response()")}} constructor to create your own custom <code>Response</code> object:</p> - -<pre class="brush: js">const response = new Response();</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#response-class','Response')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Response")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/pl/web/api/screen/width/index.html b/files/pl/web/api/screen/width/index.html deleted file mode 100644 index 352f6cfbf3..0000000000 --- a/files/pl/web/api/screen/width/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Screen.width -slug: Web/API/Screen/width -translation_of: Web/API/Screen/width ---- -<div> -<div>{{APIRef("CSSOM View")}}</div> -</div> - -<p>Zwraca szerokość ekranu.</p> - -<h2 id="Syntax" name="Syntax">Składnia</h2> - -<pre class="syntaxbox"><var>lWidth</var> = window.screen.width -</pre> - -<h2 id="Example" name="Example">Przykład</h2> - -<pre class="brush:js">// crude way to check that the screen is at least 1024x768 -if (window.screen.width >= 1024 && window.screen.height >= 768) { - // resolution is 1024x768 or above -} -</pre> - -<h2 id="Notes" name="Notes">Notes</h2> - -<p>Note that not all of the width given by this property may be available to the window itself. When other widgets occupy space that cannot be used by the <code>window</code> object, there is a difference in <code>window.screen.width</code> and <code>window.screen.availWidth</code>. See also {{domxref("window.screen.height")}}.</p> - -<p>Internet Explorer will take into account the zoom setting when reporting the screen width. It will only return the real width of the screen if the zoom is set to 100%.</p> - -<h2 id="Specification" name="Specification">Specyfikacja</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specyfikacja</th> - <th scope="col">Status</th> - <th scope="col">Komentarz</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSSOM View', '#dom-screen-width', 'Screen.width') }}</td> - <td>{{ Spec2('CSSOM View') }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>6</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/pl/web/api/web_audio_api/index.html b/files/pl/web/api/web_audio_api/index.html deleted file mode 100644 index e67cec2fd6..0000000000 --- a/files/pl/web/api/web_audio_api/index.html +++ /dev/null @@ -1,503 +0,0 @@ ---- -title: Web Audio API -slug: Web/API/Web_Audio_API -translation_of: Web/API/Web_Audio_API ---- -<div> -<p>Web Audio API to potężny i uniwersalny system webowej kontroli audio umożliwiający deweloperom wybór źródeł audio, dodawanie efektów do audio, tworzenie wizualizacji audio, stosowanie efektów przestrzennych (jak panorama) i wiele więcej.</p> -</div> - -<h2 id="Założenia_Web_Audio_i_jego_zastosowanie">Założenia Web Audio i jego zastosowanie</h2> - -<p>Web Audio API dotyczy przebiegu operacji audio wewnątrz kontekstu audio (audio context) i został zaprojektowany po to, by umożliwić obróbkę modularną (modular routing). Podstawowe operacje audio zostają wykonywane z węzłami audio (audio nodes), które złączone tworzą wykres trasowania audio (audio routing graph). Niektóre źródła - o różnych typach układów kanałów - są wspierane nawet w obrębie pojedynczego kontekstu. Modularny design cechuje się elastycznością umożliwiającą tworzenie złożonych funkcji audio z efektami dynamicznymi.</p> - -<p>Audio nodes are linked into chains and simple webs by their inputs and outputs. They typically start with one or more sources. Sources provide arrays of sound intensities (samples) at very small timeslices, often tens of thousands of them per second. These could be either computed mathematically (such as {{domxref("OscillatorNode")}}), or they can be recordings from sound/video files (like {{domxref("AudioBufferSourceNode")}} and {{domxref("MediaElementAudioSourceNode")}}) and audio streams ({{domxref("MediaStreamAudioSourceNode")}}). In fact, sound files are just recordings of sound intensities themselves, which come in from microphones or electric instruments, and get mixed down into a single, complicated wave.</p> - -<p>Outputs of these nodes could be linked to inputs of others, which mix or modify these streams of sound samples into different streams. A common modification is multiplying the samples by a value to make them louder or quieter (as is the case with {{domxref("GainNode")}}). Once the sound has been sufficiently processed for the intended effect, it can be linked to the input of a destination ({{domxref("AudioContext.destination")}}), which sends the sound to the speakers or headphones. This last connection is only necessary if the user is supposed to hear the audio.</p> - -<p>A simple, typical workflow for web audio would look something like this:</p> - -<ol> - <li>Create audio context</li> - <li>Inside the context, create sources — such as <code><audio></code>, oscillator, stream</li> - <li>Create effects nodes, such as reverb, biquad filter, panner, compressor</li> - <li>Choose final destination of audio, for example your system speakers</li> - <li>Connect the sources up to the effects, and the effects to the destination.</li> -</ol> - -<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/12241/webaudioAPI_en.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p> - -<p>Timing is controlled with high precision and low latency, allowing developers to write code that responds accurately to events and is able to target specific samples, even at a high sample rate. So applications such as drum machines and sequencers are well within reach.</p> - -<p>The Web Audio API also allows us to control how audio is <em>spatialized</em>. Using a system based on a <em>source-listener model</em>, it allows control of the <em>panning model</em> and deals with <em>distance-induced attenuation</em> or <em>doppler shift</em> induced by a moving source (or moving listener).</p> - -<div class="note"> -<p>You can read about the theory of the Web Audio API in a lot more detail in our article <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a>.</p> -</div> - -<h2 id="Web_Audio_API_Interfaces">Web Audio API Interfaces</h2> - -<p>The Web Audio API has a number of interfaces and associated events, which we have split up into nine categories of functionality.</p> - -<h3 id="General_audio_graph_definition">General audio graph definition</h3> - -<p>General containers and definitions that shape audio graphs in Web Audio API usage.</p> - -<dl> - <dt>{{domxref("AudioContext")}}</dt> - <dd>The <strong><code>AudioContext</code></strong> interface represents an audio-processing graph built from audio modules linked together, each represented by an {{domxref("AudioNode")}}. An audio context controls the creation of the nodes it contains and the execution of the audio processing, or decoding. You need to create an <code>AudioContext</code> before you do anything else, as everything happens inside a context.</dd> - <dt>{{domxref("AudioNode")}}</dt> - <dd>The <strong><code>AudioNode</code></strong><strong> </strong>interface represents an audio-processing module like an <em>audio source</em> (e.g. an HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} element), <em>audio destination</em>, <em>intermediate processing module</em> (e.g. a filter like {{domxref("BiquadFilterNode")}}, or <em>volume control</em> like {{domxref("GainNode")}}).</dd> - <dt>{{domxref("AudioParam")}}</dt> - <dd>The <strong><code>AudioParam</code></strong><strong> </strong>interface represents an audio-related parameter, like one of an {{domxref("AudioNode")}}. It can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.</dd> - <dt>The {{event("ended")}} event</dt> - <dd>The <code>ended</code> event is fired when playback has stopped because the end of the media was reached.</dd> -</dl> - -<h3 id="Defining_audio_sources">Defining audio sources</h3> - -<p>Interfaces that define audio sources for use in the Web Audio API.</p> - -<dl> - <dt>{{domxref("OscillatorNode")}}</dt> - <dd>The <strong><code style="font-size: 14px;">OscillatorNode</code></strong><strong> </strong>interface represents a periodic waveform, such as a sine or triangle wave. It is an {{domxref("AudioNode")}} audio-processing module that causes a given <em>frequency</em> of wave to be created.</dd> - <dt>{{domxref("AudioBuffer")}}</dt> - <dd>The <strong><code>AudioBuffer</code></strong> interface represents a short audio asset residing in memory, created from an audio file using the {{ domxref("AudioContext.decodeAudioData()") }} method, or created with raw data using {{ domxref("AudioContext.createBuffer()") }}. Once decoded into this form, the audio can then be put into an {{ domxref("AudioBufferSourceNode") }}.</dd> - <dt>{{domxref("AudioBufferSourceNode")}}</dt> - <dd>The <strong><code>AudioBufferSourceNode</code></strong> interface represents an audio source consisting of in-memory audio data, stored in an {{domxref("AudioBuffer")}}. It is an {{domxref("AudioNode")}} that acts as an audio source.</dd> - <dt>{{domxref("MediaElementAudioSourceNode")}}</dt> - <dd>The <code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> interface represents an audio source consisting of an HTML5 {{ htmlelement("audio") }} or {{ htmlelement("video") }} element. It is an {{domxref("AudioNode")}} that acts as an audio source.</dd> - <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt> - <dd>The <code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> interface represents an audio source consisting of a <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (such as a webcam, microphone, or a stream being sent from a remote computer). It is an {{domxref("AudioNode")}} that acts as an audio source.</dd> -</dl> - -<h3 id="Defining_audio_effects_filters">Defining audio effects filters</h3> - -<p>Interfaces for defining effects that you want to apply to your audio sources.</p> - -<dl> - <dt>{{domxref("BiquadFilterNode")}}</dt> - <dd>The <strong><code>BiquadFilterNode</code></strong><strong> </strong>interface represents a simple low-order filter. It is an {{domxref("AudioNode")}} that can represent different kinds of filters, tone control devices, or graphic equalizers. A <code>BiquadFilterNode</code> always has exactly one input and one output.</dd> - <dt>{{domxref("ConvolverNode")}}</dt> - <dd>The <code><strong>Convolver</strong></code><strong><code>Node</code></strong><strong> </strong>interface is an <span style="line-height: 1.5;">{{domxref("AudioNode")}} that</span><span style="line-height: 1.5;"> performs a Linear Convolution on a given {{domxref("AudioBuffer")}}, and is often used to achieve a reverb effect</span><span style="line-height: 1.5;">.</span></dd> - <dt>{{domxref("DelayNode")}}</dt> - <dd>The <strong><code>DelayNode</code></strong><strong> </strong>interface represents a <a href="http://en.wikipedia.org/wiki/Digital_delay_line" title="http://en.wikipedia.org/wiki/Digital_delay_line">delay-line</a>; an {{domxref("AudioNode")}} audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.</dd> - <dt>{{domxref("DynamicsCompressorNode")}}</dt> - <dd>The <strong><code>DynamicsCompressorNode</code></strong> interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.</dd> - <dt>{{domxref("GainNode")}}</dt> - <dd>The <strong><code>GainNode</code></strong><strong> </strong>interface represents a change in volume. It is an {{domxref("AudioNode")}} audio-processing module that causes a given <em>gain</em> to be applied to the input data before its propagation to the output.</dd> - <dt>{{domxref("StereoPannerNode")}}</dt> - <dd>The <code><strong>StereoPannerNode</strong></code> interface represents a simple stereo panner node that can be used to pan an audio stream left or right.</dd> - <dt>{{domxref("WaveShaperNode")}}</dt> - <dd>The <strong><code>WaveShaperNode</code></strong><strong> </strong>interface represents a non-linear distorter. It is an {{domxref("AudioNode")}} that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.</dd> - <dt>{{domxref("PeriodicWave")}}</dt> - <dd>Describes a periodic waveform that can be used to shape the output of an {{ domxref("OscillatorNode") }}.</dd> -</dl> - -<h3 id="Defining_audio_destinations">Defining audio destinations</h3> - -<p>Once you are done processing your audio, these interfaces define where to output it.</p> - -<dl> - <dt>{{domxref("AudioDestinationNode")}}</dt> - <dd>The <strong><code>AudioDestinationNode</code></strong> interface represents the end destination of an audio source in a given context — usually the speakers of your device.</dd> - <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt> - <dd>The <code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> interface represents an audio destination consisting of a <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} with a single <code>AudioMediaStreamTrack</code>, which can be used in a similar way to a {{domxref("MediaStream")}} obtained from {{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}. It is an {{domxref("AudioNode")}} that acts as an audio destination.</dd> -</dl> - -<h3 id="Data_analysis_and_visualization">Data analysis and visualization</h3> - -<p>If you want to extract time, frequency, and other data from your audio, the <code>AnalyserNode</code> is what you need.</p> - -<dl> - <dt>{{domxref("AnalyserNode")}}</dt> - <dd>The <strong><code>AnalyserNode</code></strong> interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.</dd> -</dl> - -<h3 id="Splitting_and_merging_audio_channels">Splitting and merging audio channels</h3> - -<p>To split and merge audio channels, you'll use these interfaces.</p> - -<dl> - <dt>{{domxref("ChannelSplitterNode")}}</dt> - <dd>The <code><strong>ChannelSplitterNode</strong></code> interface separates the different channels of an audio source out into a set of <em>mono</em> outputs.</dd> - <dt>{{domxref("ChannelMergerNode")}}</dt> - <dd>The <code><strong>ChannelMergerNode</strong></code> interface reunites different mono inputs into a single output. Each input will be used to fill a channel of the output.</dd> -</dl> - -<h3 id="Audio_spatialization">Audio spatialization</h3> - -<p>These interfaces allow you to add audio spatialization panning effects to your audio sources.</p> - -<dl> - <dt>{{domxref("AudioListener")}}</dt> - <dd>The <strong><code>AudioListener</code></strong><strong> </strong>interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.</dd> - <dt>{{domxref("PannerNode")}}</dt> - <dd>The <strong><code>PannerNode</code></strong><strong> </strong>interface represents the behavior of a signal in space. It is an {{domxref("AudioNode")}} audio-processing module describing its position with right-hand Cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.</dd> -</dl> - -<h3 id="Audio_processing_in_JavaScript">Audio processing in JavaScript</h3> - -<p>You can write JavaScript code to process audio data. To do so, you use the interfaces and events listed below.</p> - -<div class="note"> -<p>As of the August 29, 2014 version of the Web Audio API spec. these features have been marked as deprecated, and are soon to be replaced by {{ anch("Audio_Workers") }}.</p> -</div> - -<dl> - <dt>{{domxref("ScriptProcessorNode")}}</dt> - <dd>The <strong><code>ScriptProcessorNode</code></strong><strong> </strong>interface allows the generation, processing, or analyzing of audio using JavaScript. It is an {{domxref("AudioNode")}} audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing the {{domxref("AudioProcessingEvent")}} interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.</dd> - <dt>{{event("audioprocess")}} (event)</dt> - <dd>The <code>audioprocess</code> event is fired when an input buffer of a Web Audio API {{domxref("ScriptProcessorNode")}} is ready to be processed.</dd> - <dt>{{domxref("AudioProcessingEvent")}}</dt> - <dd>The <a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> <code>AudioProcessingEvent</code> represents events that occur when a {{domxref("ScriptProcessorNode")}} input buffer is ready to be processed.</dd> -</dl> - -<h3 id="Offlinebackground_audio_processing">Offline/background audio processing</h3> - -<p>It is possible to process/render an audio graph very quickly in the background — rendering it to an {{domxref("AudioBuffer")}} rather than to the device's speakers — with the following.</p> - -<dl> - <dt>{{domxref("OfflineAudioContext")}}</dt> - <dd>The <strong><code>OfflineAudioContext</code></strong> interface is an {{domxref("AudioContext")}} interface representing an audio-processing graph built from linked together {{domxref("AudioNode")}}s. In contrast with a standard <code>AudioContext</code>, an <code>OfflineAudioContext</code> doesn't really render the audio but rather generates it, <em>as fast as it can</em>, in a buffer.</dd> - <dt>{{event("complete")}} (event)</dt> - <dd>The <code>complete</code> event is fired when the rendering of an {{domxref("OfflineAudioContext")}} is terminated.</dd> - <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt> - <dd>The <code>OfflineAudioCompletionEvent</code> represents events that occur when the processing of an {{domxref("OfflineAudioContext")}} is terminated. The {{event("complete")}} event implements this interface.</dd> -</dl> - -<h3 id="Audio_Workers" name="Audio_Workers">Audio Workers</h3> - -<p>Audio workers provide the ability for direct scripted audio processing to be done inside a <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">web worker</a> context, and are defined by a couple of interfaces (new as of 29th August 2014). These are not implemented in any browsers yet. When implemented, they will replace {{domxref("ScriptProcessorNode")}}, and the other features discussed in the <a href="#Audio_processing_via_JavaScript">Audio processing in JavaScript</a> section above.</p> - -<dl> - <dt>{{domxref("AudioWorkerNode")}}</dt> - <dd>The AudioWorkerNode interface represents an {{domxref("AudioNode")}} that interacts with a worker thread to generate, process, or analyse audio directly.</dd> - <dt>{{domxref("AudioWorkerGlobalScope")}}</dt> - <dd>The <code>AudioWorkerGlobalScope</code> interface is a <code>DedicatedWorkerGlobalScope</code>-derived object representing a worker context in which an audio processing script is run; it is designed to enable the generation, processing, and analysis of audio data directly using JavaScript in a worker thread.</dd> - <dt>{{domxref("AudioProcessEvent")}}</dt> - <dd>This is an <code>Event</code> object that is dispatched to {{domxref("AudioWorkerGlobalScope")}} objects to perform processing.</dd> -</dl> - -<h2 id="Example" name="Example">Obsolete interfaces</h2> - -<p>The following interfaces were defined in old versions of the Web Audio API spec, but are now obsolete and have been replaced by other interfaces.</p> - -<dl> - <dt>{{domxref("JavaScriptNode")}}</dt> - <dd>Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by {{domxref("ScriptProcessorNode")}}.</dd> - <dt>{{domxref("WaveTableNode")}}</dt> - <dd>Used to define a periodic waveform. This interface is obsolete, and has been replaced by {{domxref("PeriodicWave")}}.</dd> -</dl> - -<h2 id="Example" name="Example">Example</h2> - -<p>This example shows a wide variety of Web Audio API functions being used. You can see this code in action on the <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> demo (also check out the <a href="https://github.com/mdn/voice-change-o-matic">full source code at Github</a>) — this is an experimental voice changer toy demo; keep your speakers turned down low when you use it, at least to start!</p> - -<p>The Web Audio API lines are highlighted; if you want to find out more about what the different methods, etc. do, have a search around the reference pages.</p> - -<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151]">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context -// Webkit/blink browsers need prefix, Safari won't work without window. - -var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options -var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options -var mute = document.querySelector('.mute'); // mute button -var drawVisual; // requestAnimationFrame - -var analyser = audioCtx.createAnalyser(); -var distortion = audioCtx.createWaveShaper(); -var gainNode = audioCtx.createGain(); -var biquadFilter = audioCtx.createBiquadFilter(); - -function makeDistortionCurve(amount) { // function to make curve shape for distortion/wave shaper node to use - var k = typeof amount === 'number' ? amount : 50, - n_samples = 44100, - curve = new Float32Array(n_samples), - deg = Math.PI / 180, - i = 0, - x; - for ( ; i < n_samples; ++i ) { - x = i * 2 / n_samples - 1; - curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) ); - } - return curve; -}; - -navigator.getUserMedia ( - // constraints - only audio needed for this app - { - audio: true - }, - - // Success callback - function(stream) { - source = audioCtx.createMediaStreamSource(stream); - source.connect(analyser); - analyser.connect(distortion); - distortion.connect(biquadFilter); - biquadFilter.connect(gainNode); - gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together - - visualize(stream); - voiceChange(); - - }, - - // Error callback - function(err) { - console.log('The following gUM error occured: ' + err); - } -); - -function visualize(stream) { - WIDTH = canvas.width; - HEIGHT = canvas.height; - - var visualSetting = visualSelect.value; - console.log(visualSetting); - - if(visualSetting == "sinewave") { - analyser.fftSize = 2048; - var bufferLength = analyser.frequencyBinCount; // half the FFT value - var dataArray = new Uint8Array(bufferLength); // create an array to store the data - - canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); - - function draw() { - - drawVisual = requestAnimationFrame(draw); - - analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above - - canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // draw wave with canvas - canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); - - canvasCtx.lineWidth = 2; - canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; - - canvasCtx.beginPath(); - - var sliceWidth = WIDTH * 1.0 / bufferLength; - var x = 0; - - for(var i = 0; i < bufferLength; i++) { - - var v = dataArray[i] / 128.0; - var y = v * HEIGHT/2; - - if(i === 0) { - canvasCtx.moveTo(x, y); - } else { - canvasCtx.lineTo(x, y); - } - - x += sliceWidth; - } - - canvasCtx.lineTo(canvas.width, canvas.height/2); - canvasCtx.stroke(); - }; - - draw(); - - } else if(visualSetting == "off") { - canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); - canvasCtx.fillStyle = "red"; - canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); - } - -} - -function voiceChange() { - distortion.curve = new Float32Array; - biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run - - var voiceSetting = voiceSelect.value; - console.log(voiceSetting); - - if(voiceSetting == "distortion") { - distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node - } else if(voiceSetting == "biquad") { - biquadFilter.type = "lowshelf"; - biquadFilter.frequency.value = 1000; - biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad - } else if(voiceSetting == "off") { - console.log("Voice settings turned off"); // do nothing, as off option was chosen - } - -} - -// event listeners to change visualize and voice settings - -visualSelect.onchange = function() { - window.cancelAnimationFrame(drawVisual); - visualize(stream); -} - -voiceSelect.onchange = function() { - voiceChange(); -} - -mute.onclick = voiceMute; - -function voiceMute() { // toggle to mute and unmute sound - if(mute.id == "") { - gainNode.gain.value = 0; // gain set to 0 to mute sound - mute.id = "activated"; - mute.innerHTML = "Unmute"; - } else { - gainNode.gain.value = 1; // gain set to 1 to unmute sound - mute.id = ""; - mute.innerHTML = "Mute"; - } -} -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>14 {{property_prefix("webkit")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>23</td> - <td>{{CompatNo}}</td> - <td>15 {{property_prefix("webkit")}}<br> - 22 (unprefixed)</td> - <td>6 {{property_prefix("webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>28 {{property_prefix("webkit")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>25</td> - <td>1.2</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>6 {{property_prefix("webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li> - <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic example</a></li> - <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin example</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li> - <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/" title="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li> - <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/" title="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li> - <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li> - <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li> - <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li> -</ul> - -<section id="Quick_Links"> -<h3 id="Quicklinks">Quicklinks</h3> - -<ol> - <li data-default-state="open"><strong><a href="#">Guides</a></strong> - - <ol> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio spatialization basics</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li> - </ol> - </li> - <li data-default-state="open"><strong><a href="#">Examples</a></strong> - <ol> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Simple_synth">Simple synth keyboard</a></li> - <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a></li> - <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a></li> - </ol> - </li> - <li data-default-state="open"><strong><a href="#">Interfaces</a></strong> - <ol> - <li>{{domxref("AnalyserNode")}}</li> - <li>{{domxref("AudioBuffer")}}</li> - <li>{{domxref("AudioBufferSourceNode")}}</li> - <li>{{domxref("AudioContext")}}</li> - <li>{{domxref("AudioDestinationNode")}}</li> - <li>{{domxref("AudioListener")}}</li> - <li>{{domxref("AudioNode")}}</li> - <li>{{domxref("AudioParam")}}</li> - <li>{{event("audioprocess")}} (event)</li> - <li>{{domxref("AudioProcessingEvent")}}</li> - <li>{{domxref("BiquadFilterNode")}}</li> - <li>{{domxref("ChannelMergerNode")}}</li> - <li>{{domxref("ChannelSplitterNode")}}</li> - <li>{{event("complete")}} (event)</li> - <li>{{domxref("ConvolverNode")}}</li> - <li>{{domxref("DelayNode")}}</li> - <li>{{domxref("DynamicsCompressorNode")}}</li> - <li>{{event("ended_(Web_Audio)", "ended")}} (event)</li> - <li>{{domxref("GainNode")}}</li> - <li>{{domxref("MediaElementAudioSourceNode")}}</li> - <li>{{domxref("MediaStreamAudioDestinationNode")}}</li> - <li>{{domxref("MediaStreamAudioSourceNode")}}</li> - <li>{{domxref("OfflineAudioCompletionEvent")}}</li> - <li>{{domxref("OfflineAudioContext")}}</li> - <li>{{domxref("OscillatorNode")}}</li> - <li>{{domxref("PannerNode")}}</li> - <li>{{domxref("PeriodicWave")}}</li> - <li>{{domxref("ScriptProcessorNode")}}</li> - <li>{{domxref("WaveShaperNode")}}</li> - </ol> - </li> -</ol> -</section> diff --git a/files/pl/web/api/webgl_api/tutorial/index.html b/files/pl/web/api/webgl_api/tutorial/index.html deleted file mode 100644 index cecc84cbfe..0000000000 --- a/files/pl/web/api/webgl_api/tutorial/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: WebGL tutorial -slug: Web/API/WebGL_API/Tutorial -tags: - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial ---- -<div>{{WebGLSidebar}}</div> - -<div class="summary"> -<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> enables web content to use an API based on <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 to perform 3D rendering in an HTML {{HTMLElement("canvas")}} in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code(shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.</p> -</div> - -<p><span class="seoSummary">This tutorial describes how to use the <code><canvas></code> element to draw WebGL graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with WebGL and will provide code snippets that may get you started in building your own content.</span></p> - -<h2 id="Before_you_start">Before you start</h2> - -<p>Using the <code><canvas></code> element is not very difficult, but you do need a basic understanding of <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> and <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. The <code><canvas></code> element and WebGL are not supported in some older browsers, but are supported in recent versions of all major browsers. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.</p> - -<h2 id="In_this_tutorial">In this tutorial</h2> - -<dl> - <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">Getting started with WebGL</a></dt> - <dd>How to set up a WebGL context.</dd> - <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">Adding 2D content to a WebGL context</a></dt> - <dd>How to render simple flat shapes using WebGL.</dd> - <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL">Using shaders to apply color in WebGL</a></dt> - <dd>Demonstrates how to add color to shapes using shaders.</dd> - <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL">Animating objects with WebGL</a></dt> - <dd>Shows how to rotate and translate objects to create simple animations.</dd> - <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL">Creating 3D objects using WebGL</a></dt> - <dd>Shows how to create and animate a 3D object (in this case, a cube).</dd> - <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Using textures in WebGL</a></dt> - <dd>Demonstrates how to map textures onto the faces of an object.</dd> - <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">Lighting in WebGL</a></dt> - <dd>How to simulate lighting effects in your WebGL context.</dd> - <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL">Animating textures in WebGL</a></dt> - <dd>Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.</dd> -</dl> diff --git a/files/pl/web/api/window/content/index.html b/files/pl/web/api/window/content/index.html deleted file mode 100644 index 66eed370a9..0000000000 --- a/files/pl/web/api/window/content/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: window.content -slug: Web/API/Window/content -tags: - - DOM - - Dokumentacja_Gecko_DOM - - Gecko - - Strony_wymagające_dopracowania - - Wszystkie_kategorie -translation_of: Web/API/Window/content ---- -<p>{{ ApiRef() }}</p> - -<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> - -<p>Zwraca obiekt <a href="pl/DOM/window">Window</a> dla zawartości głównego okna. This is useful in XUL windows that have a <code><browser></code> (or <code>tabbrowser</code> or <code><iframe></code>) with <code>type="content-primary"</code> attribute on it - the most famous example is Firefox main window, <code>browser.xul</code>. In such cases, <code>content</code> returns a reference to the <code>Window</code> object for the document currently displayed in the browser. It is a shortcut for <code><var>browserRef</var>.contentWindow</code>.</p> - -<p>In unprivileged content (webpages), <code>content</code> is normally equivalent to <a href="pl/DOM/window.top">top</a> (except in the case of a webpage loaded in a sidebar, <code>content</code> still refers to the <code>Window</code> of the currently selected tab).</p> - -<p>Some examples use <code>_content</code> instead of <code>content</code>. The former has been deprecated for a long time, and you should use <code>content</code> in the new code.</p> - -<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> - -<pre class="eval">var <var>windowObject</var> = window.content; -</pre> - -<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> - -<p>Executing the following code in a chrome XUL window with a <code><browser type="content-primary"/></code> element in it draws a red border around the first div on the page currently displayed in the browser:</p> - -<pre class="eval">content.document.getElementsByTagName("div")[0].style.border = "solid red 1px"; -</pre> - -<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> - -<p>Nie jest częścią żadnej specyfikacji.</p> - -<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> - -<ul> - <li><a href="pl/Praca_z_oknami_w_kodzie_chrome">Praca z oknami w kodzie chrome</a></li> - <li>When accessing content documents from privileged code, be aware of <a href="pl/XPCNativeWrapper">XPCNativeWrappers</a>.</li> -</ul> diff --git a/files/pl/web/api/window/opendialog/index.html b/files/pl/web/api/window/opendialog/index.html deleted file mode 100644 index 6d24bf03fd..0000000000 --- a/files/pl/web/api/window/opendialog/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: window.openDialog -slug: Web/API/Window/openDialog -tags: - - DOM - - DOM_0 - - Dokumentacja_Gecko_DOM - - Gecko - - Strony_wymagające_dopracowania - - Wszystkie_kategorie -translation_of: Web/API/Window/openDialog ---- -<p>{{ ApiRef() }}</p> -<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> -<p><code>window.openDialog</code> jest rozszerzeniem do <a href="/pl/DOM/window.open" title="pl/DOM/window.open">window.open</a>. Zachowuje się w taki sam sposób, oprócz tego, że opcjonalnie pobiera jeden lub więcej parametrów przeszłego <code>windowFeatures</code> i <code>windowFeatures</code> <strong>itself is treated a little differently.</strong></p> -<p>The optional parameters, if present, will be bundled up in a JavaScript Array object and added to the newly created window as a property named <a href="/pl/DOM/window.arguments" title="pl/DOM/window.arguments">window.arguments</a>. They may be referenced in the JavaScript of the window at any time, including during the execution of a <code>load</code> handler. These parameters may be used, then, to pass arguments to and from the dialog window.</p> -<p>Note that the call to <code>openDialog()</code> returns immediately. If you want the call to block until the user has closed the dialog, supply <code>modal</code> as a <code>windowFeatures</code> parameter. Note that this also means the user won't be able to interact with the opener window until he closes the modal dialog.</p> -<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> -<pre class="eval"><em>newWindow</em> = openDialog(<em>url</em>, <em>name</em>, <em>features</em>, <em>arg1</em>, <em>arg2</em>, ...) -</pre> -<dl> - <dt> - newWindow </dt> - <dd> - Otwarte okno.</dd> - <dt> - url </dt> - <dd> - Adres URL który będzie wczytany do nowego okna.</dd> - <dt> - name </dt> - <dd> - Nazwa okna (opcjonalnie). Zobacz opis <a href="/pl/DOM/window.open" title="pl/DOM/window.open">window.open</a>, aby dowiedzieć się więcej.</dd> - <dt> - features </dt> - <dd> - Zobacz opis <a href="/pl/DOM/window.open" title="pl/DOM/window.open">window.open</a>, aby dowiedzieć się więcej.</dd> - <dt> - arg1, arg2, ... </dt> - <dd> - Argumenty dopasowujące nowe okno (opcjonalnie).</dd> -</dl> -<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> -<pre class="eval">var win = openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "", "pizza", 6.98); -</pre> -<h3 id="Uwagi" name="Uwagi">Uwagi</h3> -<h4 id="Nowe_mo.C5.BCliwo.C5.9Bci" name="Nowe_mo.C5.BCliwo.C5.9Bci">Nowe możliwości</h4> -<p><code>all</code> - Initially activates (or deactivates <code>("all=no")</code>) all chrome (except the behaviour flags <code>chrome</code>, <code>dialog</code> and <code>modal</code>). These can be overridden (so <code>"menubar=no,all"</code> turns on all chrome except the menubar.) This feature is explicitly ignored by <a href="/pl/DOM/window.open" title="pl/DOM/window.open">DOM:window.open</a>. <code>window.openDialog</code> finds it useful because of its different default assumptions.</p> -<h4 id="Domy.C5.9Blne_zachowanie" name="Domy.C5.9Blne_zachowanie">Domyślne zachowanie</h4> -<p>Możliwości <code>chrome</code> i <code>dialog</code> są zawsze assumed on, unless explicitly turned off ("<code>chrome=no</code>"). <code>openDialog</code> treats the absence of the features parameter as does <a href="/pl/DOM/window.open" title="pl/DOM/window.open">DOM:window.open</a>, (that is, an empty string sets all features to off) except <code>chrome</code> and <code>dialog</code>, which default to on. If the <code>features</code> parameter is a zero-length string, or contains only one or more of the behaviour features (<code>chrome</code>, <code>dependent</code>, <code>dialog</code> and <code>modal</code>) the chrome features are assumed "OS' choice." That is, window creation code is not given specific instructions, but is instead allowed to select the chrome that best fits a dialog on that operating system.</p> -<h4 id="Passing_extra_parameters_to_the_dialog" name="Passing_extra_parameters_to_the_dialog">Passing extra parameters to the dialog</h4> -<p>To pass extra parameters into the dialog, you can simply supply them after the <code>windowFeatures</code> parameter:</p> -<pre class="eval">openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "", "pizza", 6.98); -</pre> -<p>The extra parameters will then get packed into a property named <code>arguments</code> of type <a href="/pl/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="pl/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a>, and this property gets added to the newly opened dialog window.</p> -<p>To access these extra parameters from within dialog code, use the following scheme:</p> -<pre class="eval">var food = window.arguments[0]; -var price = window.arguments[1]; -</pre> -<p>Note that you can access this property from within anywhere in the dialog code.</p> -<h4 id="Zwracanie_warto.C5.9Bci_z_okienka_dialogowego" name="Zwracanie_warto.C5.9Bci_z_okienka_dialogowego">Zwracanie wartości z okienka dialogowego</h4> -<p>Since <code>window.close()</code> erases all properties associated with the dialog window (i.e. the variables specified in the JavaScript code which gets loaded from the dialog), it is not possible to pass return values back past the close operation using globals (or any other constructs).</p> -<p>To be able to pass values back to the caller, you have to supply some object via the extra parameters. You can then access this object from within the dialog code and set properties on it, containing the values you want to return or preserve past the <code>window.close()</code> operation.</p> -<pre class="eval">var retVals = { address: null, delivery: null }; -openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "modal", "pizza", 6.98, retVals); -</pre> -<p>If you set the properties of the <code>retVals</code> object in the dialog code as described below, you can now access them via the <code>retVals</code> array after the <code>openDialog()</code> call returns.</p> -<p>Inside the dialog code, you can set the properties as follows:</p> -<pre class="eval">var retVals = window.arguments[2]; -retVals.address = enteredAddress; -retVals.delivery = "immediate"; -</pre> -<p>Zobacz także .</p> -<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> -<p>{{ DOM0() }}</p> diff --git a/files/pl/web/api/window/sidebar/index.html b/files/pl/web/api/window/sidebar/index.html deleted file mode 100644 index 280b5dcce3..0000000000 --- a/files/pl/web/api/window/sidebar/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Window.sidebar -slug: Web/API/Window/sidebar -tags: - - DOM - - NeedsTranslation - - Non-standard - - Property - - Reference - - TopicStub - - Window -translation_of: Web/API/Window/sidebar ---- -<div>{{APIRef}} {{Non-standard_header}}</div> - -<p>Returns a sidebar object, which contains several methods for registering add-ons with the browser.</p> - -<h2 id="Notes" name="Notes">Notes</h2> - -<p>The sidebar object returned has the following methods:</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Method</th> - <th>Description (SeaMonkey)</th> - <th>Description (Firefox)</th> - </tr> - <tr> - <td><code>addPanel(<var>title</var>, <var>contentURL</var>, "")</code></td> - <td>Adds a sidebar panel.</td> - <td rowspan="2">Obsolete since Firefox 23 (only present in SeaMonkey).<br> - End users can use the "load this bookmark in the sidebar" option instead. Also see <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Creating_a_Firefox_sidebar">Creating a Firefox sidebar.</a></td> - </tr> - <tr> - <td><code>addPersistentPanel(<var>title</var>, <var>contentURL</var>, "")</code></td> - <td>Adds a sidebar panel, which is able to work in the background.</td> - </tr> - <tr> - <td><code>AddSearchProvider(<em>descriptionURL)</em></code></td> - <td colspan="2">Installs a search provider (OpenSearch). <a href="/en-US/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages#Installing_OpenSearch_plugins" title="Adding_search_engines_from_web_pages">Adding OpenSearch search engines </a>contains more details. Added in Firefox 2.</td> - </tr> - <tr> - <td><code>addSearchEngine(<var>engineURL</var>, <var>iconURL</var>, <var>suggestedTitle</var>, <var>suggestedCategory</var>)</code> {{Obsolete_inline(44)}}</td> - <td colspan="2">Installs a search engine (Sherlock). <a href="/en-US/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages#Installing_Sherlock_plugins" title="Adding_search_engines_from_web_pages">Adding Sherlock search engines </a>contains more details.</td> - </tr> - <tr> - <td><code>IsSearchProviderInstalled(<em>descriptionURL)</em></code></td> - <td colspan="2">Indicates if a specific search provider (OpenSearch) is installed.</td> - </tr> - </tbody> -</table> - -<h2 id="Specification" name="Specification">Specification</h2> - -<p>Mozilla-specific. Not part of any standard.</p> diff --git a/files/pl/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/pl/web/api/xmlhttprequest/using_xmlhttprequest/index.html deleted file mode 100644 index 94be8159b1..0000000000 --- a/files/pl/web/api/xmlhttprequest/using_xmlhttprequest/index.html +++ /dev/null @@ -1,658 +0,0 @@ ---- -title: Wykorzystanie XMLHttpRequest -slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest -translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest -original_slug: XMLHttpRequest/Using_XMLHttpRequest ---- -<p><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest"><code>XMLHttpRequest</code></a> makes sending HTTP requests very easy. You simply create an instance of the object, open a URL, and send the request. The <a href="/en-US/docs/HTTP/HTTP_response_codes" title="HTTP response codes">HTTP status</a> of the result, as well as the result's contents, are available in the request object when the transaction is completed. This page outlines some of the common and even slightly obscure use cases for this powerful JavaScript object.</p> -<pre class="brush: js">function reqListener () { - console.log(this.responseText); -} - -var oReq = new XMLHttpRequest(); -oReq.onload = reqListener; -oReq.open("get", "yourFile.txt", true); -oReq.send();</pre> -<h2 id="Types_of_requests">Types of requests</h2> -<p>A request made via XMLHttpRequest can fetch the data in one of two ways, asynchronously or synchronously. The type of request is dictated by the optional <code>async</code> argument (the third argument) that is set on the XMLHttpRequest <a href="/en-US/docs/DOM/XMLHttpRequest#open()" title="DOM/XMLHttpRequest#open()">open()</a> method. If this argument is <code>true</code> or not specified, the <code>XMLHttpRequest</code> is processed asynchronously, otherwise the process is handled synchronously. A detailed discussion and demonstrations of these two types of requests can be found on the <a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" title="Synchronous and Asynchronous Requests">synchronous and asynchronous requests</a> page. In general, you should rarely if ever use synchronous requests.</p> -<div class="note"> - <strong>Note:</strong> Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.</div> -<h2 id="Handling_responses">Handling responses</h2> -<p>There are several types of <a href="http://www.w3.org/TR/XMLHttpRequest2/#response" title="http://www.w3.org/TR/XMLHttpRequest2/#response">response attributes</a> defined by the W3C specification for XMLHttpRequest. These tell the client making the XMLHttpRequest important information about the status of the response. Some<span style="line-height: 1.572;"> cases where dealing with non-text response types may involve some manipulation and analysis as outlined in the following sections.</span></p> -<h3 id="Analyzing_and_manipulating_the_responseXML_property">Analyzing and manipulating the <code>responseXML</code> property</h3> -<p>If you use <code>XMLHttpRequest </code>to get the content of a remote XML document, the <code>responseXML </code>property will be a DOM Object containing a parsed XML document, which can be hard to manipulate and analyze. There are four primary ways of analyzing this XML document:</p> -<ol> - <li>Using <a href="/en-US/docs/XPath" title="XPath">XPath</a> to address (point to) parts of it.</li> - <li>Using <a href="/en-US/docs/JXON" title="JXON">JXON</a> to convert it into a JavaScript Object tree.</li> - <li>Manually <a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">Parsing and serializing XML</a> to strings or objects.</li> - <li>Using <a href="/en-US/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a> to serialize <strong>DOM trees to strings or to files</strong>.</li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp">RegExp </a>can be used if you always know the content of the XML document beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to linebreaks. However, this method is a "last resort" since if the XML code changes slightly, the method will likely fail.</li> -</ol> -<h3 id="Analyzing_and_manipulating_a_responseText_property_containing_an_HTML_document">Analyzing and manipulating a <code>responseText</code> property containing an HTML document</h3> -<div class="note"> - <strong>Note:</strong> The W3C <a href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> specification allows HTML parsing via the <code>XMLHttpRequest.responseXML</code> property. Read the article about <a href="/en-US/docs/HTML_in_XMLHttpRequest" title="HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a> for details.</div> -<p>If you use <code>XMLHttpRequest</code> to get the content of a remote HTML webpage, the <code>responseText</code> property is a string containing a "soup" of all the HTML tags, which can be hard to manipulate and analyze. There are three primary ways of analyzing this HTML soup string:</p> -<ol> - <li>Use the <code>XMLHttpRequest.responseXML</code> property.</li> - <li>Inject the content into the body of a <a href="/en-US/docs/Web/API/DocumentFragment">document fragment</a> via <code>fragment.body.innerHTML</code> and traverse the DOM of the fragment.</li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp">RegExp </a>can be used if you always know the content of the HTML <code>responseText </code>beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to linebreaks. However, this method is a "last resort" since if the HTML code changes slightly, the method will likely fail.</li> -</ol> -<h2 id="Handling_binary_data">Handling binary data</h2> -<p>Although <code>XMLHttpRequest</code> is most commonly used to send and receive textual data, it can be used to send and receive binary content. There are several well tested methods for coercing the response of an XMLHttpRequest into sending binary data. These involve utilizing the <code>.overrideMimeType()</code> method on the XMLHttpRequest object and is a workable solution.</p> -<pre class="brush:js">var oReq = new XMLHttpRequest(); -oReq.open("GET", url, true); -// retrieve data unprocessed as a binary string -oReq.overrideMimeType("text/plain; charset=x-user-defined"); -/* ... */ -</pre> -<p>The XMLHttpRequest Level 2 Specification adds new <a href="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute" title="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute">responseType attributes</a> which make sending and receiving binary data much easier.</p> -<pre class="brush:js">var oReq = new XMLHttpRequest(); - - -oReq.onload = function(e) { - var arraybuffer = oReq.response; // not responseText - /* ... */ -} -<span style="font-size: 1rem;">oReq.open("GET", url, true); -</span><span style="font-size: 1rem;"><span style="font-size: 1rem;">oReq.responseType = "arraybuffer"; -</span>oReq.send();</span></pre> -<p>For more examples check out the <a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data" title="DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Sending and Receiving Binary Data</a> page</p> -<h2 id="Monitoring_progress">Monitoring progress</h2> -<p><code>XMLHttpRequest</code> provides the ability to listen to various events that can occur while the request is being processed. This includes periodic progress notifications, error notifications, and so forth.</p> -<p>Support for DOM progress event monitoring of <code>XMLHttpRequest</code> transfers follows the Web API <a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">specification for progress events</a>: these events implement the {{domxref("ProgressEvent")}} interface.</p> -<pre class="brush:js">var oReq = new XMLHttpRequest(); - -oReq.addEventListener("progress", updateProgress, false); -oReq.addEventListener("load", transferComplete, false); -oReq.addEventListener("error", transferFailed, false); -oReq.addEventListener("abort", transferCanceled, false); - -oReq.open(); - -// ... - -// progress on transfers from the server to the client (downloads) -function updateProgress (oEvent) { - if (oEvent.lengthComputable) { - var percentComplete = oEvent.loaded / oEvent.total; - // ... - } else { - // Unable to compute progress information since the total size is unknown - } -} - -function transferComplete(evt) { - alert("The transfer is complete."); -} - -function transferFailed(evt) { - alert("An error occurred while transferring the file."); -} - -function transferCanceled(evt) { - alert("The transfer has been canceled by the user."); -}</pre> -<p>Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using <code>XMLHttpRequest</code>.</p> -<div class="note"> - <strong>Note:</strong> You need to add the event listeners before calling <code>open()</code> on the request. Otherwise the progress events will not fire.</div> -<p>The progress event handler, specified by the <code>updateProgress()</code> function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's <code>total</code> and <code>loaded</code> fields. However, if the <code>lengthComputable</code> field is false, the total length is not known and will be zero.</p> -<p>Progress events exist for both download and upload transfers. The download events are fired on the <code>XMLHttpRequest</code> object itself, as shown in the above sample. The upload events are fired on the <code>XMLHttpRequest.upload</code> object, as shown below:</p> -<pre class="brush:js">var oReq = new XMLHttpRequest(); - -oReq.upload.addEventListener("progress", updateProgress, false); -oReq.upload.addEventListener("load", transferComplete, false); -oReq.upload.addEventListener("error", transferFailed, false); -oReq.upload.addEventListener("abort", transferCanceled, false); - -oReq.open(); -</pre> -<div class="note"> - <strong>Note:</strong> Progress events are not available for the <code>file:</code> protocol.</div> -<div class="note"> - <strong>Note</strong>: Currently there are open bugs for the progress event that are still affecting version 25 of Firefox on <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=908375">OS X</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=786953">Linux</a>.</div> -<div class="note"> - <p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, progress events can now be relied upon to come in for every chunk of data received, including the last chunk in cases in which the last packet is received and the connection closed before the progress event is fired. In this case, the progress event is automatically fired when the load event occurs for that packet. This lets you now reliably monitor progress by only watching the "progress" event.</p> -</div> -<div class="note"> - <p><strong>Note:</strong> As of {{Gecko("12.0")}}, if your progress event is called with a <code>responseType</code> of "moz-blob", the value of response is a {{domxref("Blob")}} containing the data received so far.</p> -</div> -<p>One can also detect all three load-ending conditions (<code>abort</code>, <code>load</code>, or <code>error</code>) using the <code>loadend</code> event:</p> -<pre class="brush:js">req.addEventListener("loadend", loadEnd, false); - -function loadEnd(e) { - alert("The transfer finished (although we don't know if it succeeded or not)."); -} -</pre> -<p>Note that there's no way to be certain from the information received by the <code>loadend</code> event as to which condition caused the operation to terminate; however, you can use this to handle tasks that need to be performed in all end-of-transfer scenarios.</p> -<h2 id="Submitting_forms_and_uploading_files">Submitting forms and uploading files</h2> -<p>Instances of <code>XMLHttpRequest</code> can be used to submit forms in two ways:</p> -<ul> - <li>using nothing but AJAX</li> - <li>using the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> API</li> -</ul> -<p>The <strong>second way</strong> (using the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> API) is the simplest and the fastest, but has the disadvantage that the data collected can not be <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringified</a>.<br> - The <strong>first way</strong> is instead the most complex but also lends itself to be the most flexible and powerful.</p> -<h3 id="Using_nothing_but_XMLHttpRequest">Using nothing but <code>XMLHttpRequest</code></h3> -<p>Submitting forms without the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> API does not require other APIs, except that, only <strong>if you want to upload one or more files</strong>, the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API.</p> -<h4 id="A_brief_introduction_to_the_submit_methods">A brief introduction to the submit methods</h4> -<p>An html {{ HTMLElement("form") }} can be sent in four ways:</p> -<ul> - <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>application/x-www-form-urlencoded</code> (default);</li> - <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>text/plain</code>;</li> - <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>multipart/form-data</code>;</li> - <li>using the <code>GET</code> method (in this case the <code>enctype</code> attribute will be ignored).</li> -</ul> -<p>Now, consider to submit a form containing only two fields, named <code>foo</code> and <code>baz</code>. If you are using the <code>POST</code> method, the server will receive a string similar to one of the following three ones depending on the encoding type you are using:</p> -<ul> - <li> - <p>Method: <code>POST</code>; Encoding type: <code>application/x-www-form-urlencoded</code> (default):</p> - <pre>Content-Type: application/x-www-form-urlencoded - -foo=bar&baz=The+first+line.&#37;0D%0AThe+second+line.%0D%0A</pre> - </li> - <li> - <p>Method: <code>POST</code>; Encoding type: <code>text/plain</code>:</p> - <pre>Content-Type: text/plain - -foo=bar -baz=The first line. -The second line.</pre> - </li> - <li> - <p>Method: <code>POST</code>; Encoding type: <code>multipart/form-data</code>:</p> - <pre style="height: 100px; overflow: auto;">Content-Type: multipart/form-data; boundary=---------------------------314911788813839 - ------------------------------314911788813839 -Content-Disposition: form-data; name="foo" - -bar ------------------------------314911788813839 -Content-Disposition: form-data; name="baz" - -The first line. -The second line. - ------------------------------314911788813839--</pre> - </li> -</ul> -<p>Instead, if you are using the <code>GET</code> method, a string like the following will be simply added to the URL:</p> -<pre>?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.</pre> -<h4 id="A_little_vanilla_framework">A little vanilla framework</h4> -<p>All these things are done automatically by the web browser whenever you submit a {{ HTMLElement("form") }}. But if you want to do the same things using JavaScript you have to instruct the interpreter about <em>all</em> things. So, how to send forms in <em>pure</em> AJAX is too complex to be explained in detail here. For this reason we posted here <strong>a complete (but still didactic) framework</strong>, which is able to use all the four ways of <em>submit</em> and, also, to <strong>upload files</strong>:</p> -<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> - <pre class="brush: html"><!doctype html> -<html> -<head> -<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -<title>Sending forms with pure AJAX &ndash; MDN</title> -<script type="text/javascript"> - -"use strict"; - -/*\ -|*| -|*| :: XMLHttpRequest.prototype.sendAsBinary() Polyfill :: -|*| -|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary() -\*/ - -if (!XMLHttpRequest.prototype.sendAsBinary) { - XMLHttpRequest.prototype.sendAsBinary = function(sData) { - var nBytes = sData.length, ui8Data = new Uint8Array(nBytes); - for (var nIdx = 0; nIdx < nBytes; nIdx++) { - ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff; - } - /* send as ArrayBufferView...: */ - this.send(ui8Data); - /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */ - }; -} - -/*\ -|*| -|*| :: AJAX Form Submit Framework :: -|*| -|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest -|*| -|*| This framework is released under the GNU Public License, version 3 or later. -|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html -|*| -|*| Syntax: -|*| -|*| AJAXSubmit(HTMLFormElement); -\*/ - -var AJAXSubmit = (function () { - - function ajaxSuccess () { - /* console.log("AJAXSubmit - Success!"); */ - alert(this.responseText); - /* you can get the serialized data through the "submittedData" custom property: */ - /* alert(JSON.stringify(this.submittedData)); */ - } - - function submitData (oData) { - /* the AJAX request... */ - var oAjaxReq = new XMLHttpRequest(); - oAjaxReq.submittedData = oData; - oAjaxReq.onload = ajaxSuccess; - if (oData.technique === 0) { - /* method is GET */ - oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true); - oAjaxReq.send(null); - } else { - /* method is POST */ - oAjaxReq.open("post", oData.receiver, true); - if (oData.technique === 3) { - /* enctype is multipart/form-data */ - var sBoundary = "---------------------------" + Date.now().toString(16); - oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary); - oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n"); - } else { - /* enctype is application/x-www-form-urlencoded or text/plain */ - oAjaxReq.setRequestHeader("Content-Type", oData.contentType); - oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&")); - } - } - } - - function processStatus (oData) { - if (oData.status > 0) { return; } - /* the form is now totally serialized! do something before sending it to the server... */ - /* doSomething(oData); */ - /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */ - submitData (oData); - } - - function pushSegment (oFREvt) { - this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n"; - this.owner.status--; - processStatus(this.owner); - } - - function plainEscape (sText) { - /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */ - /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */ - return sText.replace(/[\s\=\\]/g, "\\$&"); - } - - function SubmitRequest (oTarget) { - var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post"; - /* console.log("AJAXSubmit - Serializing form..."); */ - this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded"; - this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0; - this.receiver = oTarget.action; - this.status = 0; - this.segments = []; - var fFilter = this.technique === 2 ? plainEscape : escape; - for (var nItem = 0; nItem < oTarget.elements.length; nItem++) { - oField = oTarget.elements[nItem]; - if (!oField.hasAttribute("name")) { continue; } - sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; - if (sFieldType === "FILE" && oField.files.length > 0) { - if (this.technique === 3) { - /* enctype is multipart/form-data */ - for (nFile = 0; nFile < oField.files.length; nFile++) { - oFile = oField.files[nFile]; - oSegmReq = new FileReader(); - /* (custom properties:) */ - oSegmReq.segmentIdx = this.segments.length; - oSegmReq.owner = this; - /* (end of custom properties) */ - oSegmReq.onload = pushSegment; - this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n"); - this.status++; - oSegmReq.readAsBinaryString(oFile); - } - } else { - /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */ - for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name))); - } - } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { - /* field type is not FILE or is FILE but is empty */ - this.segments.push( - this.technique === 3 ? /* enctype is multipart/form-data */ - "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n" - : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */ - fFilter(oField.name) + "=" + fFilter(oField.value) - ); - } - } - processStatus(this); - } - - return function (oFormElement) { - if (!oFormElement.action) { return; } - new SubmitRequest(oFormElement); - }; - -})(); - -</script> -</head> -<body> - -<h1>Sending forms with pure AJAX</h1> - -<h2>Using the GET method</h2> - -<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h2>Using the POST method</h2> -<h3>Enctype: application/x-www-form-urlencoded (default)</h3> - -<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h3>Enctype: text/plain</h3> - -<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - Your name: <input type="text" name="user" /> - </p> - <p> - Your message:<br /> - <textarea name="message" cols="40" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h3>Enctype: multipart/form-data</h3> - -<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Upload example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /><br /> - Sex: - <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> - <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> - Password: <input type="password" name="secret" /><br /> - What do you prefer: - <select name="image_type"> - <option>Books</option> - <option>Cinema</option> - <option>TV</option> - </select> - </p> - <p> - Post your photos: - <input type="file" multiple name="photos[]"> - </p> - <p> - <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> - <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> - </p> - <p> - Describe yourself:<br /> - <textarea name="description" cols="50" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -</body> -</html></pre> -</div> -<p>To test it, create a<span class="long_text short_text" id="result_box" lang="en"><span class="hps"> </span></span>page named <strong>register.php</strong> (which is the <code>action</code> attribute of these sample forms) and just put the following <em><span class="long_text short_text" id="result_box" lang="en"><span class="hps">minimalistic </span></span></em>content:</p> -<pre class="brush: php"><?php -/* register.php */ - -header("Content-type: text/plain"); - -/* -NOTE: You should never use `print_r()` in production scripts, or -otherwise output client-submitted data without sanitizing it first. -Failing to sanitize can lead to cross-site scripting vulnerabilities. -*/ - -echo ":: data received via GET ::\n\n"; -print_r($_GET); - -echo "\n\n:: Data received via POST ::\n\n"; -print_r($_POST); - -echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n"; -if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; } - -echo "\n\n:: Files received ::\n\n"; -print_r($_FILES); - -</pre> -<p>The syntax of this script is the following:</p> -<pre class="syntaxbox">AJAXSubmit(myForm);</pre> -<div class="note"> - <strong>Note:</strong> This framework uses the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API to transmit file uploads. This is a recent API and is not implemented in IE9 or below. For this reason, the AJAX-only upload is considered <strong>an experimental technique</strong>. If you do not need to upload binary files, this framework work fine in most browsers.</div> -<div class="note"> - <strong>Note:</strong> The best way to send binary content is via <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffers</a> or <a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob">Blobs</a> in conjuncton with the <a href="/en-US/docs/DOM/XMLHttpRequest#send%28%29" title="/en-US/docs/DOM/XMLHttpRequest#send()"><code>send()</code></a> method and possibly the <a href="/en-US/docs/DOM/FileReader#readAsArrayBuffer()" title="/en-US/docs/DOM/FileReader#readAsArrayBuffer()"><code>readAsArrayBuffer()</code></a> method of the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API. But, since the aim of this script is to work with a <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> raw data, we used the <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29" title="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> method in conjunction with the <a href="/en-US/docs/DOM/FileReader#readAsBinaryString%28%29" title="/en-US/docs/DOM/FileReader#readAsBinaryString()"><code>readAsBinaryString()</code></a> method of the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API. As such, the above script makes sense only when you are dealing with small files. If you do not intend to upload binary content, consider instead using the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> API.</div> -<div class="note"> - <strong>Note:</strong> The non-standard <code>sendAsBinary </code>method is considered deprecated as of Gecko 31 {{ geckoRelease(31) }} and will be removed soon. The standard <code>send(Blob data)</code> method can be used instead.</div> -<h3 id="Using_FormData_objects">Using FormData objects</h3> -<p>The <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> constructor lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's <code>submit()</code> method would use to send the data if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples and explanations of how one can utilize FormData with XMLHttpRequests see the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="Using FormData Objects">Using FormData Objects</a> page. For didactic purpose only we post here <strong>a <em>translation</em> of <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">the previous example</a> transformed so as to make use of the <code>FormData</code> API</strong>. Note the brevity of the code:</p> -<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> - <pre class="brush: html"><!doctype html> -<html> -<head> -<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -<title>Sending forms with FormData &ndash; MDN</title> -<script type="text/javascript"> -"use strict"; - -function ajaxSuccess () { - alert(this.responseText); -} - -function AJAXSubmit (oFormElement) { - if (!oFormElement.action) { return; } - var oReq = new XMLHttpRequest(); - oReq.onload = ajaxSuccess; - if (oFormElement.method.toLowerCase() === "post") { - oReq.open("post", oFormElement.action, true); - oReq.send(new FormData(oFormElement)); - } else { - var oField, sFieldType, nFile, sSearch = ""; - for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) { - oField = oFormElement.elements[nItem]; - if (!oField.hasAttribute("name")) { continue; } - sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; - if (sFieldType === "FILE") { - for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name)); - } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { - sSearch += "&" + escape(oField.name) + "=" + escape(oField.value); - } - } - oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); - oReq.send(null); - } -} -</script> -</head> -<body> - -<h1>Sending forms with FormData</h1> - -<h2>Using the GET method</h2> - -<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h2>Using the POST method</h2> -<h3>Enctype: application/x-www-form-urlencoded (default)</h3> - -<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h3>Enctype: text/plain</h3> - -<p>The text/plain encoding is not supported by the FormData API.</p> - -<h3>Enctype: multipart/form-data</h3> - -<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Upload example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /><br /> - Sex: - <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> - <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> - Password: <input type="password" name="secret" /><br /> - What do you prefer: - <select name="image_type"> - <option>Books</option> - <option>Cinema</option> - <option>TV</option> - </select> - </p> - <p> - Post your photos: - <input type="file" multiple name="photos[]"> - </p> - <p> - <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> - <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> - </p> - <p> - Describe yourself:<br /> - <textarea name="description" cols="50" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -</body> -</html></pre> -</div> -<div class="note"> - <strong>Note:</strong> As we said,<strong> {{domxref("FormData")}} objects are not <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> objects</strong>. If you want to stringify a submitted data, use <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">the previous <em>pure</em>-AJAX example</a>. Note also that, although in this example there are some <code>file</code> {{ HTMLElement("input") }} fields, <strong>when you submit a form through the <code>FormData</code> API you do not need to use the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API also</strong>: files are automatically loaded and uploaded.</div> -<h2 id="Get_last_modified_date">Get last modified date</h2> -<pre class="brush: js">function getHeaderTime () { - alert(this.getResponseHeader("Last-Modified")); /* A valid GMTString date or null */ -} - -var oReq = new XMLHttpRequest(); -oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html", true); -oReq.onload = getHeaderTime; -oReq.send();</pre> -<h3 id="Do_something_when_last_modified_date_changes">Do something when last modified date changes</h3> -<p>Let's create these two functions:</p> -<pre class="brush: js">function getHeaderTime () { - - var - nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)), - nLastModif = Date.parse(this.getResponseHeader("Last-Modified")); - - if (isNaN(nLastVisit) || nLastModif > nLastVisit) { - window.localStorage.setItem('lm_' + this.filepath, Date.now()); - isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit); - } - -} - -function ifHasChanged(sURL, fCallback) { - var oReq = new XMLHttpRequest(); - oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL, true); - oReq.callback = fCallback; - oReq.filepath = sURL; - oReq.onload = getHeaderTime; - oReq.send(); -}</pre> -<p>Test:</p> -<pre class="brush: js">/* Let's test the file "yourpage.html"... */ - -ifHasChanged("yourpage.html", function (nModif, nVisit) { - alert("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!"); -});</pre> -<p>If you want to know <strong>whether <em>the current page</em> has changed</strong>, please read the article about <a href="/en-US/docs/Web/API/document.lastModified" title="/en-US/docs/Web/API/document.lastModified"><code>document.lastModified</code></a>.</p> -<h2 id="Cross-site_XMLHttpRequest">Cross-site XMLHttpRequest</h2> -<p>Modern browsers support cross-site requests by implementing the web applications working group's <a href="/en-US/docs/HTTP_access_control" title="HTTP access control">Access Control for Cross-Site Requests</a> standard. As long as the server is configured to allow requests from your web application's origin, <code>XMLHttpRequest</code> will work. Otherwise, an <code>INVALID_ACCESS_ERR</code> exception is thrown.</p> -<h2 id="Bypassing_the_cache">Bypassing the cache</h2> -<p><span style="line-height: 1.572;">A, cross-browser compatible approach to bypassing the cache is to append a timestamp to the URL, being sure to include a "?" or "&" as appropriate. For example:</span></p> -<pre>http://foo.com/bar.html -> http://foo.com/bar.html?12345 -http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345 -</pre> -<p>Since the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.</p> -<p>You can automatically adjust URLs using the following code:</p> -<pre class="brush:js">var oReq = new XMLHttpRequest(); - -oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true); -oReq.send(null);</pre> -<h2 id="Security">Security</h2> -<p>{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference <code>capability.policy.<policyname>.XMLHttpRequest.open</policyname></code> to <code>allAccess</code> to give specific sites cross-site access. This is no longer supported.")}}</p> -<p>{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}</p> -<p>The recommended way to enable cross-site scripting is to use the <code>Access-Control-Allow-Origin </code> HTTP header in the response to the XMLHttpRequest.</p> -<h3 id="XMLHttpRequests_being_stopped">XMLHttpRequests being stopped</h3> -<p>If you end up with an XMLHttpRequest having <code>status=0</code> and <code>statusText=null</code>, it means that the request was not allowed to be performed. It was <code><a href="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent" title="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent">UNSENT</a></code>. A likely cause for this is when the <a href="http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin" style="outline: 1px dotted; outline-offset: 0pt;"><code>XMLHttpRequest</code> origin</a> (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then <code>open()</code>. This case can happen for example when one has an XMLHttpRequest that gets fired on an onunload event for a window: the XMLHttpRequest gets in fact created when the window to be closed is still there, and then the request is sent (ie <code>open()</code>) when this window has lost its focus and potentially different window has gained focus. The way to avoid this problem is to set a listener on the new window "activate" event that gets set when the old window has its "unload" event fired.</p> -<h2 id="Using_XMLHttpRequest_from_JavaScript_modules_XPCOM_components">Using XMLHttpRequest from JavaScript modules / XPCOM components</h2> -<p>Instantiating <code>XMLHttpRequest</code> from a <a href="/en-US/docs/JavaScript_code_modules/Using" title="https://developer.mozilla.org/en/JavaScript_code_modules/Using_JavaScript_code_modules">JavaScript module</a> or an XPCOM component works a little differently; it can't be instantiated using the <code>XMLHttpRequest()</code> constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.</p> -<pre class="brush: js">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest"); -</pre> -<p>Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason. If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.</p> -<pre class="brush:js">const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"] - .getService(Components.interfaces.nsIAppShellService) - .hiddenDOMWindow; -var oReq = new XMLHttpRequest();</pre> -<h2 id="See_also">See also</h2> -<ol> - <li><a href="/en-US/docs/AJAX/Getting_Started" title="AJAX/Getting_Started">MDN AJAX introduction</a></li> - <li><a href="/en-US/docs/HTTP_access_control" title="HTTP access control">HTTP access control</a></li> - <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL" title="How to check the security state of an XMLHTTPRequest over SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li> - <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li> - <li><a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li> - <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Articles/XHR.html">Apple developers' reference</a></li> - <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li> - <li><a href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object: W3C Specification</a></li> - <li><a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">Web Progress Events specification</a></li> -</ol> diff --git a/files/pl/web/css/attribute_selectors/index.html b/files/pl/web/css/attribute_selectors/index.html deleted file mode 100644 index 93ffda8fec..0000000000 --- a/files/pl/web/css/attribute_selectors/index.html +++ /dev/null @@ -1,238 +0,0 @@ ---- -title: Selektory artybutów -slug: Web/CSS/Attribute_selectors -translation_of: Web/CSS/Attribute_selectors ---- -<div>{{CSSRef}}</div> - -<p><strong>Selektor atrybutów </strong>CSS dopasowuje elementy w oparciu o obecność lub wartość danego atrybutu.</p> - -<pre class="brush: css no-line-numbers">/* <a> Element z artybutem "title" */ -a[title] { - color: purple; -} - -/* <a> elemente href zawierajacy "https://example.org" */ -a[href="https://example.org"] { - color: green; -} - -/* <a> element href zawirający "example" */ -a[href*="example"] { - font-size: 2em; -} - -/* <a> elementy href kończące się na ".org" */ -a[href$=".org"] { - font-style: italic; -} - -/* <a> elementy, których atrybut klasy zawiera słowo "logo" */ -a[class~="logo"] { - padding: 2px; -}</pre> - -<h2 id="Syntax">Syntax</h2> - -<dl> - <dt><code>[<em>attr</em>]</code></dt> -</dl> - -<p>Reprezentuje elementy z atrybutem o nazwie attr.</p> - -<dl> - <dt><code>[<em>attr</em>=<em>value</em>]</code></dt> - <dd>Reprezentuje elementy z atrybutem o nazwie attr, którego wartością jest "value".</dd> - <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt> - <dd>Represents elements with an attribute name of <em>attr</em> whose value is a whitespace-separated list of words, one of which is exactly <em>value</em>.</dd> - <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt> - <dd>Represents elements with an attribute name of <em>attr</em> whose value can be exactly <em>value</em> or can begin with <em>value</em> immediately followed by a hyphen, <code>-</code> (U+002D). It is often used for language subcode matches.</dd> - <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt> - <dd>Represents elements with an attribute name of <em>attr</em> whose value is prefixed (preceded) by <em>value</em>.</dd> - <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt> - <dd>Represents elements with an attribute name of <em>attr</em> whose value is suffixed (followed) by <em>value</em>.</dd> - <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt> - <dd>Represents elements with an attribute name of <em>attr</em> whose value contains at least one occurrence of <em>value</em> within the string.</dd> - <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt> - <dd>Adding an <code>i</code> (or <code>I</code>) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).</dd> - <dt id="case-sensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> s]</code> {{Experimental_Inline}}</dt> - <dd>Adding an <code>s</code> (or <code>S</code>) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<h3 id="Links">Links</h3> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">a { - color: blue; -} - -/* Internal links, beginning with "#" */ -a[href^="#"] { - background-color: gold; -} - -/* Links with "example" anywhere in the URL */ -a[href*="example"] { - background-color: silver; -} - -/* Links with "insensitive" anywhere in the URL, - regardless of capitalization */ -a[href*="insensitive" i] { - color: cyan; -} - -/* Links with "cAsE" anywhere in the URL, -with matching capitalization */ -a[href*="cAsE" s] { - color: pink; -} - -/* Links that end in ".org" */ -a[href$=".org"] { - color: red; -}</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><ul> - <li><a href="#internal">Internal link</a></li> - <li><a href="http://example.com">Example link</a></li> - <li><a href="#InSensitive">Insensitive internal link</a></li> - <li><a href="http://example.org">Example org link</a></li> -</ul></pre> - -<h4 id="Result">Result</h4> - -<p>{{EmbedLiveSample("Links")}}</p> - -<h3 id="Languages">Languages</h3> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css">/* All divs with a `lang` attribute are bold. */ -div[lang] { - font-weight: bold; -} - -/* All divs without a `lang` attribute are italicized. */ -div:not([lang]) { - <span class="st">font-style: italic;</span> -} - -/* All divs in US English are blue. */ -div[lang~="en-us"] { - color: blue; -} - -/* All divs in Portuguese are green. */ -div[lang="pt"] { - color: green; -} - -/* All divs in Chinese are red, whether - simplified (zh-CN) or traditional (zh-TW). */ -div[lang|="zh"] { - color: red; -} - -/* All divs with a Traditional Chinese - `data-lang` are purple. */ -/* Note: You could also use hyphenated attributes - without double quotes */ -div[data-lang="zh-TW"] { - color: purple; -} -</pre> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><div lang="en-us en-gb en-au en-nz">Hello World!</div> -<div lang="pt">Olá Mundo!</div> -<div lang="zh-CN">世界您好！</div> -<div lang="zh-TW">世界您好！</div> -<div data-lang="zh-TW">世界您好！</div> -</pre> - -<h4 id="Result_2">Result</h4> - -<p>{{EmbedLiveSample("Languages")}}</p> - -<h3 id="HTML_ordered_lists">HTML ordered lists</h3> - -<p>The HTML specification requires the {{htmlattrxref("type", "input")}} attribute to be matched case-insensitively due to it primarily being used in the {{HTMLElement("input")}} element, trying to use attribute selectors to with the {{htmlattrxref("type", "ol")}} attribute of an {{HTMLElement("ol", "ordered list")}} doesn't work without the <a href="#case-sensitive">case-sensitive</a> modifier.</p> - -<h4 id="CSS_3">CSS</h4> - -<pre class="brush: css">/* List types require the case sensitive flag due to a quirk in how HTML treats the type attribute. */ -ol[type="a"] { - list-style-type: lower-alpha; - background: red; -} - -ol[type="a" s] { - list-style-type: lower-alpha; - background: lime; -} - -ol[type="A" s] { - list-style-type: upper-alpha; - background: lime; -}</pre> - -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: html;"><ol type="A"> - <li>Example list</li> -</ol></pre> - -<h4 id="Result_3">Result</h4> - -<p>{{EmbedLiveSample("HTML_ordered_lists")}}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}}</td> - <td>{{Spec2("CSS4 Selectors")}}</td> - <td>Adds modifier for ASCII case-sensitive and case-insensitive attribute value selection.</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}</td> - <td>{{Spec2("CSS3 Selectors")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("css.selectors.attribute")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{CSSxRef("attr")}}</li> - <li>Selecting a single element: {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}}, or {{DOMxRef("Element.querySelector()")}}</li> - <li>Selecting all matching elements: {{DOMxRef("Document.querySelectorAll()")}}, {{DOMxRef("DocumentFragment.querySelectorAll()")}}, or {{DOMxRef("Element.querySelectorAll()")}}</li> - <li>The above methods are all implemented based on the {{DOMxRef("ParentNode")}} mixin; see {{DOMxRef("ParentNode.querySelector()")}} and {{DOMxRef("ParentNode.querySelectorAll()")}}</li> -</ul> diff --git a/files/pl/web/css/background-size/index.html b/files/pl/web/css/background-size/index.html deleted file mode 100644 index bceed2abcd..0000000000 --- a/files/pl/web/css/background-size/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: background-size -slug: Web/CSS/background-size -translation_of: Web/CSS/background-size ---- -<div>{{CSSRef}}</div> - -<p><code style=""><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Właściwość </span></font><strong>background-size</strong></code> określa wielkość elementu <code>background-image.</code> Obrazek może pozostać w jego domyślnych wymiarach, rozciągnięty do nowych wymiarów lub ustawiony tak, aby zajmował całą dostępną przestrzeń zachowując swoje proporcje.</p> - -<div>{{EmbedInteractiveExample("pages/css/background-size.html")}}</div> - -<p class="hidden">Źródło tego interaktywnego przykładu jest zlokalizowane na GitHub. Jeśli chcesz wspierać projekt interaktywnych przykładów sklonuj (clone) <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i wyślij nam pull request.</p> - -<p>Przestrzenie nie zapełnione przez <code>background-image</code> wypełnia {{cssxref("background-color")}}, <code>background-color</code> będzie widoczny jeżeli obrazek jest przezroczysty.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: css no-line-numbers">/* Wartości słowne */ -background-size: cover; -background-size: contain; - -/* Właściwości z jedną wartością */ -/* szerokość obrazka (wysokość stanie się 'auto') */ -background-size: 50%; -background-size: 3.2em; -background-size: 12px; -background-size: auto; - -/* Właściwości z dwoma wartościami */ -/* pierwsza wartość: szerokość obrazka, druga wartość: wysokość */ -background-size: 50% auto; -background-size: 3em 25%; -background-size: auto 6px; -background-size: auto auto; - -/* Wiele teł */ -background-size: auto, auto; /* Not to be confused with `auto auto` */ -background-size: 50%, 25%, 25%; -background-size: 6px, auto, contain; - -/* Wartości globalne */ -background-size: inherit; -background-size: initial; -background-size: unset; -</pre> - -<p>Właściwość <code>background-size</code> jest określana w jeden z podanych sposobów:</p> - -<ul> - <li>Używając wartości słownych <code><a href="#contain">contain</a></code> lub <code><a href="#cover">cover</a></code>.</li> - <li>Używając tylko wartości długości, w tym przypadku wysokość jest domyślnie ustawiona na <code><a href="#auto">auto</a></code><a href="#auto">.</a></li> - <li>Używając obu wartości (width i height), każda z wartości może być określona jako długość {{cssxref("<length>")}}, w procentach {{cssxref("<percentage>")}} lub <code><a href="#auto">auto</a></code>.</li> -</ul> - -<p>Aby określić wielkość wielu teł, odziel wartości dla każdego tła przecinkami.</p> - -<h3 id="Values">Values</h3> - -<dl> - <dt id="contain"><code>contain</code></dt> - <dd>Skaluje obrazek do jak największych rozmiarów, bez jego rozciągania czy przycinania.</dd> - <dt id="cover"><code>cover</code></dt> - <dd>Skaluje obrazek do jak największych rozmiarów, bez jego rozciągania. Jeżeli proporcje obrazu są inne od elementu, jest on przycinany pionowo lub poziomo - tak, żeby nie zostało puste miejsce.</dd> - <dt id="auto"><code>auto</code></dt> - <dd>Skaluje tło w odpowiednim kierunku, po to aby zachować jego nieodłączne proporcje.</dd> - <dt id="length">{{cssxref("<length>")}}</dt> - <dd>Rozciąga obrazek w odpowiednim kierunku do określonej długości. Nie można używać wartości ujemnych.</dd> - <dt id="percentage">{{cssxref("<percentage>")}}</dt> - <dd>[do przetłumaczenia na: Polski]</dd> - <dd>Stretches the image in the corresponding dimension to the specified percentage of the <em>background positioning area</em>. The background positioning area is determined by the value of {{cssxref("background-origin")}} (by default, the padding box). However, if the background's {{cssxref("background-attachment")}} value is <code>fixed</code>, the positioning area is instead the entire {{glossary("viewport")}}. Negative values are not allowed.</dd> -</dl> - -<h3 id="Intrinsic_dimensions_and_proportions">Intrinsic dimensions and proportions</h3> - -<p>The computation of values depends on the image's intrinsic dimensions (width and height) and intrinsic proportions (width-to-height ratio). These attributes are as follows:</p> - -<ul> - <li>A bitmap image (such as JPG) always has intrinsic dimensions and proportions.</li> - <li>A vector image (such as SVG) does not necessarily have intrinsic dimensions. If it has both horizontal and vertical intrinsic dimensions, it also has intrinsic proportions. If it has no dimensions or only one dimension, it may or may not have proportions.</li> - <li>CSS {{cssxref("<gradient>")}}s have no intrinsic dimensions or intrinsic proportions.</li> - <li>Background images created with the {{cssxref("element()")}} function use the intrinsic dimensions and proportions of the generating element.</li> -</ul> - -<div class="note"> -<p><strong>Note:</strong> The behavior of <code><gradient></code>s changed in Gecko 8.0 {{geckoRelease("8.0")}}. Before this, they were treated as images with no intrinsic dimensions, but with intrinsic proportions identical to that of the background positioning area.</p> -</div> - -<div class="note"> -<p><strong>Note:</strong> In Gecko, background images created using the {{cssxref("element()")}} function are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion. This is non-standard behavior.</p> -</div> - -<p>Based on the intrinsic dimensions and proportions, the rendered size of the background image is computed as follows:</p> - -<dl> - <dt>If both components of <code>background-size</code> are specified and are not <code>auto</code>:</dt> - <dd>The background image is rendered at the specified size.</dd> - <dt>If the <code>background-size</code> is <code>contain</code> or <code>cover</code>:</dt> - <dd>While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.</dd> - <dt>If the <code>background-size</code> is <code>auto</code> or <code>auto auto</code>:</dt> - <dd> - <ul> - <li>If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.</li> - <li>If the image has no intrinsic dimensions and has no intrinsic proportions, it's rendered at the size of the background positioning area.</li> - <li>If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if <code>contain</code> had been specified instead.</li> - <li>If the image has only one intrinsic dimension and has intrinsic proportions, it's rendered at the size corresponding to that one dimension. The other dimension is computed using the specified dimension and the intrinsic proportions.</li> - <li>If the image has only one intrinsic dimension but has no intrinsic proportions, it's rendered using the specified dimension and the other dimension of the background positioning area.</li> - </ul> - </dd> - <dd> - <div class="note"><strong>Note:</strong> SVG images have a <code><a href="/en-US/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a></code> attribute that defaults to the equivalent of <code>contain</code>. In Firefox 43, as opposed to Chrome 52, an explicit <code>background-size</code> causes <code>preserveAspectRatio</code> to be ignored.</div> - </dd> - <dt>If the <code>background-size</code> has one <code>auto</code> component and one non-<code>auto</code> component:</dt> - <dd> - <ul> - <li>If the image has intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the specified dimension and the intrinsic proportions.</li> - <li>If the image has no intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the image's corresponding intrinsic dimension, if there is one. If there is no such intrinsic dimension, it becomes the corresponding dimension of the background positioning area.</li> - </ul> - </dd> -</dl> - -<div class="note"> -<p><strong>Note:</strong> Background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers. Be careful about relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable.</p> -</div> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<p>Please see <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Scaling background images</a> for examples.</p> - -<h2 id="Notes">Notes</h2> - -<p>If you use a <code><gradient></code> as the background and specify a <code>background-size</code> to go with it, it's best not to specify a size that uses a single <code>auto</code> component, or is specified using only a width value (for example, <code>background-size: 50%</code>). Rendering of <code><gradient></code>s in such cases changed in Firefox 8, and at present is generally inconsistent across browsers, which do not all implement rendering in full accordance with <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">the CSS3 <code>background-size</code> specification</a> and with <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">the CSS3 Image Values gradient specification</a>.</p> - -<pre class="brush: css">.gradient-example { - width: 50px; - height: 100px; - background-image: linear-gradient(blue, red); - - /* Not safe to use */ - background-size: 25px; - background-size: 50%; - background-size: auto 50px; - background-size: auto 50%; - - /* Safe to use */ - background-size: 25px 50px; - background-size: 50% 50%; -} -</pre> - -<p>Note that it's particularly not recommended to use a pixel dimension and an <code>auto</code> dimension with a <code><gradient></code>, because it's impossible to replicate rendering in versions of Firefox prior to 8, and in browsers not implementing Firefox 8's rendering, without knowing the exact size of the element whose background is being specified.</p> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("css.properties.background-size")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">Scaling background images</a></li> - <li><a href="/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds">Scaling of SVG backgrounds</a></li> - <li>{{cssxref("object-fit")}}</li> -</ul> diff --git a/files/pl/web/css/box-decoration-break/index.html b/files/pl/web/css/box-decoration-break/index.html deleted file mode 100644 index 5873b850fb..0000000000 --- a/files/pl/web/css/box-decoration-break/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: box-decoration-break -slug: Web/CSS/box-decoration-break -tags: - - CSS - - CSS Fragmentation - - CSS Property - - Experimental -translation_of: Web/CSS/box-decoration-break ---- -<p>{{CSSRef}}{{SeeCompatTable}}</p> - -<h2 id="Summary">Summary</h2> - -<p>The <strong><code>box-decoration-break</code></strong> CSS property specifies how the {{ Cssxref("background") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("border-image") }}, {{ Cssxref("box-shadow") }}, {{ Cssxref("margin") }} and {{ Cssxref("clip") }} of an element is applied when the box for the element is fragmented. Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a page break when printed. Each piece of the rendering for the element is called a fragment.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush:css">box-decoration-break: slice; -box-decoration-break: clone; - -box-decoration-break: initial; -box-decoration-break: inherit; -box-decoration-break: unset; -</pre> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code>slice</code></dt> - <dd>The element is rendered as if its box were not fragmented, and then the rendering for this hypothetical box is sliced into pieces for each line/column/page. Note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own width if the break occurs in the block direction. See the CSS specification for details.</dd> - <dt><code>clone</code></dt> - <dd>Each box fragment is rendered independently with the specified border, padding and margin wrapping each fragment. The {{ Cssxref("border-radius") }}, {{ Cssxref("border-image") }} and {{ Cssxref("box-shadow") }}, are applied to each fragment independently. The background is drawn independently in each fragment which means that a background image with {{ Cssxref("background-repeat") }}: <code>no-repeat</code> may be repeated multiple times.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<h3 id="Inline_box_fragments">Inline box fragments</h3> - -<p>An inline element that contains line-breaks styled with:</p> - -<pre class="brush:css">.example { - background: linear-gradient(to bottom right, yellow, green); - box-shadow: - 8px 8px 10px 0px deeppink, - -5px -5px 5px 0px blue, - 5px 5px 15px 0px yellow; - padding: 0em 1em; - border-radius: 16px; - border-style: solid; - margin-left: 10px; - font: 24px sans-serif; - line-height: 2; -} - -... -<span class="example">The<br>quick<br>orange fox</span></pre> - -<p>Results in:</p> - -<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example." src="https://mdn.mozillademos.org/files/8167/box-decoration-break-inline-slice.png" style="height: 177px; width: 191px;"></p> - -<p>Adding <code>box-decoration-break:clone</code> to the above styles:</p> - -<pre class="brush:css"> -webkit-box-decoration-break: clone; - -o-box-decoration-break: clone; - box-decoration-break: clone; -</pre> - -<p>Results in:</p> - -<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example" src="https://mdn.mozillademos.org/files/8169/box-decoration-break-inline-clone.png" style="height: 180px; width: 231px;"></p> - -<p>You can <a href="https://mdn.mozillademos.org/files/8179/box-decoration-break-inline.html">try the two inline examples above</a> in your browser.</p> - -<p>Here's an example of an inline element using a large <code>border-radius</code> value. The second <code>"iM"</code> has a line-break between the <code>"i"</code> and the <code>"M"</code>. For comparison, the first <code>"iM"</code> is without line-breaks. Note that if you stack the rendering of the two fragments horizontally next to each other it will result in the non-fragmented rendering.</p> - -<p><img alt="A screenshot of the rendering of the second inline element example." src="https://mdn.mozillademos.org/files/8189/box-decoration-break-slice-inline-2.png" style="height: 184px; width: 108px;"></p> - -<p><a href="https://mdn.mozillademos.org/files/8191/box-decoration-break-inline-extreme.html">Try the above example</a> in your browser.</p> - -<h3 id="Block_box_fragments">Block box fragments</h3> - -<p>A block element with similar styles as above, first without any fragmentation:</p> - -<p><img alt="A screenshot of the rendering of the block element used in the examples without any fragmentation." src="https://mdn.mozillademos.org/files/8181/box-decoration-break-block.png" style="height: 149px; width: 333px;"></p> - -<p>Fragmenting the above block into three columns results in:</p> - -<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice." src="https://mdn.mozillademos.org/files/8183/box-decoration-break-block-slice.png" style="height: 55px; max-width: none; width: 1025px;"></p> - -<p>Note that stacking these pieces vertically will result in the non-fragmented rendering.</p> - -<p>Now the same example styled with <code>box-decoration-break:clone</code></p> - -<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone." src="https://mdn.mozillademos.org/files/8185/box-decoration-break-block-clone.png" style="height: 61px; max-width: none; width: 1023px;"></p> - -<p>Note here that each fragment has an identical replicated border, box-shadow and background.</p> - -<p>You can <a href="https://mdn.mozillademos.org/files/8187/box-decoration-break-block.html">try the block examples above</a> in your browser.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break') }}</td> - <td>{{ Spec2('CSS3 Fragmentation') }}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Support on inline elements</td> - <td>{{ CompatVersionUnknown() }}{{property_prefix("-webkit")}}</td> - <td>{{CompatGeckoDesktop(32.0)}} [1]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}{{property_prefix("-o")}}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>Support on non-inline element</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(32.0)}} [1]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Support on inline elements</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatGeckoMobile("32.0")}}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>Support on non-inline element</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoMobile("32.0")}}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Note that Firefox implemented an non-standard version of this property before Firefox 32 named {{ Cssxref("-moz-background-inline-policy") }}. That property is unsupported since Firefox 32.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> -</ul> diff --git a/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html deleted file mode 100644 index eb9d550390..0000000000 --- a/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html +++ /dev/null @@ -1,609 +0,0 @@ ---- -title: Auto-placement in CSS Grid Layout -slug: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout -translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout ---- -<p>Poza możliwością umieszczania elementów</p> - -<div id="placement_1"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; -} -</pre> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> -</div> -</pre> - -<p>{{ EmbedLiveSample('placement_1', '500', '230') }}</p> -</div> - -<h2 id="Default_rules_for_auto-placement">Default rules for auto-placement</h2> - -<p>As you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell. The default flow is to arrange items by row. Grid will lay an item out into each cell of row 1. If you have created additional rows using the <code>grid-template-rows</code> property then grid will continue placing items in these rows. If the grid does not have enough rows in the explicit grid to place all of the items new <em>implicit</em> rows will be created.</p> - -<h3 id="Sizing_rows_in_the_implicit_grid">Sizing rows in the implicit grid</h3> - -<p>The default for automatically created rows in the implicit grid is for them to be auto-sized. This means that they will contain the content added to them without causing an overflow.</p> - -<p>You can however control the size of these rows with the property <code>grid-auto-rows</code>. To cause all created rows to be 100 pixels tall for example you would use:</p> - -<div id="placement_2"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; - grid-auto-rows: 100px; -} -</pre> - -<p>{{ EmbedLiveSample('placement_2', '500', '330') }}</p> -</div> - -<p>You can use {{cssxref("minmax","minmax()")}} in your value for {{cssxref("grid-auto-rows")}} enabling the creation of rows that are a minimum size but then grow to fit content if it is taller.</p> - -<div id="placement_3"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four - <br>This cell - <br>Has extra - <br>content. - <br>Max is auto - <br>so the row expands. - </div> - <div>Five</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; - grid-auto-rows: minmax(100px, auto); -} -</pre> - -<p>{{ EmbedLiveSample('placement_3', '500', '330') }}</p> -</div> - -<p>You can also pass in a track listing, this will repeat. The following track listing will create an initial implicit row track as 100 pixels and a second as <code>200px</code>. This will continue for as long as content is added to the implicit grid. <strong>Track listings are not supported in Firefox.</strong></p> - -<div id="placement_4"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> - <div>Six</div> - <div>Seven</div> - <div>Eight</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; - grid-auto-rows: 100px 200px; -} -</pre> - -<p>{{ EmbedLiveSample('placement_4', '500', '330') }}</p> -</div> - -<h3 id="Auto-placement_by_column">Auto-placement by column</h3> - -<p>You can also ask grid to auto-place items by column. Using the property {{cssxref("grid-auto-flow")}} with a value of <code>column</code>. In this case grid will add items in rows that you have defined using {{cssxref("grid-template-rows")}}. When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized. You can control the size of implicit column tracks with {{cssxref("grid-auto-columns")}}, this works in the same way as {{cssxref("grid-auto-rows")}}.</p> - -<p>In this next example I have created a grid with three row tracks of 200 pixels height. I am auto-placing by column and the columns created will be a column width of 300 pixels, then a column width of 100 pixels until there are enough column tracks to hold all of the items.</p> - -<div id="placement_5"> -<pre class="brush: css">.wrapper { - display: grid; - grid-template-rows: repeat(3, 200px); - grid-gap: 10px; - grid-auto-flow: column; - grid-auto-columns: 300px 100px; -} -</pre> - -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> - <div>Six</div> - <div>Seven</div> - <div>Eight</div> -</div> -</pre> - -<p>{{ EmbedLiveSample('placement_5', '500', '640') }}</p> -</div> - -<h2 id="The_order_of_auto_placed_items">The order of auto placed items</h2> - -<p>A grid can contain a mixture of items. Some of the items may have a position on the grid, but others may be auto-placed. This can be helpful, if you have a document order that reflects the order in which items sit on the grid you may not need to write CSS rules to place absolutely everything. The specification contains a long section detailing the <a href="https://drafts.csswg.org/css-grid/#auto-placement-algo">Grid item placement algorithm</a>, however for most of us we just need to remember a few simple rules for our items.</p> - -<h3 id="Order_modified_document_order">Order modified document order</h3> - -<p>Grid places items that have not been given a grid position in what is described in the specification as “order modified document order”. This means that if you have used the <code>order</code> property at all, the items will be placed by that order, not their DOM order. Otherwise they will stay by default in the order that they are entered in the document source.</p> - -<h3 id="Items_with_placement_properties">Items with placement properties</h3> - -<p>The first thing grid will do is place any items that have a position. In the example below I have 12 grid items. Item 2 and item 5 have been placed using line based placement on the grid. You can see how those items are placed and the other items then auto-place in the spaces. The auto-placed items will place themselves before the placed items in DOM order, they don’t start after the position of a placed item that comes before them.</p> - -<div id="placement_6"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> - <div>Six</div> - <div>Seven</div> - <div>Eight</div> - <div>Nine</div> - <div>Ten</div> - <div>Eleven</div> - <div>Twelve</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-auto-rows: 100px; - grid-gap: 10px; -} - .wrapper div:nth-child(2) { - grid-column: 3; - grid-row: 2 / 4; - } - .wrapper div:nth-child(5) { - grid-column: 1 / 3; - grid-row: 1 / 3; -} -</pre> - -<p>{{ EmbedLiveSample('placement_6', '500', '450') }}</p> -</div> - -<h3 id="Deal_with_items_that_span_tracks">Deal with items that span tracks</h3> - -<p>You can use placement properties while still taking advantage of auto-placement. In this next example I have added to the layout by setting odd items to span two tracks both for rows and columns. I do this with the {{cssxref("grid-column-end")}} and {{cssxref("grid-row-end")}} properties and setting the value of this to <code>span 2</code>. What this means is that the start line of the item will be set by auto-placement, and the end line will span two tracks.</p> - -<p>You can see how this then leaves gaps in the grid, as for the auto-placed items if grid comes across an item that doesn’t fit into a track, it will move to the next row until it finds a space the item can fit in.</p> - -<div id="placement_7"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> - <div>Six</div> - <div>Seven</div> - <div>Eight</div> - <div>Nine</div> - <div>Ten</div> - <div>Eleven</div> - <div>Twelve</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-auto-rows: 100px; - grid-gap: 10px; -} -.wrapper div:nth-child(4n+1) { - grid-column-end: span 2; - grid-row-end: span 2; - background-color: #ffa94d; -} - .wrapper div:nth-child(2) { - grid-column: 3; - grid-row: 2 / 4; - } - .wrapper div:nth-child(5) { - grid-column: 1 / 3; - grid-row: 1 / 3; -} -</pre> - -<p>{{ EmbedLiveSample('placement_7', '500', '770') }}</p> -</div> - -<h3 id="Filling_in_the_gaps">Filling in the gaps</h3> - -<p>So far, other than items we have specifically placed, grid is always progressing forward and keeping items in DOM order. This is generally what you want, if you are laying out a form for example you wouldn’t want the labels and fields to become jumbled up in order to fill in some gap. However sometimes, we are laying things out that don’t have a logical order and we would like to create a layout that doesn’t have gaps in it.</p> - -<p>To do this, add the property {{cssxref("grid-auto-flow")}} with a value of <code>dense</code> to the container. This is the same property you use to change the flow order to <code>column</code>, so if you were working in columns you would add both values <code>grid-auto-flow: column dense</code>.</p> - -<p>Having done this, grid will now backfill the gaps, as it moves through the grid it leaves gaps as before, but then if it finds an item that will fit in a previous gap it will pick it up and take it out of DOM order to place it in the gap. As with any other reordering in grid this does not change the logical order. Tab order for example, will still follow the document order. We will take a look at the potential accessibility issues of Grid Layout in a later guide, but you should take care when creating this disconnect between the visual order and display order.</p> - -<div id="placement_8"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> - <div>Six</div> - <div>Seven</div> - <div>Eight</div> - <div>Nine</div> - <div>Ten</div> - <div>Eleven</div> - <div>Twelve</div> -</div> -</pre> - -<pre class="brush: css">.wrapper div:nth-child(4n+1) { - grid-column-end: span 2; - grid-row-end: span 2; - background-color: #ffa94d; -} - .wrapper div:nth-child(2) { - grid-column: 3; - grid-row: 2 / 4; - } - .wrapper div:nth-child(5) { - grid-column: 1 / 3; - grid-row: 1 / 3; -} -.wrapper { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-auto-rows: 100px; - grid-gap: 10px; - grid-auto-flow: dense; -} -</pre> - -<p>{{ EmbedLiveSample('placement_8', '500', '730') }}</p> -</div> - -<h3 id="Anonymous_grid_items">Anonymous grid items</h3> - -<p>There is a mention in the specification of anonymous grid items. These are created if you have a string of text inside your grid container, that is not wrapped in any other element. In the example below we have three grid items, assuming you had set the parent with a class of <code>grid</code> to <code>display: grid</code>. The first is an anonymous item as it has no enclosing markup, this item will always be dealt with via the auto-placement rules. The other two are grid items enclosed in a div, they might be auto-placed or you could place these with a positioning method onto your grid.</p> - -<pre class="brush: css"><div class="grid"> - I am a string and will become an anonymous item - <div>A grid item</div> - <div>A grid item</div> -</div> -</pre> - -<p>Anonymous items are always auto-placed because there is no way to target them. Therefore if you have some unwrapped text for some reason in your grid, be aware that it might show up somewhere unexpected as it will be auto-placed according to the auto-placement rules.</p> - -<h3 id="Use_cases_for_auto-placement">Use cases for auto-placement</h3> - -<p>Auto-placement is useful whenever you have a collection of items. That could be items that do not have a logical order such as a gallery of photos, or product listing. In that case you might choose to use the dense packing mode to fill in any holes in your grid. In my image gallery example I have some landscape and some portrait images. I have set landscape images – with a class of <code>landscape</code> to span two column tracks. I then use <code>grid-auto-flow: dense</code> to create a densely packed grid.</p> - -<div id="placement_9"> -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); - grid-gap: 10px; - grid-auto-flow: dense; - list-style: none; - margin: 1em auto; - padding: 0; - max-width: 800px; -} -.wrapper li { - border: 1px solid #ccc; -} -.wrapper li.landscape { - grid-column-end: span 2; -} -.wrapper li img { - display: block; - object-fit: cover; - width: 100%; - height: 100%; -} -</pre> - -<pre class="brush: html"><ul class="wrapper"> - <li><img src="https://placehold.it/200x300" alt="placeholder"></li> - <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> - <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> - <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> - <li><img src="https://placehold.it/200x300" alt="placeholder"></li> - <li><img src="https://placehold.it/200x300" alt="placeholder"></li> - <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> - <li><img src="https://placehold.it/200x300" alt="placeholder"></li> - <li><img src="https://placehold.it/200x300" alt="placeholder"></li> - <li><img src="https://placehold.it/200x300" alt="placeholder"></li> -</ul> -</pre> - -<p>{{ EmbedLiveSample('placement_9', '500', '1300') }}</p> -</div> - -<p>Auto-placement can also help you lay out interface items which do have logical order. An example is the definition list in this next example. Definition lists are an interesting challenge to style as they are flat, there is nothing wrapping the groups of <code>dt</code> and <code>dd</code> items. In my example I am allowing auto-placement to place the items, however I have classes that start a <code>dt</code> in column 1, and <code>dd</code> in column 2, this ensure that terms go on one side and definitions on the other - no matter how many of each we have.</p> - -<div id="placement_10"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <dl> - <dt>Mammals</dt> - <dd>Cat</dd> - <dd>Dog</dd> - <dd>Mouse</dd> - <dt>Fish</dt> - <dd>Guppy</dd> - <dt>Birds</dt> - <dd>Pied Wagtail</dd> - <dd>Owl</dd> - </dl> -</div> -</pre> - -<pre class="brush: css">dl { - display: grid; - grid-template-columns: auto 1fr; - max-width: 300px; - margin: 1em; - line-height: 1.4; -} -dt { - grid-column: 1; - font-weight: bold; -} -dd { - grid-column: 2; - } -</pre> - -<p>{{ EmbedLiveSample('placement_10', '500', '230') }}</p> -</div> - -<h2 id="What_can’t_we_do_with_auto-placement_yet">What can’t we do with auto-placement (yet)?</h2> - -<p>There are a couple of things that often come up as questions. Currently we can’t do things like target every other cell of the grid with our items. A related issue may have already come to mind if you followed the last guide about named lines on the grid. It would be to define a rule that said “auto-place items against the next line named “n”, and grid would then skip other lines.There is <a href="https://github.com/w3c/csswg-drafts/issues/796">an issue raised about this</a> on the CSSWG GitHub repository, and you would be welcome to add your own use cases to this.</p> - -<p>It may be that you come up with your own use cases for auto-placement or any other part of grid layout. If you do, raise them as issues or add to an existing issue that could solve your use case. This will help to make future versions of the specification better.</p> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> - <li data-default-state="open"><a href="#"><strong>Guides</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Properties</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> - <ol> - <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> - <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> - <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> - <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> - <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> - <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> - <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> - <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> - </ol> - </li> -</ol> -</section> diff --git a/files/pl/web/css/media_queries/using_media_queries/index.html b/files/pl/web/css/media_queries/using_media_queries/index.html deleted file mode 100644 index 8944867c66..0000000000 --- a/files/pl/web/css/media_queries/using_media_queries/index.html +++ /dev/null @@ -1,643 +0,0 @@ ---- -title: Using media queries -slug: Web/CSS/Media_Queries/Using_media_queries -translation_of: Web/CSS/Media_Queries/Using_media_queries ---- -<p><span class="seoSummary">M<strong>edia query</strong> składa się z jej typu oraz przynajmniej jednego wyrażenia, zadaniem którego jest określenie zakresu działania kodu css, poprzez użycie takich wartości jak szerokość, wysokość czy kolor. Media queries zostały dodane w specyfikacji <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, pozwalając na przygotowanie określonego stylu zawartości strony, w zależności od urządzenia docelowego dla kodu, bez potrzeby zmiany samej treści w każdym z przypadków. </span></p> - -<h2 id="Składnia">Składnia</h2> - -<p>Każda Media query składa się z <a href="/pl/docs/CSS/@media">typu medium docelowego</a>, a także, zgodnie ze specyfikacją CSS3, zawiera jedno lub więcej wyrażeń logicznych (ang. media features), które zwracają wartość true lub false. Wynik query jest prawdziwy, jeżeli typ medium jest zgodny z aktualnym urządzaniem (np. gdy rozdzielczość ekranu jest zgodna z podanymi warunkami). Media query zostanie wykonana, tylko jeśli wszystkie jej wyrażenia <strong>będą prawdziwe.</strong> </p> - -<pre class="brush: html"><!-- Media query użyta na elemencie link --> -<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> - -<!-- Media query w środku arkusza stylów --> -<style> -@media (max-width: 600px) { - .facet_sidebar { - display: none; - } -} -</style> -</pre> - -<p>Jeżeli warunki zostaną spełnione, wskazane arkusze stylów, lub zasady CSS w przypadku stylu osadzonego, zostaną załadowane, zgodnie z zasadą kaskadowości css. Należy zaznaczyć, że załączone style za pomocą znacznika <code>link</code> będą pobierane niezależnie od tego czy media query zostanie wykonana.</p> - -<p>Dopóki nie użyjesz operatorów <code>not</code> lub <code>optional</code>, typ medium nie jest wymagany i dla danej query nadany zostanie typ <code>all</code>.</p> - -<h3 id="Operatory_logiczne">Operatory logiczne</h3> - -<p>Możesz tworzyć zaawansowane media queries za pomocą operatorów logicznych - <code>not</code>, <code>and</code> oraz <code>only</code>. Operator <code>and</code> używany jest do łączenia wielu wyrażeń logicznych, w jedną media query. Nakładają one wymaganie, aby każda zeleżność była prawdziwa, wykonując przez to podany zestaw styli. Operator <code>not</code> używany jest do zanegowanie całej media query. Celem operatora <code>only</code> jest zaaplikowanie CSS'a tylko w przypadku, gdy wszystkie warunki są spełnione ( użyteczne gdy chcemy zapobiec użyciu znacznika media przez starsze przeglądarki. Jak już wspomnieliśmy, używając operatorów <code>only</code> oraz <code>not</code> musisz określić typ medium.</p> - -<p>Możesz również połączyć wiele media queries w listę, oddzielając kolejne wyrażenia media średnikiem. Jeżeli jakakolwiek query jest prawdziwa, całe wyrażenie zwróci true. Takie wyrażenie jest równoznaczne z logicznym operatorem <code>or</code></p> - -<h4 id="and">and</h4> - -<p>The <code>and</code> keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied <code>all</code> media type, could look like this:</p> - -<pre class="brush: css">@media (min-width: 700px) { ... }</pre> - -<p>If, however, you wanted this to apply only if the display is in landscape, you could use an <code>and</code> operator to chain the media features together.</p> - -<pre class="brush: css">@media (min-width: 700px) and (orientation: landscape) { ... }</pre> - -<p>Now the above media query will only return true if the viewport is 700px wide or wider and the display is in landscape. If, however, you only wanted this to apply if the display in question was of the media type TV, you could chain these features with a media type using an <code>and</code> operator.</p> - -<pre class="brush: css">@media tv and (min-width: 700px) and (orientation: landscape) { ... }</pre> - -<p>Now, the above media query will only apply if the media type is TV, the viewport is 700px wide or wider, and the display is in landscape.</p> - -<h4 id="comma-separated_lists">comma-separated lists</h4> - -<p>Comma-separated lists behave like the logical operator <code>or</code> when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. This means the comma-separated media queries can target different media features, types, and states.</p> - -<p>For instance, if you wanted to apply a set of styles if the viewing device either had a minimum width of 700px or was a handheld in landscape, you could write the following:</p> - -<pre class="brush: css">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre> - -<p>Above, if I were on a <code>screen</code> device with a viewport width of 800px, the media statement would return true because the first part, interpreted as <code>@media all and (min-width: 700px)</code> would apply to my device and therefore return true, despite the fact that my <code>screen</code> device would fail the <code>handheld</code> media type check in the second media query. Likewise, if I were on a <code>handheld</code> device held in landscape with a viewport width of 500px, while the first media query would fail due to the viewport width, the second media query would succeed and thus the media statement would return true.</p> - -<h4 id="not">not</h4> - -<p>The <code>not</code> keyword applies to the whole media query and returns true if the media query would otherwise return false (such as <code>monochrome</code> on a color display or a screen width of 600px with a <code>min-width: 700px</code> feature query). A <code>not</code> will only negate the media query it is applied to and not to every media query if present in a comma-separated list of media queries. The <code>not</code> keyword cannot be used to negate an individual feature query, only an entire media query. <span style="line-height: 1.572;">For example, the </span><code style="font-size: 14px;">not</code><span style="line-height: 1.572;"> is evaluated last in the following query:</span></p> - -<pre class="brush: css" style="font-size: 14px;">@media not all and (monochrome) { ... } -</pre> - -<p>This means that the query is evaluated like this:</p> - -<pre class="brush: css" style="font-size: 14px;">@media not (all and (monochrome)) { ... } -</pre> - -<p>... rather than like this:</p> - -<pre class="brush: css" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre> - -<p>As another example, look at the following media query:</p> - -<pre class="brush: css" style="font-size: 14px;">@media not screen and (color), print and (color) -</pre> - -<p>It is evaluated like this:</p> - -<pre class="brush: css" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre> - -<h4 id="only">only</h4> - -<p><span style="line-height: 21px;">The </span><code style="font-size: 14px;">only</code><span style="line-height: 21px;"> keyword prevents older browsers that do not support media queries with media features from applying the given styles:</span></p> - -<pre class="brush: html"><link rel="stylesheet" media="only screen and (color)" href="example.css" /> -</pre> - -<h3 id="Pseudo-BNF_(for_those_of_you_that_like_that_kind_of_thing)">Pseudo-BNF (for those of you that like that kind of thing)</h3> - -<pre>media_query_list: <media_query> [, <media_query> ]* -media_query: [[only | not]? <media_type> [ and <expression> ]*] - | <expression> [ and <expression> ]* -expression: ( <media_feature> [: <value>]? ) -media_type: all | aural | braille | handheld | print | - projection | screen | tty | tv | embossed -media_feature: width | min-width | max-width - | height | min-height | max-height - | device-width | min-device-width | max-device-width - | device-height | min-device-height | max-device-height - | aspect-ratio | min-aspect-ratio | max-aspect-ratio - | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio - | color | min-color | max-color - | color-index | min-color-index | max-color-index - | monochrome | min-monochrome | max-monochrome - | resolution | min-resolution | max-resolution - | scan | grid</pre> - -<p>Media queries are case insensitive. Media queries involving unknown media types are always false.</p> - -<div class="note"><strong>Note:</strong> Parentheses are required around expressions; failing to use them is an error.</div> - -<h2 id="Media_features">Media features</h2> - -<p>Most media features can be prefixed with "min-" or "max-" to express "greater or equal to" or "less than or equal to" constraints. This avoids using the "<" and ">" symbols, which would conflict with HTML and XML. If you use a media feature without specifying a value, the expression resolves to true if the feature's value is non-zero.</p> - -<div class="note"><strong>Note:</strong> If a media feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false. For example, querying the aspect ratio of an aural device always results in false.</div> - -<h3 id="color">color</h3> - -<p><strong>Value:</strong> {{cssxref("<color>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Indicates the number of bits per color component of the output device. If the device is not a color device, this value is zero.</p> - -<div class="note"><strong>Note:</strong> If the color components have different numbers of bits per color component, the smallest number is used. For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component. If the device uses indexed colors, the minimum number of bits per color component in the color table is used.</div> - -<h4 id="Examples">Examples</h4> - -<p>To apply a style sheet to all color devices:</p> - -<pre class="brush: css">@media all and (color) { ... } -</pre> - -<p>To apply a style sheet to devices with at least 4 bits per color component:</p> - -<pre class="brush: css">@media all and (min-color: 4) { ... } -</pre> - -<h3 id="color-index">color-index</h3> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Indicates the number of entries in the color look-up table for the output device.</p> - -<h4 id="Examples_2">Examples</h4> - -<p>To indicate that a style sheet should apply to all devices using indexed color, you can do:</p> - -<pre class="brush: css">@media all and (color-index) { ... } -</pre> - -<p>To apply a style sheet to indexed color devices with at least 256 colors:</p> - -<pre class="brush: html"><link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> -</pre> - -<h3 id="aspect-ratio">aspect-ratio</h3> - -<p><strong>Value:</strong> {{cssxref("<ratio>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Describes the aspect ratio of the targeted display area of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).</p> - -<h4 id="Example">Example</h4> - -<p>The following selects a special style sheet to use for when the display area is at least as wide as it is high.</p> - -<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) { ... }</pre> - -<p>This selects the style when the aspect ratio is either 1:1 or greater. In other words, these styles will only be applied when the viewing area is square or landscape.</p> - -<h3 id="device-aspect-ratio">device-aspect-ratio</h3> - -<p><strong>Value:</strong> {{cssxref("<ratio>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Describes the aspect ratio of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).</p> - -<h4 id="Example_2">Example</h4> - -<p>The following selects a special style sheet to use for widescreen displays.</p> - -<pre class="brush: css">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre> - -<p>This selects the style when the aspect ratio is either 16:9 or 16:10.</p> - -<h3 id="device-height">device-height</h3> - -<p><strong>Value:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p> - -<h4 id="Example_3">Example</h4> - -<p>To apply a style sheet to a document when displayed on a screen that is less than 800 pixels long, you can use this:</p> - -<pre class="brush: html"><link rel="stylesheet" media="screen and (max-device-height: 799px)" /> -</pre> - -<h3 id="device-width">device-width</h3> - -<p><strong>Value:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p> - -<h4 id="Example_4">Example</h4> - -<p>To apply a style sheet to a document when displayed on a screen that is less than 800 pixels wide, you can use this:</p> - -<pre class="brush: html" style="font-size: 14px;"><link rel="stylesheet" media="screen and (max-device-width: 799px)" /></pre> - -<h3 id="grid">grid</h3> - -<p><strong>Value:</strong> <code><mq-boolean></code> which is an {{cssxref("<integer>")}} that can only have the <code>0</code> and <code>1</code> value.<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> all<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1. Otherwise it is zero.</p> - -<h4 id="Example_5">Example</h4> - -<p>To apply a style to handheld devices with a 15-character or narrower display:</p> - -<pre class="brush: css">@media handheld and (grid) and (max-width: 15em) { ... } -</pre> - -<div class="note"><strong>Note:</strong> The "em" unit has a special meaning for grid devices; since the exact width of an "em" can't be determined, 1em is assumed to be the width of one grid cell horizontally, and the height of one cell vertically.</div> - -<h3 id="height">height</h3> - -<p><strong>Value:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>The <code>height</code> media feature describes the height of the output device's rendering surface (such as the height of the viewport or of the page box on a printer).</p> - -<div class="note"><strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div> - -<h3 id="monochrome">monochrome</h3> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Indicates the number of bits per pixel on a monochrome (greyscale) device. If the device isn't monochrome, the device's value is 0.</p> - -<h4 id="Examples_3">Examples</h4> - -<p>To apply a style sheet to all monochrome devices:</p> - -<pre class="brush: css">@media all and (monochrome) { ... } -</pre> - -<p>To apply a style sheet to monochrome devices with at least 8 bits per pixel:</p> - -<pre class="brush: css">@media all and (min-monochrome: 8) { ... } -</pre> - -<h3 id="orientation">orientation</h3> - -<p><strong>Value:</strong> <code>landscape</code> | <code>portrait</code><br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.</p> - -<h4 id="Example_6">Example</h4> - -<p>To apply a style sheet only in portrait orientation:</p> - -<pre class="brush: css">@media all and (orientation: portrait) { ... }</pre> - -<div class="note"><strong>Note:</strong> This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.</div> - -<h3 id="resolution">resolution</h3> - -<p><strong>Value:</strong> {{cssxref("<resolution>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Indicates the resolution (pixel density) of the output device. The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).</p> - -<h4 id="Example_7">Example</h4> - -<p>To apply a style sheet to devices with at least 300 dots per inch of resolution:</p> - -<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... } -</pre> - -<p>To replace the old <span style="font-family: courier new,andale mono,monospace; line-height: normal;">(min-device-pixel-ratio: 2) </span>syntax:</p> - -<pre class="brush: css">@media screen and (min-resolution: 2dppx) { ... }</pre> - -<h3 id="scan">scan</h3> - -<p><strong>Value:</strong> <code>progressive</code> | <code>interlace</code><br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/TV")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>Describes the scanning process of television output devices.</p> - -<h4 id="Example_8">Example</h4> - -<p>To apply a style sheet only to progressive scanning televisions:</p> - -<pre class="brush: css">@media tv and (scan: progressive) { ... } -</pre> - -<h3 id="width">width</h3> - -<p><strong>Value:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>The <code>width</code> media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).</p> - -<div class="note"><strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div> - -<h4 id="Examples_4">Examples</h4> - -<p>If you want to specify a style sheet for handheld devices, or screen devices with a width greater than 20em, you can use this query:</p> - -<pre class="brush: css">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... } -</pre> - -<p>This media query specifies a style sheet that applies to printed media wider than 8.5 inches:</p> - -<pre class="brush: html"><link rel="stylesheet" media="print and (min-width: 8.5in)" - href="http://foo.com/mystyle.css" /> -</pre> - -<p>This query specifies a style sheet that is usable when the viewport is between 500 and 800 pixels wide:</p> - -<pre class="brush: css">@media screen and (min-width: 500px) and (max-width: 800px) { ... } -</pre> - -<h2 id="Mozilla-specific_media_features">Mozilla-specific media features</h2> - -<p>Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.</p> - -<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user has configured their device to use the "Graphite" appearance on Mac OS X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS X, this is 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}</p> - -<p><strong>Value:</strong> {{cssxref("<number>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Gives the number of device pixels per CSS pixel.</p> - -<div class="geckoVersionNote"> -<p><strong>Do not use this feature. </strong></p> - -<p>Use the <code>resolution</code> feature with the <code>dppx</code> unit instead.<br> - <br> - <code>-moz-device-pixel-ratio</code> may be used for compatibility with Firefox older than 16 and <code>-webkit-device-pixel-ratio</code> with WebKit-based browsers that do not support <code>dppx</code>.</p> - -<p>Example:</p> - -<pre>@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */ - (min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */ - (min-resolution: 2dppx), /* The standard way */ - (min-resolution: 192dpi) /* dppx fallback */ </pre> - -<p>See this <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">CSSWG article</a> for compatibility good practices regarding <code>resolution</code> and <code>dppx</code>.</p> -</div> - -<div class="note"><strong>Note</strong>: This media feature is also implemented by Webkit and by <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 for Windows Phone 8.1</a> as <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. The min and max prefixes as implemented by Gecko are named <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> and <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; but the same prefixes as implemented by Webkit are named <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> and <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div> - -<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p> - -<p><strong>Value:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8 | windows-win10</code><br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>Indicates which operating system version is currently being used. Currently only implemented on Windows. Possible values are:</p> - -<ul> - <li><code>windows-xp</code></li> - <li><code>windows-vista</code></li> - <li><code>windows-win7</code></li> - <li><code>windows-win8</code></li> - <li><code>windows-win10</code></li> -</ul> - -<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current operating system version.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<h4 id="Example_9">Example</h4> - -<p>You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p> - -<p><strong>Value:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:</p> - -<ul> - <li><code>aero</code></li> - <li><code>luna-blue</code></li> - <li><code>luna-olive</code></li> - <li><code>luna-silver</code></li> - <li><code>royale</code></li> - <li><code>generic</code></li> - <li><code>zune</code></li> -</ul> - -<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatChrome("21") }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>{{ CompatIE("9.0") }}</td> - <td>{{ CompatOpera("9") }}</td> - <td>{{ CompatSafari("4") }}</td> - </tr> - <tr> - <td>grid</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }} [1]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>resolution</td> - <td>{{ CompatChrome("29") }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }} [2]<br> - {{ CompatGeckoDesktop("8.0") }} [3]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>scan</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }} [4]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] <code>grid</code> media type is not supported</p> - -<p>[2] Supports {{cssxref("<integer>")}} values;</p> - -<p>[3] Supports {{cssxref("<number>")}} values, as per the spec.</p> - -<p>[4] <code>tv</code> media type is not supported</p> - -<p> </p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li> - <li><a class="internal" href="/en-US/docs/CSS/@media" title="En/CSS/@media">Media types</a></li> - <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li> - <li><a href="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/">List of mobile and tablet viewport sizes with pixel ratios and physical sizes</a></li> - <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a> by David Walsh</li> -</ul> diff --git a/files/pl/web/guide/html/editable_content/index.html b/files/pl/web/guide/html/editable_content/index.html deleted file mode 100644 index 77abe792b7..0000000000 --- a/files/pl/web/guide/html/editable_content/index.html +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: Making content editable -slug: Web/Guide/HTML/Editable_content -translation_of: Web/Guide/HTML/Editable_content ---- -<p><span class="seoSummary">In progress. In HTML, any element can be editable. By using some JavaScript event handlers, you can transform your web page into a full and fast rich text editor. This article provides some information about this functionality.</span></p> - -<h2 id="How_does_it_work">How does it work?</h2> - -<p>All you have to do is set the {{htmlattrxref("contenteditable")}} attribute on nearly any HTML element to make it editable.</p> - -<p>Here's a simple example which creates a {{HTMLElement("div")}} element whose contents the user can edit.</p> - -<pre class="brush: html"><div contenteditable="true"> - This text can be edited by the user. -</div></pre> - -<p>Here's the above HTML in action:</p> - -<p>{{ EmbedLiveSample('How_does_it_work') }}</p> - -<h2 id="Executing_commands">Executing commands</h2> - -<p>When an HTML element has <code>contenteditable</code> set to <code>true</code>, the {{ domxref("document.execCommand()") }} method is made available. This lets you run <a href="/en-US/docs/Web/API/document.execCommand#Commands">commands</a> to manipulate the contents of the editable region. Most commands affect the document's selection by, for example, applying a style to the text (bold, italics, etc), while others insert new elements (like adding a link) or affect an entire line (indenting). When using <code>contentEditable</code>, calling <code>execCommand()</code> will affect the currently active editable element.</p> - -<h2 id="Differences_in_markup_generation">Differences in markup generation</h2> - -<p>Use of <code>contenteditable</code> across different browsers has been painful for a long time because of the differences in generated markup between browsers. For example, even something as simple as what happens when you press Enter/Return to create a new line of text inside an editable element was handled differently across the major browsers (Firefox inserted {{htmlelement("br")}} elements, IE/Opera used {{htmlelement("p")}}, Chrome/Safari used {{htmlelement("div")}}).</p> - -<p>Fortunately, in modern browsers things are somewhat more consistent. As of <a href="/en-US/docs/Mozilla/Firefox/Releases/55">Firefox 55</a>, Firefox has been updated to wrap the separate lines in {{htmlelement("div")}} elements, matching the behavior of Chrome, modern Opera, Edge, and Safari.</p> - -<p>Try it out in the above example.</p> - -<div class="note"> -<p><strong>Note</strong>: Internet Explorer, which is no longer being developed, uses {{htmlelement("p")}} elements instead of <code><div></code>.</p> -</div> - -<p>If you want to use a different paragraph separator, the above browsers all support {{domxref("document.execCommand")}}, which provides a <code>DefaultParagraphSeparator</code> command to allow you to change it. For example, to use {{htmlelement("p")}} elements:</p> - -<pre class="language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">execCommand</span><span class="punctuation token">(</span><span class="string token">"DefaultParagraphSeparator"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<h2 id="Security">Security</h2> - -<p>For security reasons, Firefox doesn't let JavaScript code use clipboard related features (copy, paste, etc.) by default. You can enable them by setting the preferences shown below using <code>about:config</code>:</p> - -<pre class="code">user_pref("capability.policy.policynames", "allowclipboard"); -user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org"); -user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess"); -user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre> - -<h2 id="Example_A_simple_but_complete_rich_text_editor">Example: A simple but complete rich text editor</h2> - -<div style="height: 500px; width: auto; overflow: auto;"> -<pre class="brush: html"><!doctype html> -<html> -<head> -<title>Rich Text Editor</title> -<script type="text/javascript"> -var oDoc, sDefTxt; - -function initDoc() { - oDoc = document.getElementById("textBox"); - sDefTxt = oDoc.innerHTML; - if (document.compForm.switchMode.checked) { setDocMode(true); } -} - -function formatDoc(sCmd, sValue) { - if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); } -} - -function validateMode() { - if (!document.compForm.switchMode.checked) { return true ; } - alert("Uncheck \"Show HTML\"."); - oDoc.focus(); - return false; -} - -function setDocMode(bToSource) { - var oContent; - if (bToSource) { - oContent = document.createTextNode(oDoc.innerHTML); - oDoc.innerHTML = ""; - var oPre = document.createElement("pre"); - oDoc.contentEditable = false; - oPre.id = "sourceText"; - oPre.contentEditable = true; - oPre.appendChild(oContent); - oDoc.appendChild(oPre); - } else { - if (document.all) { - oDoc.innerHTML = oDoc.innerText; - } else { - oContent = document.createRange(); - oContent.selectNodeContents(oDoc.firstChild); - oDoc.innerHTML = oContent.toString(); - } - oDoc.contentEditable = true; - } - oDoc.focus(); -} - -function printDoc() { - if (!validateMode()) { return; } - var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); - oPrntWin.document.open(); - oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>"); - oPrntWin.document.close(); -} -</script> -<style type="text/css"> -.intLink { cursor: pointer; } -img.intLink { border: 0; } -#toolBar1 select { font-size:10px; } -#textBox { - width: 540px; - height: 200px; - border: 1px #000000 solid; - padding: 12px; - overflow: scroll; -} -#textBox #sourceText { - padding: 0; - margin: 0; - min-width: 498px; - min-height: 200px; -} -#editMode label { cursor: pointer; } -</style> -</head> -<body onload="initDoc();"> -<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;"> -<input type="hidden" name="myDoc"> -<div id="toolBar1"> -<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;"> -<option selected>- formatting -</option> -<option value="h1">Title 1 &lt;h1&gt;</option> -<option value="h2">Title 2 &lt;h2&gt;</option> -<option value="h3">Title 3 &lt;h3&gt;</option> -<option value="h4">Title 4 &lt;h4&gt;</option> -<option value="h5">Title 5 &lt;h5&gt;</option> -<option value="h6">Subtitle &lt;h6&gt;</option> -<option value="p">Paragraph &lt;p&gt;</option> -<option value="pre">Preformatted &lt;pre&gt;</option> -</select> -<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;"> -<option class="heading" selected>- font -</option> -<option>Arial</option> -<option>Arial Black</option> -<option>Courier New</option> -<option>Times New Roman</option> -</select> -<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;"> -<option class="heading" selected>- size -</option> -<option value="1">Very small</option> -<option value="2">A bit small</option> -<option value="3">Normal</option> -<option value="4">Medium-large</option> -<option value="5">Big</option> -<option value="6">Very big</option> -<option value="7">Maximum</option> -</select> -<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;"> -<option class="heading" selected>- color -</option> -<option value="red">Red</option> -<option value="blue">Blue</option> -<option value="green">Green</option> -<option value="black">Black</option> -</select> -<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;"> -<option class="heading" selected>- background -</option> -<option value="red">Red</option> -<option value="green">Green</option> -<option value="black">Black</option> -</select> -</div> -<div id="toolBar2"> -<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" /> -<img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC"> -<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" /> -<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" /> -<img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="> -<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" /> -<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" /> -<img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" /> -<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" /> -<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" /> -<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" /> -<img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" /> -<img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" /> -<img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" /> -<img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" /> -<img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" /> -<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" /> -<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" /> -<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" /> -<img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" /> -</div> -<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div> -<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p> -<p><input type="submit" value="Send" /></p> -</form> -</body> -</html> -</pre> -</div> - -<div class="note"><strong>Note:</strong> if you want to see how to standardize the creation and the insertion of your editor in your page, please see our <a class="internal" href="/@api/deki/files/6243/=rich-text-editor.zip" title="rich-text-editor.zip">more complete rich-text editor example</a>.</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("HTMLElement.contentEditable")}}</li> - <li>The {{htmlattrxref("contenteditable")}} global attribute</li> - <li><a href="/en-US/docs/Mozilla/Projects/Midas">Midas</a> (the scriptable text editor component)</li> - <li>{{cssxref("caret-color")}}, which lets you set the color of the text insertion caret</li> -</ul> diff --git a/files/pl/web/guide/performance/index.html b/files/pl/web/guide/performance/index.html deleted file mode 100644 index 00c4b9d7fe..0000000000 --- a/files/pl/web/guide/performance/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Optimization and performance -slug: Web/Guide/Performance -tags: - - Landing - - NeedsTranslation - - Optimization - - Performance - - TopicStub - - Web -translation_of: Web/Guide/Performance ---- -<p>When building modern Web apps and sites, it's important to make your content perform well. That is, to make it work quickly and efficiently. This lets it work effectively both for users of powerful desktop systems as well as for handheld devices with less power.</p> -<p>{{LandingPageListSubpages}}</p> diff --git a/files/pl/web/html/element/heading_elements/index.html b/files/pl/web/html/element/heading_elements/index.html deleted file mode 100644 index c3eafe6774..0000000000 --- a/files/pl/web/html/element/heading_elements/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: '<h1>–<h6>: The HTML Section Heading elements' -slug: Web/HTML/Element/Heading_Elements -translation_of: Web/HTML/Element/Heading_Elements ---- -<div>{{HTMLRef}}</div> - -<p id="Summary"><span class="seoSummary">Element języka <strong>HTML <code><h1></code>–<code><h6></code> </strong>reprezentuje sześć poziomów zawartości nagłówka. Zawartość nagłówka <code><h1></code> jest prezentowana największą czcionką, a nagłówków <code><h6></code> najmniejszą.</span></p> - -<div>{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}</div> - -<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, heading content, palpable content.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Permitted parents</th> - <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>; don't use a heading element as a child of the {{HTMLElement("hgroup")}} element — it is now deprecated.</td> - </tr> - <tr> - <th scope="row">Implicit ARIA role</th> - <td><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role">heading</a></td> - </tr> - <tr> - <th scope="row">Permitted ARIA roles</th> - <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}} or {{ARIARole("none")}}</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLHeadingElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes">Attributes</h2> - -<p>These elements only include the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> - -<div class="note"> -<p>The <code>align</code> attribute is obsolete; don't use it.</p> -</div> - -<h2 id="Usage_notes">Usage notes</h2> - -<ul> - <li>Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.</li> - <li>Avoid using heading tags to resize text. Instead, use the {{glossary("CSS")}} {{cssxref("font-size")}} property. Headings use size to indicate their relative importance, but CSS is preferred for general-purpose resizing.</li> - <li>Avoid skipping heading levels: always start from <code><h1></code>, next use <code><h2></code> and so on.</li> - <li>You should only use one <code><h1></code> per page. Using more than one will not result in an error, but using only one is seen as a best practice. It makes logical sense — <code><h1></code> is the most important heading, and tells you what the purpose of the overall page is. You wouldn't have a book with more than one title, or a movie with more than one name! Having a single top-level title is also arguably better for screenreader users, and {{glossary("SEO")}}.</li> -</ul> - -<h2 id="Examples">Examples</h2> - -<h3 id="All_headings">All headings</h3> - -<p>The following code shows all the heading levels, in use.</p> - -<pre class="brush: html notranslate"><h1>Heading level 1</h1> -<h2>Heading level 2</h2> -<h3>Heading level 3</h3> -<h4>Heading level 4</h4> -<h5>Heading level 5</h5> -<h6>Heading level 6</h6> -</pre> - -<p>Here is the result of this code:</p> - -<p>{{ EmbedLiveSample('All_headings', '280', '300', '') }}</p> - -<h3 id="Example_page">Example page</h3> - -<p>The following code shows a few headings with some content under them.</p> - -<pre class="brush: html notranslate"><h1>Heading elements</h1> -<h2>Summary</h2> -<p>Some text here...</p> - -<h2>Examples</h2> -<h3>Example 1</h3> -<p>Some text here...</p> - -<h3>Example 2</h3> -<p>Some text here...</p> - -<h2>See also</h2> -<p>Some text here...</p> -</pre> - -<p>Here is the result of this code:</p> - -<p>{{ EmbedLiveSample('Example_page', '280', '480', '') }}</p> - -<h2 id="Accessibility_concerns">Accessibility concerns</h2> - -<h3 id="Navigation">Navigation</h3> - -<p>A common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.</p> - -<h4 id="Dont">Don't</h4> - -<pre class="brush: html example-bad notranslate"><h1>Heading level 1</h1> -<h3>Heading level 3</h3> -<h4>Heading level 4</h4> -</pre> - -<h4 id="Do">Do</h4> - -<pre class="brush: html example-good notranslate"><h1>Heading level 1</h1> -<h2>Heading level 2</h2> -<h3>Heading level 3</h3> -</pre> - -<h4 id="Nesting">Nesting</h4> - -<p>Headings may be nested as subsections to reflect the organization of the content of the page. Most screen readers can also generate an ordered list of all the headings on a page, which can help a person quickly determine the hierarchy of the content:</p> - -<ol> - <li><code>h1</code> Beetles - - <ol> - <li><code>h2</code> Etymology</li> - <li><code>h2</code> Distribution and Diversity</li> - <li><code>h2</code> Evolution - <ol> - <li><code>h3</code> Late Paleozoic</li> - <li><code>h3</code> Jurassic</li> - <li><code>h3</code> Cretaceous</li> - <li><code>h3</code> Cenozoic</li> - </ol> - </li> - <li><code>h2</code> External Morphology - <ol> - <li><code>h3</code> Head - <ol> - <li><code>h4</code> Mouthparts</li> - </ol> - </li> - <li><code>h3</code> Thorax - <ol> - <li><code>h4</code> Prothorax</li> - <li><code>h4</code> Pterothorax</li> - </ol> - </li> - <li><code>h3</code> Legs</li> - <li><code>h3</code> Wings</li> - <li><code>h3</code> Abdomen</li> - </ol> - </li> - </ol> - </li> -</ol> - -<p>When headings are nested, heading levels may be "skipped" when closing a subsection.</p> - -<ul> - <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Headings • Page Structure • WAI Web Accessibility Tutorials</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html">Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h3 id="Labeling_section_content">Labeling section content</h3> - -<p>Another common navigation technique for users of screen reading software is to generate a list of <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">sectioning content</a> and use it to determine the page's layout.</p> - -<p>Sectioning content can be labeled using a combination of the <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> and {{htmlattrxref("id")}} attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.</p> - -<h4 id="Example">Example</h4> - -<pre class="brush: html notranslate"><header> - <nav aria-labelledby="primary-navigation"> - <h2 id="primary-navigation">Primary navigation</h2> - <!-- navigation items --> - </nav> -</header> - -<!-- page content --> - -<footer> - <nav aria-labelledby="footer-navigation"> - <h2 id="footer-navigation">Footer navigation</h2> - <!-- navigation items --> - </nav> -</footer> -</pre> - -<p>In this example, screen reading technology would announce that there are two {{HTMLElement("nav")}} sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each <code>nav</code> element's contents to determine their purpose.</p> - -<ul> - <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li> - <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby">Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials</a></li> -</ul> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1-h2-h3-h4-h5-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.elements.h1")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{HTMLElement("p")}}</li> - <li>{{HTMLElement("div")}}</li> - <li>{{HTMLElement("section")}}</li> -</ul> diff --git a/files/pl/web/html/element/input/button/index.html b/files/pl/web/html/element/input/button/index.html deleted file mode 100644 index 8c97a75321..0000000000 --- a/files/pl/web/html/element/input/button/index.html +++ /dev/null @@ -1,341 +0,0 @@ ---- -title: <input type="button"> -slug: Web/HTML/Element/Input/button -translation_of: Web/HTML/Element/input/button ---- -<div>{{HTMLRef}}</div> - -<p><span class="seoSummary">{{HTMLElement("input")}} elements of type <strong><code>button</code></strong> are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the {{event("click")}} event).</span></p> - -<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}</div> - - - -<div class="note"> -<p><strong>Note</strong>: While <code><input></code> elements of type <code>button</code> are still perfectly valid HTML, the newer {{HTMLElement("button")}} element is now the favored way to create buttons. Given that a {{HTMLElement("button")}}’s label text is inserted between the opening and closing tags, you can include HTML in the label, even images.</p> -</div> - -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Value")}}</strong></td> - <td>A {{domxref("DOMString")}} used as the button's label</td> - </tr> - <tr> - <td><strong>Events</strong></td> - <td>{{event("click")}}</td> - </tr> - <tr> - <td><strong>Supported common attributes</strong></td> - <td>{{htmlattrxref("type", "input")}}, and {{htmlattrxref("value", "input")}}</td> - </tr> - <tr> - <td><strong>IDL attributes</strong></td> - <td><code>value</code></td> - </tr> - <tr> - <td><strong>Methods</strong></td> - <td>None</td> - </tr> - </tbody> -</table> - -<h2 id="Value">Value</h2> - -<p>An <code><input type="button"></code> elements' {{htmlattrxref("value", "input")}} attribute contains a {{domxref("DOMString")}} that is used as the button's label.</p> - -<div id="summary-example3"> -<pre class="brush: html notranslate"><input type="button" value="Click Me"></pre> -</div> - -<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> - -<p>If you don't specify a <code>value</code>, you get an empty button:</p> - -<div id="summary-example1"> -<pre class="brush: html notranslate"><input type="button"></pre> -</div> - -<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> - -<h2 id="Using_buttons">Using buttons</h2> - -<p><code><input type="button"></code> elements have no default behavior (their cousins,<code> <a href="/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> and <code><a href="/en-US/docs/Web/HTML/Element/input/reset"><input type="reset"></a></code> are used to submit and reset forms, respectively). To make buttons do anything, you have to write JavaScript code to do the work.</p> - -<h3 id="A_simple_button">A simple button</h3> - -<p>We'll begin by creating a simple button with a {{event("click")}} event handler that starts our machine (well, it toggles the <code>value</code> of the button and the text content of the following paragraph):</p> - -<pre class="brush: html notranslate"><form> - <input type="button" value="Start machine"> -</form> -<p>The machine is stopped.</p></pre> - -<pre class="brush: js notranslate">const button = document.querySelector('input'); -const paragraph = document.querySelector('p'); - -button.addEventListener('click', updateButton); - -function updateButton() { - if (button.value === 'Start machine') { - button.value = 'Stop machine'; - paragraph.textContent = 'The machine has started!'; - } else { - button.value = 'Start machine'; - paragraph.textContent = 'The machine is stopped.'; - } -}</pre> - -<p>The script gets a reference to the {{domxref("HTMLInputElement")}} object representing the <code><input></code> in the DOM, saving this refence in the variable <code>button</code>. {{domxref("EventTarget.addEventListener", "addEventListener()")}} is then used to establish a function that will be run when {{event("click")}} events occur on the button.</p> - -<p>{{EmbedLiveSample("A_simple_button", 650, 100)}}</p> - -<h3 id="Adding_keyboard_shortcuts_to_buttons">Adding keyboard shortcuts to buttons</h3> - -<p>Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any {{HTMLElement("input")}} for which it makes sense — you use the {{htmlattrxref("accesskey")}} global attribute.</p> - -<p>In this example, <kbd>s</kbd> is specified as the access key (you'll need to press <kbd>s</kbd> plus the particular modifier keys for your browser/OS combination; see <a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a> for a useful list of those).</p> - -<div id="accesskey-example1"> -<pre class="brush: html notranslate"><form> - <input type="button" value="Start machine" accesskey="s"> -</form> -<p>The machine is stopped.</p> -</pre> -</div> - -<div class="hidden"> -<pre class="brush: js notranslate">const button = document.querySelector('input'); -const paragraph = document.querySelector('p'); - -button.addEventListener('click', updateButton); - -function updateButton() { - if (button.value === 'Start machine') { - button.value = 'Stop machine'; - paragraph.textContent = 'The machine has started!'; - } else { - button.value = 'Start machine'; - paragraph.textContent = 'The machine is stopped.'; - } -}</pre> -</div> - -<p>{{EmbedLiveSample("Adding_keyboard_shortcuts_to_buttons", 650, 100)}}</p> - -<div class="note"> -<p><strong>Note</strong>: The problem with the above example of course is that the user will not know what the access key is! In a real site, you'd have to provide this information in a way that doesn't intefere with the site design (for example by providing an easily accessible link that points to information on what the site accesskeys are).</p> -</div> - -<h3 id="Disabling_and_enabling_a_button">Disabling and enabling a button</h3> - -<p>To disable a button, simply specify the {{htmlattrxref("disabled")}} global attribute on it, like so:</p> - -<div id="disable-example1"> -<pre class="brush: html notranslate"><input type="button" value="Disable me" disabled></pre> -</div> - -<p>You can enable and disable buttons at run time by simply setting <code>disabled</code> to <code>true</code> or <code>false</code>. In this example our button starts off enabled, but if you press it, it is disabled using <code>button.disabled = true</code>. A {{domxref("WindowTimers.setTimeout","setTimeout()")}} function is then used to reset the button back to its enabled state after two seconds.</p> - -<div class="hidden"> -<h6 id="Hidden_code_1">Hidden code 1</h6> - -<pre class="brush: html notranslate"><input type="button" value="Enabled"></pre> - -<pre class="brush: js notranslate">const button = document.querySelector('input'); - -button.addEventListener('click', disableButton); - -function disableButton() { - button.disabled = true; - button.value = 'Disabled'; - window.setTimeout(function() { - button.disabled = false; - button.value = 'Enabled'; - }, 2000); -}</pre> -</div> - -<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p> - -<p>If the <code>disabled</code> attribute isn't specified, the button inherits its <code>disabled</code> state from its parent element. This makes it possible to enable and disable groups of elements all at once by enclosing them in a container such as a {{HTMLElement("fieldset")}} element, and then setting <code>disabled</code> on the container.</p> - -<p>The example below shows this in action. This is very similar to the previous example, except that the <code>disabled</code> attribute is set on the <code><fieldset></code> when the first button is pressed — this causes all three buttons to be disabled until the two second timeout has passed.</p> - -<div class="hidden"> -<h6 id="Hidden_code_2">Hidden code 2</h6> - -<pre class="brush: html notranslate"><fieldset> - <legend>Button group</legend> - <input type="button" value="Button 1"> - <input type="button" value="Button 2"> - <input type="button" value="Button 3"> -</fieldset></pre> - -<pre class="brush: js notranslate">const button = document.querySelector('input'); -const fieldset = document.querySelector('fieldset'); - -button.addEventListener('click', disableButton); - -function disableButton() { - fieldset.disabled = true; - window.setTimeout(function() { - fieldset.disabled = false; - }, 2000); -}</pre> -</div> - -<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p> - -<div class="note"> -<p><strong>Note</strong>: Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p> -</div> - -<h2 id="Validation">Validation</h2> - -<p>Buttons don't participate in constraint validation; they have no real value to be constrained.</p> - -<h2 id="Examples">Examples</h2> - -<p>The below example shows a very simple drawing app created using a {{htmlelement("canvas")}} element and some simple CSS and JavaScript (we'll hide the CSS for brevity). The top two controls allow you to choose the color and size of the drawing pen. The button, when clicked, invokes a function that clears the canvas.</p> - -<pre class="brush: html notranslate"><div class="toolbar"> - <input type="color" aria-label="select pen color"> - <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span> - <input type="button" value="Clear canvas"> -</div> - -<canvas class="myCanvas"> - <p>Add suitable fallback here.</p> -</canvas></pre> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - background: #ccc; - margin: 0; - overflow: hidden; -} - -.toolbar { - background: #ccc; - width: 150px; - height: 75px; - padding: 5px; -} - -input[type="color"], input[type="button"] { - width: 90%; - margin: 0 auto; - display: block; -} - -input[type="range"] { - width: 70%; -} - -span { - position: relative; - bottom: 5px; -}</pre> -</div> - -<pre class="brush: js notranslate">var canvas = document.querySelector('.myCanvas'); -var width = canvas.width = window.innerWidth; -var height = canvas.height = window.innerHeight-85; -var ctx = canvas.getContext('2d'); - -ctx.fillStyle = 'rgb(0,0,0)'; -ctx.fillRect(0,0,width,height); - -var colorPicker = document.querySelector('input[type="color"]'); -var sizePicker = document.querySelector('input[type="range"]'); -var output = document.querySelector('.output'); -var clearBtn = document.querySelector('input[type="button"]'); - -// covert degrees to radians -function degToRad(degrees) { - return degrees * Math.PI / 180; -}; - -// update sizepicker output value - -sizePicker.oninput = function() { - output.textContent = sizePicker.value; -} - -// store mouse pointer coordinates, and whether the button is pressed -var curX; -var curY; -var pressed = false; - -// update mouse pointer coordinates -document.onmousemove = function(e) { - curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); - curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); -} - -canvas.onmousedown = function() { - pressed = true; -}; - -canvas.onmouseup = function() { - pressed = false; -} - -clearBtn.onclick = function() { - ctx.fillStyle = 'rgb(0,0,0)'; - ctx.fillRect(0,0,width,height); -} - -function draw() { - if(pressed) { - ctx.fillStyle = colorPicker.value; - ctx.beginPath(); - ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false); - ctx.fill(); - } - - requestAnimationFrame(draw); -} - -draw();</pre> - -<p>{{EmbedLiveSample("Examples", '100%', 600)}}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comments</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.elements.input.input-button")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it.</li> - <li>The more modern {{HTMLElement("button")}} element.</li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li> -</ul> diff --git a/files/pl/web/html/element/meta/index.html b/files/pl/web/html/element/meta/index.html deleted file mode 100644 index 8fbc0241f3..0000000000 --- a/files/pl/web/html/element/meta/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: '<meta>: Element metadanych na poziomie dokumentów' -slug: Web/HTML/Element/meta -translation_of: Web/HTML/Element/meta ---- -<div>{{HTMLRef}}</div> - -<p><strong>Element HTML <code><meta></code></strong> reprezentuje {{Glossary("Metadata","metadane")}}, które nie mogą być reprezentowane przez inne elementy związane z metadanymi w HTML, takie jak {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} lub {{HTMLElement("title")}}.</p> - -<table class="properties"> - <tbody> - <tr> - <th><a href="/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> - <td>Metadata content. If the {{htmlattrxref("itemprop")}} attribute is present: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> - </tr> - <tr> - <th>Dozwolona zawartość</th> - <td>None, it is an {{Glossary("empty element")}}.</td> - </tr> - <tr> - <th>Pominięcie znacznika</th> - <td>As it is a void element, the start tag must be present and the end tag must not be present.</td> - </tr> - <tr> - <th>Dozwoleni rodzice</th> - <td><code><meta charset></code>, <code><meta http-equiv></code>: a {{HTMLElement("head")}} element. If the {{htmlattrxref("http-equiv", "meta")}} is not an encoding declaration, it can also be inside a {{HTMLElement("noscript")}} element, itself inside a {{HTMLElement("head")}} element.</td> - </tr> - <tr> - <th scope="row">Domniemane role ARIA</th> - <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> - </tr> - <tr> - <th scope="row">Dozwolone role ARIA</th> - <td>No <code>role</code> permitted</td> - </tr> - <tr> - <th>Interfejs DOM</th> - <td>{{domxref("HTMLMetaElement")}}</td> - </tr> - </tbody> -</table> - -<p>The type of metadata provided by the <code>meta</code> element can be one of the following:</p> - -<ul> - <li>If the {{htmlattrxref("name", "meta")}} attribute is set, the <code>meta</code> element provides <em>document-level metadata</em>, applying to the whole page.</li> - <li>If the {{htmlattrxref("http-equiv", "meta")}} attribute is set, the <code>meta</code> element is a <em>pragma directive</em>, providing information equivalent to what can be given by a similarly-named HTTP header.</li> - <li>If the {{htmlattrxref("charset", "meta")}} attribute is set, the <code>meta</code> element is a <em>charset declaration</em>, giving the character encoding in which the document is encoded.</li> - <li>If the {{htmlattrxref("itemprop")}} attribute is set, the <code>meta</code> element provides <em>user-defined metadata</em>.</li> -</ul> - -<h2 id="Attributes">Attributes</h2> - -<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> - -<div class="note"> -<p><strong>Note:</strong> the attribute {{htmlattrxref("name", "meta")}} has a specific meaning for the <code><meta></code> element, and the {{htmlattrxref("itemprop")}} attribute must not be set on the same <code><meta></code> element that has any existing {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} or {{htmlattrxref("charset", "meta")}} attributes.</p> -</div> - -<dl> - <dt>{{htmlattrdef("charset")}}</dt> - <dd>This attribute declares the document's character encoding. If the attribute is present, its value must be an ASCII case-insensitive match for the string "<code>utf-8</code>".</dd> - <dt>{{htmlattrdef("content")}}</dt> - <dd>This attribute contains the value for the {{htmlattrxref("http-equiv", "meta")}} or {{htmlattrxref("name", "meta")}} attribute, depending on which is used.</dd> - <dt>{{htmlattrdef("http-equiv")}}</dt> - <dd> - <p>Defines a pragma directive. The attribute is named <code><strong>http-equiv</strong>(alent)</code> because all the allowed values are names of particular HTTP headers:</p> - - <ul> - <li><code>content-security-policy</code> - - <p>Allows page authors to define a <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">content policy</a> for the current page. Content policies mostly specify allowed server origins and script endpoints which help guard against cross-site scripting attacks.</p> - </li> - <li><code>content-type</code> - <p>If specified, the <code>content</code> attribute must have the value "<code>text/html; charset=utf-8</code>". <strong>Note: </strong> Can only be used in documents served with a <code>text/html</code> <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a> — not in documents served with an XML MIME type.</p> - </li> - <li><code>default-style</code> - <p>Sets the name of the default <a href="/en-US/docs/Web/CSS">CSS style sheet</a> set.</p> - </li> - <li><code>x-ua-compatible</code> - <p>If specified, the <code>content</code> attribute must have the value "<code>IE=edge</code>". User agents are required to ignore this pragma.</p> - </li> - <li><code>refresh</code> - <div>This instruction specifies:</div> - - <ul> - <li>The number of seconds until the page should be reloaded - only if the {{htmlattrxref("content", "meta")}} attribute contains a positive integer.</li> - <li>The number of seconds until the page should redirect to another - only if the {{htmlattrxref("content", "meta")}} attribute contains a positive integer followed by the string '<code>;url=</code>', and a valid URL.</li> - </ul> - - <h5 id="Accessibility_concerns">Accessibility concerns</h5> - - <div>Pages set with a <code>refresh</code> value run the risk of having the time interval being too short. People navigating with the aid of assistive technology such as a screen reader may be unable to read through and understand the page's content before being automatically redirected. The abrupt, unannounced updating of the page content may also be disorienting for people experiencing low vision conditions.</div> - - <ul> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_—_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.1 explanations</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.1 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html">Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0</a></li> - </ul> - </li> - </ul> - </dd> - <dt>{{htmlattrdef("name")}}</dt> - <dd> - <p>The <code>name</code> and <code>content</code> attributes can be used together to provide document metadata in terms of name-value pairs, with the <code>name</code> attribute giving the metadata name, and the <code>content</code> attribute giving the value.</p> - - <p>See <a href="/en-US/docs/Web/HTML/Element/meta/name">standard metadata names</a> for details about the set of standard metadata names defined in the HTML specification.</p> - </dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<pre class="brush: html notranslate"><meta charset="utf-8"> - -<!-- Redirect page after 3 seconds --> -<meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '<meta>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<div>{{Compat("html.elements.meta")}}</div> diff --git a/files/pl/web/html/global_attributes/spellcheck/index.html b/files/pl/web/html/global_attributes/spellcheck/index.html deleted file mode 100644 index a0b6c48785..0000000000 --- a/files/pl/web/html/global_attributes/spellcheck/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: sprawdzanie pisowni -slug: Web/HTML/Global_attributes/spellcheck -translation_of: Web/HTML/Global_attributes/spellcheck -original_slug: Web/HTML/Global_attributes/pisownia ---- -<div>{{HTMLSidebar("Global_attributes")}}</div> - -<p>The <code><strong>spellcheck</strong></code> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> is an enumerated attribute defines whether the element may be checked for spelling errors.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}</div> - -<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> - -<p>It may have the following values:</p> - -<ul> - <li><code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li> - <li><code>false</code>, which indicates that the element should not be checked for spelling errors.</li> -</ul> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> The <code>spellcheck</code> attribute is an <em>enumerated</em> one and not a <em>Boolean</em> one. This means that the explicit usage of one of the values <code>true</code> or <code>false</code> is mandatory, and that a shorthand like <code><textarea spellcheck></textarea> </code>is not allowed. The correct usage is <code><textarea spellcheck="true"></textarea></code>.</p> -</div> - -<p>If this attribute is not set, its default value is element-type and browser-defined. This default value may also be <em>inherited</em>, which means that the element content will be checked for spelling errors only if its nearest ancestor has a <em>spellcheck</em> state of <code>true</code>.</p> - -<p>This attribute is merely a hint for the browser: browsers are not required to check for spelling errors. Typically non-editable elements are not checked for spelling errors, even if the <code>spellcheck</code> attribute is set to <code>true</code> and the browser supports spellchecking.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.global_attributes.spellcheck")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> -</ul> diff --git a/files/pl/web/http/authentication/index.html b/files/pl/web/http/authentication/index.html deleted file mode 100644 index d1a365fd50..0000000000 --- a/files/pl/web/http/authentication/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: HTTP authentication -slug: Web/HTTP/Authentication -translation_of: Web/HTTP/Authentication ---- -<div><font><font>{{HTTPSidebar}}</font></font></div> - -<p class="summary"><span class="seoSummary"><font><font>Protokół HTTP zapewnia ogólną strukturę kontroli dostępu i uwierzytelniania. </font><font>Ta strona stanowi wprowadzenie do struktury HTTP służącej do uwierzytelniania i pokazuje, jak ograniczyć dostęp do serwera za pomocą schematu HTTP „Basic”.</font></font></span></p> - -<h2 id="Ogólna_struktura_uwierzytelniania_HTTP"><font><font>Ogólna struktura uwierzytelniania HTTP</font></font></h2> - -<p><font><font>{{RFC ("7235")}} definiuje strukturę uwierzytelniania HTTP, która może być używana przez serwer do {{glosariusza ("wyzwanie")}} żądania klienta, a przez klienta do dostarczania informacji uwierzytelniających.</font></font></p> - -<p><font><font>Wyzwanie i przepływ odpowiedzi działają w następujący sposób:</font></font></p> - -<ol> - <li><font><font>Serwer odpowiada klientowi statusem odpowiedzi {{HTTPStatus ("401")}} (Unauthorized) i dostarcza informacji na temat autoryzacji za pomocą nagłówka odpowiedzi {{HTTPHeader ("WWW-Authenticate")}} zawierającego co najmniej jeden wyzwanie.</font></font></li> - <li>A client that wants to authenticate itself with the server can then do so by including an {{HTTPHeader("Authorization")}} request header with the credentials.</li> - <li>Usually a client will present a password prompt to the user and will then issue the request including the correct <code>Authorization</code> header.</li> -</ol> - -<p><img alt="A sequence diagram illustrating HTTP messages between a client and a server lifeline." src="https://mdn.mozillademos.org/files/14689/HTTPAuth.png" style="height: 335px; width: 710px;" title="Diagram sekwencji uwierzytelniania HTTP klient-serwer"></p> - -<p>In the case of a "Basic" authentication like shown in the figure, the exchange <strong>must</strong> happen over an HTTPS (TLS) connection to be secure.</p> - -<h3 id="Proxy_authentication">Proxy authentication</h3> - -<p>The same challenge and response mechanism can be used for <em>proxy authentication</em>. As both resource authentication and proxy authentication can coexist, a different set of headers and status codes is needed. In the case of proxies, the challenging status code is {{HTTPStatus("407")}} (Proxy Authentication Required), the {{HTTPHeader("Proxy-Authenticate")}} response header contains at least one challenge applicable to the proxy, and the {{HTTPHeader("Proxy-Authorization")}} request header is used for providing the credentials to the proxy server.</p> - -<h3 id="Access_forbidden">Access forbidden</h3> - -<p>If a (proxy) server receives valid credentials that are inadequate to access a given resource, the server should respond with the {{HTTPStatus("403")}} <code>Forbidden</code> status code. Unlike {{HTTPStatus("401")}} <code>Unauthorized</code> or {{HTTPStatus("407")}} <code>Proxy Authentication Required</code>, authentication is impossible for this user.</p> - -<h3 id="Authentication_of_cross-origin_images">Authentication of cross-origin images</h3> - -<p>A potential security hole recently been fixed by browsers is authentication of cross-site images. From <a href="/en-US/docs/Mozilla/Firefox/Releases/59">Firefox 59</a> onwards, image resources loaded from different origins to the current document are no longer able to trigger HTTP authentication dialogs ({{bug(1423146)}}), preventing user credentials being stolen if attackers were able to embed an arbitrary image into a third-party page.</p> - -<h3 id="Character_encoding_of_HTTP_authentication">Character encoding of HTTP authentication</h3> - -<p>Browsers use <code>utf-8</code> encoding for usernames and passwords.</p> - -<p>Firefox once used <code>ISO-8859-1</code>, but changed to <code>utf-8</code> for parity with other browsers and to avoid potential problems as described in {{bug(1419658)}}.</p> - -<h3 id="WWW-Authenticate_and_Proxy-Authenticate_headers">WWW-Authenticate and Proxy-Authenticate headers</h3> - -<p>The {{HTTPHeader("WWW-Authenticate")}} and {{HTTPHeader("Proxy-Authenticate")}} response headers define the authentication method that should be used to gain access to a resource. They must specify which authentication scheme is used, so that the client that wishes to authorize knows how to provide the credentials.</p> - -<p>The syntax for these headers is the following:</p> - -<pre class="syntaxbox notranslate">WWW-Authenticate: <type> realm=<realm> -Proxy-Authenticate: <type> realm=<realm> -</pre> - -<p>Here, <code><type></code> is the authentication scheme ("Basic" is the most common scheme and <a href="/en-US/docs/Web/HTTP/Authentication#Basic_authentication_scheme">introduced below</a>). The <em>realm</em> is used to describe the protected area or to indicate the scope of protection. This could be a message like "Access to the staging site" or similar, so that the user knows to which space they are trying to get access to.</p> - -<h3 id="Authorization_and_Proxy-Authorization_headers">Authorization and Proxy-Authorization headers</h3> - -<p>The {{HTTPHeader("Authorization")}} and {{HTTPHeader("Proxy-Authorization")}} request headers contain the credentials to authenticate a user agent with a (proxy) server. Here, the <code><type></code> is needed again followed by the credentials, which can be encoded or encrypted depending on which authentication scheme is used.</p> - -<pre class="syntaxbox notranslate">Authorization: <type> <credentials> -Proxy-Authorization: <type> <credentials> -</pre> - -<h3 id="Authentication_schemes">Authentication schemes</h3> - -<p>The general HTTP authentication framework is used by several authentication schemes. Schemes can differ in security strength and in their availability in client or server software.</p> - -<p>The most common authentication scheme is the "Basic" authentication scheme, which is introduced in more detail below. IANA maintains a <a class="external external-icon" href="https://www.iana.org/assignments/http-authschemes/http-authschemes.xhtml">list of authentication schemes</a>, but there are other schemes offered by host services, such as Amazon AWS. Common authentication schemes include:</p> - -<dl> - <dt><strong>Basic</strong></dt> - <dd>See {{rfc(7617)}}, base64-encoded credentials. More information below.</dd> - <dt><strong>Bearer</strong></dt> - <dd>See {{rfc(6750)}}, bearer tokens to access OAuth 2.0-protected resources</dd> - <dt><strong>Digest</strong></dt> - <dd>See {{rfc(7616)}}, only md5 hashing is supported in Firefox, see {{bug(472823)}} for SHA encryption support</dd> - <dt><strong>HOBA</strong></dt> - <dd>See {{rfc(7486)}}, Section 3, <strong>H</strong>TTP <strong>O</strong>rigin-<strong>B</strong>ound <strong>A</strong>uthentication, digital-signature-based</dd> - <dt><strong>Mutual</strong></dt> - <dd>See {{rfc(8120)}}</dd> - <dt><strong>AWS4-HMAC-SHA256</strong></dt> - <dd>See <a href="http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-auth-using-authorization-header.html">AWS docs</a></dd> -</dl> - -<h2 id="Basic_authentication_scheme">Basic authentication scheme</h2> - -<p>The "Basic" HTTP authentication scheme is defined in {{rfc(7617)}}, which transmits credentials as user ID/password pairs, encoded using base64.</p> - -<h3 id="Security_of_basic_authentication">Security of basic authentication</h3> - -<p>As the user ID and password are passed over the network as clear text (it is base64 encoded, but base64 is a reversible encoding), the basic authentication scheme <strong>is not secure</strong>. HTTPS/TLS should be used with basic authentication. Without these additional security enhancements, basic authentication should not be used to protect sensitive or valuable information.</p> - -<h3 id="Restricting_access_with_Apache_and_basic_authentication">Restricting access with Apache and basic authentication</h3> - -<p>To password-protect a directory on an Apache server, you will need a <code>.htaccess</code> and a <code>.htpasswd</code> file.</p> - -<p>The <code>.htaccess</code> file typically looks like this:</p> - -<pre class="notranslate">AuthType Basic -AuthName "Access to the staging site" -AuthUserFile /path/to/.htpasswd -Require valid-user</pre> - -<p>The <code>.htaccess</code> file references a <code>.htpasswd</code> file in which each line consists of a username and a password separated by a colon (<code>:</code>). You cannot see the actual passwords as they are <a href="https://httpd.apache.org/docs/2.4/misc/password_encryptions.html">hashed</a> (using MD5-based hashing, in this case). Note that you can name your <code>.htpasswd</code> file differently if you like, but keep in mind this file shouldn't be accessible to anyone. (Apache is usually configured to prevent access to <code>.ht*</code> files).</p> - -<pre class="notranslate">aladdin:$apr1$ZjTqBB3f$IF9gdYAGlMrs2fuINjHsz. -user2:$apr1$O04r.y2H$/vEkesPhVInBByJUkXitA/ -</pre> - -<h3 id="Restricting_access_with_nginx_and_basic_authentication">Restricting access with nginx and basic authentication</h3> - -<p>For nginx, you will need to specify a location that you are going to protect and the <code>auth_basic</code> directive that provides the name to the password-protected area. The <code>auth_basic_user_file</code> directive then points to a <code>.htpasswd</code> file containing the encrypted user credentials, just like in the Apache example above.</p> - -<pre class="notranslate">location /status { - auth_basic "Access to the staging site"; - auth_basic_user_file /etc/apache2/.htpasswd; -}</pre> - -<h3 id="Access_using_credentials_in_the_URL">Access using credentials in the URL</h3> - -<p>Many clients also let you avoid the login prompt by using an encoded URL containing the username and the password like this:</p> - -<pre class="example-bad notranslate">https://username:password@www.example.com/</pre> - -<p><strong>The use of these URLs is deprecated</strong>. In Chrome, the <code>username:password@</code> part in URLs is even <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=82250#c7">stripped out</a> for security reasons. In Firefox, it is checked if the site actually requires authentication and if not, Firefox will warn the user with a prompt "You are about to log in to the site “www.example.com” with the username “username”, but the website does not require authentication. This may be an attempt to trick you."</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{HTTPHeader("WWW-Authenticate")}}</li> - <li>{{HTTPHeader("Authorization")}}</li> - <li>{{HTTPHeader("Proxy-Authorization")}}</li> - <li>{{HTTPHeader("Proxy-Authenticate")}}</li> - <li><font><font>{{HTTPStatus ("401")}}, {{HTTPStatus ("403")}}, {{HTTPStatus ("407")}}</font></font></li> -</ul> diff --git a/files/pl/web/http/headers/date/index.html b/files/pl/web/http/headers/date/index.html deleted file mode 100644 index 81efdff778..0000000000 --- a/files/pl/web/http/headers/date/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Data -slug: Web/HTTP/Headers/Date -translation_of: Web/HTTP/Headers/Date -original_slug: Web/HTTP/Headers/Data ---- -<div>{{HTTPSidebar}}</div> - -<p><strong><code>Date</code></strong> jest to ogólny nagłówek HTTP zawierający datę i czas w jakiej wiadomość została stworzona.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Header type</th> - <td>{{Glossary("General header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>yes</td> - </tr> - </tbody> -</table> - -<h2 id="Składnia">Składnia</h2> - -<pre class="syntaxbox">Date: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT -</pre> - -<h2 id="Dyrektywy">Dyrektywy</h2> - -<dl> - <dt><day-name></dt> - <dd>One of "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", or "Sun" (case-sensitive).</dd> - <dt><day></dt> - <dd>2 digit day number, e.g. "04" or "23".</dd> - <dt><month></dt> - <dd>One of "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" (case sensitive).</dd> - <dt><year></dt> - <dd>4 digit year number, e.g. "1990" or "2016".</dd> - <dt><hour></dt> - <dd>2 digit hour number, e.g. "09" or "23".</dd> - <dt><minute></dt> - <dd>2 digit minute number, e.g. "04" or "59".</dd> - <dt><second></dt> - <dd>2 digit second number, e.g. "04" or "59".</dd> - <dt>GMT</dt> - <dd> - <p>Greenwich Mean Time. HTTP dates are always expressed in GMT, never in local time.</p> - </dd> -</dl> - -<h2 id="Przykłady">Przykłady</h2> - -<pre>Date: Wed, 21 Oct 2015 07:28:00 GMT -</pre> - -<h2 id="Specyfikacja">Specyfikacja</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - <tr> - <td>{{RFC("7231", "Date", "7.1.1.2")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Zgodność_z_przeglądarką"><span class="short_text" id="result_box" lang="pl"><span>Zgodność z przeglądarką</span></span></h2> - - - -<p>{{Compat("http.headers.Date")}}</p> - -<h2 id="Zobacz_również">Zobacz również</h2> - -<ul> - <li>{{HTTPHeader("Age")}}</li> -</ul> diff --git a/files/pl/web/javascript/data_structures/index.html b/files/pl/web/javascript/data_structures/index.html deleted file mode 100644 index 4a86825a9e..0000000000 --- a/files/pl/web/javascript/data_structures/index.html +++ /dev/null @@ -1,444 +0,0 @@ ---- -title: Typy oraz struktury danych w JavaScript -slug: Web/JavaScript/Data_structures -tags: - - JavaScript - - Początkujący - - Typy danych -translation_of: Web/JavaScript/Data_structures -original_slug: Web/JavaScript/typy_oraz_struktury_danych ---- -<div>{{jsSidebar("More")}}</div> - -<div>Wszystkie języki programowania posiadają wbudowane struktury danych, mogą one jednak różnic się między poszczególnymi językami. Poniższy artykuł jest próbą stworzenia listy wbudowanych typów oraz struktur danych w JavaScript oraz ich właściwości. Mogą być one użyte do tworzenia innych struktur danych. Tam gdzie jest to możliwe dokonano porównania z innymi językami programowania.</div> - -<h2 id="Dynamiczne_typowanie">Dynamiczne typowanie</h2> - -<p>JavaScript jest językiem typowanym dynamicznie. Zmienne w Javascript nie są bezpośrednio powiązane z konkretnym typem wartości i możemy im przypisywać wartości dowolnego typu:</p> - -<pre class="brush: js notranslate">let foo = 42; // foo jest teraz liczbą (number) -foo = 'bar'; // foo jest teraz ciągiem znaków (string) -foo = true; // foo jest teraz type logicznym (boolean) -</pre> - -<h2 id="Data_and_Structure_types">Data and Structure types</h2> - -<p>Najnowsza wersja standardu ECMAScript definiuje dziewięć typów danych:</p> - -<ul> - <li>Six <strong>Data Types</strong> that are <a href="/en-US/docs/Glossary/Primitive">primitives</a>, checked by <a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a> operator: - - <ul> - <li><a href="/en-US/docs/Glossary/Undefined">undefined</a> : <code>typeof instance === "undefined"</code></li> - <li><a href="/en-US/docs/Glossary/Boolean">Boolean</a> : <code>typeof instance === "boolean"</code></li> - <li><a href="/en-US/docs/Glossary/Number">Number</a> : <code>typeof instance === "number"</code></li> - <li><a href="/en-US/docs/Glossary/String">String</a> : <code>typeof instance === "string"</code></li> - <li><a href="/en-US/docs/Glossary/BigInt">BigInt</a><span> : </span><code>typeof instance === "bigint"</code></li> - <li><a href="/en-US/docs/Glossary/Symbol">Symbol</a><span> : </span><code>typeof instance === "symbol"</code></li> - </ul> - </li> - <li><a href="/en-US/docs/Glossary/Null">null</a><span> : </span><code>typeof instance === "object"</code>. Special <a href="/en-US/docs/Glossary/Primitive">primitive</a> type having additional usage for it's value: if object is not inherited, then <code>null</code> is shown;</li> - <li><a href="/en-US/docs/Glossary/Object">Object</a><span> : </span><code>typeof instance === "object"</code>. Special non-data but structural type for any <a href="/en-US/docs/Learn/JavaScript/Objects#The_Constructor">constructed</a> object instance also used as data structures: new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap">WeakMap</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet">WeakSet</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a> and almost everything made with <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new keyword</a>;</li> - <li><a href="/en-US/docs/Glossary/Function">Function</a><span> non data structure, though it also answers for typeof operator: </span><code>typeof instance === "function"</code>. This answer is done as a special shorthand for Functions, though every Function constructor is derived from Object constructor.</li> -</ul> - -<p>Keep in mind the only valuable purpose of <code>typeof</code> operator usage is checking the Data Type. If we wish to check any Structural Type derived from Object it is pointless to use <code>typeof</code> for that, as we will always receive <code>"object"</code>. The indeed proper way to check what sort of Object we are using an <a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a> keyword. But even in that case there might be misconceptions.</p> - -<h2 id="Wartości_prymitywne">Wartości prymitywne</h2> - -<p>All types except objects define immutable values (that is, values which can't be changed). For example (and unlike in C), Strings are immutable. We refer to values of these types as "<em>primitive values</em>".</p> - -<h3 id="Boolean_type">Boolean type</h3> - -<p>Boolean represents a logical entity and can have two values: <code>true</code> and <code>false</code>. See <a href="/en-US/docs/Glossary/Boolean">Boolean</a> and {{jsxref("Boolean")}} for more details.</p> - -<h3 id="Null_type">Null type</h3> - -<p>The Null type has exactly one value: <code>null</code>. See {{jsxref("null")}} and <a href="/en-US/docs/Glossary/Null">Null</a> for more details.</p> - -<h3 id="Undefined_type">Undefined type</h3> - -<p>A variable that has not been assigned a value has the value <code>undefined</code>. See {{jsxref("undefined")}} and <a href="/en-US/docs/Glossary/Undefined">Undefined</a> for more details.</p> - -<h3 id="Number_type">Number type</h3> - -<p>ECMAScript has two built-in numeric types: <strong>Number</strong> and <strong>BigInt</strong> (see below).</p> - -<p>The Number type is a <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">double-precision 64-bit binary format IEEE 754 value</a> (numbers between -(2<sup>53</sup> − 1) and 2<sup>53</sup> − 1). In addition to representing floating-point numbers, the number type has three symbolic values: <code>+Infinity</code>, <code>-Infinity</code>, and {{jsxref("NaN")}} ("<strong>N</strong>ot a <strong>N</strong>umber").</p> - -<p>To check for the largest available value or smallest available value within {{jsxref("Infinity", "±Infinity")}}, you can use the constants {{jsxref("Number.MAX_VALUE")}} or {{jsxref("Number.MIN_VALUE")}}.</p> - -<p>Starting with ECMAScript 2015, you are also able to check if a number is in the double-precision floating-point number range using {{jsxref("Number.isSafeInteger()")}} as well as {{jsxref("Number.MAX_SAFE_INTEGER")}} and {{jsxref("Number.MIN_SAFE_INTEGER")}}. Beyond this range, integers in JavaScript are not safe anymore and will be a double-precision floating point approximation of the value.</p> - -<p>The number type has only one integer with two representations: <code>0</code> is represented as both <code>-0</code> and <code>+0</code>. (<code>0</code> is an alias for <code>+0</code>.) </p> - -<p>In the praxis, this has almost no impact. For example, <code>+0 === -0</code> is <code>true</code>. However, you are able to notice this when you divide by zero:</p> - -<pre class="brush: js notranslate">> 42 / +0 -Infinity -> 42 / -0 --Infinity -</pre> - -<p>Although a number often represents only its value, JavaScript provides {{jsxref("Operators/Bitwise_Operators", "binary (bitwise) operators")}}.</p> - -<p>These bitwise operators can be used to represent several Boolean values within a single number using <a class="external" href="http://en.wikipedia.org/wiki/Mask_%28computing%29">bit masking</a>. However, this is usually considered a bad practice, since JavaScript offers other means to represent a set of Booleans (like an array of Booleans, or an object with Boolean values assigned to named properties). Bit masking also tends to make the code more difficult to read, understand, and maintain.</p> - -<p>It may be necessary to use such techniques in very constrained environments, like when trying to cope with the limitations of local storage, or in extreme cases (such as when each bit over the network counts). This technique should only be considered when it is the last measure that can be taken to optimize size.</p> - -<h3 id="BigInt_type">BigInt type</h3> - -<p>The {{jsxref("BigInt")}} type is a numeric primitive in JavaScript that can represent integers with arbitrary precision. With <code>BigInt</code>s, you can safely store and operate on large integers even beyond the safe integer limit for <code>Number</code>s.</p> - -<p>A <code>BigInt</code> is created by appending <code>n</code> to the end of an integer or by calling the constructor.</p> - -<p>You can obtain the safest value that can be incremented with <code>Number</code>s by using the constant {{jsxref("Number.MAX_SAFE_INTEGER")}}. With the introduction of <code>BigInt</code>s, you can operate with numbers beyond the {{jsxref("Number.MAX_SAFE_INTEGER")}}.</p> - -<p>This example demonstrates, where incrementing the {{jsxref("Number.MAX_SAFE_INTEGER")}} returns the expected result:</p> - -<pre class="brush: js notranslate">> const x = 2n ** 53n; -9007199254740992n -> const y = x + 1n; -9007199254740993n -</pre> - -<p>You can use the operators <code>+</code>, <code>*</code>, <code>-</code>, <code>**</code>, and <code>%</code> with <code>BigInt</code>s—just like with <code>Number</code>s. A <code>BigInt</code> is not strictly equal to a <code>Number</code>, but it is loosely so.</p> - -<p>A <code>BigInt</code> behaves like a <code>Number</code> in cases where it is converted to <code>Boolean</code>: <code>if</code>, <code>||</code>, <code>&&</code>, <code>Boolean</code>, <code>!</code>.</p> - -<p><code>BigInt</code>s cannot be operated on interchangeably with <code>Number</code>s. Instead a {{jsxref("TypeError")}} will be thrown.</p> - -<h3 id="String_type">String type</h3> - -<p>JavaScript's {{jsxref("String")}} type is used to represent textual data. It is a set of "elements" of 16-bit unsigned integer values. Each element in the String occupies a position in the String. The first element is at index <code>0</code>, the next at index <code>1</code>, and so on. The length of a String is the number of elements in it.</p> - -<p>Unlike some programming languages (such as C), JavaScript strings are immutable. This means that once a string is created, it is not possible to modify it.</p> - -<p>However, it is still possible to create another string based on an operation on the original string. For example:</p> - -<ul> - <li>A substring of the original by picking individual letters or using {{jsxref("String.substr()")}}.</li> - <li>A concatenation of two strings using the concatenation operator (<code>+</code>) or {{jsxref("String.concat()")}}.</li> -</ul> - -<h4 id="Beware_of_stringly-typing_your_code!">Beware of "stringly-typing" your code!</h4> - -<p>It can be tempting to use strings to represent complex data. Doing this comes with short-term benefits:</p> - -<ul> - <li>It is easy to build complex strings with concatenation.</li> - <li>Strings are easy to debug (what you see printed is always what is in the string).</li> - <li>Strings are the common denominator of a lot of APIs (<a href="/en-US/docs/Web/API/HTMLInputElement" title="HTMLInputElement">input fields</a>, <a href="/en-US/docs/Storage" title="Storage">local storage</a> values, <a href="/en-US/docs/Web/API/XMLHttpRequest" title="Use XMLHttpRequest (XHR) objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> responses when using <code>responseText</code>, etc.) and it can be tempting to only work with strings.</li> -</ul> - -<p>With conventions, it is possible to represent any data structure in a string. This does not make it a good idea. For instance, with a separator, one could emulate a list (while a JavaScript array would be more suitable). Unfortunately, when the separator is used in one of the "list" elements, then, the list is broken. An escape character can be chosen, etc. All of this requires conventions and creates an unnecessary maintenance burden.</p> - -<p>Use strings for textual data. When representing complex data, parse strings and use the appropriate abstraction.</p> - -<h3 id="Symbol_type">Symbol type</h3> - -<p>Symbols are new to JavaScript in ECMAScript 2015. A Symbol is a <strong>unique</strong> and <strong>immutable</strong> primitive value and may be used as the key of an Object property (see below). In some programming languages, Symbols are called "atoms".</p> - -<p>For more details see <a href="/en-US/docs/Glossary/Symbol">Symbol</a> and the {{jsxref("Symbol")}} object wrapper in JavaScript.</p> - -<h2 id="Obiekty">Obiekty</h2> - -<p>In computer science, an object is a value in memory which is possibly referenced by an <a href="/en-US/docs/Glossary/Identifier">identifier</a>.</p> - -<h3 id="Properties">Properties</h3> - -<p>In JavaScript, objects can be seen as a collection of properties. With the <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Object_literals">object literal syntax</a>, a limited set of properties are initialized; then properties can be added and removed. Property values can be values of any type, including other objects, which enables building complex data structures. Properties are identified using <em>key</em> values. A <em>key</em> value is either a String or a Symbol value.</p> - -<p>There are two types of object properties which have certain attributes: The <em>data</em> property and the <em>accessor</em> property.</p> - -<h4 id="Data_property">Data property</h4> - -<p>Associates a key with a value, and has the following attributes:</p> - -<table class="standard-table"> - <caption>Attributes of a data property</caption> - <thead> - <tr> - <th scope="col">Attribute</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - <th scope="col">Default value</th> - </tr> - </thead> - <tbody> - <tr> - <td>[[Value]]</td> - <td>Any JavaScript type</td> - <td>The value retrieved by a get access of the property.</td> - <td><code>undefined</code></td> - </tr> - <tr> - <td>[[Writable]]</td> - <td>Boolean</td> - <td>If <code>false</code>, the property's [[Value]] cannot be changed.</td> - <td><code>false</code></td> - </tr> - <tr> - <td>[[Enumerable]]</td> - <td>Boolean</td> - <td> - <p>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops.<br> - See also <a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a>.</p> - </td> - <td><code>false</code></td> - </tr> - <tr> - <td>[[Configurable]]</td> - <td>Boolean</td> - <td>If <code>false</code>, the property cannot be deleted, cannot be changed to an accessor property, and attributes other than [[Value]] and [[Writable]] cannot be changed.</td> - <td><code>false</code></td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>Obsolete attributes (as of ECMAScript 3, renamed in ECMAScript 5)</caption> - <thead> - <tr> - <th scope="col">Attribute</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>Read-only</td> - <td>Boolean</td> - <td>Reversed state of the ES5 [[Writable]] attribute.</td> - </tr> - <tr> - <td>DontEnum</td> - <td>Boolean</td> - <td>Reversed state of the ES5 [[Enumerable]] attribute.</td> - </tr> - <tr> - <td>DontDelete</td> - <td>Boolean</td> - <td>Reversed state of the ES5 [[Configurable]] attribute.</td> - </tr> - </tbody> -</table> - -<h4 id="Accessor_property">Accessor property</h4> - -<p>Associates a key with one of two accessor functions (<code>get</code> and <code>set</code>) to retrieve or store a value, and has the following attributes:</p> - -<table class="standard-table"> - <caption>Attributes of an accessor property</caption> - <thead> - <tr> - <th scope="col">Attribute</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - <th scope="col">Default value</th> - </tr> - </thead> - <tbody> - <tr> - <td>[[Get]]</td> - <td>Function object or <code>undefined</code></td> - <td>The function is called with an empty argument list and retrieves the property value whenever a get access to the value is performed.<br> - See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/get"><code>get</code></a>.</td> - <td><code>undefined</code></td> - </tr> - <tr> - <td>[[Set]]</td> - <td>Function object or <code>undefined</code></td> - <td>The function is called with an argument that contains the assigned value and is executed whenever a specified property is attempted to be changed.<br> - See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/set"><code>set</code></a>.</td> - <td><code>undefined</code></td> - </tr> - <tr> - <td>[[Enumerable]]</td> - <td>Boolean</td> - <td>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops.</td> - <td><code>false</code></td> - </tr> - <tr> - <td>[[Configurable]]</td> - <td>Boolean</td> - <td>If <code>false</code>, the property can't be deleted and can't be changed to a data property.</td> - <td><code>false</code></td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Note: </strong>Attribute is usually used by JavaScript engine, so you can't directly access it (see more about {{jsxref("Object.defineProperty()")}}). That's why the attribute is put in double square brackets instead of single.</p> -</div> - -<h3 id="Normal_objects_and_functions">"Normal" objects, and functions</h3> - -<p>A JavaScript object is a mapping between <em>keys</em> and <em>values</em>. Keys are strings (or {{jsxref("Symbol")}}s), and <em>values</em> can be anything. This makes objects a natural fit for <a class="external" href="http://en.wikipedia.org/wiki/Hash_table">hashmaps</a>.</p> - -<p>Functions are regular objects with the additional capability of being <em>callable</em>.</p> - -<h3 id="Dates">Dates</h3> - -<p>When representing dates, the best choice is to use the built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code> utility</a> in JavaScript.</p> - -<h3 id="Indexed_collections_Arrays_and_typed_Arrays">Indexed collections: Arrays and typed Arrays</h3> - -<p><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="Array">Arrays</a> are regular objects for which there is a particular relationship between integer-key-ed properties and the <code>length</code> property.</p> - -<p>Additionally, arrays inherit from <code>Array.prototype</code>, which provides to them a handful of convenient methods to manipulate arrays. For example, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf" title="en/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a></code> (searching a value in the array) or <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/push" title="en/JavaScript/Reference/Global_Objects/Array/push">push</a></code> (adding an element to the array), and so on. This makes Arrays a perfect candidate to represent lists or sets.</p> - -<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a> are new to JavaScript with ECMAScript 2015, and present an array-like view of an underlying binary data buffer. The following table helps determine the equivalent C data types:</p> - -<table class="standard-table"> - <thead> - <tr> - <th class="header" scope="col">Type</th> - <th class="header" scope="col">Value Range</th> - <th class="header" scope="col">Size in bytes</th> - <th class="header" scope="col">Description</th> - <th class="header" scope="col">Web IDL type</th> - <th class="header" scope="col">Equivalent C type</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{jsxref("Int8Array")}}</td> - <td><code>-128</code> to <code>127</code></td> - <td>1</td> - <td>8-bit two's complement signed integer</td> - <td><code>byte</code></td> - <td><code>int8_t</code></td> - </tr> - <tr> - <td>{{jsxref("Uint8Array")}}</td> - <td><code>0</code> to <code>255</code></td> - <td>1</td> - <td>8-bit unsigned integer</td> - <td><code>octet</code></td> - <td><code>uint8_t</code></td> - </tr> - <tr> - <td>{{jsxref("Uint8ClampedArray")}}</td> - <td><code>0</code> to <code>255</code></td> - <td>1</td> - <td>8-bit unsigned integer (clamped)</td> - <td><code>octet</code></td> - <td><code>uint8_t</code></td> - </tr> - <tr> - <td>{{jsxref("Int16Array")}}</td> - <td><code>-32768</code> to <code>32767</code></td> - <td>2</td> - <td>16-bit two's complement signed integer</td> - <td><code>short</code></td> - <td><code>int16_t</code></td> - </tr> - <tr> - <td>{{jsxref("Uint16Array")}}</td> - <td><code>0</code> to <code>65535</code></td> - <td>2</td> - <td>16-bit unsigned integer</td> - <td><code>unsigned short</code></td> - <td><code>uint16_t</code></td> - </tr> - <tr> - <td>{{jsxref("Int32Array")}}</td> - <td><code>-2147483648</code> to <code>2147483647</code></td> - <td>4</td> - <td>32-bit two's complement signed integer</td> - <td><code>long</code></td> - <td><code>int32_t</code></td> - </tr> - <tr> - <td>{{jsxref("Uint32Array")}}</td> - <td><code>0</code> to <code>4294967295</code></td> - <td>4</td> - <td>32-bit unsigned integer</td> - <td><code>unsigned long</code></td> - <td><code>uint32_t</code></td> - </tr> - <tr> - <td>{{jsxref("Float32Array")}}</td> - <td><code>1.2</code><span>×</span><code>10<sup>-38</sup></code> to <code>3.4</code><span>×</span><code>10<sup>38</sup></code></td> - <td>4</td> - <td>32-bit IEEE floating point number (7 significant digits e.g., <code>1.1234567</code>)</td> - <td><code>unrestricted float</code></td> - <td><code>float</code></td> - </tr> - <tr> - <td>{{jsxref("Float64Array")}}</td> - <td><code>5.0</code><span>×</span><code>10<sup>-324</sup></code> to <code>1.8</code><span>×</span><code>10<sup>308</sup></code></td> - <td>8</td> - <td>64-bit IEEE floating point number (16 significant digits e.g., <code>1.123...15</code>)</td> - <td><code>unrestricted double</code></td> - <td><code>double</code></td> - </tr> - <tr> - <td>{{jsxref("BigInt64Array")}}</td> - <td><code>-2<sup>63</sup></code> to <code>2<sup>63</sup>-1</code></td> - <td>8</td> - <td>64-bit two's complement signed integer</td> - <td><code>bigint</code></td> - <td><code>int64_t (signed long long)</code></td> - </tr> - <tr> - <td>{{jsxref("BigUint64Array")}}</td> - <td><code>0</code> to <code>2<sup>64</sup>-1</code></td> - <td>8</td> - <td>64-bit unsigned integer</td> - <td><code>bigint</code></td> - <td><code>uint64_t (unsigned long long)</code></td> - </tr> - </tbody> -</table> - -<h3 id="Keyed_collections_Maps_Sets_WeakMaps_WeakSets">Keyed collections: Maps, Sets, WeakMaps, WeakSets</h3> - -<p>These data structures, introduced in ECMAScript Edition 6, take object references as keys. {{jsxref("Set")}} and {{jsxref("WeakSet")}} represent a set of objects, while {{jsxref("Map")}} and {{jsxref("WeakMap")}} associate a value to an object.</p> - -<p>The difference between <code>Map</code>s and <code>WeakMap</code>s is that in the former, object keys can be enumerated over. This allows garbage collection optimizations in the latter case.</p> - -<p>One could implement <code>Map</code>s and <code>Set</code>s in pure ECMAScript 5. However, since objects cannot be compared (in the sense of <code><</code> "less than", for instance), look-up performance would necessarily be linear. Native implementations of them (including <code>WeakMap</code>s) can have look-up performance that is approximately logarithmic to constant time.</p> - -<p>Usually, to bind data to a DOM node, one could set properties directly on the object, or use <code>data-*</code> attributes. This has the downside that the data is available to any script running in the same context. <code>Map</code>s and <code>WeakMap</code>s make it easy to <em>privately</em> bind data to an object.</p> - -<h3 id="Structured_data_JSON">Structured data: JSON</h3> - -<p>JSON (<strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation) is a lightweight data-interchange format, derived from JavaScript, but used by many programming languages. JSON builds universal data structures.</p> - -<p>See <a href="/en-US/docs/Glossary/JSON">JSON</a> and {{jsxref("JSON")}} for more details.</p> - -<h3 id="More_objects_in_the_standard_library">More objects in the standard library</h3> - -<p>JavaScript has a standard library of built-in objects.</p> - -<p>Please have a look at the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">reference</a> to find out about more objects.</p> - -<h2 id="Określanie_typu_za_pomocą_operatora_typeof">Określanie typu za pomocą operatora <code>typeof</code></h2> - -<p>Operator <code>typeof</code> może być pomocny przy określeniu typu twojej zmiennej.</p> - -<p>Więcej szczegółów znajdziecie na stronie poświęconej operatorowi <code>typeof</code>.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td> - </tr> - </tbody> -</table> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Nicholas Zakas collection of common data structure and common algorithms in JavaScript.</a></li> - <li><a href="https://github.com/monmohan/DataStructures_In_Javascript" title="https://github.com/monmohan/DataStructures_In_Javascript">Search Tre(i)es implemented in JavaScript</a></li> -</ul> diff --git a/files/pl/web/javascript/reference/deprecated_and_obsolete_features/index.html b/files/pl/web/javascript/reference/deprecated_and_obsolete_features/index.html deleted file mode 100644 index e937d7c66d..0000000000 --- a/files/pl/web/javascript/reference/deprecated_and_obsolete_features/index.html +++ /dev/null @@ -1,293 +0,0 @@ ---- -title: Przestarzałe własności i metody -slug: Web/JavaScript/Reference/Deprecated_and_obsolete_features -tags: - - Dokumentacja_JavaScript - - Dokumentacje - - JavaScript - - Strony_wymagające_dopracowania - - Wszystkie_kategorie -translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features -original_slug: Web/JavaScript/Referencje/Przestarzałe_własności_i_metody ---- -<div>{{JsSidebar("More")}}</div> - -<p>This page lists features of JavaScript that are deprecated (that is, still available but planned for removal) and obsolete (that is, no longer usable).</p> - -<h2 id="Deprecated_features">Deprecated features</h2> - -<p>These deprecated features can still be used, but should be used with caution because they are expected to be removed entirely sometime in the future. You should work to remove their use from your code.</p> - -<h3 id="RegExp_properties">RegExp properties</h3> - -<p>The following properties are deprecated. This does not affect their use in {{jsxref("String.replace", "replacement strings", "", 1)}}:</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Property</th> - <th>Description</th> - </tr> - <tr> - <td>{{jsxref("RegExp.n", "$1-$9")}}</td> - <td> - <p>Parenthesized substring matches, if any.<br> - <strong>Warning:</strong> Using these properties can result in problems, since browser extensions can modify them. Avoid them!</p> - </td> - </tr> - <tr> - <td>{{jsxref("RegExp.input", "$_")}}</td> - <td>See <code>input</code>.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.multiline", "$*")}}</td> - <td>See <code>multiline</code>.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.lastMatch", "$&")}}</td> - <td>See <code>lastMatch</code>.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.lastParen", "$+")}}</td> - <td>See <code>lastParen</code>.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.leftContext", "$`")}}</td> - <td>See <code>leftContext</code>.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.rightContext", "$'")}}</td> - <td>See <code>rightContext</code>.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.input", "input")}}</td> - <td>The string against which a regular expression is matched.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.lastMatch", "lastMatch")}}</td> - <td>The last matched characters.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.lastParen", "lastParen")}}</td> - <td>The last parenthesized substring match, if any.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.leftContext", "leftContext")}}</td> - <td>The substring preceding the most recent match.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.rightContext", "rightContext")}}</td> - <td>The substring following the most recent match.</td> - </tr> - </tbody> -</table> - -<p>The following are now properties of <code>RegExp</code> instances, no longer of the <code>RegExp</code> object:</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Property</th> - <th>Description</th> - </tr> - <tr> - <td>{{jsxref("RegExp.global", "global")}}</td> - <td>Whether or not to test the regular expression against all possible matches in a string, or only against the first.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.ignoreCase", "ignoreCase")}}</td> - <td>Whether or not to ignore case while attempting a match in a string.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.lastIndex", "lastIndex")}}</td> - <td>The index at which to start the next match.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.multiline", "multiline")}}</td> - <td>Whether or not to search in strings across multiple lines.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.source", "source")}}</td> - <td>The text of the pattern.</td> - </tr> - </tbody> -</table> - -<h3 id="RegExp_methods">RegExp methods</h3> - -<ul> - <li>The {{jsxref("RegExp.compile", "compile()")}} method is deprecated.</li> - <li>The <code>valueOf</code> method is no longer specialized for <code>RegExp</code>. Use {{jsxref("Object.valueOf()")}}.</li> -</ul> - -<h3 id="Function_properties">Function properties</h3> - -<ul> - <li>The {{jsxref("Global_Objects/Function/caller", "caller")}} and {{jsxref("Global_Objects/Function/arguments", "arguments")}} properties are deprecated, because they leak the function caller. Instead of the arguments property, you should use the {{jsxref("Functions/arguments", "arguments")}} object inside function closures.</li> -</ul> - -<h3 id="Legacy_generator">Legacy generator</h3> - -<ul> - <li>{{jsxref("Statements/Legacy_generator_function", "Legacy generator function statement")}} and {{jsxref("Operators/Legacy_generator_function", "Legacy generator function expression")}} are deprecated. Use {{jsxref("Statements/function*", "function* statement")}} and {{jsxref("Operators/function*", "function* expression")}} instead.</li> - <li>{{jsxref("Operators/Array_comprehensions", "JS1.7/JS1.8 Array comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} and {{jsxref("Operators/Generator_comprehensions", "JS1.7/JS1.8 Generator comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} are deprecated.</li> -</ul> - -<h3 id="Iterator">Iterator</h3> - -<ul> - <li>{{jsxref("Global_Objects/StopIteration", "StopIteration")}} is deprecated.</li> - <li>{{jsxref("Global_Objects/Iterator", "Iterator")}} is deprecated.</li> -</ul> - -<h3 id="Object_methods">Object methods</h3> - -<ul> - <li>{{jsxref("Object.watch", "watch")}} and {{jsxref("Object.unwatch", "unwatch")}} are deprecated. Use {{jsxref("Proxy")}} instead.</li> - <li><code>__iterator__</code> is deprecated.</li> - <li>{{jsxref("Object.noSuchMethod", "__noSuchMethod__")}} is deprecated. Use {{jsxref("Proxy")}} instead.</li> -</ul> - -<h3 id="Date_methods">Date methods</h3> - -<ul> - <li>{{jsxref("Global_Objects/Date/getYear", "getYear")}} and {{jsxref("Global_Objects/Date/setYear", "setYear")}} are affected by the Year-2000-Problem and have been subsumed by {{jsxref("Global_Objects/Date/getFullYear", "getFullYear")}} and {{jsxref("Global_Objects/Date/setFullYear", "setFullYear")}}.</li> - <li>You should use {{jsxref("Global_Objects/Date/toISOString", "toISOString")}} instead of the deprecated {{jsxref("Global_Objects/Date/toGMTString", "toGMTString")}} method in new code.</li> - <li>{{jsxref("Global_Objects/Date/toLocaleFormat", "toLocaleFormat")}} is deprecated.</li> -</ul> - -<h3 id="Functions">Functions</h3> - -<ul> - <li>{{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}} are deprecated. Use regular {{jsxref("Operators/function", "functions")}} or {{jsxref("Functions/Arrow_functions", "arrow functions", "", 1)}} instead.</li> -</ul> - -<h3 id="Proxy">Proxy</h3> - -<ul> - <li><a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.create</a> and <a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.createFunction</a> are deprecated. Use {{jsxref("Proxy")}} instead.</li> - <li>The following traps are obsolete: - <ul> - <li><code>hasOwn</code> ({{bug(980565)}}, Firefox 33).</li> - <li><code>getEnumerablePropertyKeys</code> ({{bug(783829)}}, Firefox 37)</li> - <li><code>getOwnPropertyNames</code> ({{bug(1007334)}}, Firefox 33)</li> - <li><code>keys</code> ({{bug(1007334)}}, Firefox 33)</li> - </ul> - </li> -</ul> - -<h3 id="Escape_sequences">Escape sequences</h3> - -<ul> - <li>Octal escape sequences (\ followed by one, two, or three octal digits) are deprecated in string and regular expression literals.</li> - <li>The {{jsxref("Global_Objects/escape", "escape")}} and {{jsxref("Global_Objects/unescape", "unescape")}} functions are deprecated. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}}, {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}}, {{jsxref("Global_Objects/decodeURI", "decodeURI")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} to encode and decode escape sequences for special characters.</li> -</ul> - -<h3 id="String_methods">String methods</h3> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/tag/HTML%20wrapper%20methods">HTML wrapper methods</a> like {{jsxref("String.prototype.fontsize")}} and {{jsxref("String.prototype.big")}}.</li> - <li>{{jsxref("String.prototype.quote")}} is removed from Firefox 37.</li> - <li>non standard <code>flags</code> parameter in {{jsxref("String.prototype.search")}}, {{jsxref("String.prototype.match")}}, and {{jsxref("String.prototype.replace")}} are deprecated.</li> -</ul> - -<h2 id="Obsolete_features">Obsolete features</h2> - -<p>These obsolete features have been entirely removed from JavaScript and can no longer be used as of the indicated version of JavaScript.</p> - -<h3 id="Object">Object</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Property</th> - <th>Description</th> - </tr> - <tr> - <td>{{jsxref("Global_Objects/Object/count", "__count__")}}</td> - <td>Returns the number of enumerable properties directly on a user-defined object.</td> - </tr> - <tr> - <td>{{jsxref("Global_Objects/Object/Parent", "__parent__")}}</td> - <td>Points to an object's context.</td> - </tr> - <tr> - <td>{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}</td> - <td>Evaluates a string of JavaScript code in the context of the specified object.</td> - </tr> - <tr> - <td>{{jsxref("Object.observe()")}}</td> - <td>Asynchronously observing the changes to an object.</td> - </tr> - <tr> - <td>{{jsxref("Object.unobserve()")}}</td> - <td>Remove observers.</td> - </tr> - <tr> - <td>{{jsxref("Object.getNotifier()")}}</td> - <td>Creates an object that allows to synthetically trigger a change.</td> - </tr> - </tbody> -</table> - -<h3 id="Function">Function</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Property</th> - <th>Description</th> - </tr> - <tr> - <td>{{jsxref("Global_Objects/Function/arity", "arity")}}</td> - <td>Number of formal arguments.</td> - </tr> - </tbody> -</table> - -<h3 id="Array">Array</h3> - -<table class="standard-table"> - <tbody> - <tr> - <td>Property</td> - <td>Description</td> - </tr> - <tr> - <td>{{jsxref("Array.observe()")}}</td> - <td>Asynchronously observing changes to Arrays.</td> - </tr> - <tr> - <td>{{jsxref("Array.unobserve()")}}</td> - <td>Remove observers.</td> - </tr> - </tbody> -</table> - -<h3 id="Number">Number</h3> - -<ul> - <li>{{jsxref("Number.toInteger()")}}</li> -</ul> - -<h3 id="ParallelArray">ParallelArray</h3> - -<ul> - <li>{{jsxref("ParallelArray")}}</li> -</ul> - -<h3 id="Statements">Statements</h3> - -<ul> - <li>{{jsxref("Statements/for_each...in", "for each...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.</li> - <li>Destructuring {{jsxref("Statements/for...in", "for...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.</li> - <li>let blocks and let expressions are obsolete.</li> -</ul> - -<h3 id="E4X">E4X</h3> - -<p>See <a href="/en-US/docs/Archive/Web/E4X">E4X</a> for more information.</p> - -<h3 id="Sharp_variables">Sharp variables</h3> - -<p>See <a href="/en-US/docs/Archive/Web/Sharp_variables_in_JavaScript">Sharp variables in JavaScript</a> for more information.</p> diff --git a/files/pl/web/javascript/reference/global_objects/escape/index.html b/files/pl/web/javascript/reference/global_objects/escape/index.html deleted file mode 100644 index 2fcf67431d..0000000000 --- a/files/pl/web/javascript/reference/global_objects/escape/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: escape() -slug: Web/JavaScript/Reference/Global_Objects/escape -translation_of: Web/JavaScript/Reference/Global_Objects/escape -original_slug: Web/JavaScript/Referencje/Obiekty/escape ---- -<div>{{jsSidebar("Objects")}}</div> - -<p>The deprecated <code><strong>escape()</strong></code> function computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use {{jsxref("encodeURI")}} or {{jsxref("encodeURIComponent")}} instead.</p> - -<h2 id="Składnia">Składnia</h2> - -<pre class="syntaxbox"><code>escape(str)</code></pre> - -<h3 id="Parametry">Parametry</h3> - -<dl> - <dt><code>str</code></dt> - <dd>A string to be encoded.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>The <code>escape</code> function is a property of the <em>global object</em>. Special characters are encoded with the exception of: @*_+-./</p> - -<p>The hexadecimal form for characters, whose code unit value is 0xFF or less, is a two-digit escape sequence: %xx. For characters with a greater code unit, the four-digit format %<strong>u</strong>xxxx is used.</p> - -<h2 id="Przykłady">Przykłady</h2> - -<pre class="brush: js">escape("abc123"); // "abc123" -escape("äöü"); // "%E4%F6%FC" -escape("ć"); // "%u0107" - -// znaki specjalne -escape("@*_+-./"); // "@*_+-./"</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-B.2.1', 'escape')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Defined in the (informative) Compatibility Annex B</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-escape-string', 'escape')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("encodeURI")}}</li> - <li>{{jsxref("encodeURIComponent")}}</li> -</ul> diff --git a/files/pl/web/javascript/reference/global_objects/generator/index.html b/files/pl/web/javascript/reference/global_objects/generator/index.html deleted file mode 100644 index a84467e7ca..0000000000 --- a/files/pl/web/javascript/reference/global_objects/generator/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Generator -slug: Web/JavaScript/Reference/Global_Objects/Generator -translation_of: Web/JavaScript/Reference/Global_Objects/Generator -original_slug: Web/JavaScript/Referencje/Obiekty/Generator ---- -<div>{{JSRef}}</div> - -<p>Obiekt <code><strong>Generator</strong></code> jest zwracany przez {{jsxref("Polecenia/function*", "generator function", "", 1)}} i odpowiada obu: <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable protocol</a> i <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">iterator protocol</a>.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">function* gen() { - yield 1; - yield 2; - yield 3; -} - -var g = gen(); // "Generator { }"</pre> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{jsxref("Generator.prototype.next()")}}</dt> - <dd>Returns a value yielded by the {{jsxref("Operators/yield", "yield")}} expression.</dd> - <dt>{{jsxref("Generator.prototype.return()")}}</dt> - <dd>Returns the given value and finishes the generator.</dd> - <dt>{{jsxref("Generator.prototype.throw()")}}</dt> - <dd>Throws an error to a generator.</dd> -</dl> - -<h2 id="Example">Example</h2> - -<h3 id="An_infinite_iterator">An infinite iterator</h3> - -<pre class="brush: js">function* idMaker() { - var index = 0; - while(true) - yield index++; -} - -var gen = idMaker(); // "Generator { }" - -console.log(gen.next().value); // 0 -console.log(gen.next().value); // 1 -console.log(gen.next().value); // 2 -// ...</pre> - -<h2 id="Legacy_generator_objects">Legacy generator objects</h2> - -<p>Firefox (SpiderMonkey) also implements an earlier version of generators in <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a>, where the star (*) in the function declaration was not necessary (you just use the <code>yield</code> keyword in the function body). However, legacy generators are deprecated. Do not use them; they are going to be removed ({{bug(1083482)}}).</p> - -<h3 id="Legacy_generator_methods">Legacy generator methods</h3> - -<dl> - <dt><code>Generator.prototype.next() </code>{{non-standard_inline}}</dt> - <dd>Returns a value yielded by the {{jsxref("Operatory/yield", "yield")}} expression. This corresponds to <code>next()</code> in the ES2015 generator object.</dd> - <dt><code>Generator.prototype.close()</code> {{non-standard_inline}}</dt> - <dd>Closes the generator, so that when calling <code>next()</code> an {{jsxref("StopIteration")}} error will be thrown. This corresponds to the <code>return()</code> method in the ES2015 generator object.</dd> - <dt><code>Generator.prototype.send()</code> {{non-standard_inline}}</dt> - <dd>Used to send a value to a generator. The value is returned from the {{jsxref("Operatory/yield", "yield")}} expression, and returns a value yielded by the next {{jsxref("Operatory/yield", "yield")}} expression. <code>send(x)</code> corresponds to <code>next(x)</code> in the ES2015 generator object.</dd> - <dt><strong><code>Generator.</code></strong><code>prototype.</code><strong><code>throw()</code> </strong> {{non-standard_inline}}</dt> - <dd>Throws an error to a generator. This corresponds to the <code>throw()</code> method in the ES2015 generator object.</dd> -</dl> - -<h3 id="Legacy_generator_example">Legacy generator example</h3> - -<pre class="brush: js">function fibonacci() { - var a = yield 1; - yield a * 2; -} - -var it = fibonacci(); -console.log(it); // "Generator { }" -console.log(it.next()); // 1 -console.log(it.send(10)); // 20 -console.log(it.close()); // undefined -console.log(it.next()); // throws StopIteration (as the generator is now closed) -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-generator-objects', 'Generator objects')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(39.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(39.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(39.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<h3 id="Legacy_generators">Legacy generators</h3> - -<ul> - <li>{{jsxref("Statements/Legacy_generator_function", "The legacy generator function", "", 1)}}</li> - <li>{{jsxref("Operators/Legacy_generator_function", "The legacy generator function expression", "", 1)}}</li> - <li>{{jsxref("StopIteration")}}</li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol">The legacy Iterator protocol</a></li> -</ul> - -<h3 id="ES2015_generators">ES2015 generators</h3> - -<ul> - <li>{{jsxref("Functions", "Functions", "", 1)}}</li> - <li>{{jsxref("Statements/function", "function")}}</li> - <li>{{jsxref("Operators/function", "function expression")}}</li> - <li>{{jsxref("Function")}}</li> - <li>{{jsxref("Statements/function*", "function*")}}</li> - <li>{{jsxref("Operators/function*", "function* expression")}}</li> - <li>{{jsxref("GeneratorFunction")}}</li> - <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> -</ul> diff --git a/files/pl/web/javascript/reference/global_objects/string/blink/index.html b/files/pl/web/javascript/reference/global_objects/string/blink/index.html deleted file mode 100644 index 7430744309..0000000000 --- a/files/pl/web/javascript/reference/global_objects/string/blink/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: String.prototype.blink() -slug: Web/JavaScript/Reference/Global_Objects/String/blink -tags: - - Deprecated - - JavaScript - - Method - - Prototype - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/blink -original_slug: Web/JavaScript/Referencje/Obiekty/String/blink ---- -<div>{{JSRef}} {{deprecated_header}}</div> - -<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> - -<p>Powoduje, iż łańcuch będzie migotał tak, jakby był on wewnątrz znacznika {{HTMLElement("blink")}}.</p> - -<div class="warning"> -<p><strong>Warning:</strong> Blinking text is frowned upon by several accessibility standards. The <code><blink></code> element itself is non-standard and deprecated!</p> -</div> - -<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> - -<pre class="syntaxbox"><code><var>str</var>.blink()</code></pre> - -<h2 id="Opis" name="Opis">Opis</h2> - -<p>The <code>blink()</code> method embeds a string in a <code><blink></code> tag: <code>"<blink>str</blink>"</code>.</p> - -<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> - -<h3 id="Przyk.C5.82ad:_Zastosowanie_metody_string_do_zmiany_formatowania_.C5.82a.C5.84cucha_znak.C3.B3w" name="Przyk.C5.82ad:_Zastosowanie_metody_string_do_zmiany_formatowania_.C5.82a.C5.84cucha_znak.C3.B3w">Przykład: Zastosowanie <code>blink()</code></h3> - -<p>Następujący przykład stosuje metodę string do zmiany formatowania łańcucha znaków:</p> - -<pre class="brush: js">var worldString="Witaj, Świecie"; - -console.log(worldString.blink()); // <blink>Witaj, Świecie</blink> -console.log(worldString.bold()); // <bold>Witaj, Świecie</bold> -console.log(worldString.italics()); // <i>Witaj, Świecie</i> -console.log(worldString.strike()); // <s>Witaj, Świecie</s> -</pre> - -<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> - -<ul> - <li>{{jsxref("String.prototype.bold()")}}</li> - <li>{{jsxref("String.prototype.italics()")}}</li> - <li>{{jsxref("String.prototype.strike()")}}</li> -</ul> diff --git a/files/pl/web/javascript/reference/global_objects/string/fromcodepoint/index.html b/files/pl/web/javascript/reference/global_objects/string/fromcodepoint/index.html deleted file mode 100644 index 0a3bacc072..0000000000 --- a/files/pl/web/javascript/reference/global_objects/string/fromcodepoint/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: String.fromCodePoint() -slug: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint -translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint -original_slug: Web/JavaScript/Referencje/Obiekty/String/fromCodePoint ---- -<div>{{JSRef}}</div> - -<p>The static <strong><code>String.fromCodePoint()</code></strong> method returns a string created by using the specified sequence of code points.</p> - -<div>{{EmbedInteractiveExample("pages/js/string-fromcodepoint.html","shorter")}}</div> - - - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox notranslate">String<code>.fromCodePoint(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code><var>num1</var>, ..., <var>numN</var></code></dt> - <dd>A sequence of code points.</dd> -</dl> - -<h3 id="Return_value">Return value</h3> - -<p>A string created by using the specified sequence of code points.</p> - -<h3 id="Exceptions">Exceptions</h3> - -<ul> - <li>A {{jsxref("Errors/Not_a_codepoint", "RangeError")}} is thrown if an invalid Unicode code point is given (e.g. <code>"RangeError: NaN is not a valid code point"</code>).</li> -</ul> - -<h2 id="Description">Description</h2> - -<p>This method returns a string (and <em>not</em> a {{jsxref("String")}} object).</p> - -<p>Because <code>fromCodePoint()</code> is a static method of {{jsxref("String")}}, you must call it as <code>String.fromCodePoint()</code>, rather than as a method of a {{jsxref("String")}} object you created.</p> - -<h2 id="Polyfill">Polyfill</h2> - -<p>The <code>String.fromCodePoint()</code> method has been added to ECMAScript 2015 and may not be supported in all web browsers or environments yet.</p> - -<p>Use the code below for a polyfill:</p> - -<pre class="brush: js notranslate">if (!String.fromCodePoint) (function(stringFromCharCode) { - var fromCodePoint = function(_) { - var codeUnits = [], codeLen = 0, result = ""; - for (var index=0, len = arguments.length; index !== len; ++index) { - var codePoint = +arguments[index]; - // correctly handles all cases including `NaN`, `-Infinity`, `+Infinity` - // The surrounding `!(...)` is required to correctly handle `NaN` cases - // The (codePoint>>>0) === codePoint clause handles decimals and negatives - if (!(codePoint < 0x10FFFF && (codePoint>>>0) === codePoint)) - throw RangeError("Invalid code point: " + codePoint); - if (codePoint <= 0xFFFF) { // BMP code point - codeLen = codeUnits.push(codePoint); - } else { // Astral code point; split in surrogate halves - // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae - codePoint -= 0x10000; - codeLen = codeUnits.push( - (codePoint >> 10) + 0xD800, // highSurrogate - (codePoint % 0x400) + 0xDC00 // lowSurrogate - ); - } - if (codeLen >= 0x3fff) { - result += stringFromCharCode.apply(null, codeUnits); - codeUnits.length = 0; - } - } - return result + stringFromCharCode.apply(null, codeUnits); - }; - try { // IE 8 only supports `Object.defineProperty` on DOM elements - Object.defineProperty(String, "fromCodePoint", { - "value": fromCodePoint, "configurable": true, "writable": true - }); - } catch(e) { - String.fromCodePoint = fromCodePoint; - } -}(String.fromCharCode)); -</pre> - -<h2 id="Examples">Examples</h2> - -<h3 id="Using_fromCodePoint">Using <code>fromCodePoint()</code></h3> - -<p>Valid input:</p> - -<pre class="brush: js notranslate">String.fromCodePoint(42); // "*" -String.fromCodePoint(65, 90); // "AZ" -String.fromCodePoint(0x404); // "\u0404" == "Є" -String.fromCodePoint(0x2F804); // "\uD87E\uDC04" -String.fromCodePoint(194564); // "\uD87E\uDC04" -String.fromCodePoint(0x1D306, 0x61, 0x1D307); // "\uD834\uDF06a\uD834\uDF07" -</pre> - -<p>Invalid input:</p> - -<pre class="brush: js notranslate">String.fromCodePoint('_'); // RangeError -String.fromCodePoint(Infinity); // RangeError -String.fromCodePoint(-1); // RangeError -String.fromCodePoint(3.14); // RangeError -String.fromCodePoint(3e-2); // RangeError -String.fromCodePoint(NaN); // RangeError -</pre> - -<h3 id="Compared_to_fromCharCode">Compared to <code>fromCharCode()</code></h3> - -<p>{{jsxref("String.fromCharCode()")}} cannot return supplementary characters (i.e. code points <code>0x010000</code> – <code>0x10FFFF</code>) by specifying their code point. Instead, it requires the UTF-16 surrogate pair in order to return a supplementary character:</p> - -<pre class="brush: js notranslate">String.fromCharCode(0xD83C, 0xDF03); // Code Point U+1F303 "Night with -String.fromCharCode(55356, 57091); // Stars" == "\uD83C\uDF03" -</pre> - -<p><code>String.fromCodePoint()</code>, on the other hand, can return 4-byte supplementary characters, as well as the more common 2-byte BMP characters, by specifying their code point (which is equivalent to the UTF-32 code unit):</p> - -<pre class="brush: js notranslate">String.fromCodePoint(0x1F303); // or 127747 in decimal -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("javascript.builtins.String.fromCodePoint")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("String.fromCharCode()")}}</li> - <li>{{jsxref("String.prototype.charAt()")}}</li> - <li>{{jsxref("String.prototype.codePointAt()")}}</li> - <li>{{jsxref("String.prototype.charCodeAt()")}}</li> -</ul> diff --git a/files/pl/web/javascript/reference/global_objects/string/repeat/index.html b/files/pl/web/javascript/reference/global_objects/string/repeat/index.html deleted file mode 100644 index a6542a4bb7..0000000000 --- a/files/pl/web/javascript/reference/global_objects/string/repeat/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: String.prototype.repeat() -slug: Web/JavaScript/Reference/Global_Objects/String/repeat -translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat -original_slug: Web/JavaScript/Referencje/Obiekty/String/repeat ---- -<div>{{JSRef}}</div> - -<p>The <strong><code>repeat()</code></strong> method constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.</p> - -<h2 id="Składnia">Składnia</h2> - -<pre class="syntaxbox"><var>str</var>.repeat(<var>count</var>)</pre> - -<h3 id="Parametry">Parametry</h3> - -<dl> - <dt><code>count</code></dt> - <dd>An integer between 0 and +∞: [0, +∞), indicating the number of times to repeat the string in the newly-created string that is to be returned.</dd> -</dl> - -<h3 id="Zwracana_wartość">Zwracana wartość</h3> - -<p>A new string containing the specified number of copies of the given string.</p> - -<h3 id="Exceptions">Exceptions</h3> - -<ul> - <li>{{jsxref("Errors/Negative_repetition_count", "RangeError")}}: repeat count must be non-negative.</li> - <li>{{jsxref("Errors/Resulting_string_too_large", "RangeError")}}: repeat count must be less than infinity and not overflow maximum string size.</li> -</ul> - -<h2 id="Przykłady">Przykłady</h2> - -<pre class="brush: js">'abc'.repeat(-1); // RangeError -'abc'.repeat(0); // '' -'abc'.repeat(1); // 'abc' -'abc'.repeat(2); // 'abcabc' -'abc'.repeat(3.5); // 'abcabcabc' (count will be converted to integer) -'abc'.repeat(1/0); // RangeError - -({ toString: () => 'abc', repeat: String.prototype.repeat }).repeat(2); -// 'abcabc' (repeat() is a generic method) -</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>This method has been added to the ECMAScript 6 specification and may not be available in all JavaScript implementations yet. However, you can polyfill <code>String.prototype.repeat()</code> with the following snippet:</p> - -<pre class="brush: js">if (!String.prototype.repeat) { - String.prototype.repeat = function(count) { - 'use strict'; - if (this == null) { - throw new TypeError('can\'t convert ' + this + ' to object'); - } - var str = '' + this; - count = +count; - if (count != count) { - count = 0; - } - if (count < 0) { - throw new RangeError('repeat count must be non-negative'); - } - if (count == Infinity) { - throw new RangeError('repeat count must be less than infinity'); - } - count = Math.floor(count); - if (str.length == 0 || count == 0) { - return ''; - } - // Ensuring count is a 31-bit integer allows us to heavily optimize the - // main part. But anyway, most current (August 2014) browsers can't handle - // strings 1 << 28 chars or longer, so: - if (str.length * count >= 1 << 28) { - throw new RangeError('repeat count must not overflow maximum string size'); - } - var rpt = ''; - for (;;) { - if ((count & 1) == 1) { - rpt += str; - } - count >>>= 1; - if (count == 0) { - break; - } - str += str; - } - // Could we try: - // return Array(count + 1).join(this); - return rpt; - } -} -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome("41")}} </td> - <td>{{CompatGeckoDesktop("24")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatSafari("9")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome("36")}}</td> - <td>{{CompatGeckoMobile("24")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/pl/web/javascript/reference/global_objects/uint16array/index.html b/files/pl/web/javascript/reference/global_objects/uint16array/index.html deleted file mode 100644 index 759ad9d56e..0000000000 --- a/files/pl/web/javascript/reference/global_objects/uint16array/index.html +++ /dev/null @@ -1,225 +0,0 @@ ---- -title: Uint16Array -slug: Web/JavaScript/Reference/Global_Objects/Uint16Array -translation_of: Web/JavaScript/Reference/Global_Objects/Uint16Array -original_slug: Web/JavaScript/Referencje/Obiekty/Uint16Array ---- -<div>{{JSRef("Global_Objects", "TypedArray", "Int8Array,Uint8Array,Uint8ClampedArray,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array")}}</div> - -<h2 id="Summary">Summary</h2> - -<p>The <strong><code>Uint16Array</code></strong> typed array represents an array of 16-bit unsigned integers in the platform byte order. If control over byte order is needed, use {{jsxref("DataView")}} instead. The contents are initialized to <code>0</code>. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">Uint16Array(length); -Uint16Array(typedArray); -Uint16Array(object); -Uint16Array(buffer [, byteOffset [, length]]);</pre> - -<p>For more information about the constructor syntax and the parameters, see <em><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax">TypedArray</a></em>.</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint16Array.BYTES_PER_ELEMENT")}}</dt> - <dd>Returns a number value of the element size. <code>2</code> in the case of an <code>Uint16Array</code>.</dd> - <dt>Uint16Array.length</dt> - <dd>Length property whose value is 3.</dd> - <dt>{{jsxref("TypedArray.name", "Uint16Array.name")}}</dt> - <dd>Returns the string value of the constructor name. In the case of the <code>Uint16Array</code> type: "Uint16Array".</dd> - <dt>{{jsxref("TypedArray.prototype", "Uint16Array.prototype")}}</dt> - <dd>Prototype for the <em>TypedArray</em> objects.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{jsxref("TypedArray.from", "Uint16Array.from()")}}</dt> - <dd>Creates a new <code>Uint16Array</code> from an array-like or iterable object. See also {{jsxref("Array.from()")}}.</dd> - <dt>{{jsxref("TypedArray.of", "Uint16Array.of()")}}</dt> - <dd>Creates a new <code>Uint16Array</code> with a variable number of arguments. See also {{jsxref("Array.of()")}}.</dd> -</dl> - -<h2 id="Boolean_instances" name="Boolean_instances"><code>Uint16Array</code> prototype</h2> - -<p>All <code>Uint16Array</code> objects inherit from {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p> - -<h3 id="Properties_2">Properties</h3> - -<dl> - <dt><code>Uint16Array.prototype.constructor</code></dt> - <dd>Returns the function that created an instance's prototype. This is the <code>Uint16Array</code> constructor by default.</dd> - <dt>{{jsxref("TypedArray.prototype.buffer", "Uint16Array.prototype.buffer")}} {{readonlyInline}}</dt> - <dd>Returns the {{jsxref("ArrayBuffer")}} referenced by the <code>Uint16Array</code> Fixed at construction time and thus <strong>read only</strong>.</dd> - <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint16Array.prototype.byteLength")}} {{readonlyInline}}</dt> - <dd>Returns the length (in bytes) of the <code>Uint16Array</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd> - <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint16Array.prototype.byteOffset")}} {{readonlyInline}}</dt> - <dd>Returns the offset (in bytes) of the <code>Uint16Array</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd> - <dt>{{jsxref("TypedArray.prototype.length", "Uint16Array.prototype.length")}} {{readonlyInline}}</dt> - <dd>Returns the number of elements hold in the <code>Uint16Array</code>. Fixed at construction time and thus <strong>read only.</strong></dd> -</dl> - -<h3 id="Methods_2">Methods</h3> - -<dl> - <dt>{{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}</dt> - <dd>Copies a sequence of array elements within the array. See also {{jsxref("Array.prototype.copyWithin()")}}.</dd> - <dt>{{jsxref("TypedArray.entries", "Uint16Array.prototype.entries()")}}</dt> - <dd>Returns a new <code>Array Iterator</code> object that contains the key/value pairs for each index in the array. See also {{jsxref("Array.prototype.entries()")}}.</dd> - <dt>{{jsxref("TypedArray.every", "Uint16Array.prototype.every()")}}</dt> - <dd>Tests whether all elements in the array pass the test provided by a function. See also {{jsxref("Array.prototype.every()")}}.</dd> - <dt>{{jsxref("TypedArray.fill", "Uint16Array.prototype.fill()")}}</dt> - <dd>Fills all the elements of an array from a start index to an end index with a static value. See also {{jsxref("Array.prototype.fill()")}}.</dd> - <dt>{{jsxref("TypedArray.filter", "Uint16Array.prototype.filter()")}}</dt> - <dd>Creates a new array with all of the elements of this array for which the provided filtering function returns true. See also {{jsxref("Array.prototype.filter()")}}.</dd> - <dt>{{jsxref("TypedArray.find", "Uint16Array.prototype.find()")}}</dt> - <dd>Returns the found value in the array, if an element in the array satisfies the provided testing function or <code>undefined</code> if not found. See also {{jsxref("Array.prototype.find()")}}.</dd> - <dt>{{jsxref("TypedArray.findIndex", "Uint16Array.prototype.findIndex()")}}</dt> - <dd>Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found. See also {{jsxref("Array.prototype.findIndex()")}}.</dd> - <dt>{{jsxref("TypedArray.forEach", "Uint16Array.prototype.forEach()")}}</dt> - <dd>Calls a function for each element in the array. See also {{jsxref("Array.prototype.forEach()")}}.</dd> - <dt>{{jsxref("TypedArray.includes", "Uint16Array.prototype.includes()")}} {{experimental_inline}}</dt> - <dd>Determines whether a typed array includes a certain element, returning <code>true</code> or <code>false</code> as appropriate. See also {{jsxref("Array.prototype.includes()")}}.</dd> - <dt>{{jsxref("TypedArray.indexOf", "Uint16Array.prototype.indexOf()")}}</dt> - <dd>Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.indexOf()")}}.</dd> - <dt>{{jsxref("TypedArray.join", "Uint16Array.prototype.join()")}}</dt> - <dd>Joins all elements of an array into a string. See also {{jsxref("Array.prototype.join()")}}.</dd> - <dt>{{jsxref("TypedArray.keys", "Uint16Array.prototype.keys()")}}</dt> - <dd>Returns a new <code>Array Iterator</code> that contains the keys for each index in the array. See also {{jsxref("Array.prototype.keys()")}}.</dd> - <dt>{{jsxref("TypedArray.lastIndexOf", "Uint16Array.prototype.lastIndexOf()")}}</dt> - <dd>Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.lastIndexOf()")}}.</dd> - <dt>{{jsxref("TypedArray.map", "Uint16Array.prototype.map()")}}</dt> - <dd>Creates a new array with the results of calling a provided function on every element in this array. See also {{jsxref("Array.prototype.map()")}}.</dd> - <dt>{{jsxref("TypedArray.move", "Uint16Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt> - <dd>Former non-standard version of {{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}.</dd> - <dt>{{jsxref("TypedArray.reduce", "Uint16Array.prototype.reduce()")}}</dt> - <dd>Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduce()")}}.</dd> - <dt>{{jsxref("TypedArray.reduceRight", "Uint16Array.prototype.reduceRight()")}}</dt> - <dd>Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduceRight()")}}.</dd> - <dt>{{jsxref("TypedArray.reverse", "Uint16Array.prototype.reverse()")}}</dt> - <dd>Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first. See also {{jsxref("Array.prototype.reverse()")}}.</dd> - <dt>{{jsxref("TypedArray.set", "Uint16Array.prototype.set()")}}</dt> - <dd>Stores multiple values in the typed array, reading input values from a specified array.</dd> - <dt>{{jsxref("TypedArray.slice", "Uint16Array.prototype.slice()")}}</dt> - <dd>Extracts a section of an array and returns a new array. See also {{jsxref("Array.prototype.slice()")}}.</dd> - <dt>{{jsxref("TypedArray.some", "Uint16Array.prototype.some()")}}</dt> - <dd>Returns true if at least one element in this array satisfies the provided testing function. See also {{jsxref("Array.prototype.some()")}}.</dd> - <dt>{{jsxref("TypedArray.sort", "Uint16Array.prototype.sort()")}}</dt> - <dd>Sorts the elements of an array in place and returns the array. See also {{jsxref("Array.prototype.sort()")}}.</dd> - <dt>{{jsxref("TypedArray.subarray", "Uint16Array.prototype.subarray()")}}</dt> - <dd>Returns a new <code>Uint16Array</code> from the given start and end element index.</dd> - <dt>{{jsxref("TypedArray.values", "Uint16Array.prototype.values()")}}</dt> - <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array. See also {{jsxref("Array.prototype.values()")}}.</dd> - <dt>{{jsxref("TypedArray.toLocaleString", "Uint16Array.prototype.toLocaleString()")}}</dt> - <dd>Returns a localized string representing the array and its elements. See also {{jsxref("Array.prototype.toLocaleString()")}}.</dd> - <dt>{{jsxref("TypedArray.toString", "Uint16Array.prototype.toString()")}}</dt> - <dd>Returns a string representing the array and its elements. See also {{jsxref("Array.prototype.toString()")}}.</dd> - <dt>{{jsxref("TypedArray.@@iterator", "Uint16Array.prototype[@@iterator]()")}}</dt> - <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<pre class="brush: js">// From a length -var uint16 = new Uint16Array(2); -uint16[0] = 42; -console.log(uint16[0]); // 42 -console.log(uint16.length); // 2 -console.log(uint16.BYTES_PER_ELEMENT); // 2 - -// From an array -var arr = new Uint16Array([21,31]); -console.log(arr[1]); // 31 - -// From another TypedArray -var x = new Uint16Array([21, 31]); -var y = new Uint16Array(x); -console.log(y[0]); // 21 - -// From an ArrayBuffer -var buffer = new ArrayBuffer(8); -var z = new Uint16Array(buffer, 0, 4); -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td><a href="https://www.khronos.org/registry/typedarray/specs/latest/#7">Typed Array Specification</a></td> - <td>Obsolete</td> - <td><span><span>Superseded by ECMAScript 6.</span></span></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#table-45', 'TypedArray constructors')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition in an ECMA standard.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>7.0</td> - <td>{{ CompatGeckoDesktop("2") }}</td> - <td>10</td> - <td>11.6</td> - <td>5.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>4.0</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoMobile("2") }}</td> - <td>10</td> - <td>11.6</td> - <td>4.2</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li> - <li>{{jsxref("ArrayBuffer")}}</li> - <li>{{jsxref("DataView")}}</li> -</ul> diff --git a/files/pl/web/javascript/reference/operators/instanceof/index.html b/files/pl/web/javascript/reference/operators/instanceof/index.html deleted file mode 100644 index bd98d29e0f..0000000000 --- a/files/pl/web/javascript/reference/operators/instanceof/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Operator instanceof -slug: Web/JavaScript/Reference/Operators/instanceof -tags: - - Dokumentacja_JavaScript - - Dokumentacje - - JavaScript - - Strony_wymagające_dopracowania - - Wszystkie_kategorie -translation_of: Web/JavaScript/Reference/Operators/instanceof -original_slug: Web/JavaScript/Referencje/Operatory/Operator_instanceof ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>Operator</strong> <strong><code>instanceof</code> </strong>sprawdza czy właściwość konstruktora <code>prototype</code> pojawia się gdziekolwiek w łańcuchu prototypowym obiektu.</p> - -<p>{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}</p> - - - -<h2 id="Składnia">Składnia</h2> - -<pre class="syntaxbox"><em>object</em> instanceof <em>constructor</em></pre> - -<dl> - <dt> - <h3 id="Parametry">Parametry</h3> - <code>object</code></dt> - <dd>Obiekt do testowania.</dd> -</dl> - -<dl> - <dt><code>constructor</code></dt> - <dd>Funkcja przeciwko której testujemy.</dd> -</dl> - -<h2 id="Opis">Opis</h2> - -<p>Operator <code>instanceof</code> sprawdza obecność <code>constructor.prototype</code> w łańcuchu prototypowym obiektu <code>object</code></p> - -<pre class="brush: js">// definiowanie konstruktorów -function C() {} -function D() {} - -var o = new C(); - -// true, ponieważ: Object.getPrototypeOf(o) === C.prototype -o instanceof C; - -// false, ponieważ D.prototype nie występuje w łańcuchu prototypowym o. -o instanceof D; - -o instanceof Object; // true, ponieważ: -C.prototype instanceof Object // true - -C.prototype = {}; -var o2 = new C(); - -o2 instanceof C; // true - -// false, ponieważ C.prototype nie ma już w łańcuchu prototypowym o -o instanceof C; - -D.prototype = new C(); // add C to [[Prototype]] linkage of D -var o3 = new D(); -o3 instanceof D; // true -o3 instanceof C; // true since C.prototype is now in o3's prototype chain -</pre> - -<p>Note that the value of an <code>instanceof</code> test can change based on changes to the <code>prototype</code> property of constructors, and it can also be changed by changing an object prototype using <code>Object.setPrototypeOf</code>. It is also possible using the non-standard <code>__proto__</code> pseudo-property.</p> - -<h3 id="instanceof_and_multiple_context_(e.g._frames_or_windows)"><code>instanceof</code> and multiple context (e.g. frames or windows)</h3> - -<p>Different scopes have different execution environments. This means that they have different built-ins (different global object, different constructors, etc.). This may result in unexpected results. For instance, <code>[] instanceof window.frames[0].Array</code> will return <code>false</code>, because <code>Array.prototype !== </code><code>window.frames[0].Array</code> and arrays inherit from the former.</p> - -<p>This may not make sense at first but when you start dealing with multiple frames or windows in your script and pass objects from one context to another via functions, this will be a valid and strong issue. For instance, you can securely check if a given object is, in fact, an Array using <code>Array.isArray(myObj)</code></p> - -<p>For example checking if a <a href="/en-US/docs/Web/API/Node">Nodes</a> is a <a href="/en-US/docs/Web/API/SVGElement">SVGElement</a> in a different context you can use <code>myNode instanceof myNode.ownerDocument.defaultView.SVGElement</code></p> - -<div class="note"><strong>Note for Mozilla developers:</strong><br> -In code using XPCOM <code>instanceof</code> has special effect: <code>obj instanceof </code><em><code>xpcomInterface</code></em> (e.g. <code>Components.interfaces.nsIFile</code>) calls <code>obj.QueryInterface(<em>xpcomInterface</em>)</code> and returns <code>true</code> if QueryInterface succeeded. A side effect of such call is that you can use <em><code>xpcomInterface</code></em>'s properties on <code>obj</code> after a successful <code>instanceof</code> test. Unlike standard JavaScript globals, the test <code>obj instanceof xpcomInterface</code> works as expected even if <code>obj</code> is from a different scope.</div> - -<h2 id="Examples">Examples</h2> - -<h3 id="Demonstrating_that_String_and_Date_are_of_type_Object_and_exceptional_cases">Demonstrating that <code>String</code> and <code>Date</code> are of type <code>Object</code> and exceptional cases</h3> - -<p>The following code uses <code>instanceof</code> to demonstrate that <code>String</code> and <code>Date</code> objects are also of type <code>Object</code> (they are derived from <code>Object</code>).</p> - -<p>However, objects created with the object literal notation are an exception here: Although the prototype is undefined, <code>instanceof Object</code> returns <code>true</code>.</p> - -<pre class="brush: js">var simpleStr = 'This is a simple string'; -var myString = new String(); -var newStr = new String('String created with constructor'); -var myDate = new Date(); -var myObj = {}; - -simpleStr instanceof String; // returns false, checks the prototype chain, finds undefined -myString instanceof String; // returns true -newStr instanceof String; // returns true -myString instanceof Object; // returns true - -myObj instanceof Object; // returns true, despite an undefined prototype -({}) instanceof Object; // returns true, same case as above - -myString instanceof Date; // returns false - -myDate instanceof Date; // returns true -myDate instanceof Object; // returns true -myDate instanceof String; // returns false -</pre> - -<h3 id="Demonstrating_that_mycar_is_of_type_Car_and_type_Object">Demonstrating that <code>mycar</code> is of type <code>Car</code> and type <code>Object</code></h3> - -<p>The following code creates an object type <code>Car</code> and an instance of that object type, <code>mycar</code>. The <code>instanceof</code> operator demonstrates that the <code>mycar</code> object is of type <code>Car</code> and of type <code>Object</code>.</p> - -<pre class="brush: js">function Car(make, model, year) { - this.make = make; - this.model = model; - this.year = year; -} -var mycar = new Car('Honda', 'Accord', 1998); -var a = mycar instanceof Car; // returns true -var b = mycar instanceof Object; // returns true -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-11.8.6', 'The instanceof operator')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Initial definition. Implemented in JavaScript 1.4.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.operators.instanceof")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof" title="/en-US/docs/JavaScript/Reference/Operators/typeof">typeof</a></code></li> - <li>{{jsxref("Symbol.hasInstance")}}</li> -</ul> diff --git a/files/pl/web/javascript/reference/operators/this/index.html b/files/pl/web/javascript/reference/operators/this/index.html deleted file mode 100644 index 427d3f843e..0000000000 --- a/files/pl/web/javascript/reference/operators/this/index.html +++ /dev/null @@ -1,347 +0,0 @@ ---- -title: this -slug: Web/JavaScript/Reference/Operators/this -translation_of: Web/JavaScript/Reference/Operators/this -original_slug: Web/JavaScript/Referencje/Operatory/this ---- -<div> -<div>{{jsSidebar("Operators")}}</div> -</div> - -<h2 id="Summary">Summary</h2> - -<p>W JavaScript słówko kluczowe <code>this</code> zachowuje się nieco inaczej w porównaniu do innych języków programowania. Istnieje również kilka różnic między trybem <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a> oraz non-strict mode.</p> - -<p>W większości przypadków wartość <code>this</code> jest ustalana na podstawie tego, jak wywołana została dana funkcja. Wartość ta nie może być przypisana podczas wykonywania się funkcji i może być inna za każdym wywołaniem. ES5 wprowadziło metodę <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a></code> dzięki której <a href="#The_bind_method">możemy przypisać wartość <code>this</code> w funkcji, niezależnie od tego jak została ona wywołana.</a></p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">this</pre> - -<h2 id="Global_context">Global context</h2> - -<p>In the global execution context (outside of any function), <code>this</code> refers to the global object, whether in strict mode or not.</p> - -<pre class="brush:js">console.log(this.document === document); // true - -// In web browsers, the window object is also the global object: -console.log(this === window); // true - -this.a = 37; -console.log(window.a); // 37 -</pre> - -<h2 id="Function_context">Function context</h2> - -<p>Inside a function, the value of <code>this</code> depends on how the function is called.</p> - -<h3 id="Simple_call">Simple call</h3> - -<pre class="brush:js">function f1(){ - return this; -} - -f1() === window; // global object -</pre> - -<p>In this case, the value of <code>this</code> is not set by the call. Since the code is not in strict mode, the value of <code>this</code> must always be an object so it defaults to the global object.</p> - -<pre class="brush:js">function f2(){ - "use strict"; // see strict mode - return this; -} - -f2() === undefined; -</pre> - -<p>In strict mode, the value of <code>this</code> remains at whatever it's set to when entering the execution context. If it's not defined, it remains undefined. It can also be set to any value, such as <code>null</code> or <code>42</code> or <code>"I am not this"</code>.</p> - -<div class="note"><strong>Note:</strong> In the second example, <code>this</code> should be <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>, because <code>f2</code> was called without providing any base (e.g. <code>window.f2()</code>). This feature wasn't implemented in some browsers when they first started to support <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="Strict mode">strict mode</a>. As a result, they incorrectly returned the <code>window</code> object.</div> - -<h3 id="As_an_object_method">As an object method</h3> - -<p>When a function is called as a method of an object, its <code>this</code> is set to the object the method is called on.</p> - -<p>In the following example, when <code>o.f()</code> is invoked, inside the function <code>this</code> is bound to the <code>o</code> object.</p> - -<pre class="brush:js">var o = { - prop: 37, - f: function() { - return this.prop; - } -}; - -console.log(o.f()); // logs 37 -</pre> - -<p>Note that this behavior is not at all affected by how or where the function was defined. In the previous example, we defined the function inline as the <code>f</code> member during the definition of <code>o</code>. However, we could have just as easily defined the function first and later attached it to <code>o.f</code>. Doing so results in the same behavior:</p> - -<pre class="brush:js">var o = {prop: 37}; - -function independent() { - return this.prop; -} - -o.f = independent; - -console.log(o.f()); // logs 37 -</pre> - -<p>This demonstrates that it matters only that the function was invoked from the <code>f</code> member of <code>o</code>.</p> - -<p>Similarly, the <code>this</code> binding is only affected by the most immediate member reference. In the following example, when we invoke the function, we call it as a method <code>g</code> of the object <code>o.b</code>. This time during execution, <code>this</code> inside the function will refer to <code>o.b</code>. The fact that the object is itself a member of <code>o</code> has no consequence; the most immediate reference is all that matters.</p> - -<pre class="brush:js">o.b = {g: independent, prop: 42}; -console.log(o.b.g()); // logs 42 -</pre> - -<h4 id="this_on_the_objects_prototype_chain"><code>this</code> on the object's prototype chain</h4> - -<p>The same notion holds true for methods defined somewhere on the object's prototype chain. If the method is on an object's prototype chain, <code>this</code> refers to the object the method was called on, as if the method was on the object.</p> - -<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }}; -var p = Object.create(o); -p.a = 1; -p.b = 4; - -console.log(p.f()); // 5 -</pre> - -<p>In this example, the object assigned to the variable <code>p</code> doesn't have its own <code>f</code> property, it inherits it from its prototype. But it doesn't matter that the lookup for <code>f</code> eventually finds a member with that name on <code>o</code>; the lookup began as a reference to <code>p.f</code>, so <code>this</code> inside the function takes the value of the object referred to as <code>p</code>. That is, since <code>f</code> is called as a method of <code>p</code>, its <code>this</code> refers to <code>p</code>. This is an interesting feature of JavaScript's prototype inheritance.</p> - -<h4 id="this_with_a_getter_or_setter"><code>this</code> with a getter or setter</h4> - -<p>Again, the same notion holds true when a function is invoked from a getter or a setter. A function used as getter or setter has its <code>this</code> bound to the object from which the property is being set or gotten.</p> - -<pre class="brush:js">function modulus(){ - return Math.sqrt(this.re * this.re + this.im * this.im); -} - -var o = { - re: 1, - im: -1, - get phase(){ - return Math.atan2(this.im, this.re); - } -}; - -Object.defineProperty(o, 'modulus', { - get: modulus, enumerable:true, configurable:true}); - -console.log(o.phase, o.modulus); // logs -0.78 1.4142 -</pre> - -<h3 id="As_a_constructor">As a constructor</h3> - -<p>When a function is used as a constructor (with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword), its <code>this</code> is bound to new object being constructed.</p> - -<p>Note: while the default for a constructor is to return the object referenced by <code>this</code>, it can instead return some other object (if the return value isn't an object, then the <code>this</code> object is returned).</p> - -<pre class="brush:js">/* - * Constructors work like this: - * - * function MyConstructor(){ - * // Actual function body code goes here. - * // Create properties on |this| as - * // desired by assigning to them. E.g., - * this.fum = "nom"; - * // et cetera... - * - * // If the function has a return statement that - * // returns an object, that object will be the - * // result of the |new| expression. Otherwise, - * // the result of the expression is the object - * // currently bound to |this| - * // (i.e., the common case most usually seen). - * } - */ - -function C(){ - this.a = 37; -} - -var o = new C(); -console.log(o.a); // logs 37 - - -function C2(){ - this.a = 37; - return {a:38}; -} - -o = new C2(); -console.log(o.a); // logs 38 -</pre> - -<p>In the last example (<code>C2</code>), because an object was returned during construction, the new object that <code>this</code> was bound to simply gets discarded. (This essentially makes the statement "<code>this.a = 37;</code>" dead code. It's not exactly dead, because it gets executed, but it can be eliminated with no outside effects.)</p> - -<h3 id="call_and_apply"><code>call</code> and <code>apply</code></h3> - -<p>Where a function uses the <code>this</code> keyword in its body, its value can be bound to a particular object in the call using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a></code> or <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a></code> methods that all functions inherit from <code>Function.prototype</code>.</p> - -<pre class="brush:js">function add(c, d){ - return this.a + this.b + c + d; -} - -var o = {a:1, b:3}; - -// The first parameter is the object to use as -// 'this', subsequent parameters are passed as -// arguments in the function call -add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 - -// The first parameter is the object to use as -// 'this', the second is an array whose -// members are used as the arguments in the function call -add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 -</pre> - -<p>Note that with <code>call</code> and <code>apply</code>, if the value passed as <code>this</code> is not an object, an attempt will be made to convert it to an object using the internal <code>ToObject</code> operation. So if the value passed is a primitive like <code>7</code> or <code>'foo'</code>, it will be converted to an Object using the related constructor, so the primitive number <code>7</code> is converted to an object as if by <code>new Number(7)</code> and the string <code>'foo'</code> to an object as if by <code>new String('foo'), e.g.</code></p> - -<pre class="brush:js">function bar() { - console.log(Object.prototype.toString.call(this)); -} - -bar.call(7); // [object Number] -</pre> - -<h3 id="The_bind_method">The <code>bind</code> method</h3> - -<p>ECMAScript 5 introduced <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind</a></code>. Calling <code>f.bind(someObject)</code> creates a new function with the same body and scope as <code>f</code>, but where <code>this</code> occurs in the original function, in the new function it is permanently bound to the first argument of <code>bind</code>, regardless of how the function is being used.</p> - -<pre class="brush:js">function f(){ - return this.a; -} - -var g = f.bind({a:"azerty"}); -console.log(g()); // azerty - -var o = {a:37, f:f, g:g}; -console.log(o.f(), o.g()); // 37, azerty -</pre> - -<h3 id="As_a_DOM_event_handler">As a DOM event handler</h3> - -<p>When a function is used as an event handler, its <code>this</code> is set to the element the event fired from (some browsers do not follow this convention for listeners added dynamically with methods other than <code>addEventListener</code>).</p> - -<pre class="brush:js">// When called as a listener, turns the related element blue -function bluify(e){ - // Always true - console.log(this === e.currentTarget); - // true when currentTarget and target are the same object - console.log(this === e.target); - this.style.backgroundColor = '#A5D9F3'; -} - -// Get a list of every element in the document -var elements = document.getElementsByTagName('*'); - -// Add bluify as a click listener so when the -// element is clicked on, it turns blue -for(var i=0 ; i<elements.length ; i++){ - elements[i].addEventListener('click', bluify, false); -}</pre> - -<h3 id="In_an_in–line_event_handler">In an in–line event handler</h3> - -<p>When code is called from an in–line handler, its <code>this</code> is set to the DOM element on which the listener is placed:</p> - -<pre class="brush:js"><button onclick="alert(this.tagName.toLowerCase());"> - Show this -</button> -</pre> - -<p>The above alert shows <code>button</code>. Note however that only the outer code has its <code>this</code> set this way:</p> - -<pre class="brush:js"><button onclick="alert((function(){return this}()));"> - Show inner this -</button> -</pre> - -<p>In this case, the inner function's <code>this</code> isn't set so it returns the global/window object (i.e. the default object in non–strict mode where <code>this</code> isn't set by the call).</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>ECMAScript 1st Edition.</td> - <td>Standard</td> - <td>Initial definition. Implemented in JavaScript 1.0</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-this-keyword', 'The this keyword')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li> - <li><a href="http://bjorn.tipling.com/all-this">All this</a>, an article about <code>this</code> in different contexts</li> -</ul> diff --git a/files/pl/web/javascript/reference/statements/throw/index.html b/files/pl/web/javascript/reference/statements/throw/index.html deleted file mode 100644 index d47ab9803b..0000000000 --- a/files/pl/web/javascript/reference/statements/throw/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: throw -slug: Web/JavaScript/Reference/Statements/throw -tags: - - Dokumentacja_JavaScript - - Dokumentacje - - JavaScript - - Strony_wymagające_dopracowania - - Wszystkie_kategorie -translation_of: Web/JavaScript/Reference/Statements/throw -original_slug: Web/JavaScript/Referencje/Polecenia/throw ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>The <strong><code>throw</code> statement</strong> throws a user-defined exception. Execution of the current function will stop (the statements after <code>throw</code> won't be executed), and control will be passed to the first <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>catch</code></a> block in the call stack. If no <code>catch</code> block exists among caller functions, the program will terminate.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-throw.html")}}</div> - - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">throw <em>expression</em>; </pre> - -<dl> - <dt><code>expression</code></dt> - <dd>The expression to throw.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>Use the <code>throw</code> statement to throw an exception. When you throw an exception, <code>expression</code> specifies the value of the exception. Each of the following throws an exception:</p> - -<pre class="brush: js">throw 'Error2'; // generates an exception with a string value -throw 42; // generates an exception with the value 42 -throw true; // generates an exception with the value true</pre> - -<p>Also note that the <code>throw</code> statement is affected by <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">automatic semicolon insertion (ASI)</a> as no line terminator between the <code>throw</code> keyword and the expression is allowed.</p> - -<h2 id="Examples">Examples</h2> - -<h3 id="Throw_an_object">Throw an object</h3> - -<p>You can specify an object when you throw an exception. You can then reference the object's properties in the <code>catch</code> block. The following example creates an object of type <code>UserException</code> and uses it in a <code>throw</code> statement.</p> - -<pre class="brush: js">function UserException(message) { - this.message = message; - this.name = 'UserException'; -} -function getMonthName(mo) { - mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec) - var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', - 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; - if (months[mo] !== undefined) { - return months[mo]; - } else { - throw new UserException('InvalidMonthNo'); - } -} - -try { - // statements to try - var myMonth = 15; // 15 is out of bound to raise the exception - var monthName = getMonthName(myMonth); -} catch (e) { - monthName = 'unknown'; - console.log(e.message, e.name); // pass exception object to err handler -} -</pre> - -<h3 id="Another_example_of_throwing_an_object">Another example of throwing an object</h3> - -<p>The following example tests an input string for a U.S. zip code. If the zip code uses an invalid format, the throw statement throws an exception by creating an object of type <code>ZipCodeFormatException</code>.</p> - -<pre class="brush: js">/* - * Creates a ZipCode object. - * - * Accepted formats for a zip code are: - * 12345 - * 12345-6789 - * 123456789 - * 12345 6789 - * - * If the argument passed to the ZipCode constructor does not - * conform to one of these patterns, an exception is thrown. - */ - -function ZipCode(zip) { - zip = new String(zip); - pattern = /[0-9]{5}([- ]?[0-9]{4})?/; - if (pattern.test(zip)) { - // zip code value will be the first match in the string - this.value = zip.match(pattern)[0]; - this.valueOf = function() { - return this.value - }; - this.toString = function() { - return String(this.value) - }; - } else { - throw new ZipCodeFormatException(zip); - } -} - -function ZipCodeFormatException(value) { - this.value = value; - this.message = 'does not conform to the expected format for a zip code'; - this.toString = function() { - return this.value + this.message; - }; -} - -/* - * This could be in a script that validates address data - * for US addresses. - */ - -const ZIPCODE_INVALID = -1; -const ZIPCODE_UNKNOWN_ERROR = -2; - -function verifyZipCode(z) { - try { - z = new ZipCode(z); - } catch (e) { - if (e instanceof ZipCodeFormatException) { - return ZIPCODE_INVALID; - } else { - return ZIPCODE_UNKNOWN_ERROR; - } - } - return z; -} - -a = verifyZipCode(95060); // returns 95060 -b = verifyZipCode(9560); // returns -1 -c = verifyZipCode('a'); // returns -1 -d = verifyZipCode('95060'); // returns 95060 -e = verifyZipCode('95060 1234'); // returns 95060 1234 -</pre> - -<h3 id="Rethrow_an_exception">Rethrow an exception</h3> - -<p>You can use <code>throw</code> to rethrow an exception after you catch it. The following example catches an exception with a numeric value and rethrows it if the value is over 50. The rethrown exception propagates up to the enclosing function or to the top level so that the user sees it.</p> - -<pre class="brush: js">try { - throw n; // throws an exception with a numeric value -} catch (e) { - if (e <= 50) { - // statements to handle exceptions 1-50 - } else { - // cannot handle this exception, so rethrow - throw e; - } -} -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Initial definition. Implemented in JavaScript 1.4</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.statements.throw")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a></li> -</ul> diff --git a/files/pl/web/javascript/typed_arrays/index.html b/files/pl/web/javascript/typed_arrays/index.html deleted file mode 100644 index b36127886f..0000000000 --- a/files/pl/web/javascript/typed_arrays/index.html +++ /dev/null @@ -1,274 +0,0 @@ ---- -title: Tablice reprezentujące typy JavaScript -slug: Web/JavaScript/Typed_arrays -translation_of: Web/JavaScript/Typed_arrays ---- -<div> -<div>{{JsSidebar("Advanced")}}</div> -</div> - -<p>Jako, że aplikacje internetowe stają się coraz bardziej potężne, zapewniając takie możliwości jak chociażby manipulacja audio i wideo, dostęp do surowych danych używając WebSocket, i tak dalej, stało się jasne, że są sytuacje, w których przydałoby się, żeby kod JavaScript był w stanie szybko i łatwo manipulować surowymi danymi binarnymi. W przeszłości, musiało być to symulowane przez traktowanie surowych danych jako <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="JavaScript/Reference/Global Objects/String">string</a> i używanie metody <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/charCodeAt" title="JavaScript/Reference/Global Objects/String/charCodeAt">charCodeAt()</a>,</code> aby przeczytać bajty z buforu danych.</p> - -<p>Jakkolwiek, jest to wolne i podatne na błędy, ze względu na potrzebę wielu konwersji (szczególnie jeśli dane binarne nie są tak naprawdę danymi w formacie bajtów, ale, na przykład, 32-bitowymi liczbami całkowitymi lub zmiennoprzecinkowymi).</p> - -<p>Tablice zawierające typy JavaScript zapewniają mechanizm dostępu do danych binarnych dużo bardziej wydajnie.</p> - -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="Documentation" name="Documentation">Dokumentacja</h2> - - <dl> - <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a></dt> - <dd>The <code>ArrayBuffer</code> is a data type that is used to represent a generic, fixed-length binary data buffer. You can't directly manipulate the contents of an <code>ArrayBuffer</code>; instead, you create an <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView" title="en/JavaScript typed arrays/ArrayBufferView"><code>ArrayBufferView</code></a> object which represents the buffer in a specific format, and use that to read and write the contents of the buffer.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView"><code>ArrayBufferView</code></a></dt> - <dd>The <code>ArrayBufferView</code> type describes a particular view on the contents of an <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer">ArrayBuffer</a>'s data. Of note is that you may create multiple views into the same buffer, each looking at the buffer's contents starting at a particular offset. This makes it possible to set up views of different data types to read the contents of a buffer based on the types of data at specific offsets into the buffer</dd> - <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays/DataView" title="/en-US/docs/Web/JavaScript/Typed_arrays/DataView"><code>DataView</code></a></dt> - <dd> - <p>The <code>DataView</code> view provides a low-level interface for reading data from and writing it to an <code><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer" title="en/JavaScript_typed_arrays/ArrayBuffer">ArrayBuffer</a></code>.</p> - </dd> - <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> <span class="inlineIndicator" style="font-weight: normal;" title="This API is not native.">Non native</span></dt> - <dd>In this article is published a library of ours whose aims are: - <ul> - <li>creating a <strong><a href="http://en.wikipedia.org/wiki/C_%28programming_language%29">C</a>-like interface for strings</strong> (i.e. array of characters codes — an<a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView"> <code>ArrayBufferView</code></a> in JavaScript) based upon the JavaScript <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> interface,</li> - <li>creating an <strong>highly scalable</strong> library, that anyone can extend by adding methods to the object <code>StringView.prototype</code>,</li> - <li>creating a collection of methods for such string-like objects (since now: <code>stringView</code>s) which <strong>work strictly on arrays of numbers</strong> rather than on creating new immutable JavaScript strings,</li> - <li><strong>working with other Unicode encodings</strong> different from default JavaScript's UTF-16 {{domxref("DOMString")}}s,</li> - </ul> - </dd> - <dt><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Getting <code>ArrayBuffer</code>s or typed arrays from <em>Base64</em>-encoded strings</a></dt> - <dd>Code snippets to get <code>ArrayBuffer</code>s or typed arrays from <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding" title="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding"><em>Base64</em>-encoded</a> strings.</dd> - <dt><a href="/en-US/docs/Web/API/FileReader#readAsArrayBuffer()" title="/en-US/docs/Web/API/FileReader#readAsArrayBuffer()"><code>FileReader.prototype.readAsArrayBuffer()</code></a></dt> - <dd>The <code>FileReader.prototype.readAsArrayBuffer()</code> method starts reading the contents of the specified <a href="/en-US/docs/Web/API/Blob" title="/en-US/docs/DOM/Blob"><code>Blob</code></a> or <a href="/en-US/docs/Web/API/File" title="/en-US/docs/DOM/File"><code>File</code></a>.</dd> - <dt><a href="/en-US/docs/Web/API/XMLHttpRequest#send()" title="/en-US/docs/Web/API/XMLHttpRequest#send()"><code>XMLHttpRequest.prototype.send()</code></a></dt> - <dd><code>XMLHttpRequest</code> instances' <code>send()</code> method now supports typed arrays and <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a>s as argument.</dd> - </dl> - - </td> - <td> - <h2 class="Community" id="Community" name="Community">Społeczność</h2> - - <ul> - <li>Zobacz forum Mozilla... {{ DiscussionList("dev-web-development", "mozilla.dev.web.development") }}</li> - </ul> - - <h2 class="Tools" id="Tools" name="Tools">Narzędzia</h2> - - <ul> - <li><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Getting <code>ArrayBuffer</code>s or typed arrays from <em>Base64</em>-encoded strings</a></li> - <li><a href="/en-US/docs/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li> - </ul> - - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Powiązane tematy</h2> - - <ul> - <li><a href="/en-US/docs/Web/API/File" title="/en-US/docs/DOM/File"><code>File</code></a></li> - <li><code><a href="/en-US/docs/Web/API/Blob" title="/en-US/docs/DOM/Blob">Blob</a></code></li> - </ul> - </td> - </tr> - </tbody> -</table> - -<h2 id="Bufory_i_widoki_struktura_tablic_reprezentujących_typy">Bufory i widoki: struktura tablic reprezentujących typy</h2> - -<p>To achieve maximum flexibility and efficiency, JavaScript typed arrays split the implementation into a <strong>buffer</strong> and a <strong>view</strong>. A buffer (implemented by the <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a> class) is an object representing a chunk of data; it has no format to speak of, and offers no mechanism for accessing its contents. In order to access the memory contained in a buffer, you need to use a view. A view provides a context—that is, a data type, starting offset, and number of elements—that turns the data into an actual typed array. Views are implemented by the <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBufferView" title="JavaScript typed arrays/ArrayBufferView"><code>ArrayBufferView</code></a> class and its subclasses.</p> - -<h2 id="Podklasy_tablic_reprezentujących_typy">Podklasy tablic reprezentujących typy</h2> - -<p>The following subclasses provide buffer views allowing access to the data in specific data types. Note that the classes that work with more than one byte (e.g. Int16Array) use the platform byte order. If control over byte order is needed, use DataView instead.</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Typ</td> - <td class="header">Rozmiar</td> - <td class="header">Opis</td> - <td class="header">Odpowiednik C</td> - </tr> - <tr> - <td><a href="/en/JavaScript_typed_arrays/Int8Array" title="en/JavaScript typed arrays/Int8Array"><code>Int8Array</code></a></td> - <td>1</td> - <td>8-bitowa liczba całkowita ze znakiem w zapisie dopełnienia do dwóch</td> - <td><code>signed char</code></td> - </tr> - <tr> - <td><code><a href="/en/JavaScript_typed_arrays/Uint8Array" title="en/JavaScript typed arrays/Uint8Array">Uint8Array</a></code></td> - <td>1</td> - <td>8-bitowa liczba całkowita bez znaku</td> - <td><code>unsigned char</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray" title="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray"><code>Uint8ClampedArray</code></a></td> - <td>1</td> - <td>8-bitowa liczba całkowita bez znaku</td> - <td><code>unsigned char</code></td> - </tr> - <tr> - <td><code><a href="/en/JavaScript_typed_arrays/Int16Array" title="en/JavaScript typed arrays/Int16Array">Int16Array</a></code></td> - <td>2</td> - <td>16-bitowa liczba całkowita ze znakiem w zapisie dopełnienia do dwóch</td> - <td><code>short</code></td> - </tr> - <tr> - <td><code><a href="/en/JavaScript_typed_arrays/Uint16Array" title="en/JavaScript typed arrays/Uint16Array">Uint16Array</a></code></td> - <td>2</td> - <td>16-bitowa liczba całkowita bez znaku</td> - <td><code>unsigned short</code></td> - </tr> - <tr> - <td><code><a href="/en/JavaScript_typed_arrays/Int32Array" title="en/JavaScript typed arrays/Int32Array">Int32Array</a></code></td> - <td>4</td> - <td>32-bitowa liczba całkowita ze znakiem w zapisie dopełnienia do dwóch</td> - <td><code>int</code></td> - </tr> - <tr> - <td><code><a href="/en/JavaScript_typed_arrays/Uint32Array" title="en/JavaScript typed arrays/Uint32Array">Uint32Array</a></code></td> - <td>4</td> - <td>32-bitowa liczba całkowita bez znaku</td> - <td><code>unsigned int</code></td> - </tr> - <tr> - <td><code><a href="/en/JavaScript_typed_arrays/Float32Array" title="en/JavaScript typed arrays/Float32Array">Float32Array</a></code></td> - <td>4</td> - <td>32-bitowa liczba zmiennoprzecinkowa IEEE</td> - <td><code>float</code></td> - </tr> - <tr> - <td><code><a href="/en/JavaScript_typed_arrays/Float64Array" title="en/JavaScript typed arrays/Float64Array">Float64Array</a></code></td> - <td>8</td> - <td>64-bitowa liczba zmiennoprzecinkowa IEEE</td> - <td><code>double</code></td> - </tr> - </tbody> -</table> - -<h2 id="Superklasy_tablic_reprezentujących_typy">Superklasy tablic reprezentujących typy</h2> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Typ</td> - <td class="header">Opis</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Typed_arrays/DataView" title="/en-US/docs/Web/JavaScript/Typed_arrays/DataView"><code>DataView</code></a></td> - <td>The <code>DataView</code> view provides a low-level interface for reading data from and writing it to an <code><a href="https://developer.mozilla.org/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript_typed_arrays/ArrayBuffer">ArrayBuffer</a></code>.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> <span class="inlineIndicator" title="This API is not native.">Non native</span></td> - <td>The <code>StringView</code> view provides a <strong><a class="external" href="http://en.wikipedia.org/wiki/C_%28programming_language%29">C</a>-like interface for strings</strong> (i.e. array of characters codes — an<a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView"> <code>ArrayBufferView</code></a> in JavaScript) based upon the JavaScript <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> interface,</td> - </tr> - </tbody> -</table> - -<h2 id="Używanie_widoków_z_buforami">Używanie widoków z buforami</h2> - -<p>Stwórzmy 16-bajtowy bufor:</p> - -<pre class="brush:js">var buffer = new ArrayBuffer(16); -</pre> - -<p>At this point, we have a chunk of memory whose bytes are all pre-initialized to 0. There's not a lot we can do with it, though. We can confirm that it is indeed 16 bytes long, and that's about it:</p> - -<pre class="brush:js">if (buffer.byteLength == 16) { - alert("Yes, it's 16 bytes."); -} else { - alert("Oh no, it's the wrong size!"); -} -</pre> - -<p>Before we can really work with this buffer, we need to create a view. Let's create a view that treats the data in the buffer as an array of 32-bit signed integers:</p> - -<pre class="brush:js">var int32View = new Int32Array(buffer); -</pre> - -<p>Now we can access the fields in the array just like a normal array:</p> - -<pre class="brush:js">for (var i=0; i<int32View.length; i++) { - int32View[i] = i*2; -} -</pre> - -<p>This fills out the 4 entries in the array (4 entries at 4 bytes each makes 16 total bytes) with the values 0, 2, 4, and 6.</p> - -<h3 id="Wiele_widoków_tych_samych_danych">Wiele widoków tych samych danych</h3> - -<p>Things start to get really interesting when you consider that you can create multiple views onto the same data. For example, given the code above, we can continue like this:</p> - -<pre class="brush:js">var int16View = new Int16Array(buffer); - -for (var i=0; i<int16View.length; i++) { - console.log("Entry " + i + ": " + int16View[i]); -} -</pre> - -<p>Here we create a 16-bit integer view that shares the same buffer as the existing 32-bit view and we output all the values in the buffer as 16-bit integers. Now we get the output 0, 0, 2, 0, 4, 0, 6, 0.</p> - -<p>You can go a step farther, though. Consider this:</p> - -<pre class="brush:js">int16View[0] = 32; -console.log("Entry 0 in the 32-bit array is now " + int32View[0]); -</pre> - -<p>The output from this is "Entry 0 in the 32-bit array is now 32". In other words, the two arrays are indeed simply views on the same data buffer, treating it as different formats. You can do this with any <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBufferView#Typed_array_subclasses" title="JavaScript typed arrays/ArrayBufferView#Typed array subclasses">view types</a>.</p> - -<h2 id="Praca_ze_złożonymi_strukturami_danych">Praca ze złożonymi strukturami danych</h2> - -<p>By combining a single buffer with multiple views of different types, starting at different offsets into the buffer, you can interact with data objects containing multiple data types. This lets you, for example, interact with complex data structures from <a href="/en-US/docs/WebGL" title="WebGL">WebGL</a>, data files, or C structures you need to use while using <a href="/en-US/docs/js-ctypes" title="js-ctypes">js-ctypes</a>.</p> - -<p>Rozważ tą strukturę C:</p> - -<pre class="brush:cpp">struct someStruct { - unsigned long id; - char username[16]; - float amountDue; -};</pre> - -<p>Możesz uzyskać dostęp do bufora zawierającego dane w tych formacie w ten sposób:</p> - -<pre class="brush:js">var buffer = new ArrayBuffer(24); - -// ... zczytaj dane do bufora ... - -var idView = new Uint32Array(buffer, 0, 1); -var usernameView = new Uint8Array(buffer, 4, 16); -var amountDueView = new Float32Array(buffer, 20, 1);</pre> - -<p>Potem możesz uzyskać dostęp, na przykład, do kwoty należnej używając <code>amountDueView[0]</code>.</p> - -<div class="note"><strong>Note:</strong> The <a href="http://en.wikipedia.org/wiki/Data_structure_alignment" title="http://en.wikipedia.org/wiki/Data_structure_alignment">data structure alignment</a> in a C structure is platform-dependent. Take precautions and considerations for these padding differences.</div> - -<h2 id="Konwersja_do_zwykłych_tablic">Konwersja do zwykłych tablic</h2> - -<p>After processing a typed array, it is sometimes useful to convert it back to a normal array in order to benefit from the <code>Array</code> prototype. Following is a way to do that.</p> - -<pre>var typedArray = new Uint8Array( [ 1, 2, 3, 4 ] ), - normalArray = Array.apply( [], typedArray ); -normalArray.length === 4; -normalArray.constructor === Array; -</pre> - -<h2 id="Kompatybilność">Kompatybilność</h2> - -<p>Typed arrays are available in WebKit as well. Chrome 7 includes support for <code>ArrayBuffer</code>, <code>Float32Array</code>, <code>Int16Array</code>, and <code>Uint8Array</code>. Chrome 9 and Firefox 15 add support for <code>DataView</code> objects. Internet Explorer 10 supports all types except <code>Uint8ClampedArray</code> and <code>ArrayBuffer.prototype.slice</code>.</p> - -<h2 id="Specyfikacja">Specyfikacja</h2> - -<ul> - <li><a class="link-https" href="http://www.khronos.org/registry/typedarray/specs/latest/">Typed Array Specification</a></li> -</ul> - -<h2 id="See_also" name="See_also">Zobacz także</h2> - -<ul> - <li><a href="/en-US/docs/JavaScript/Typed_arrays/Int8Array" title="Int8Array"><code>Int8Array</code></a>, <a href="/en-US/docs/JavaScript/Typed_arrays/Int16Array" title="Int8Array"><code>Int16Array</code></a>, <a href="/en-US/docs/JavaScript/Typed_arrays/Int32Array" title="Int8Array"><code>Int32Array</code></a></li> - <li><a href="/en-US/docs/JavaScript/Typed_arrays/Uint8Array" title="Uint8Array"><code>Uint8Array</code></a>, <a href="/en-US/docs/JavaScript/Typed_arrays/Uint16Array" title="Uint8Array"><code>Uint16Array</code></a>, <a href="/en-US/docs/JavaScript/Typed_arrays/Uint32Array" title="Uint8Array"><code>Uint32Array</code></a>, <a href="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray" title="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray"><code>Uint8ClampedArray</code></a></li> - <li><a href="/en-US/docs/JavaScript/Typed_arrays/Float32Array" title="Float32Array"><code>Float32Array</code></a>, <a href="/en-US/docs/JavaScript/Typed_arrays/Float64Array" title="Float64Array"><code>Float64Array</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/DataView" title="/en-US/docs/Web/JavaScript/Typed_arrays/DataView"><code>DataView</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Getting <code>ArrayBuffer</code>s or typed arrays from <em>Base64</em>-encoded strings</a></li> -</ul> - -<div id="cke_pastebin" style="position: absolute; top: 617.817px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> </div> diff --git a/files/pl/web/security/securing_your_site/index.html b/files/pl/web/security/securing_your_site/index.html deleted file mode 100644 index 59682ddf82..0000000000 --- a/files/pl/web/security/securing_your_site/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Securing your site -slug: Web/Security/Securing_your_site -tags: - - HTTP - - NeedsTranslation - - Security - - TopicStub - - Web Development - - Website Security -translation_of: Web/Security/Securing_your_site ---- -<p>{{ draft() }}</p> - -<p>There are a number of things you can do to help secure your site. This article offers an assortment of suggestions, as well as links to other articles providing more useful information.</p> - -<div class="note"><strong>Note:</strong> This article is a work in progress, and is neither complete nor does following its suggestions guarantee your site will be fully secure.</div> - -<h2 id="User_information_security">User information security</h2> - -<dl> - <dt><a href="/en/How_to_Turn_Off_Form_Autocompletion" title="en/How to Turn Off Form Autocompletion">How to turn off form autocompletion</a></dt> - <dd>Form fields support autocompletion in Gecko; that is, their values can be remembered and automatically brought back the next time the user visits your site. For certain types of data, you may wish to disable this feature.</dd> - <dt><a href="/en/CSS/Privacy_and_the_:visited_selector" title="en/CSS/Privacy and the :visited selector">Privacy and the :visited selector</a></dt> - <dd>This article discusses changes made to the <code>getComputedStyle()</code> method that eliminates the ability for malicious sites to figure out the user's browsing history.</dd> - <dt><a href="https://www.owasp.org/index.php/Password_Storage_Cheat_Sheet">Hash passwords using a secure algorithm</a> (OWASP)</dt> - <dd>Storing passwords in plain text can lead to attackers knowing and leaking the exact password of your site's users, potentially putting the users at risk. The same issues can arise if you use an old or insecure algorithm for hashing (such as md5). You should use a password-specific hashing algorithm (such as Argon2, PBKDF2, scrypt or bcrypt) instead of message digest algorithms (such as md5 and sha). This article showcases best practices to use when storing passwords.</dd> -</dl> - -<h2 id="Content_security">Content security</h2> - -<dl> - <dt><a href="/en/Properly_Configuring_Server_MIME_Types" title="en/Properly Configuring Server MIME Types">Properly configuring server MIME types</a></dt> - <dd>There are several ways incorrect MIME types can cause potential security problems with your site. This article explains some of those and shows how to configure your server to serve files with the correct MIME types.</dd> - <dt><a href="/en/Security/HTTP_Strict_Transport_Security" title="en/Security/HTTP Strict Transport Security">HTTP Strict Transport Security</a></dt> - <dd>The <code>Strict-Transport-Security:</code> <a href="/en/HTTP" title="en/HTTP">HTTP</a> header lets a website specify that it may only be accessed using HTTPS.</dd> - <dt><a href="/en-US/docs/Web/HTTP/CORS" title="En/HTTP access control">HTTP access control</a></dt> - <dd>The Cross-Origin Resource Sharing standard provides a way to specify what content may be loaded from other domains. You can use this to prevent your site from being used improperly; in addition, you can use it to establish resources that other sites are expressly permitted to use.</dd> - <dt><a href="/en/Security/CSP">Content Security Policy</a></dt> - <dd>An added layer of security that helps to detect and mitigate certain types of attacks, including {{Glossary("Cross-site_scripting", "Cross Site Scripting (XSS)")}} and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware. Code is executed by the victims and lets the attackers bypass access controls and impersonate users. According to the Open Web Application Security Project, XSS was the <a class="external external-icon" href="https://www.owasp.org/images/7/72/OWASP_Top_10-2017_%28en%29.pdf.pdf" rel="noopener">seventh most common Web app vulnerability</a> in 2017.</dd> - <dt><a href="/en-US/docs/Web/HTTP/X-Frame-Options">The X-Frame-Options response header</a></dt> - <dd> - <p>The <code>X-Frame-Options:</code> <a href="/en/HTTP" title="en/HTTP">HTTP</a> response header can be used to indicate whether or not a browser should be allowed to render a page in a {{ HTMLElement("frame") }}. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.</p> - </dd> - <dt>Securing Your Site using Htaccess</dt> - <dd>It is the best way to secure your site using the .htaccess file. You can blacklist IPs, restrict access to certain areas of website, protect different files, protect against image hotlinking, and a lot more.</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="external" href="https://www.owasp.org/">Open Web Application Security Project (OWASP)</a></li> -</ul> - -<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</div> |