From 037a4118c4324d39fdef8bd23f9dd21b02f50946 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Thu, 15 Jul 2021 13:01:50 -0400 Subject: delete pages that were never translated from en-US (pl, part 1) (#1549) --- files/pl/_redirects.txt | 53 -- files/pl/_wikihistory.json | 416 ----------- .../collision_detection/index.html | 129 ---- .../publishing_your_website/index.html | 124 ---- .../getting_started/index.html | 763 --------------------- .../learn/javascript/first_steps/math/index.html | 456 ------------ files/pl/learn/server-side/django/index.html | 70 -- .../client-side_javascript_frameworks/index.html | 147 ---- .../howto/create_and_edit_pages/index.html | 179 ----- files/pl/mdn/contribute/howto/tag/index.html | 376 ---------- .../mdn/guidelines/writing_style_guide/index.html | 557 --------------- files/pl/mdn/tools/index.html | 9 - .../add-ons/webextensions/api/privacy/index.html | 72 -- files/pl/tools/browser_toolbox/index.html | 41 -- files/pl/tools/performance/flame_chart/index.html | 104 --- files/pl/tools/storage_inspector/index.html | 207 ------ files/pl/tools/tools_toolbox/index.html | 114 --- files/pl/tools/view_source/index.html | 83 --- .../index.html | 172 ----- files/pl/web/api/audiocontext/index.html | 293 -------- files/pl/web/api/element/queryselector/index.html | 180 ----- .../pl/web/api/htmlelement/offsetheight/index.html | 62 -- files/pl/web/api/htmlselectelement/index.html | 164 ----- .../web/api/mediaelementaudiosourcenode/index.html | 84 --- files/pl/web/api/mousescrollevent/index.html | 126 ---- files/pl/web/api/node/nodetype/index.html | 45 -- files/pl/web/api/push_api/index.html | 167 ----- files/pl/web/api/response/index.html | 132 ---- files/pl/web/api/screen/width/index.html | 108 --- files/pl/web/api/web_audio_api/index.html | 503 -------------- files/pl/web/api/webgl_api/tutorial/index.html | 40 -- files/pl/web/api/window/content/index.html | 43 -- files/pl/web/api/window/opendialog/index.html | 75 -- files/pl/web/api/window/sidebar/index.html | 56 -- .../xmlhttprequest/using_xmlhttprequest/index.html | 658 ------------------ files/pl/web/css/attribute_selectors/index.html | 238 ------- files/pl/web/css/background-size/index.html | 187 ----- files/pl/web/css/box-decoration-break/index.html | 202 ------ .../auto-placement_in_css_grid_layout/index.html | 609 ---------------- .../media_queries/using_media_queries/index.html | 643 ----------------- .../pl/web/guide/html/editable_content/index.html | 216 ------ files/pl/web/guide/performance/index.html | 14 - .../web/html/element/heading_elements/index.html | 250 ------- files/pl/web/html/element/input/button/index.html | 341 --------- files/pl/web/html/element/meta/index.html | 144 ---- .../html/global_attributes/spellcheck/index.html | 64 -- files/pl/web/http/authentication/index.html | 135 ---- files/pl/web/http/headers/date/index.html | 82 --- files/pl/web/javascript/data_structures/index.html | 444 ------------ .../deprecated_and_obsolete_features/index.html | 293 -------- .../reference/global_objects/escape/index.html | 121 ---- .../reference/global_objects/generator/index.html | 179 ----- .../global_objects/string/blink/index.html | 51 -- .../global_objects/string/fromcodepoint/index.html | 148 ---- .../global_objects/string/repeat/index.html | 167 ----- .../global_objects/uint16array/index.html | 225 ------ .../reference/operators/instanceof/index.html | 169 ----- .../javascript/reference/operators/this/index.html | 347 ---------- .../reference/statements/throw/index.html | 198 ------ files/pl/web/javascript/typed_arrays/index.html | 274 -------- .../pl/web/security/securing_your_site/index.html | 55 -- 61 files changed, 12604 deletions(-) delete mode 100644 files/pl/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html delete mode 100644 files/pl/learn/getting_started_with_the_web/publishing_your_website/index.html delete mode 100644 files/pl/learn/html/introduction_to_html/getting_started/index.html delete mode 100644 files/pl/learn/javascript/first_steps/math/index.html delete mode 100644 files/pl/learn/server-side/django/index.html delete mode 100644 files/pl/learn/tools_and_testing/client-side_javascript_frameworks/index.html delete mode 100644 files/pl/mdn/contribute/howto/create_and_edit_pages/index.html delete mode 100644 files/pl/mdn/contribute/howto/tag/index.html delete mode 100644 files/pl/mdn/guidelines/writing_style_guide/index.html delete mode 100644 files/pl/mdn/tools/index.html delete mode 100644 files/pl/mozilla/add-ons/webextensions/api/privacy/index.html delete mode 100644 files/pl/tools/browser_toolbox/index.html delete mode 100644 files/pl/tools/performance/flame_chart/index.html delete mode 100644 files/pl/tools/storage_inspector/index.html delete mode 100644 files/pl/tools/tools_toolbox/index.html delete mode 100644 files/pl/tools/view_source/index.html delete mode 100644 files/pl/web/accessibility/keyboard-navigable_javascript_widgets/index.html delete mode 100644 files/pl/web/api/audiocontext/index.html delete mode 100644 files/pl/web/api/element/queryselector/index.html delete mode 100644 files/pl/web/api/htmlelement/offsetheight/index.html delete mode 100644 files/pl/web/api/htmlselectelement/index.html delete mode 100644 files/pl/web/api/mediaelementaudiosourcenode/index.html delete mode 100644 files/pl/web/api/mousescrollevent/index.html delete mode 100644 files/pl/web/api/node/nodetype/index.html delete mode 100644 files/pl/web/api/push_api/index.html delete mode 100644 files/pl/web/api/response/index.html delete mode 100644 files/pl/web/api/screen/width/index.html delete mode 100644 files/pl/web/api/web_audio_api/index.html delete mode 100644 files/pl/web/api/webgl_api/tutorial/index.html delete mode 100644 files/pl/web/api/window/content/index.html delete mode 100644 files/pl/web/api/window/opendialog/index.html delete mode 100644 files/pl/web/api/window/sidebar/index.html delete mode 100644 files/pl/web/api/xmlhttprequest/using_xmlhttprequest/index.html delete mode 100644 files/pl/web/css/attribute_selectors/index.html delete mode 100644 files/pl/web/css/background-size/index.html delete mode 100644 files/pl/web/css/box-decoration-break/index.html delete mode 100644 files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html delete mode 100644 files/pl/web/css/media_queries/using_media_queries/index.html delete mode 100644 files/pl/web/guide/html/editable_content/index.html delete mode 100644 files/pl/web/guide/performance/index.html delete mode 100644 files/pl/web/html/element/heading_elements/index.html delete mode 100644 files/pl/web/html/element/input/button/index.html delete mode 100644 files/pl/web/html/element/meta/index.html delete mode 100644 files/pl/web/html/global_attributes/spellcheck/index.html delete mode 100644 files/pl/web/http/authentication/index.html delete mode 100644 files/pl/web/http/headers/date/index.html delete mode 100644 files/pl/web/javascript/data_structures/index.html delete mode 100644 files/pl/web/javascript/reference/deprecated_and_obsolete_features/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/escape/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/generator/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/blink/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/fromcodepoint/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/repeat/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/uint16array/index.html delete mode 100644 files/pl/web/javascript/reference/operators/instanceof/index.html delete mode 100644 files/pl/web/javascript/reference/operators/this/index.html delete mode 100644 files/pl/web/javascript/reference/statements/throw/index.html delete mode 100644 files/pl/web/javascript/typed_arrays/index.html delete mode 100644 files/pl/web/security/securing_your_site/index.html (limited to 'files/pl') 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 ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

- -
-

This is the 7th step out of 10 of the Gamedev Canvas tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson7.html.

-
- -

We have the bricks appearing on the screen already, but the game still isn't that 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.

- -

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.

- -

A collision detection function

- -

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 b variable for storing the brick object in every loop of the collision detection:

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            // calculations
-        }
-    }
-}
- -

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:

- - - -

Let's write that down in code:

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

Add the above block to your code, below the keyUpHandler() function.

- -

Making the bricks disappear after they are hit

- -

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 status property to each brick object. Update the following part of the code as indicated by the highlighted line:

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

Next we'll check the value of each brick's status property in the drawBricks() function before drawing it — if status is 1, then draw it, but if it's 0, then it was hit by the ball and we don't want it on the screen anymore. Update your drawBricks() function as follows:

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

Tracking and updating the status in the collision detection function

- -

Now we need to involve the brick status property in the collisionDetection() function: if the brick is active (its status is 1) we will check whether the collision happens; if a collision does occur we'll set the status of the given brick to 0 so it won't be painted on the screen. Update your collisionDetection() function as indicated below:

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

Activating our collision detection

- -

The last thing to do is to add a call to the collisionDetection() function to our main draw() function. Add the following line to the draw() function, just below the drawPaddle() call:

- -
collisionDetection();
-
- -

Compare your code

- -

The collision detection of the ball is now checked on every frame, with every brick. Now we can destroy bricks! :-

- -

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/kaed3hbu/","","395")}}

- -
-

Exercise: change the color of the ball when it hits the brick.

-
- -

Next steps

- -

We are definitely getting there now; let's move on! In the eighth chapter we will be looking at how to Track the score and win.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

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 ---- -
{{LearnSidebar}}
- -
{{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")}}
- -
-

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.

-
- -

Jakie są możliwości?

- -

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.

- -

Getting hosting and a domain name

- -

To have more control over content and website appearance, most people choose to buy web hosting and a domain name:

- - - -

Many professional websites go online this way.

- -

In addition, you will need a {{Glossary("FTP", "File Transfer Protocol (FTP)")}} program (see How much does it cost: software 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.

- -

- -

Tips for finding hosting and domains

- - - -

Using an online tool like GitHub or Google App Engine

- -

Some tools let you publish your website online:

- - - -

These options are usually free, but you may outgrow the limited feature-set.

- -

Using a web-based IDE such as CodePen

- -

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

- -

Try playing with some of these examples to find out which one works best for you:

- - - -

- -

Publishing via GitHub

- -

Now let's examine how to easily publish your site via GitHub Pages.

- -
    -
  1. First of all, sign up for GitHub and verify your email address.
    2. -
  2. Next, you need to create a repository to store files.
    3. -
  3. On this page, in the Repository name box, enter username.github.io, where username is your username. For example, our friend Bob Smith would enter bobsmith.github.io.
    - Check the "Initialize this repository with a README" box. Then click Create repository.
    4. -
  4. Drag and drop the content of your website folder into your repository. Then click Commit changes.
    - -
    -

    Note: Make sure your folder has an index.html file.

    -
    -
    5. -
  5. -

    Navigate your browser to username.github.io to see your website online. For example, for the username chrisdavidmills, go to chrisdavidmills.github.io.

    - -
    -

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

    -
    -
    6. -
- -

To learn more, see GitHub Pages Help.

- -

Further reading

- - - -

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

- -

W tym module

- - 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 ---- -
-
{{LearnSidebar}}
- -
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
-
- -

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!

- - - - - - - - - - - - -
Warunki wstępne:Podstawowa umiejętność obsługi komputera, posiadanie podstawowego oprogramowania oraz typowa wiedza jak pracować z plikami.
Cel:Zapoznanie się z językiem HTML oraz zastosowanie w praktyce kilku jego elementów
- -

Czym jest HTML?

- -

{{glossary("HTML")}} (Hypertext Markup Language) nie jest językiem programowania. Jest to język znaczników, 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:

- -
Mój kot jest bardzo humorzasty
- -

Jeżeli chcielibyśmy aby ten tekst się wyróżniał, możemy wydzielić go do oddzielnego akapitu, za pomocą elementu {{htmlelement("p")}}:

- -
<p>Mój kot jest bardzo humorzasty</p>
- -
-

Notka: Tagi HTMLa nie rozróżniają wielkości liter. Dla przykładu, tag {{htmlelement("title")}} może zostać zapisany jako <title>, <TITLE>, <Title>, <TiTlE>, 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

-
- -

Anatomia elementu HTML

- -

Zagłębmy się w nasz akapit, który napisaliśmy w poprzedniej sekcji:

- -

- -

Anatomia tego elementu to:

- - - -

Podsumowując: Element to tag otwierający, po którym następuje jego treść, a po treści znajduje się tag zamykający

- -

Aktywne uczenie się: tworzenie twojego pierwszego elementu HTML

- -

Zedytuj poniższą linijkę, otaczając ją tagami <em> oraz </em>. Aby określić początek elementu, umieść tag otwierający <em> na początku linijki. Aby określić koniec elementu, umieść tag zamykający </em> na końcu linijki. Zrobienie tego powinno pokazać linijkę tekstu wypisaną kursywą!

- -

Jeżeli popełnisz błąd, możesz przywrócić pracę do stanu początkowego za pomocą przycisku Reset. Gdybyś nie wiedział jak wykonać to zadanie, możesz kliknąć w przycisk Pokaż rozwiązanie, aby zobaczyć gotowe rozwiązanie

- - - -

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Zagnieżdżanie elementów

- -

Elementy mogą znajdować się wewnątrz innych elementów. Nazywa się to zagnieżdżaniem. Jeżeli chcielibyśmy zaznaczyć, że nasz kot jest bardzo humorzasty, możemy zamknąć słowo bardzo w elemencie {{htmlelement("strong")}}, który wytłuści podany mu tekst

- -
<p>Mój kot jest <strong>bardzo</strong> humorzasty.</p>
- -

Zagnieżdżanie można zrobić w poprawny oraz niepoprawny sposób. W powyższym przykładzie otworzyliśmy najpierw element p, potem element strong. Aby zadnieżdżanie zadziałało, musimy najpier zamknąć element strong, a następnie element p.

- -

Poniżej znajduje się przykład niepoprawnego zagnieżdżania:

- -
<p>Mój kot jest <strong>bardzo humorzasty.</p></strong>
- -

Jeżeli tak jest otwarty w jakimś elemencie, musi też być w nim zamknięty. 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

- -

Elementy blokowe, a elementy w linii

- -

There are two important categories of elements to know in HTML: block-level elements and inline elements.

- - - -

Consider the following example:

- -
<em>first</em><em>second</em><em>third</em>
-
-<p>fourth</p><p>fifth</p><p>sixth</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 p element appears on a new line, with space above and below. (The spacing is due to default CSS styling that the browser applies to paragraphs.)

- -

{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}

- -
-

Note: HTML5 redefined the element categories: see Element content categories. While these definitions are more accurate and less ambiguous than their predecessors, the new definitions are a lot more complicated to understand than block and inline. This article will stay with these two terms.

-
- -
-

Note: The terms block and inline, as used in this article, should not be confused with the types of CSS boxes 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.

-
- -
-

Note: Find useful reference pages that include lists of block and inline elements. See Block-level elements and Inline elements.

-
- -

Puste elementy

- -

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:

- -
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
- -

This would output the following:

- -

{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}

- -
-

Note: Empty elements are sometimes called void elements.

-
- -

Atrybuty

- -

Elements can also have attributes. Attributes look like this:

- -

&amp;amp;amp;amp;amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;amp;amp;amp;amp;lt;/p>

- -

Attributes contain extra information about the element that won't appear in the content. In this example, the class attribute is an identifying name used to target the element with style information.

- -

An attribute should have:

- - - -

Aktywne uczenie się: Dodawanie atrybutów do elementu

- -

Another example of an element is {{htmlelement("a")}}. This stands for anchor. An anchor can make the text it encloses into a hyperlink. Anchors can take a number of attributes, but several are as follows:

- - - -

Edit the line below in the Input area to turn it into a link to your favorite website.

- -
    -
  1. Add the <a> element.
    2. -
  2. Add the href attribute and the title attribute.
    3. -
  3. Specify the target attribute to open the link in the new tab.
    4. -
- -

You'll be able to see your changes update live in the Output area. You should see a link—that when hovered over—displays the value of the title attribute, and when clicked, navigates to the web address in the href attribute. Remember that you need to include a space between the element name, and between each attribute.

- -

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

- - - -

{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Atrybuty logiczne

- -

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 disable the form input elements so the user can't make entries. The disabled elements typically have a grayed-out appearance.) For example:

- -
<input type="text" disabled="disabled">
- -

As shorthand, it is acceptable to write this as follows:

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

For reference, the example above also includes a non-disabled form input element.The HTML from the example above produces this result:

- -

{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}

- -

Pomijanie cudzysłowia przy wartościach atrybutu

- -

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 only the href attribute, like this:

- -
<a href=https://www.mozilla.org/>favorite website</a>
- -

However, as soon as we add the title attribute in this way, there are problems:

- -
<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>
- -

As written above, the browser misinterprets the markup, mistaking the title attribute for three attributes:  a title attribute with the value The, and two Boolean attributes, Mozilla and homepage. 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!

- -

{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}

- -

Always include the attribute quotes. It avoids such problems, and results in more readable code.

- -

Cudzysłów pojedynczy czy podwójny?

- -

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:

- -
<a href="http://www.example.com">A link to my example.</a>
-
-<a href='http://www.example.com'>A link to my example.</a>
- -

Make sure you don't mix single quotes and double quotes. This example (below) shows a kind of mixing quotes that will go wrong:

- -
<a href="http://www.example.com'>A link to my example.</a>
- -

However, if you use one type of quote, you can include the other type of quote inside your attribute values:

- -
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
- -

To use quote marks inside other quote marks of the same type (single quote or double quote), use HTML entities. For example, this will break:

- -
<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>
- -

Instead, you need to do this:

- -
<a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a>
- -

Anatomia dokumentu HTML

- -

Individual HTML elements aren't very useful on their own. Next, let's examine how individual elements combine to form an entire HTML page:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My test page</title>
-  </head>
-  <body>
-    <p>This is my page</p>
-  </body>
-</html>
- -

Here we have:

- -
    -
  1. <!DOCTYPE html>: 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: - - 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    - More recently, the doctype is a historical artifact that needs to be included for everything else to work right. <!DOCTYPE html> is the shortest string of characters that counts as a valid doctype. That is all you need to know!
    2. -
  2. <html></html>: The {{htmlelement("html")}} element. This element wraps all the content on the page. It is sometimes known as the root element.
    3. -
  3. <head></head>: The {{htmlelement("head")}} element. This element acts as a container for eveything you want to include on the HTML page, that isn't the content 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.
    4. -
  4. <meta charset="utf-8">: 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.
    5. -
  5. <title></title>: 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.
    6. -
  6. <body></body>: The {{htmlelement("body")}} element. This contains all the content that displays on the page, including text, images, videos, games, playable audio tracks, or whatever else.
    7. -
- -

Aktywne uczenie się: Dodawanie paru właściwości do dokumentu HTML

- -

If you want to experiment with writing some HTML on your local computer, you can:

- -
    -
  1. Copy the HTML page example listed above.
    2. -
  2. Create a new file in your text editor.
    3. -
  3. Paste the code into the new text file.
    4. -
  4. Save the file as index.html.
    5. -
- -
-

Note: You can also find this basic HTML template on the MDN Learning Area Github repo.

-
- -

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:

- -

A simple HTML page that says This is my pageIn 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:

- - - -

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

- - - -

{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}

- -

Białe znaki w HTMLu

- -

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>Dogs are silly.</p>
-
-<p>Dogs        are
-         silly.</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.
-
- 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.

- -

Znaki specjalne w HTML

- -

In HTML, the characters <, >,",' and & 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.

- -

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Literal characterCharacter reference equivalent
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
- -

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 List of XML and HTML character entity references (Wikipedia).
-
- In the example below, there are two paragraphs:

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

In the live output below, you can see that the first paragraph has gone wrong. The browser interprets the second instance of <p> as starting a new paragraph. The second paragraph looks fine because it has angle brackets with character references.

- -

{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}

- -
-

Note: 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 character encoding is set to UTF-8.

-
- -

Komentarze HTML

- -

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.

- -

To write an HTML comment, wrap it in the special markers <!-- and -->. For example:

- -
<p>I'm not inside a comment</p>
-
-<!-- <p>I am!</p> -->
- -

As you can see below, only the first paragraph displays in the live output.

- -

{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}

- -

Podsumowanie

- -

You made it to the end of the article! We hope you enjoyed your tour of the basics of HTML.
-
- 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.

- -
-

Note: As you start to learn more about HTML, consider learning the basics of Cascading Style Sheets, or CSS. 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.

-
- -

Zobacz również

- - - -
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
- -
- -

W tym module

- - 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 ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
- -

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.

- - - - - - - - - - - - -
Prerequisites:Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.
Objective:To gain familiarity with the basics of math in JavaScript.
- -

Wszyscy kochają matematykę

- -

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.

- -

Artykuł omawia podstawy, które musisz znać na ten moment.

- -

Typy liczb

- -

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: 

- - - -

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:

- - - -

Before you start to get worried about your brain melting, stop right there! 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.

- -

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.

- -
-

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

-
- -

It's all numbers to me

- -

Let's quickly play with some numbers to reacquaint ourselves with the basic syntax we need. Enter the commands listed below into your developer tools JavaScript console.

- -
    -
  1. 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: - 
    let myInt = 5;
-let myFloat = 6.667;
-myInt;
-myFloat;
    -
    2. -
  2. Number values are typed in without quote marks — try declaring and initializing a couple more variables containing numbers before you move on.
    3. -
  3. 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: - 
    typeof myInt;
-typeof myFloat;
    - You should get "number" 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!
    4. -
- -

Useful Number methods

- -

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

- -

For example, to round your number to a fixed number of decimal places, use the toFixed() method. Type the following lines into your browser's console:

- -
let lotsOfDecimal = 1.766584958675746364;
-lotsOfDecimal;
-let twoDecimalPlaces = lotsOfDecimal.toFixed(2);
-twoDecimalPlaces;
- -

Converting to number data types

- -

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 form input, and the input type is text. There is a way to solve this problem — passing the string value into the Number() constructor to return a number version of the same value.

- -

For example, try typing these lines into your console:

- -
let myNumber = '74';
-myNumber + 3;
- -

You end up with the result 743, not 77, because myNumber is actually defined as a string. You can test this by typing in the following:

- -
typeof myNumber;
- -

To fix the calculation, you can do this:

- -
Number(myNumber) + 3;
- -

Arithmetic operators

- -

Arithmetic operators are the basic operators that we use to do sums in JavaScript:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNamePurposeExample
+AdditionAdds two numbers together.6 + 9
-SubtractionSubtracts the right number from the left.20 - 15
*MultiplicationMultiplies two numbers together.3 * 7
/DivisionDivides the left number by the right.10 / 5
%Remainder (sometimes called modulo) -

Returns the remainder left over after you've divided the left number into a number of integer portions equal to the right number.

- 		-

8 % 3 (returns 2, as three goes into 8 twice, leaving 2 left over).

-
**ExponentRaises a base number to the exponent power, that is, the base number multiplied by itself, exponent times. It was first Introduced in EcmaScript 2016.5 ** 2 (returns 25, which is the same as 5 * 5).
- -
-

Note: You'll sometimes see numbers involved in arithmetic referred to as {{Glossary("Operand", "operands")}}.

-
- -
-

Note: You may sometimes see exponents expressed using the older {{jsxref("Math.pow()")}} method, which works in a very similar way. For example, in Math.pow(7, 3), 7 is the base and 3 is the exponent, so the result of the expression is 343. Math.pow(7, 3) is equivalent to 7**3.

-
- -

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 developer tools JavaScript console to familiarize yourself with the syntax.

- -
    -
  1. First try entering some simple examples of your own, such as - 
    10 + 7
-9 * 8
-60 % 3
    -
    2. -
  2. 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: - 
    let num1 = 10;
-let num2 = 50;
-9 * num1;
-num1 ** 3;
-num2 / num1;
    -
    3. -
  3. Last for this section, try entering some more complex expressions, such as: - 
    5 + 10 * 3;
-num2 % 9 * num1;
-num2 + num1 / 8 + 2;
    -
    4. -
- -

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.

- -

Operator precedence

- -

Let's look at the last example from above, assuming that num2 holds the value 50 and num1 holds the value 10 (as originally stated above):

- -
num2 + num1 / 8 + 2;
- -

As a human being, you may read this as "50 plus 10 equals 60", then "8 plus 2 equals 10", and finally "60 divided by 10 equals 6".

- -

But the browser does "10 divided by 8 equals 1.25", then "50 plus 1.25 plus 2 equals 53.25".

- -

This is because of operator precedence — some operators are applied before others when calculating the result of a calculation (referred to as an expression, 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).

- -

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:

- -
(num2 + num1) / (8 + 2);
- -

Try it and see.

- -
-

Note: A full list of all JavaScript operators and their precedence can be found in Expressions and operators.

-
- -

Increment and decrement operators

- -

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 (++) and decrement (--) operators. We used ++ in our "Guess the number" game back in our first splash into JavaScript article, when we added 1 to our guessCount variable to keep track of how many guesses the user has left after each turn.

- -
guessCount++;
- -
-

Note: These operators are most commonly used in loops, 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 — check it out live, and look at the source code to see if you can spot the incrementors! We'll look at loops in detail later on in the course.

-
- -

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:

- -
3++;
- -

So, you can only increment an existing variable. Try this:

- -
let num1 = 4;
-num1++;
- -

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, then increments the variable. You can see that it's been incremented if you return the variable value again:

- -
num1;
- -

The same is true of -- : try the following

- -
let num2 = 6;
-num2--;
-num2;
- -
-

Note: You can make the browser do it the other way round — increment/decrement the variable then 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 ++num1 and --num2.

-
- -

Assignment operators

- -

Assignment operators are operators that assign a value to a variable. We have already used the most basic one, =, loads of times — it simply assigns the variable on the left the value stated on the right:

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

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:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNamePurposeExampleShortcut for
+=Addition assignmentAdds the value on the right to the variable value on the left, then returns the new variable valuex += 4;x = x + 4;
-=Subtraction assignmentSubtracts the value on the right from the variable value on the left, and returns the new variable valuex -= 3;x = x - 3;
*=Multiplication assignmentMultiplies the variable value on the left by the value on the right, and returns the new variable valuex *= 3;x = x * 3;
/=Division assignmentDivides the variable value on the left by the value on the right, and returns the new variable valuex /= 5;x = x / 5;
- -

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.

- -

Note that you can quite happily use other variables on the right hand side of each expression, for example:

- -
let x = 3; // x contains the value 3
-let y = 4; // y contains the value 4
-x *= y; // x now contains the value 12
- -
-

Note: There are lots of other assignment operators available, but these are the basic ones you should learn now.

-
- -

Active learning: sizing a canvas box

- -

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 x and y, which are initially both given a value of 50.

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 620)}}

- -

Open in new window

- -

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:

- - - -

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.

- -

Comparison operators

- -

Sometimes we will want to run true/false tests, then act accordingly depending on the result of that test — to do this we use comparison operators.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNamePurposeExample
===Strict equalityTests whether the left and right values are identical to one another5 === 2 + 4
!==Strict-non-equalityTests whether the left and right values are not identical to one another5 !== 2 + 3
<Less thanTests whether the left value is smaller than the right one.10 < 6
>Greater thanTests whether the left value is greater than the right one.10 > 20
<=Less than or equal toTests whether the left value is smaller than or equal to the right one.3 <= 2
>=Greater than or equal toTests whether the left value is greater than or equal to the right one.5 >= 4
- -
-

Note: You may see some people using == and != in their tests for equality and non-equality. These are valid operators in JavaScript, but they differ from ===/!==. 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.

-
- -

If you try entering some of these values in a console, you'll see that they all return true/false 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:

- - - -

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:

- -
<button>Start machine</button>
-<p>The machine is stopped.</p>
-
- -
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.';
-  }
-}
- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}

- -

Open in new window

- -

You can see the equality operator being used just inside the updateBtn() 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.

- -
-

Note: Such a control that swaps between two states is generally referred to as a toggle. It toggles between one state and another — light on, light off, etc.

-
- -

Test your skills!

- -

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 Test your skills: Math.

- -

Summary

- -

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.

- -

In the next article, we'll explore text and how JavaScript allows us to manipulate it.

- -
-

Note: 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 Numbers and dates and Expressions and operators articles.

-
- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}

- -

In this module

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

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.

- -

Prerequisites

- -

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 Server-side website programming first steps module.

- -

A general knowledge of programming concepts and Python is recommended, but is not essential to understanding the core concepts.

- -
-

Note: 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 Python for Non Programmers page on the python.org wiki).

-
- -

Guides

- -
-
Django introduction
-
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.
-
Setting up a Django development environment
-
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.
-
Django Tutorial: The Local Library website
-
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.
-
Django Tutorial Part 2: Creating a skeleton website
-
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.
-
Django Tutorial Part 3: Using models
-
This article shows how to define models for the LocalLibrary 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.
-
Django Tutorial Part 4: Django admin site
-
Now that we've created models for the LocalLibrary 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.
-
Django Tutorial Part 5: Creating our home page
-
We're now ready to add the code to display our first full page — a home page for the LocalLibrary 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.
-
Django Tutorial Part 6: Generic list and detail views
-
This tutorial extends our LocalLibrary 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.
-
Django Tutorial Part 7: Sessions framework
-
This tutorial extends our LocalLibrary 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.
-
Django Tutorial Part 8: User authentication and permissions
-
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 permissions. As part of this demonstration we'll extend the LocalLibrary website, adding login and logout pages, and user- and staff-specific pages for viewing books that have been borrowed.
-
Django Tutorial Part 9: Working with forms
-
In this tutorial we'll show you how to work with HTML Forms 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 LocalLibrary website so that librarians can renew books, and create, update, and delete authors using our own forms (rather than using the admin application).
-
Django Tutorial Part 10: Testing a Django web application
-
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 unit testing of your website using Django's test framework.
-
Django Tutorial Part 11: Deploying Django to production
-
Now you've created (and tested) an awesome LocalLibrary 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.
-
Django web application security
-
Protecting user data is an essential part of any website design. We previously explained some of the more common security threats in the article Web security — this article provides a practical demonstration of how Django's built-in protections handle such threats.
-
- -

Assessments

- -

The following assessment will test your understanding of how to create a website using Django, as described in the guides listed above.

- -
-
DIY Django mini blog
-
In this assessment you'll use some of the knowledge you've learned from this module to create your own blog.
-
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 ---- -
{{LearnSidebar}}
- -

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.

- -

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.

- -

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:

- - - -

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.

- -

Get started now, with "Introduction to client-side frameworks"

- -

Prerequisites

- -

You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — HTML, CSS, and especially JavaScript.

- -

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.

- - -
-

Looking to become a front-end web developer?

- -

We have put together a course that includes all the essential information you need to work towards your goal.

- -

Get started

-
- -

Introductory guides

- -
-
1. Introduction to client-side frameworks
-
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.
-
2. Framework main features
-
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.
-
- -

React tutorials

- -
-

Note: React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.

- -

If you need to check your code against our version, you can find a finished version of the sample React app code in our todo-react repository. For a running live version, see https://mdn.github.io/todo-react-build/.

-
- -
-
1. Getting started with React
-
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.
-
2. Beginning our React todo list
-
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 App component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.
-
3. Componentizing our React app
-
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.
-
4. React interactivity: Events and state
-
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.
-
5. React interactivity: Editing, filtering, conditional rendering
-
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.
-
6. Accessibility in React
-
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.
-
7. React resources
-
Our final article provides you with a list of React resources that you can use to go further in your learning.
-
- -

Ember tutorials

- -
-

Note: Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.

- -

If you need to check your code against our version, you can find a finished version of the sample Ember app code in the ember-todomvc-tutorial repository. For a running live version, see https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ (this also includes a few additional features not covered in the tutorial).

-
- -
-
1. Getting started with Ember
-
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.
-
2. Ember app structure and componentization
-
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.
-
3. Ember interactivity: Events, classes and state
-
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.
-
4. Ember Interactivity: Footer functionality, conditional rendering
-
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.
-
5. Routing in Ember
-
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".
-
6. Ember resources and troubleshooting
-
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.
-
- -

Vue tutorials

- -
-

Note: Vue tutorials last tested in May 2020, with Vue 2.6.11.

- -

If you need to check your code against our version, you can find a finished version of the sample Vue app code in our todo-vue repository. For a running live version, see https://mdn.github.io/todo-vue/dist/.

-
- -
-
1. Getting started with Vue
-
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.
-
2. Creating our first Vue component
-
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.
-
3. Rendering a list of Vue components
-
At this point we've got a fully working component; we're now ready to add multiple ToDoItem components to our App. In this article we'll look at adding a set of todo item data to our App.vue component, which we'll then loop through and display inside ToDoItem components using the v-for directive.
-
4. Adding a new todo form: Vue events, methods, and models
-
We now have sample data in place and a loop that takes each bit of data and renders it inside a ToDoItem 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 <input>, 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.
-
5. Styling Vue components with CSS
-
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.
-
6. Using Vue computed properties
-
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.
-
7. Vue conditional rendering: editing existing todos
-
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 v-if and v-else — 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.
-
8. Focus management with Vue refs
-
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.
-
9. Vue resources
-
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.
-
- -

Which frameworks did we choose?

- -

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:

- - - -

We want to say this upfront — we've not 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.

- -

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 Matrix, or Discourse, or drop us a mail on the mdn-admins list.

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

Ten artykuł wdraża nowe osoby wspierające do procesu edycji istniejących stron oraz tworzenia nowych.

- -

Edycja istniejącej strony

- -

Aby edytować stronę:

- -
    -
  1. Jeśli znajdujesz się na stronie MDN Web Docs w wersji tylko do odczytu (https://developer.mozilla.org), kliknij Edit in wiki w nagłówku artykułu. Przeniesiesz się do edytowalnej wersji wiki strony(https://wiki.developer.mozilla.org), ale nie otworzy to jeszcze interfejsu edycji.
    2. -
  2. Kliknij przycisk Edit w nagłówku artykułu wiki strony.
    3. -
  3. Strona się odświeży wraz z interfejsem edycji gdzie możesz bezpośrednio dodawać i usuwać zawartość strony.
    4. -
  4. Dodawaj paragrafy, usuwaj tekst, wstawiaj nagłówki i wykonuj więcej podstawowych operacji związanych z pisaniem i edytowaniem.
    5. -
- -

Zobacz przewodnik Editor UI elements w MDN Editor guide by uzyskać więcej informacji dotyczących wbudowanego edytora MDN.

- -

Podgląd zmian

- -

Aby zobaczyć zmiany:

- - - -

Uważaj! Podglądanie strony nie zachowa twojego postępu prac. Nie zamykaj karty edycji dopóki nie zapiszesz zmian.

- -

Komentarz do wersji

- -

After previewing your changes, you will want to save your revision. Before you save, 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.

- -

Table of Contents

- -

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.

- -

Tags

- -

You can add or remove tags, which describe the page content and purpose, below the editing section. See How to properly tag pages, for information on which tags to apply.

- -

Review needed?

- -

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.

- -

Attach files

- -

Attaching files requires a special user privilege. See Attachments in the MDN editor for details, including how to request the upload privilege.

- -

Publish, Discard, or Keep editing

- -

When you finish editing and are happy with your preview, publish your work and comments by clicking the green Publish button, to the right of the page title, or towards the bottom of the page. If you wish to continue working, click Publish and keep editing, which publishes your changes and keeps the edit interface open.

- -

If you change your mind, you can discard edits, by clicking the red Discard button. Note that discarding changes permanently discards them.

- -

Pressing Enter in the Revision Comment field is equivalent to clicking Publish and Keep Editing.

- -
-

Note: If attempting to save, but changes are rejected as invalid, and you feel the content is appropriate for MDN, email the MDN admin team for assistance.

-
- -

Getting page-creation permissions

- -

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:

- - - -

Creating a new page

- -

Once you have page-creation permission, you can begin creating pages.

- -

If you do not know where to place a new article, do not worry. 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.

- -

There are a few ways to create a new page:

- - - -

'Missing page' link

- -

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.

- -

To create a page from a 'missing page' link:

- -
    -
  1. 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.
    2. -
  2. Click the 'missing page' link. If you have page creation permission, the MDN Editor UI opens, ready for you to create the missing page.
    3. -
  3. Write the content of the page, and save it.
    4. -
- -

New page without link

- -

To create a new page without linking from another page, enter a unique page name in the URL field of your browser. For example, if you enter:

- -
https://wiki.developer.mozilla.org/en-US/docs/FooBar
- -

MDN Creates a new page, with the title "FooBar", opening the editor for you to add new content. Refer to the Editing an existing page section of this article, for information on how to use the editor mode.

- -

To create a new page without linking from another page:

- -
    -
  1. Log in, and have page-creation permission.
    2. -
  2. Enter the following in the URL field of your browser:
    3. -
- -
https://wiki.developer.mozilla.org/en-US/docs/new
- -

MDN Creates a new page, with a place for a title, opening the editor to add new content to this page. Refer to Editing an existing page, for information on using editor mode.

- -

Subpage of an existing page

- -

To create a page you want to be below an existing page, in the page hierarchy:

- -
    -
  1. If needed, navigate to the wiki site by clicking Edit in wiki in the article header.
    2. -
  2. On the 'parent' page, click the Advanced menu (the gear icon in the toolbar), then click New sub-page.
    3. -
  3. An editor view opens for creating a new document.
    4. -
  4. Add a title for this document, in the Title field.
    5. -
  5. Change the Slug 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.
    6. -
  6. In the TOC 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.
    7. -
  7. Write content of the page in the editor pane, saving your changes. Refer to Editing an existing page, for further information on using editor mode.
    8. -
- -

Clone of an existing page

- -

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.

- -
    -
  1. If needed, navigate to the wiki site by clicking Edit in wiki in the article header.
    2. -
  2. On the original page, click the Advanced menu (the gear icon in the toolbar), and click Clone this page. An editor view opens, for creating a new document.
    3. -
  3. Change the Title of the page, as appropriate for the new content. The Slug field is updated automatically as you change the Title field.
    4. -
  4. Change the path portion of the Slug 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.
    5. -
  5. In the TOC 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.
    6. -
  6. Write your content in the editor pane, saving your changes. Refer to Editing an existing page, for more information on using editor mode.
    7. -
- -

Link from an existing page

- -

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:

- -
    -
  1. Enter the name of your new page, anywhere that makes sense in the text of an existing page.
    2. -
  2. Highlight this new name, and click the Link icon () in the editor's toolbar. The 'Update Link' dialog opens, with the highlighted text in the 'Link To' field.
    3. -
  3. "/en-US/docs/" is inserted by default, to the beginning of the URL field. Enter the name of the page after "/en-US/docs/". The page name does not have to be the same as the link text.
    4. -
  4. Click OK, to create and insert the link.
    5. -
- -

If the page does not yet exist, the link is displayed in red. If the page does 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 page naming guide for guidelines.

- -

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 Editing an existing page, for further information on using editor mode.

- -

Refreshing page content

- -

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 macroPage), will not reflect later changes made to the macro, its output, or the contents of the integrated material.

- - - -

See also

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

Article tags are an important way to put visitors in touch with helpful content. Each page should normally have several tags to help keep content organized. This page explains the best way to tag pages so that our readers can find information and we can keep ourselves organized.

- -

For a help with the user interface for editing tags, see the tagging section in our editor guide.

- -

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.

- -

How MDN uses tags

- -

Tags get used on MDN several ways:

- -
-
Document categorization
-
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!
-
Topic identification
-
What is the article about? Is it about an API? The DOM? Graphics? Again, these tags are important because they can filter searches.
-
Technology status
-
What's the status of the technology? Is it non-standard? Obsolete or deprecated? Experimental?
-
Skill level
-
For tutorials and guides, how advanced is the material covered by the article?
-
Document metadata
-
The writing community uses tags to keep track of which pages need what kind of work.
-
- -

Tag type guide

- -

Here's a quick guide to the types of tags and possible values for them.

- -

Document category

- -

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.

- -

We use the following category names as standard tagging terms:

- -
-
{{Tag("Intro")}}
-
The article provides introductory material about a topic. Ideally each technology area should have only one "Intro".
-
{{Tag("Featured")}}
-
The article is critical and will display prominently on landing pages. Use this tag sparingly (never more than three documents in each documentation area).
-
{{Tag("Reference")}}
-
The article contains reference material about an API, element, attribute, property, or the like.
-
{{Tag("Landing")}}
-
The page is a landing page.
-
{{Tag("Guide")}}
-
The article is a how-to or guide page.
-
{{Tag("Example")}}
-
The article is a code sample page, or has code samples (that is, actual snippets of useful code, not one-line "syntax examples").
-
- -

Topic

- -

By identifying the article's topic area, you are helping generate better search results (and landing pages and navigation as well).

- -

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:

- - - -

In general, your topic identification tag should be the name of an interface with a number of related pages (like Node, 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 Graphics and WebGL, for example, but a page about {{HTMLElement("canvas")}} with HTML, Element, Canvas, and Graphics.

- -

Technology status

- -

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.

- -

Here are possible values for these tags:

- -
-
{{Tag("Non-standard")}}
-
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.
-
{{Tag("Deprecated")}}
-
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.
-
{{Tag("Obsolete")}}
-
The technology or API has been deemed obsolete and has been removed (or actively being removed) from all or most current browsers.
-
{{Tag("Experimental")}}
-
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.
-
{{Tag("Needs Privileges")}}
-
The API requires privileged access to the device on which the code is running.
-
{{Tag("Certified Only")}}
-
The API only works in certified code.
-
- -

These tags are no excuse to leave out the compatibility table in your article!

- -

Skill level

- -

Use the skill-level tag type only for guides and tutorials (that is, pages tagged Guide) to help users choose tutorials based on how familiar they are with a technology. There are three values for this:

- -
-
{{Tag("Beginner")}}
-
Articles designed to introduce the reader to a technology they've never used or have only a passing familiarity with.
-
{{Tag("Intermediate")}}
-
Articles for users who have gotten started with the technology but aren't experts.
-
{{Tag("Advanced")}}
-
Articles about stretching the capabilities of a technology and of the reader.
-
- -

Document metadata

- -

The writing community uses tags to label articles as requiring specific types of work. Here's a list of the ones we use most:

- -
-
{{Tag("junk")}}
-
The article needs to be deleted.
-
{{Tag("NeedsContent")}}
-
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.
-
{{Tag("NeedsExample")}}
-
The article needs one or more examples created to help illustrate the article's point. These examples should use the live sample system.
-
{{Tag("NeedsLiveSamples")}}
-
The article has one or more examples that need to be updated to use the live sample system.
-
{{Tag("NeedsUpdate")}}
-
The content is out of date and needs to updating.
-
{{Tag("l10n:exclude")}}
-
The content is not really worth localizing and will not appear on localization status pages.
-
{{Tag("l10n:priority")}}
-
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.
-
- -

Web Literacy Map

- -

The WebMaker project, through the Web Literacy Map, 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:

- -
-
{{Tag("Navigation")}}
-
The article includes information about how to browse the Web.
-
{{Tag("WebMechanics")}}
-
The content has information about how the Web is organized and how it works.
-
{{Tag("Search")}}
-
The article explains how to find information, people, and resources on the Web.
-
{{Tag("Credibility")}}
-
The information in the article helps the reader understand how to critically evaluate information they find on the Web
-
{{Tag("Security")}}
-
The article provides information about how to keep systems, identities, and content safe.
-
{{Tag("Composing")}}
-
The document explains how to create and curate content for the Web.
-
{{Tag("Remixing")}}
-
The article teaches how to modify existing Web resources to create something new.
-
{{Tag("Design")}}
-
Documentation explaining how to enhance visual aesthetics and user experience.
-
{{Tag("Accessibility")}}
-
Documents which describe how to communicate in a universally-recognizable way.
-
{{Tag("CodingScripting")}}
-
How to write code and/or to create interactive experiences on the Web.
-
{{Tag("Infrastructure")}}
-
The document explains how the Internet's technical stack works.
-
{{Tag("Sharing")}}
-
The article's content covers ways to create resources with others.
-
{{Tag("Collaborating")}}
-
The document provides information about how to work with other people.
-
{{Tag("Community")}}
-
The article details how to get involved in Web communities and to understand how they work.
-
{{Tag("Privacy")}}
-
The material helps to examine the consequences of sharing data online.
-
{{Tag("OpenPractices")}}
-
The article provid=deshow to help keep the Web accessible to everybody
-
- -

Putting it all together

- -

So to each page you assign tags from several tag types, for example

- -
-
A tutorial about WebGL for beginners
-
WebGL, Graphics, Guide, Beginner
-
Reference page for {{HTMLElement("canvas")}}
-
Canvas, HTML, Element, Graphics, Reference
-
A landing page for Firefox OS developer tools
-
Tools, Firefox OS, Landing
-
- -

Tagging and search filters

- -

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.

- -
-

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

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Filter groupSearch filter nameTag name
TopicOpen Web Apps{{Tag("Apps")}}
 HTML{{Tag("HTML")}}
 CSS{{Tag("CSS")}}
 JavaScript{{Tag("JavaScript")}}
 APIs and DOM{{Tag("API")}}
 Canvas{{Tag("Canvas")}}
 SVG{{Tag("SVG")}}
 MathML{{Tag("MathML")}}
 WebGL{{Tag("WebGL")}}
 XUL{{Tag("XUL")}}
 Marketplace{{Tag("Marketplace")}}
 Firefox{{Tag("Firefox")}}
 Firefox for Android{{Tag("Firefox Mobile")}}
 Firefox for Desktop{{Tag("Firefox Desktop")}}
 Firefox OS{{Tag("Firefox OS")}}
 Mobile{{Tag("Mobile")}}
 Web Development{{Tag("Web Development")}}
 Add-ons & Extensions{{Tag("Add-ons ")}}|| {{Tag("Extensions")}} || {{Tag("Plugins")}} || {{Tag("Themes")}}
 Games{{Tag("Games")}}
Skill levelI'm an Expert{{Tag("Advanced")}}
 Intermediate{{Tag("Intermediate")}}
 I'm Learning{{Tag("Beginner")}}
Document typeDocsThis restricts the search to docs content, leaving out Hacks and other MDN content.
 DemosThis includes Demo Studio content in the search results.
 Tools{{Tag("Tools")}}
 Code Samples{{Tag("Example")}}
 How-To & Tutorial{{Tag("Guide")}}
 Developer ProfilesThis includes developer profiles from the MDN site in the search results.
 External ResourcesThe dev team is still figuring this out...
- -

Tagging problems you can fix

- -

There are several kinds of tag problems you can help fix:

- -
-
No tags
-
Generally articles should have at least a "category" tag and a "topic" 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!
-
Tags that don't follow our tagging standards
-
Please fix any documents whose tags don't follow the standards on this page.
- Note that due to a bug in Kuma, some localized tags (such as Référence) 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.
-
Incorrect tags
-
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!).
-
Missing tags
-
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!
-
Tag spam
-
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")}}.
-
- -

If you see one (or more) of these problems, please log into MDN 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 "The tags box" in the MDN editor guide.

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

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. Są to wytyczne, a nie surowe zasady. 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. 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.

- -

Jeśli szukasz informacji jak dany typ strony powinien być ustrukturyzowany, zobacz poradnik dotyczący układu stron MDN

- -

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.

- -

Zapoznaj się ze standardami styli stosowanych do treści witryn innych niż MDN, zobacz Przewodnik po stylach One Mozilla.

- -

Podstawy

- -

Tytuły stron

- -

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 "<locale>/docs/".

- -

Tytuł i wielkie litery(kapitaliki)

- -

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

- - - -

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.

- -

Choosing titles and slugs

- -

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.

- -

Page titles, on the other hand, may be as long as you like, within reason, and they should be descriptive.

- -

Creating new subtrees

- -

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.

- -

For example, consider the JavaScript guide, which is structured like this:

- - - -

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.

- -

Sections, paragraphs, and newlines

- -

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.

- -

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.

- -

Text formatting and styles

- -

Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.

- -
Note: The "Note" style is used to call out important notes, like this one.
- -
Warning: Similarly, the "Warning" style creates warning boxes like this.
- -

Unless specifically instructed to do so, do not use the HTML style attribute to manually style content. If you can't do it using a predefined class, drop into Matrix and ask for help.

- -

Code sample style and formatting

- -

Tabs and line breaks

- -

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:

- -
if (condition) {
-  /* handle the condition */
-} else {
-  /* handle the "else" case */
-}
-
- -

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:

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

Inline code formatting

- -

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

- -

Method names should be followed by a pair of parentheses: doSomethingUseful(). This helps to differentiate methods from other code terms.

- -

Syntax highlighting

- -

Screenshot of the "syntax highlighting" menu.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:

- -
-
for (var i = 0, j = 9; i <= 9; i++, j--)
-  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);
-
- -

If no appropriate transformation is available, use the pre tag without specifying a language ("No Highlight" in the language menu).

- -
x = 42;
- -

Styling HTML element references

- -

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.

- -
-
Element names
-
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, enclose the name in angle brackets and use "Code (inline)" style (e.g., <title>).
-
Attribute names
-
Use bold face.
-
Attribute definitions
-
Use the {{TemplateLink("htmlattrdef")}} macro (e.g., \{{htmlattrdef("type")}}) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., \{{htmlattrxref("attr","element")}}) to reference attribute definitions.
-
Attribute values
-
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 type attribute of an <input> element is set to email or tel ...
-
Labeling attributes
-
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.
-
- -

Latin abbreviations

- -

In notes and parentheses

- - - -

In running text

- - - -

Meanings and English equivalents of Latin abbreviations

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AbbrevLatinEnglish
cf.confercompare
e.g.exempli gratiafor example
et al.et aliiand others
etc.et ceteraand so forth, and so on
i.e.id estthat is, in other words
N.B.nota benenote well
P.S.post scriptumpostscript
- -
-

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

-
- -

Acronyms and abbreviations

- -

Capitalization and periods

- -

Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".

- - - -

Expansion

- -

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 glossary entry describing the technology.

- - - -

Plurals of acronyms and abbreviations

- -

For plurals of acronyms or abbreviations, add s. Don't use an apostrophe. Ever. Please.

- - - -

Capitalization

- -

Use standard English capitalization rules in body text, and capitalize "World Wide Web" and "Web".

- -

Contractions

- -

Use contractions (e.g. "don't", "can't", "shouldn't") if you prefer. We're not that formal!

- -

Pluralization

- -

Use English-style plurals, not the Latin- or Greek-influenced forms.

- - - -

Hyphenation

- -

Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.

- - - -

Gender-neutral language

- -

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.
-
- Let's take the following example:

- -
-

A confirmation dialog appears, asking the user if he allows the web page to make use of his web cam.

-
- -
-

A confirmation dialog appears, asking the user if she allows the web page to make use of her web cam.

-
- -

Both versions in this case are gender-specific. This could be fixed by using gender-neutral pronouns:

- -
-

A confirmation dialog appears, asking the user if they allow the web page to make use of their web cam.

-
- -
-

Note: 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 "singular 'they.'"

-
- -

You can use both genders:

- -
-

A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.

-
- -

making the users plural:

- -
-

A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.

-
- -

The best solution, of course, is to rewrite and eliminate the pronouns completely:

- -
-

A confirmation dialog appears, requesting the user's permission for web cam access.

-
- -
-

A confirmation dialog box appears, which asks the user for permission to use the web cam.

-
- -

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.

- -

Numbers and numerals

- -

Dates

- -

For dates (not including dates in code samples) use the format "January 1, 1990".

- - - -

Alternately, you can use the YYYY/MM/DD format.

- - - -

Decades

- -

For decades, use the format "1990s". Don't use an apostrophe.

- - - -

Plurals of numerals

- -

For plurals of numerals add "s". Don't use an apostrophe.

- - - -

Commas

- -

In running text, use commas only in five-digit and larger numbers.

- - - -

Punctuation

- -

Serial comma

- -

Use the serial comma. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.

- - - -
-

Note: This is in contrast to the One Mozilla style guide, which specifies that the serial comma is not to be used. MDN is an exception to this rule.

-
- -

Spelling

- -

For words with variant spellings, always use the first entry at Answers.com. Do not use variant spellings.

- - - -

Terminology

- -

Obsolete vs. deprecated

- -

It's important to be clear on the difference between the terms obsolete and deprecated.

- -
-
Obsolete:
-
On MDN, the term obsolete 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.
-
Deprecated:
-
On MDN, the term deprecated 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 obsolete 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.
-
- -

HTML elements

- -

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

- - - -

User interface actions

- -

In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.

- - - -

Voice

- -

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.

- -

Wiki markup and usage

- - - -

To automatically create a link to a Bugzilla bug, use this template:

- -
\{{Bug(322603)}}
-
- -

This results in:

- -

{{Bug(322603)}}

- -

For WebKit bugs, you can use this template:

- -
\{{Webkitbug("322603")}}
-
- -

This results in:

- -

{{Webkitbug("322603")}}

- -

Page tags

- -

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 How to properly tag pages guide.

- -

The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:

- -

Screenshot of the UX for adding and removing tags on MDN

- -

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.

- -

To remove a tag, simply click the little "X" icon in the tag.

- -

Tagging pages that need work

- -

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.

- -

Tagging obsolete pages

- -

Use the following tags for pages that are not current:

- - - -

SEO summary

- -

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.

- -

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 "SEO summary" style in the WYSIWYG editor.

- -

Landing pages

- -

Landing pages are pages at the root of a topic area of the site, such as the main CSS or HTML pages. They have a standard format that consists of three areas:

- -
    -
  1. 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.
    2. -
  2. A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.
    3. -
  3. An optional "Browser compatibility" section at the bottom of the page.
    4. -
- -

Creating a page link list

- -

The link list section of an MDN landing page consists of two columns. These are created using the following HTML:

- -
<div class="row topicpage-table">
-  <div class="section">
-    ... left column contents ...
-  </div>
-  <div class="section">
-    ... right column contents ...
-  </div>
-</div>
- -

The left-hand column should be a list of articles, with an <h2> 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 <dl> list of articles, with each article's link in a <dt> block and a brief one-or-two sentence summary of the article in the corresponding <dd> block.

- -

The right-hand column should contain one or more of the following sections, in order:

- -
-
Getting help from the community
-
This should provide information on Matrix chat rooms and mailing lists available about the topic. The heading should use the class "Community".
-
Tools
-
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".
-
Related topics
-
A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".
-
- -

<<<finish this once we finalize the landing page standards>>>

- -

Using, inserting images

- -

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:

- -
    -
  1. Attach the desired image file to the article (at the bottom of every article in edit mode)
    2. -
  2. Create an image in the WYSIWYG editor
    3. -
  3. In the WYSIWYG editor in the drop-down list listing attachments, select the newly created attachment which is your image
    4. -
  4. Press OK.
    5. -
- -

Other References

- -

Preferred style guides

- -

If you have questions about usage and style not covered here, we recommend referring to the Economist style guide or, failing that, the Chicago Manual of Style.

- -

Preferred dictionary

- -

For questions of spelling, please refer to Answers.com. The spell-checker for this site uses American English. Please do not use variant spellings (e.g., use honor rather than honour).

- -

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 MDC mailing list or project lead so we know what should be added.

- -

MDN-specific

- - - -

Language, grammar, spelling

- -

If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.

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

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.

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

Access and modify various privacy-related browser settings.

- -

To use the privacy API, you must have the "privacy" API permission.

- -

Properties

- -
-
{{WebExtAPIRef("privacy.network")}}
-
Access and modify privacy settings relating to the network.
-
{{WebExtAPIRef("privacy.services")}}
-
Access and modify privacy settings relating to the services provided by the browser or third parties.
-
{{WebExtAPIRef("privacy.websites")}}
-
Access and modify privacy settings relating to the behavior of websites.
-
- -

Browser compatibility

- -

{{Compat("webextensions.api.privacy", 10, 1)}}

- -

{{WebExtExamples("h2")}}

- -
Acknowledgements - -

This API is based on Chromium's chrome.privacy API.

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

The Browser Toolbox enables you to debug add-ons and the browser's own JavaScript code rather than just web pages like the normal Toolbox.  The Browser Toolbox's context is the whole browser rather than just single page on a single tab.

- -

Note:  If you want to debug a specific add-on that is restartless or SDK-based then try the Add-on Debugger.  Use the Browser Toolbox for add-ons that are neither.

- -

Enabling the Browser Toolbox 

- -
-

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

- -

To do this, open the Developer Tools Toolbox's Settings, go to the section "Advanced Settings", and check the settings "Enable chrome and addon debugging" and "Enable remote debugging".

-
- -

Opening the Browser Toolbox

- -

Open the Browser Toolbox through the menu button new fx menu and the menu items "Developer" then "Browser Toolbox". 

- -

Click the menu item and you'll be presented with a dialog like this (this can be removed by setting the devtools.debugger.prompt-connection property to false):

- -

Click OK, and the Browser Toolbox will open in its own window:

- -

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:

- - - -

Debugging chrome: and about: pages

- -

From Firefox 37 onwards, you can debug chrome: and about: pages using the normal Debugger, just as if they were ordinary content pages.

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

The Flame Chart shows you the state of the JavaScript stack for your code at every millisecond during the performance profile.

- -

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.

-
- -

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.

- -

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.

- -

Here's a screenshot showing the Flame Chart for a section of a profile:

- -

- -

First of all, you'll see that, in the recording overview pane, 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.

- -

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.

- -

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.

- -

Zooming and panning

- -

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:

- - - - - - - - - - - - -
Zoom: increase/decrease the selected portion of the complete profile that's displayed in the Flame Chart -

1) Mouse wheel up/down in the Flame Chart.

- -

2) Trackpad 2 fingers up/down in the Flame Chart.

-
Pan: move the selected portion of the complete profile left and right -

1) Click and drag the selected portion in the recording overview pane.

- -

2) Click and drag anywhere in the Flame Chart.

-
- -

{{EmbedYouTube("BzfkBRFucp8")}}

- -

An example

- -

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 Call Tree page: a program that compares three different sorting algorithms. There's a separate page that gives an overview of this program's structure.

- -

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:

- -
sortAll()                         //    8
-
-    -> sort()                     //   37
-
-        -> bubbleSort()           // 1345
-
-            -> swap()             //  252
-
-        -> selectionSort()        //  190
-
-            -> swap()             //    1
-
-        -> quickSort()            //  103
-
-            -> partition()        //   12
- -

First, we'll just select the whole section in which the program was active:

- -

- -

At the top, colored purple, is the sortAll() call, running throughout the program from start to finish. Underneath that, colored olive-green, are the calls it's making to sort(). Underneath that, like the teeth of a comb, are all the calls being made to each sorting algorithm.

- -

Let's zoom in:

- -

- -

This slice is about 140 ms long, and shows us more details of the functions being called by sort(). The sort() code is just this:

- -
function sort(unsorted) {
-  console.log(bubbleSort(unsorted));
-  console.log(selectionSort(unsorted));
-  console.log(quickSort(unsorted));
-}
- -

The markers labeled "bubb..." and colored olive-green are presumably bubbleSort(). 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.

- -

We can also see some functions being called from bubbleSort(), colored purple.

- -

Let's zoom in one more time:

- -

- -

This slice is about 20ms long. We can see that the purple markers underneath bubbleSort() are the calls to swap(). 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 bubbleSort(), but according to the Call Tree view, the profile does contain one under selectionSort().

- -

We can also see that two of the green markers are for selectionSort() and quickSort(), 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 console.log() calls in sort().

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

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:

- - - -

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.

- -

Opening the Storage Inspector

- -

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 Shift + F9 keyboard shortcut.

- -

The Toolbox will appear at the bottom of the browser window, with the Storage Inspector activated. It's just called "Storage" in the Developer Toolbox.

- -

- -

Storage Inspector User Interface

- -

The Storage Inspector UI is split into three main components:

- - - -

- -

Storage tree

- -

The storage tree lists all the storage types that the Storage Inspector can inspect:

- -

- -

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.

- -

Under "Cache Storage", objects are organized by origin and then by the name of the cache:

- -

- -

IndexedDB objects are organized by origin, then by database name, then by object store name:

- -

- -

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:

- -

- -

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.

- -

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.

- -

Table Widget

- -

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.

- -

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:

- -

- - - -

There's a search box at the top of the Table Widget:

- -

- -

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.

- -

You can use Ctrl + F (Cmd + F on a Mac) to focus the search box.

- -

Add and refresh storage

- -

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

- -

- - - -

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.

- -

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:

- - - -

The shown values can also be filtered using the search box at the top of the sidebar.

- -

Cache Storage

- -

Under the Cache Storage type you can see the contents of any DOM caches created using the Cache API. If you select a cache, you'll see a list of the resources it contains. For each resource, you'll see:

- - - -

- -

Cookies

- -

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:

- - - -
-

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

-
- -

You can edit cookies by double-clicking inside cells in the Table Widget 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.

- -

Context menu

- -

The context menu for each cookie includes the following commands:

- - - -

- -

Local storage / Session storage

- -

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.

- -

You can edit local and session storage items by double-clicking inside cells in the Table Widget and editing the values they contain:

- -

{{EmbedYouTube("UKLgBBUi11c")}}

- -

You can delete local storage and session storage entries using the context menu:

- -

- -

In Firefox 68 and later, you can also delete local and session storage entries by selecting the item and pressing the backspace key.

- -

Finally, you can add new storage items by clicking the "Plus" (+) button and then editing the resulting new row to the value you want.

- -

IndexedDB

- -

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.

- -
-

Note: The data shown in an IndexedDB database is a snapshot of the data as it was when you opened the Storage Inspector tool.

-
- -

Databases have the following details:

- - - -

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:

- - - -

- -

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.

- -

You can delete an IndexedDB database using the context menu in the Storage tree view:

- -

- -

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:

- -

You can use the context menu in the table widget to delete all items in an object store, or a particular item:

- -

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

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.

-

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:

-

The window itself is split into two parts: a toolbar along the top, and a main pane underneath:

-

-

Toolbar

-

The toolbar contains controls to activate a particular tool, to dock/float the window, and to close the window.

-

-

Node picker

-

On the far left there's a button to activate the node picker. This lets you select a page element for inspection. See "Selecting elements".

-

Toolbox-hosted tools

-

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:

- -

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

-

Extra tools

-

Next there's an array of buttons that can be added or removed in the developer tool settings. By default this array includes:

- -

The following tools are not included in the toolbar by default, but you can add them in the settings:

- -

Toolbox controls

-

Finally there's a row of buttons to:

- -

Settings

-

Clicking the "Settings" button () gives you access to settings for the Toolbox itself and for the tools it hosts:

-

-

Default Firefox Developer Tools

-

This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.

-

Available Toolbox Buttons

-

This group of checkboxes determines which "standalone tools" get buttons in the toolbar. This defaults to the node picker, the split console, and responsive design mode.

-

Firefox 32 adds a button to take a screenshot of the complete web page, which is unchecked by default.

-

Choose DevTools theme

-

This enables you to switch between a light and a dark theme:

-

-

Common preferences

-

Settings that apply to more than one tool. There's just one of these:

- -

Inspector

- -

Web Console

- -

Style Editor

- -

JavaScript Profiler

- -

Editor Preferences

-

Preferences for the CodeMirror source editor, which is included in Firefox and used by several developer tools, including Scratchpad and the Style Editor.

- -

Advanced settings

- -

Main Pane

-

The content of the main pane in the window is entirely controlled by, and specific to, the hosted tool currently selected.

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

View Source lets you look at the HTML or XML source for the page you're viewing. To activate View Source:

- - - -

The command opens a new tab with the source for the current page.

- -

View Source features

- -

View Source has three additional features, which can be accessed from the context menu in the View Source tab:

- -

- -
-
Go to Line
-
Scrolls to the specified line. If the number is higher than the lines in a file, you receive an error message.
-
Wrap Long Lines (toggle)
-
Wraps long lines to the width of the page.
-
Syntax Highlighting (toggle)
-
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.
-
- -

- -

This feature is useful when you're looking for HTML errors.

- -

To access Go to Line from the keyboard, press Control + Option + L on macOS, or Alt + Shift + L on Windows or Linux.

- - - -

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.

- -

For example view-source:https://www.mozilla.org/#line100

- -

View Selection Source

- -

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.

- -

View MathML Source

- -

If you context-click while the mouse is over some MathML, you'll see a context menu item labeled "View MathML Source": click it to see the MathML source.

- -

Limitations of View Source

- -

There are limitations to what View Source does for you that you need to be aware of.

- -

Error reporter ≠ validator

- -

View Source only reports parsing errors, not 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 is not 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 the one offered by W3C.

- -

Not all parse errors are reported

- -

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:

- - - -

XML syntax highlighting

- -

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.

- -

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.

- -

See also

- - diff --git a/files/pl/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/pl/web/accessibility/keyboard-navigable_javascript_widgets/index.html deleted file mode 100644 index 3d015d8519..0000000000 --- a/files/pl/web/accessibility/keyboard-navigable_javascript_widgets/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: Keyboard-navigable JavaScript widgets -slug: Web/Accessibility/Keyboard-navigable_JavaScript_widgets -tags: - - Accessibility - - DOM - - Navigation -translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets -original_slug: Web/Dostępność/Keyboard-navigable_JavaScript_widgets ---- -

Overview

- -

Web applications often use JavaScript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels. These widgets are typically composed of {{ HTMLElement("div") }} and {{ HTMLElement("span") }} elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do. This document describes techniques to make JavaScript widgets accessible with the keyboard.

- -

Using tabindex

- -

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

- -

The order in which elements gain focus when using a keyboard, is the source order by default. In exceptional circumstances, authors may want to redefine the order. To do this, authors can set tabindex to any positive number.

- -
-

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

-
- -

The following table describes tabindex behavior in modern browsers:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
tabindex attributeFocusable with mouse or JavaScript via element.focus()Tab navigable
not presentFollows the platform convention of the element (yes for form controls, links, etc.).Follows the platform convention of the element.
Negative (i.e. tabindex="-1")YesNo; author must focus the element with focus() in response to arrow or other key presses.
Zero (i.e. tabindex="0")YesIn tab order relative to element's position in document (note that interactive elements like {{ HTMLElement("a") }} have this behavior by default, they don't need the attribute).
Positive (e.g. tabindex="33")Yestabindex value determines where this element is positioned in the tab order: smaller values will position elements earlier in the tab order than larger values (for example, tabindex="7" will be positioned before tabindex="11").
- -

Non-native controls

- -

Native HTML elements that are interactive, like {{ HTMLElement("a") }}, {{ HTMLElement("input") }} and {{ HTMLElement("select") }}, are already accessible by keyboards, so to use one of them is the fastest path to make components work with keyboards.

- -

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

- -

Grouping controls

- -

For grouping widgets such as menus, tablists, grids, or tree views, the parent element should be in the tab order (tabindex="0"), and each descendent choice/tab/cell/row should be removed from the tab order (tabindex="-1"). Users should be able to navigate the descendent elements using arrow keys. (For a full description of the keyboard support that is normally expected for typical widgets, see the WAI-ARIA Authoring Practices.)

- -

The example below shows this technique used with a nested menu control. Once keyboard focus lands on the containing {{ HTMLElement("ul") }} element, the JavaScript developer must programmatically manage focus and respond to arrow keys. For techniques for managing focus within widgets, see "Managing focus inside groups" below.

- -

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

- -
<ul id="mb1" tabindex="0">
-  <li id="mb1_menu1" tabindex="-1"> Font
-    <ul id="fontMenu" title="Font" tabindex="-1">
-      <li id="sans-serif" tabindex="-1">Sans-serif</li>
-      <li id="serif" tabindex="-1">Serif</li>
-      <li id="monospace" tabindex="-1">Monospace</li>
-      <li id="fantasy" tabindex="-1">Fantasy</li>
-    </ul>
-  </li>
-  <li id="mb1_menu2" tabindex="-1"> Style
-    <ul id="styleMenu" title="Style" tabindex="-1">
-      <li id="italic" tabindex="-1">Italics</li>
-      <li id="bold" tabindex="-1">Bold</li>
-      <li id="underline" tabindex="-1">Underlined</li>
-    </ul>
-  </li>
-  <li id="mb1_menu3" tabindex="-1"> Justification
-    <ul id="justificationMenu" title="Justication" tabindex="-1">
-      <li id="left" tabindex="-1">Left</li>
-      <li id="center" tabindex="-1">Centered</li>
-      <li id="right" tabindex="-1">Right</li>
-      <li id="justify" tabindex="-1">Justify</li>
-    </ul>
-  </li>
-</ul>
- -

Disabled controls

- -

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

- -

Managing focus inside groups

- -

When a user tabs away from a widget and returns, focus should return to the specific element that had focus, for example, the tree item or grid cell. There are two techniques for accomplishing this:

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

Technique 1: Roving tabindex

- -

Setting the tabindex of the focused element to "0" ensures that if the user tabs away from the widget and then returns, the selected item within the group retains focus. Note that updating the tabindex to "0" requires also updating the previously selected item to tabindex="-1". This technique involves programmatically moving focus in response to key events and updating the tabindex to reflect the currently focused item. To do this:

- -

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

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

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

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

Do not use createEvent(), initEvent() and dispatchEvent() to send focus to an element. DOM focus events are considered informational only: generated by the system after something is focused, but not actually used to set focus. Use element.focus() instead.

- -
Use onfocus to track the current focus
- -

Don't assume that all focus changes will come via key and mouse events: assistive technologies such as screen readers can set the focus to any focusable element. Track focus using onfocus and onblur instead.

- -

onfocus and onblur can now be used with every element. There is no standard DOM interface to get the current document focus. If you want to track the focus status, you can use the document.activeElement to get the active element. You can also use document.hasFocus to make sure if the current document focus. 

- -

Technique 2: aria-activedescendant

- -

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

- -

The aria-activedescendant property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of aria-activedescendant and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this ARIA radiogroup example for a direct illustration of how this works.

- -

General Guidelines

- -

Use onkeydown to trap key events, not onkeypress

- -

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

- -

Ensure that keyboard and mouse produce the same experience

- -

To ensure that the user experience is consistent regardless of input device, keyboard and mouse event handlers should share code where appropriate. For example, the code that updates the tabindex or the styling when users navigate using the arrow keys should also be used by mouse click handlers to produce the same changes.

- -

Ensure that the keyboard can be used to activate element

- -

To ensure that the keyboard can be used to activate elements, any handlers bound to mouse events should also be bound to keyboard events. For example, to ensure that the Enter key will activate an element, if you have an onclick="doSomething()", you should bind doSomething() to the key down event as well: onkeydown="return event.keyCode != 13 || doSomething();".

- -

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

- -

IE will not automatically draw the focus outline for items that programatically receive focus. Choose between changing the background color via something like this.style.backgroundColor = "gray"; or add a dotted border via this.style.border = "1px dotted invert". In the dotted border case you will need to make sure those elements have an invisible 1px border to start with, so that the element doesn't grow when the border style is applied (borders take up space, and IE doesn't implement CSS outlines).

- -

Prevent used key events from performing browser functions

- -

If your widget handles a key event, prevent the browser from also handling it (for example, scrolling in response to the arrow keys) by using your event handler's return code. If your event handler returns false, the event will not be propagated beyond your handler.

- -

For example:

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

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

- -

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

- -

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

diff --git a/files/pl/web/api/audiocontext/index.html b/files/pl/web/api/audiocontext/index.html deleted file mode 100644 index db5d07d69c..0000000000 --- a/files/pl/web/api/audiocontext/index.html +++ /dev/null @@ -1,293 +0,0 @@ ---- -title: AudioContext -slug: Web/API/AudioContext -translation_of: Web/API/AudioContext ---- -

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

- -
-

Interfejs AudioContext reprezentuje wykres przetwarzania sygnału audio, utworzonego z połączonych ze sobą modułów audio, przy czym każdy z tych modułów reprezentowany jest przez {{domxref("AudioNode")}}. Kontekst audio kontroluje zarówno powstawanie zawartych w nim powiązań, jak również realizację przetwarzania audio lub dekodowania.  Niezbędne jest stworzenie AudioContext przez wprowadzeniem czegokolwiek innego, jako że wszystko dzieje się w kontekście.

-
- -

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

- -

Konstruktor

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

Właściwości

- -
-
{{domxref("AudioContext.currentTime")}} {{readonlyInline}}
-
Zwraca double reprezentujące stale liczony czas w sekundach, używany do przyporządkowywania. Rozpoczyna się od 0.
-
{{domxref("AudioContext.destination")}} {{readonlyInline}}
-
Zwraca {{domxref("AudioDestinationNode")}} reprezentujące ostateczny cel wszyskich audio w kontekście. Należy traktować go jako urządzenie interpretujące audio.
-
{{domxref("AudioContext.listener")}} {{readonlyInline}}
-
Zwraca obiekt {{domxref("AudioListener")}}, używany do przestrzenności 3D.
-
{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}
-
Zwraca float reprezentujący wskaźnik próbkowania (w samplach na sekundę) używany we wszystkich połączeniach w tym kontekście. Wskaźnik próbkowania {{domxref("AudioContext")}} nie może być zmieniany.
-
{{domxref("AudioContext.state")}} {{readonlyInline}}
-
Zwraca aktualny status AudioContext.
-
{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}
-
Używany do zwracania kanału audio, tak by grany dźwięk w {{domxref("AudioContext")}} był poprawnie odtwarzany na urządządzeniu Firefox OS.
-
- -

Event handlers

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

Methods

- -

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

- -
-
{{domxref("AudioContext.close()")}}
-
Closes the audio context, releasing any system audio resources that it uses.
-
{{domxref("AudioContext.createBuffer()")}}
-
Creates a new, empty {{ domxref("AudioBuffer") }} object, which can then be populated by data and played via an {{ domxref("AudioBufferSourceNode") }}.
-
{{domxref("AudioContext.createConstantSource()")}}
-
Creates a {{domxref("ConstantSourceNode")}} object, which is an audio source that continuously outputs a monaural (one-channel) sound signal whose samples all have the same value.
-
{{domxref("AudioContext.createBufferSource()")}}
-
Creates an {{domxref("AudioBufferSourceNode")}}, which can be used to play and manipulate audio data contained within an {{ domxref("AudioBuffer") }} object. {{ domxref("AudioBuffer") }}s are created using {{domxref("AudioContext.createBuffer")}} or returned by {{domxref("AudioContext.decodeAudioData")}} when it successfully decodes an audio track.
-
{{domxref("AudioContext.createMediaElementSource()")}}
-
Creates a {{domxref("MediaElementAudioSourceNode")}} associated with an {{domxref("HTMLMediaElement")}}. This can be used to play and manipulate audio from {{HTMLElement("video")}} or {{HTMLElement("audio")}} elements.
-
{{domxref("AudioContext.createMediaStreamSource()")}}
-
Creates a {{domxref("MediaStreamAudioSourceNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may come from the local computer microphone or other sources.
-
{{domxref("AudioContext.createMediaStreamDestination()")}}
-
Creates a {{domxref("MediaStreamAudioDestinationNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may be stored in a local file or sent to another computer.
-
{{domxref("AudioContext.createScriptProcessor()")}}
-
Creates a {{domxref("ScriptProcessorNode")}}, which can be used for direct audio processing via JavaScript.
-
{{domxref("AudioContext.createStereoPanner()")}}
-
Creates a {{domxref("StereoPannerNode")}}, which can be used to apply stereo panning to an audio source.
-
{{domxref("AudioContext.createAnalyser()")}}
-
Creates an {{domxref("AnalyserNode")}}, which can be used to expose audio time and frequency data and for example to create data visualisations.
-
{{domxref("AudioContext.createBiquadFilter()")}}
-
Creates a {{domxref("BiquadFilterNode")}}, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc.
-
{{domxref("AudioContext.createChannelMerger()")}}
-
Creates a {{domxref("ChannelMergerNode")}}, which is used to combine channels from multiple audio streams into a single audio stream.
-
{{domxref("AudioContext.createChannelSplitter()")}}
-
Creates a {{domxref("ChannelSplitterNode")}}, which is used to access the individual channels of an audio stream and process them separately.
-
{{domxref("AudioContext.createConvolver()")}}
-
Creates a {{domxref("ConvolverNode")}}, which can be used to apply convolution effects to your audio graph, for example a reverberation effect.
-
{{domxref("AudioContext.createDelay()")}}
-
Creates a {{domxref("DelayNode")}}, which is used to delay the incoming audio signal by a certain amount. This node is also useful to create feedback loops in a Web Audio API graph.
-
{{domxref("AudioContext.createDynamicsCompressor()")}}
-
Creates a {{domxref("DynamicsCompressorNode")}}, which can be used to apply acoustic compression to an audio signal.
-
{{domxref("AudioContext.createGain()")}}
-
Creates a {{domxref("GainNode")}}, which can be used to control the overall volume of the audio graph.
-
{{domxref("AudioContext.createIIRFilter()")}}
-
Creates an {{domxref("IIRFilterNode")}}, which represents a second order filter configurable as several different common filter types.
-
{{domxref("AudioContext.createOscillator()")}}
-
Creates an {{domxref("OscillatorNode")}}, a source representing a periodic waveform. It basically generates a tone.
-
{{domxref("AudioContext.createPanner()")}}
-
Creates a {{domxref("PannerNode")}}, which is used to spatialise an incoming audio stream in 3D space.
-
{{domxref("AudioContext.createPeriodicWave()")}}
-
Creates a {{domxref("PeriodicWave")}}, used to define a periodic waveform that can be used to determine the output of an {{ domxref("OscillatorNode") }}.
-
{{domxref("AudioContext.createWaveShaper()")}}
-
Creates a {{domxref("WaveShaperNode")}}, which is used to implement non-linear distortion effects.
-
{{domxref("AudioContext.createAudioWorker()")}}
-
Creates an {{domxref("AudioWorkerNode")}}, which can interact with a web worker thread to generate, process, or analyse audio directly. This was added to the spec on August 29 2014, and is not implemented in any browser yet.
-
{{domxref("AudioContext.decodeAudioData()")}}
-
Asynchronously decodes audio file data contained in an {{domxref("ArrayBuffer")}}. In this case, the ArrayBuffer is usually loaded from an {{domxref("XMLHttpRequest")}}'s response attribute after setting the responseType to arraybuffer. This method only works on complete files, not fragments of audio files.
-
{{domxref("AudioContext.getOutputTimestamp()")}}
-
Returns a new AudioTimestamp containing two correlated context's audio stream position values: the AudioTimestamp.contextTime member contains the time of the sample frame which is currently being rendered by the audio output device (i.e., output audio stream position), in the same units and origin as context's {{domxref("AudioContext.currentTime")}}; the AudioTimestamp.performanceTime member contains the time estimating the moment when the sample frame corresponding to the stored contextTime value was rendered by the audio output device, in the same units and origin as {{domxref("performance.now()")}}.
-
{{domxref("AudioContext.resume()")}}
-
Resumes the progression of time in an audio context that has previously been suspended.
-
{{domxref("AudioContext.suspend()")}}
-
Suspends the progression of time in the audio context, temporarily halting audio hardware access and reducing CPU/battery usage in the process.
-
- -

Obsolete methods

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

Examples

- -

Basic audio context declaration:

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

Cross browser variant:

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

Specifications

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

Browser compatibility

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

See also

- - diff --git a/files/pl/web/api/element/queryselector/index.html b/files/pl/web/api/element/queryselector/index.html deleted file mode 100644 index 62c6fe2561..0000000000 --- a/files/pl/web/api/element/queryselector/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: Element.querySelector() -slug: Web/API/Element/querySelector -translation_of: Web/API/Element/querySelector ---- -
{{APIRef("DOM")}}
- -

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

- -

Syntax

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

Parameters

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

Return value

- -

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

- -

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

- -

Exceptions

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

Examples

- -

Let's consider a few examples.

- -

Find a specific element with specific values of an attribute

- -

In this first example, the first {{HTMLElement("style")}} element which either has no type or has type "text/css" in the HTML document body is returned:

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

The entire hierarchy counts

- -

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

- -

HTML

- -
<div>
-  <h5>Original content</h5>
-  <p>
-    inside paragraph
-    <span>inside span</span>
-    inside paragraph
-  </p>
-</div>
-<div>
-  <h5>Output</h5>
-  <div id="output"></div>
-</div>
- -

JavaScript

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

Result

- -

The result looks like this:

- -

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

- -

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

- -

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

- -

More examples

- -

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

- -

Specifications

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

Browser compatibility

- -

{{ CompatibilityTable}}

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

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

- -

See also

- - diff --git a/files/pl/web/api/htmlelement/offsetheight/index.html b/files/pl/web/api/htmlelement/offsetheight/index.html deleted file mode 100644 index 1fe35e7691..0000000000 --- a/files/pl/web/api/htmlelement/offsetheight/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: element.offsetHeight -slug: Web/API/HTMLElement/offsetHeight -tags: - - DOM - - Dokumentacja_Gecko_DOM - - Gecko - - Strony_wymagające_dopracowania - - Wszystkie_kategorie -translation_of: Web/API/HTMLElement/offsetHeight -original_slug: Web/API/Element/offsetHeight ---- -

{{ ApiRef() }}

- -

offsetHeight

- -

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

- -

Składnia i wartości

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

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

- -

Opis

- -

Typically, an element's offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.

- -

Przykład

- -
-
-

padding-top

- -

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

- -

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

- -

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

- -

padding-bottom

-
-LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}
- -

grafika:offsetHeight.png

- -

Specyfikacja

- -

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

- -

Uwagi

- -

offsetHeight is a property of the DHTML object model which was first introduced by MSIE. It is sometimes referred as an element physical/graphical dimensions or an element's box height.

- -

Dokumentacja

- - diff --git a/files/pl/web/api/htmlselectelement/index.html b/files/pl/web/api/htmlselectelement/index.html deleted file mode 100644 index 72c3ab95d3..0000000000 --- a/files/pl/web/api/htmlselectelement/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: HTMLSelectElement -slug: Web/API/HTMLSelectElement -tags: - - API - - HTML DOM - - HTMLSelectElement - - Interface - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/HTMLSelectElement ---- -
{{APIRef("HTML DOM")}}
- -

The HTMLSelectElement interface represents a {{HTMLElement("select")}} HTML Element. These elements also share all of the properties and methods of other HTML elements via the {{domxref("HTMLElement")}} interface.

- -

{{InheritanceDiagram(600, 120)}}

- -

Properties

- -

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

- -
-
{{domxref("HTMLSelectElement.autofocus")}}
-
A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("autofocus", "select")}} HTML attribute, which indicates whether the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified. {{gecko_minversion_inline("2.0")}}
-
{{domxref("HTMLSelectElement.disabled")}}
-
A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("disabled", "select")}} HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.
-
{{domxref("HTMLSelectElement.form")}}{{ReadOnlyInline}}
-
An {{domxref("HTMLFormElement")}} referencing the form that this element is associated with. If the element is not associated with of a {{HTMLElement("form")}} element, then it returns null.
-
{{domxref("HTMLSelectElement.labels")}}{{ReadOnlyInline}}
-
A {{domxref("NodeList")}} of {{HTMLElement("label")}} elements associated with the element.
-
{{domxref("HTMLSelectElement.length")}}
-
An unsigned long The number of {{HTMLElement("option")}} elements in this select element.
-
{{domxref("HTMLSelectElement.multiple")}}
-
A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("multiple", "select")}} HTML attribute, which indicates whether multiple items can be selected.
-
{{domxref("HTMLSelectElement.name")}}
-
A {{domxref("DOMString")}} reflecting the {{htmlattrxref("name", "select")}} HTML attribute, containing the name of this control used by servers and DOM search functions.
-
{{domxref("HTMLSelectElement.options")}}{{ReadOnlyInline}}
-
An {{domxref("HTMLOptionsCollection")}} representing the set of {{HTMLElement("option")}} ({{domxref("HTMLOptionElement")}}) elements contained by this element.
-
{{domxref("HTMLSelectElement.required")}}
-
A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("required", "select")}} HTML attribute, which indicates whether the user is required to select a value before submitting the form. {{gecko_minversion_inline("2.0")}}
-
{{domxref("HTMLSelectElement.selectedIndex")}}
-
A long reflecting the index of the first selected {{HTMLElement("option")}} element. The value -1 indicates no element is selected.
-
{{domxref("HTMLSelectElement.selectedOptions")}}{{ReadOnlyInline}}
-
An {{domxref("HTMLCollection")}} representing the set of {{HTMLElement("option")}} elements that are selected.
-
{{domxref("HTMLSelectElement.size")}}
-
A long reflecting the {{htmlattrxref("size", "select")}} HTML attribute, which contains the number of visible items in the control. The default is 1, unless multiple is true, in which case it is 4.
-
{{domxref("HTMLSelectElement.type")}}{{ReadOnlyInline}}
-
A {{domxref("DOMString")}} represeting the form control's type. When multiple is true, it returns "select-multiple"; otherwise, it returns "select-one".
-
{{domxref("HTMLSelectElement.validationMessage")}}{{ReadOnlyInline}}
-
A {{domxref("DOMString")}} representing a localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (willValidate is false), or it satisfies its constraints.
-
{{domxref("HTMLSelectElement.validity")}}{{ReadOnlyInline}}
-
A {{domxref("ValidityState")}} reflecting the validity state that this control is in.
-
{{domxref("HTMLSelectElement.value")}}
-
A {{domxref("DOMString")}} reflecting the value of the form control. Returns the value property of the first selected option element if there is one, otherwise the empty string.
-
{{domxref("HTMLSelectElement.willValidate")}}{{ReadOnlyInline}}
-
A {{jsxref("Boolean")}} that indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.
-
- -

Methods

- -

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

- -
-
{{domxref("HTMLSelectElement.add()")}}
-
Adds an element to the collection of option elements for this select element.
-
{{domxref("HTMLSelectElement.blur()")}}{{obsolete_inline}}
-
Removes input focus from this element. This method is now implemented on {{domxref("HTMLElement")}}.
-
{{domxref("HTMLSelectElement.checkValidity()")}}
-
Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable {{domxref("HTMLInputElement/invalid_event", "invalid")}} event at the element (and returns false).
-
{{domxref("HTMLSelectElement.focus()")}}{{obsolete_inline}}
-
Gives input focus to this element. This method is now implemented on {{domxref("HTMLElement")}}.
-
{{domxref("HTMLSelectElement.item()")}}
-
Gets an item from the options collection for this {{HTMLElement("select")}} element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.
-
{{domxref("HTMLSelectElement.namedItem()")}}
-
Gets the item in the options collection with the specified name. The name string can match either the id or the name attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.
-
{{domxref("HTMLSelectElement.remove()")}}
-
Removes the element at the specified index from the options collection for this select element.
-
{{domxref("HTMLSelectElement.reportValidity()")}}
-
This method reports the problems with the constraints on the element, if any, to the user. If there are problems, it fires a cancelable {{domxref("HTMLInputElement/invalid_event", "invalid")}} event at the element, and returns false; if there are no problems, it returns true.
-
{{domxref("HTMLSelectElement.setCustomValidity()")}}
-
Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does not have a custom validity error.
-
- -

Events

- -

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

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

Example

- -

Get information about the selected option

- -
/* assuming we have the following HTML
-<select id='s'>
-    <option>First</option>
-    <option selected>Second</option>
-    <option>Third</option>
-</select>
-*/
-
-var select = document.getElementById('s');
-
-// return the index of the selected option
-console.log(select.selectedIndex); // 1
-
-// return the value of the selected option
-console.log(select.options[select.selectedIndex].value) // Second
-
- -

A better way to track changes to the user's selection is to watch for the {{domxref("HTMLElement/change_event", "change")}} event to occur on the <select>. This will tell you when the value changes, and you can then update anything you need to. See the example provided in the documentation for the change event for details.

- -

Specifications

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

Browser compatibility

- -

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

- -

See also

- - diff --git a/files/pl/web/api/mediaelementaudiosourcenode/index.html b/files/pl/web/api/mediaelementaudiosourcenode/index.html deleted file mode 100644 index 81bbce3c25..0000000000 --- a/files/pl/web/api/mediaelementaudiosourcenode/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: MediaElementAudioSourceNode -slug: Web/API/MediaElementAudioSourceNode -translation_of: Web/API/MediaElementAudioSourceNode ---- -

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

- -
-

The MediaElementAudioSourceNode interface represents an audio source consisting of an HTML5 {{ htmlelement("audio") }} or {{ htmlelement("video") }} element. It is an {{domxref("AudioNode")}} that acts as an audio source.

-
- -

A MediaElementSourceNode has no inputs and exactly one output, and is created using the {{domxref("AudioContext.createMediaElementSource")}} method. The amount of channels in the output equals the number of channels of the audio referenced by the {{domxref("HTMLMediaElement")}} used in the creation of the node, or is 1 if the {{domxref("HTMLMediaElement")}} has no audio.

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

Constructor

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

Properties

- -

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

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

Methods

- -

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

- -

Example

- -

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

- -

Specification

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

Browser compatibility

- -
- - -

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

-
- -

See also

- - diff --git a/files/pl/web/api/mousescrollevent/index.html b/files/pl/web/api/mousescrollevent/index.html deleted file mode 100644 index ed0ab35316..0000000000 --- a/files/pl/web/api/mousescrollevent/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: MouseScrollEvent -slug: Web/API/MouseScrollEvent -translation_of: Web/API/MouseScrollEvent ---- -

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

- -

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

- -

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

- -

Method overview

- - - - - - - -
void initMouseScrollEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in nsIDOMAbstractView viewArg, in long detailArg, in long screenXArg, in long screenYArg, in long clientXArg, in long clientYArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in unsigned short buttonArg, in nsIDOMEventTarget relatedTargetArg, in long axis);
- -

Attributes

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

Constants

- -

Delta modes

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

Methods

- -

initMouseScrollEvent()

- -

See nsIDOMMouseScrollEvent::initMouseScrollEvent().

- -

Browser compatibility

- -

{{ CompatibilityTable() }}

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

See also

- - diff --git a/files/pl/web/api/node/nodetype/index.html b/files/pl/web/api/node/nodetype/index.html deleted file mode 100644 index e829a351b3..0000000000 --- a/files/pl/web/api/node/nodetype/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: element.nodeType -slug: Web/API/Node/nodeType -tags: - - DOM - - Dokumentacja_Gecko_DOM - - Gecko - - Wszystkie_kategorie -translation_of: Web/API/Node/nodeType -original_slug: Web/API/Element/nodeType ---- -
- {{ApiRef}}
-

Podsumowanie

-

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

-

Składnia

-
typ = document.nodeType
-
-

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

- -

Przykład

-

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

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

Specyfikacja

- diff --git a/files/pl/web/api/push_api/index.html b/files/pl/web/api/push_api/index.html deleted file mode 100644 index e889cb6c01..0000000000 --- a/files/pl/web/api/push_api/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Push API -slug: Web/API/Push_API -translation_of: Web/API/Push_API ---- -
{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}
- -

Push API daje aplikacjom web możliwość odbierania wiadomości przesłanych z serwera, niezależnie do tego czy aplikacja pracuje w tle, lub jest wogóle załadowana w przeglądarce internetowej. To pozwala programistom dostarczać (asynchronicznie) powiadomienia i aktualizacje do użytkowników którzy zezwolili na przesyłanie notyfikacj, w efekcie mamy lepszą komunikację z użytkownikiem, którzy dostają nowe treści w odpowiednim czasie.th timely new content.

- -

Pojęcia i stosowanie

- -

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

- -

The resulting {{domxref("PushSubscription")}} includes all the information that the application needs to send a push message: an endpoint and the encryption key needed for sending data.

- -

The service worker will be started as necessary to handle incoming push messages, which are delivered to the {{domxref("ServiceWorkerGlobalScope.onpush")}} event handler. This allows apps to react to push messages being received, for example, by displaying a notification (using {{domxref("ServiceWorkerRegistration.showNotification()")}}.)

- -

Each subscription is unique to a service worker.  The endpoint for the subscription is a unique capability URL: knowledge of the endpoint is all that is necessary to send a message to your application. The endpoint URL therefore needs to be kept secret, or other applications might be able to send push messages to your application.

- -

Activating a service worker to deliver a push message can result in increased resource usage, particularly of the battery. Different browsers have different schemes for handling this, there is currently no standard mechanism. Firefox allows a limited number (quota) of push messages to be sent to an application, although Push messages that generate notifications are exempt from this limit. The limit is refreshed each time the site is visited. In comparison, Chrome applies no limit, but requires that every push message causes a notification to be displayed.

- -
-

Note: As of Gecko 44, the allowed quota of push messages per application is not incremented when a new notification fires, when another is still visible, for a period of three seconds. This handles cases where a burst of notifications is received, and not all generate a visible notification.

-
- -
-

Note: Chrome versions earlier than 52 require you to set up a project on Google Cloud Messaging to send push messages, and use the associated project number and API key when sending push notifications. It also requires an app manifest, with some special parameters to use this service.

-
- -

Interfejsy

- -
-
{{domxref("PushEvent")}}
-
Represents a push action, sent to the global scope of a {{domxref("ServiceWorker")}}. It contains information sent from an application to a {{domxref("PushSubscription")}}.
-
{{domxref("PushManager")}}
-
Provides a way to receive notifications from third-party servers, as well as request URLs for push notifications. This interface has replaced the functionality offered by the obsolete {{domxref("PushRegistrationManager")}} interface.
-
{{domxref("PushMessageData")}}
-
Provides access to push data sent by a server, and includes methods to manipulate the received data.
-
{{domxref("PushSubscription")}}
-
Provides a subcription's URL endpoint, and allows unsubscription from a push service.
-
- -

Wzbogacenia Service worker

- -

The following additions to the Service Worker API have been specified in the Push API spec to provide an entry point for using Push messages. They also monitor and respond to push and subscription change events.

- -
-
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
-
Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. This is the entry point into using Push messaging.
-
{{domxref("ServiceWorkerGlobalScope.onpush")}}
-
An event handler fired whenever a {{Event("push")}} event occurs; that is, whenever a server push message is received.
-
{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}
-
An event handler fired whenever a {{Event("pushsubscriptionchange")}} event occurs; for example, when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time.)
-
- -

Przykłady

- -

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

- -

Specyfikacje

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

Zgodność przeglądarek

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

Zobacz również

- - diff --git a/files/pl/web/api/response/index.html b/files/pl/web/api/response/index.html deleted file mode 100644 index 394a5a4a4d..0000000000 --- a/files/pl/web/api/response/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Response -slug: Web/API/Response -tags: - - API - - Experimental - - Fetch - - Fetch API - - Interface - - NeedsTranslation - - Reference - - Response - - TopicStub -translation_of: Web/API/Response ---- -
{{APIRef("Fetch API")}}
- -

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

- -

You can create a new Response object using the {{domxref("Response.Response()")}} constructor, but you are more likely to encounter a Response object being returned as the result of another API operation, for example a service worker {{domxref("Fetchevent.respondWith")}}, or a simple {{domxref("GlobalFetch.fetch()")}}.

- -

Constructor

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

Properties

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

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

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

Methods

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

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

- -
-
{{domxref("Body.arrayBuffer()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.
-
{{domxref("Body.blob()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.
-
{{domxref("Body.formData()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.
-
{{domxref("Body.json()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.
-
{{domxref("Body.text()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text).
-
- -

Examples

- -

In our basic fetch example (run example live) we use a simple fetch() call to grab an image and display it in an {{htmlelement("img")}} tag. The fetch() call returns a promise, which resolves with the Response object associated with the resource fetch operation. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.

- -
const image = document.querySelector('.my-image');
-fetch('flowers.jpg').then(function(response) {
-  return response.blob();
-}).then(function(blob) {
-  const objectURL = URL.createObjectURL(blob);
-  image.src = objectURL;
-});
- -

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

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

Specifications

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

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/pl/web/api/screen/width/index.html b/files/pl/web/api/screen/width/index.html deleted file mode 100644 index 352f6cfbf3..0000000000 --- a/files/pl/web/api/screen/width/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Screen.width -slug: Web/API/Screen/width -translation_of: Web/API/Screen/width ---- -
-
{{APIRef("CSSOM View")}}
-
- -

Zwraca szerokość ekranu.

- -

Składnia

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

Przykład

- -
// crude way to check that the screen is at least 1024x768
-if (window.screen.width >= 1024 && window.screen.height >= 768) {
-  // resolution is 1024x768 or above
-}
-
- -

Notes

- -

Note that not all of the width given by this property may be available to the window itself. When other widgets occupy space that cannot be used by the window object, there is a difference in window.screen.width and window.screen.availWidth. See also {{domxref("window.screen.height")}}.

- -

Internet Explorer will take into account the zoom setting when reporting the screen width. It will only return the real width of the screen if the zoom is set to 100%.

- -

Specyfikacja

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

Kompatybilność przeglądarek

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}6{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
diff --git a/files/pl/web/api/web_audio_api/index.html b/files/pl/web/api/web_audio_api/index.html deleted file mode 100644 index e67cec2fd6..0000000000 --- a/files/pl/web/api/web_audio_api/index.html +++ /dev/null @@ -1,503 +0,0 @@ ---- -title: Web Audio API -slug: Web/API/Web_Audio_API -translation_of: Web/API/Web_Audio_API ---- -
-

Web Audio API to potężny i uniwersalny system webowej kontroli audio umożliwiający deweloperom wybór źródeł audio, dodawanie efektów do audio, tworzenie wizualizacji audio, stosowanie efektów przestrzennych (jak panorama) i wiele więcej.

-
- -

Założenia Web Audio i jego zastosowanie

- -

Web Audio API dotyczy przebiegu operacji audio wewnątrz kontekstu audio (audio context) i został zaprojektowany po to, by umożliwić obróbkę modularną (modular routing). Podstawowe operacje audio zostają wykonywane z węzłami audio (audio nodes), które złączone tworzą wykres trasowania audio (audio routing graph). Niektóre źródła - o różnych typach układów kanałów - są wspierane nawet w obrębie pojedynczego kontekstu. Modularny design cechuje się elastycznością umożliwiającą tworzenie złożonych funkcji audio z efektami dynamicznymi.

- -

Audio nodes are linked into chains and simple webs by their inputs and outputs. They typically start with one or more sources. Sources provide arrays of sound intensities (samples) at very small timeslices, often tens of thousands of them per second. These could be either computed mathematically (such as {{domxref("OscillatorNode")}}), or they can be recordings from sound/video files (like {{domxref("AudioBufferSourceNode")}} and {{domxref("MediaElementAudioSourceNode")}}) and audio streams ({{domxref("MediaStreamAudioSourceNode")}}). In fact, sound files are just recordings of sound intensities themselves, which come in from microphones or electric instruments, and get mixed down into a single, complicated wave.

- -

Outputs of these nodes could be linked to inputs of others, which mix or modify these streams of sound samples into different streams. A common modification is multiplying the samples by a value to make them louder or quieter (as is the case with {{domxref("GainNode")}}). Once the sound has been sufficiently processed for the intended effect, it can be linked to the input of a destination ({{domxref("AudioContext.destination")}}), which sends the sound to the speakers or headphones. This last connection is only necessary if the user is supposed to hear the audio.

- -

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

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

A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information.

- -

Timing is controlled with high precision and low latency, allowing developers to write code that responds accurately to events and is able to target specific samples, even at a high sample rate. So applications such as drum machines and sequencers are well within reach.

- -

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

- -
-

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

-
- -

Web Audio API Interfaces

- -

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

- -

General audio graph definition

- -

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

- -
-
{{domxref("AudioContext")}}
-
The AudioContext interface represents an audio-processing graph built from audio modules linked together, each represented by an {{domxref("AudioNode")}}. An audio context controls the creation of the nodes it contains and the execution of the audio processing, or decoding. You need to create an AudioContext before you do anything else, as everything happens inside a context.
-
{{domxref("AudioNode")}}
-
The AudioNode interface represents an audio-processing module like an audio source (e.g. an HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} element), audio destination, intermediate processing module (e.g. a filter like {{domxref("BiquadFilterNode")}}, or volume control like {{domxref("GainNode")}}).
-
{{domxref("AudioParam")}}
-
The AudioParam interface represents an audio-related parameter, like one of an {{domxref("AudioNode")}}. It can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.
-
The {{event("ended")}} event
-
The ended event is fired when playback has stopped because the end of the media was reached.
-
- -

Defining audio sources

- -

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

- -
-
{{domxref("OscillatorNode")}}
-
The OscillatorNode interface represents a periodic waveform, such as a sine or triangle wave. It is an {{domxref("AudioNode")}} audio-processing module that causes a given frequency of wave to be created.
-
{{domxref("AudioBuffer")}}
-
The AudioBuffer interface represents a short audio asset residing in memory, created from an audio file using the {{ domxref("AudioContext.decodeAudioData()") }} method, or created with raw data using {{ domxref("AudioContext.createBuffer()") }}. Once decoded into this form, the audio can then be put into an {{ domxref("AudioBufferSourceNode") }}.
-
{{domxref("AudioBufferSourceNode")}}
-
The AudioBufferSourceNode interface represents an audio source consisting of in-memory audio data, stored in an {{domxref("AudioBuffer")}}. It is an {{domxref("AudioNode")}} that acts as an audio source.
-
{{domxref("MediaElementAudioSourceNode")}}
-
The MediaElementAudioSourceNode interface represents an audio source consisting of an HTML5 {{ htmlelement("audio") }} or {{ htmlelement("video") }} element. It is an {{domxref("AudioNode")}} that acts as an audio source.
-
{{domxref("MediaStreamAudioSourceNode")}}
-
The MediaStreamAudioSourceNode interface represents an audio source consisting of a WebRTC {{domxref("MediaStream")}} (such as a webcam, microphone, or a stream being sent from a remote computer). It is an {{domxref("AudioNode")}} that acts as an audio source.
-
- -

Defining audio effects filters

- -

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

- -
-
{{domxref("BiquadFilterNode")}}
-
The BiquadFilterNode interface represents a simple low-order filter. It is an {{domxref("AudioNode")}} that can represent different kinds of filters, tone control devices, or graphic equalizers. A BiquadFilterNode always has exactly one input and one output.
-
{{domxref("ConvolverNode")}}
-
The ConvolverNode interface is an {{domxref("AudioNode")}} that performs a Linear Convolution on a given {{domxref("AudioBuffer")}}, and is often used to achieve a reverb effect.
-
{{domxref("DelayNode")}}
-
The DelayNode interface represents a delay-line; an {{domxref("AudioNode")}} audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.
-
{{domxref("DynamicsCompressorNode")}}
-
The DynamicsCompressorNode interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.
-
{{domxref("GainNode")}}
-
The GainNode interface represents a change in volume. It is an {{domxref("AudioNode")}} audio-processing module that causes a given gain to be applied to the input data before its propagation to the output.
-
{{domxref("StereoPannerNode")}}
-
The StereoPannerNode interface represents a simple stereo panner node  that can be used to pan an audio stream left or right.
-
{{domxref("WaveShaperNode")}}
-
The WaveShaperNode interface represents a non-linear distorter. It is an {{domxref("AudioNode")}} that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.
-
{{domxref("PeriodicWave")}}
-
Describes a periodic waveform that can be used to shape the output of an {{ domxref("OscillatorNode") }}.
-
- -

Defining audio destinations

- -

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

- -
-
{{domxref("AudioDestinationNode")}}
-
The AudioDestinationNode interface represents the end destination of an audio source in a given context — usually the speakers of your device.
-
{{domxref("MediaStreamAudioDestinationNode")}}
-
The MediaStreamAudioDestinationNode interface represents an audio destination consisting of a WebRTC {{domxref("MediaStream")}} with a single AudioMediaStreamTrack, which can be used in a similar way to a {{domxref("MediaStream")}} obtained from {{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}. It is an {{domxref("AudioNode")}} that acts as an audio destination.
-
- -

Data analysis and visualization

- -

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

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

Splitting and merging audio channels

- -

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

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

Audio spatialization

- -

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

- -
-
{{domxref("AudioListener")}}
-
The AudioListener interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.
-
{{domxref("PannerNode")}}
-
The PannerNode interface represents the behavior of a signal in space. It is an {{domxref("AudioNode")}} audio-processing module describing its position with right-hand Cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.
-
- -

Audio processing in JavaScript

- -

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

- -
-

As of the August 29, 2014 version of the Web Audio API spec. these features have been marked as deprecated, and are soon to be replaced by {{ anch("Audio_Workers") }}.

-
- -
-
{{domxref("ScriptProcessorNode")}}
-
The ScriptProcessorNode interface allows the generation, processing, or analyzing of audio using JavaScript. It is an {{domxref("AudioNode")}} audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing the {{domxref("AudioProcessingEvent")}} interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.
-
{{event("audioprocess")}} (event)
-
The audioprocess event is fired when an input buffer of a Web Audio API {{domxref("ScriptProcessorNode")}} is ready to be processed.
-
{{domxref("AudioProcessingEvent")}}
-
The Web Audio API AudioProcessingEvent represents events that occur when a {{domxref("ScriptProcessorNode")}} input buffer is ready to be processed.
-
- -

Offline/background audio processing

- -

It is possible to process/render an audio graph very quickly in the background — rendering it to an {{domxref("AudioBuffer")}} rather than to the device's speakers — with the following.

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

Audio Workers

- -

Audio workers provide the ability for direct scripted audio processing to be done inside a web worker context, and are defined by a couple of interfaces (new as of 29th August 2014). These are not implemented in any browsers yet. When implemented, they will replace {{domxref("ScriptProcessorNode")}}, and the other features discussed in the Audio processing in JavaScript section above.

- -
-
{{domxref("AudioWorkerNode")}}
-
The AudioWorkerNode interface represents an {{domxref("AudioNode")}} that interacts with a worker thread to generate, process, or analyse audio directly.
-
{{domxref("AudioWorkerGlobalScope")}}
-
The AudioWorkerGlobalScope interface is a DedicatedWorkerGlobalScope-derived object representing a worker context in which an audio processing script is run; it is designed to enable the generation, processing, and analysis of audio data directly using JavaScript in a worker thread.
-
{{domxref("AudioProcessEvent")}}
-
This is an Event object that is dispatched to {{domxref("AudioWorkerGlobalScope")}} objects to perform processing.
-
- -

Obsolete interfaces

- -

The following interfaces were defined in old versions of the Web Audio API spec, but are now obsolete and have been replaced by other interfaces.

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

Example

- -

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

- -

The Web Audio API lines are highlighted; if you want to find out more about what the different methods, etc. do, have a search around the reference pages.

- -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context
-// Webkit/blink browsers need prefix, Safari won't work without window.
-
-var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options
-var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options
-var mute = document.querySelector('.mute'); // mute button
-var drawVisual; // requestAnimationFrame
-
-var analyser = audioCtx.createAnalyser();
-var distortion = audioCtx.createWaveShaper();
-var gainNode = audioCtx.createGain();
-var biquadFilter = audioCtx.createBiquadFilter();
-
-function makeDistortionCurve(amount) { // function to make curve shape for distortion/wave shaper node to use
-  var k = typeof amount === 'number' ? amount : 50,
-    n_samples = 44100,
-    curve = new Float32Array(n_samples),
-    deg = Math.PI / 180,
-    i = 0,
-    x;
-  for ( ; i < n_samples; ++i ) {
-    x = i * 2 / n_samples - 1;
-    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
-  }
-  return curve;
-};
-
-navigator.getUserMedia (
-  // constraints - only audio needed for this app
-  {
-    audio: true
-  },
-
-  // Success callback
-  function(stream) {
-    source = audioCtx.createMediaStreamSource(stream);
-    source.connect(analyser);
-    analyser.connect(distortion);
-    distortion.connect(biquadFilter);
-    biquadFilter.connect(gainNode);
-    gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together
-
-    visualize(stream);
-    voiceChange();
-
-  },
-
-  // Error callback
-  function(err) {
-    console.log('The following gUM error occured: ' + err);
-  }
-);
-
-function visualize(stream) {
-  WIDTH = canvas.width;
-  HEIGHT = canvas.height;
-
-  var visualSetting = visualSelect.value;
-  console.log(visualSetting);
-
-  if(visualSetting == "sinewave") {
-    analyser.fftSize = 2048;
-    var bufferLength = analyser.frequencyBinCount; // half the FFT value
-    var dataArray = new Uint8Array(bufferLength); // create an array to store the data
-
-    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
-
-    function draw() {
-
-      drawVisual = requestAnimationFrame(draw);
-
-      analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above
-
-      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // draw wave with canvas
-      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
-
-      canvasCtx.lineWidth = 2;
-      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
-
-      canvasCtx.beginPath();
-
-      var sliceWidth = WIDTH * 1.0 / bufferLength;
-      var x = 0;
-
-      for(var i = 0; i < bufferLength; i++) {
-
-        var v = dataArray[i] / 128.0;
-        var y = v * HEIGHT/2;
-
-        if(i === 0) {
-          canvasCtx.moveTo(x, y);
-        } else {
-          canvasCtx.lineTo(x, y);
-        }
-
-        x += sliceWidth;
-      }
-
-      canvasCtx.lineTo(canvas.width, canvas.height/2);
-      canvasCtx.stroke();
-    };
-
-    draw();
-
-  } else if(visualSetting == "off") {
-    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
-    canvasCtx.fillStyle = "red";
-    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
-  }
-
-}
-
-function voiceChange() {
-  distortion.curve = new Float32Array;
-  biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run
-
-  var voiceSetting = voiceSelect.value;
-  console.log(voiceSetting);
-
-  if(voiceSetting == "distortion") {
-    distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node
-  } else if(voiceSetting == "biquad") {
-    biquadFilter.type = "lowshelf";
-    biquadFilter.frequency.value = 1000;
-    biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad
-  } else if(voiceSetting == "off") {
-    console.log("Voice settings turned off"); // do nothing, as off option was chosen
-  }
-
-}
-
-// event listeners to change visualize and voice settings
-
-visualSelect.onchange = function() {
-  window.cancelAnimationFrame(drawVisual);
-  visualize(stream);
-}
-
-voiceSelect.onchange = function() {
-  voiceChange();
-}
-
-mute.onclick = voiceMute;
-
-function voiceMute() { // toggle to mute and unmute sound
-  if(mute.id == "") {
-    gainNode.gain.value = 0; // gain set to 0 to mute sound
-    mute.id = "activated";
-    mute.innerHTML = "Unmute";
-  } else {
-    gainNode.gain.value = 1; // gain set to 1 to unmute sound
-    mute.id = "";
-    mute.innerHTML = "Mute";
-  }
-}
-
- -

Specifications

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

Browser compatibility

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

See also

- - - - diff --git a/files/pl/web/api/webgl_api/tutorial/index.html b/files/pl/web/api/webgl_api/tutorial/index.html deleted file mode 100644 index cecc84cbfe..0000000000 --- a/files/pl/web/api/webgl_api/tutorial/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: WebGL tutorial -slug: Web/API/WebGL_API/Tutorial -tags: - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial ---- -
{{WebGLSidebar}}
- -
-

WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 3D rendering in an HTML {{HTMLElement("canvas")}} in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code(shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

-
- -

This tutorial describes how to use the <canvas> element to draw WebGL graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with WebGL and will provide code snippets that may get you started in building your own content.

- -

Before you start

- -

Using the <canvas> element is not very difficult, but you do need a basic understanding of HTML and JavaScript. The <canvas> element and WebGL are not supported in some older browsers, but are supported in recent versions of all major browsers. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.

- -

In this tutorial

- -
-
Getting started with WebGL
-
How to set up a WebGL context.
-
Adding 2D content to a WebGL context
-
How to render simple flat shapes using WebGL.
-
Using shaders to apply color in WebGL
-
Demonstrates how to add color to shapes using shaders.
-
Animating objects with WebGL
-
Shows how to rotate and translate objects to create simple animations.
-
Creating 3D objects using WebGL
-
Shows how to create and animate a 3D object (in this case, a cube).
-
Using textures in WebGL
-
Demonstrates how to map textures onto the faces of an object.
-
Lighting in WebGL
-
How to simulate lighting effects in your WebGL context.
-
Animating textures in WebGL
-
Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.
-
diff --git a/files/pl/web/api/window/content/index.html b/files/pl/web/api/window/content/index.html deleted file mode 100644 index 66eed370a9..0000000000 --- a/files/pl/web/api/window/content/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: window.content -slug: Web/API/Window/content -tags: - - DOM - - Dokumentacja_Gecko_DOM - - Gecko - - Strony_wymagające_dopracowania - - Wszystkie_kategorie -translation_of: Web/API/Window/content ---- -

{{ ApiRef() }}

- -

Podsumowanie

- -

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

- -

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

- -

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

- -

Składnia

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

Przykład

- -

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

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

Specyfikacja

- -

Nie jest częścią żadnej specyfikacji.

- -

Zobacz także

- - diff --git a/files/pl/web/api/window/opendialog/index.html b/files/pl/web/api/window/opendialog/index.html deleted file mode 100644 index 6d24bf03fd..0000000000 --- a/files/pl/web/api/window/opendialog/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: window.openDialog -slug: Web/API/Window/openDialog -tags: - - DOM - - DOM_0 - - Dokumentacja_Gecko_DOM - - Gecko - - Strony_wymagające_dopracowania - - Wszystkie_kategorie -translation_of: Web/API/Window/openDialog ---- -

{{ ApiRef() }}

-

Podsumowanie

-

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

-

The optional parameters, if present, will be bundled up in a JavaScript Array object and added to the newly created window as a property named window.arguments. They may be referenced in the JavaScript of the window at any time, including during the execution of a load handler. These parameters may be used, then, to pass arguments to and from the dialog window.

-

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

-

Składnia

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

Przykład

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

Uwagi

-

Nowe możliwości

-

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

-

Domyślne zachowanie

-

Możliwości chrome i dialog są zawsze assumed on, unless explicitly turned off ("chrome=no"). openDialog treats the absence of the features parameter as does DOM:window.open, (that is, an empty string sets all features to off) except chrome and dialog, which default to on. If the features parameter is a zero-length string, or contains only one or more of the behaviour features (chrome, dependent, dialog and modal) the chrome features are assumed "OS' choice." That is, window creation code is not given specific instructions, but is instead allowed to select the chrome that best fits a dialog on that operating system.

-

Passing extra parameters to the dialog

-

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

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

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

-

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

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

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

-

Zwracanie wartości z okienka dialogowego

-

Since window.close() erases all properties associated with the dialog window (i.e. the variables specified in the JavaScript code which gets loaded from the dialog), it is not possible to pass return values back past the close operation using globals (or any other constructs).

-

To be able to pass values back to the caller, you have to supply some object via the extra parameters. You can then access this object from within the dialog code and set properties on it, containing the values you want to return or preserve past the window.close() operation.

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

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

-

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

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

Zobacz także .

-

Specyfikacja

-

{{ DOM0() }}

diff --git a/files/pl/web/api/window/sidebar/index.html b/files/pl/web/api/window/sidebar/index.html deleted file mode 100644 index 280b5dcce3..0000000000 --- a/files/pl/web/api/window/sidebar/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Window.sidebar -slug: Web/API/Window/sidebar -tags: - - DOM - - NeedsTranslation - - Non-standard - - Property - - Reference - - TopicStub - - Window -translation_of: Web/API/Window/sidebar ---- -
{{APIRef}} {{Non-standard_header}}
- -

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

- -

Notes

- -

The sidebar object returned has the following methods:

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

Specification

- -

Mozilla-specific. Not part of any standard.

diff --git a/files/pl/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/pl/web/api/xmlhttprequest/using_xmlhttprequest/index.html deleted file mode 100644 index 94be8159b1..0000000000 --- a/files/pl/web/api/xmlhttprequest/using_xmlhttprequest/index.html +++ /dev/null @@ -1,658 +0,0 @@ ---- -title: Wykorzystanie XMLHttpRequest -slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest -translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest -original_slug: XMLHttpRequest/Using_XMLHttpRequest ---- -

XMLHttpRequest makes sending HTTP requests very easy.  You simply create an instance of the object, open a URL, and send the request.  The HTTP status of the result, as well as the result's contents, are available in the request object when the transaction is completed. This page outlines some of the common and even slightly obscure use cases for this powerful JavaScript object.

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

Types of requests

-

A request made via XMLHttpRequest can fetch the data in one of two ways, asynchronously or synchronously. The type of request is dictated by the optional async argument (the third argument) that is set on the XMLHttpRequest open() method. If this argument is true or not specified, the XMLHttpRequest is processed asynchronously, otherwise the process is handled synchronously. A detailed discussion and demonstrations of these two types of requests can be found on the synchronous and asynchronous requests page. In general, you should rarely if ever use synchronous requests.

-
- Note: Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.
-

Handling responses

-

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

-

Analyzing and manipulating the responseXML property

-

If you use XMLHttpRequest to get the content of a remote XML document, the responseXML property will be a DOM Object containing a parsed XML document, which can be hard to manipulate and analyze. There are four primary ways of analyzing this XML document:

-
    -
  1. Using XPath to address (point to) parts of it.
    2. -
  2. Using JXON to convert it into a JavaScript Object tree.
    3. -
  3. Manually Parsing and serializing XML to strings or objects.
    4. -
  4. Using XMLSerializer to serialize DOM trees to strings or to files.
    5. -
  5. RegExp can be used if you always know the content of the XML document beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to linebreaks. However, this method is a "last resort" since if the XML code changes slightly, the method will likely fail.
    6. -
-

Analyzing and manipulating a responseText property containing an HTML document

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

If you use XMLHttpRequest to get the content of a remote HTML webpage, the responseText property is a string containing a "soup" of all the HTML tags, which can be hard to manipulate and analyze. There are three primary ways of analyzing this HTML soup string:

-
    -
  1. Use the XMLHttpRequest.responseXML property.
    2. -
  2. Inject the content into the body of a document fragment via fragment.body.innerHTML and traverse the DOM of the fragment.
    3. -
  3. RegExp can be used if you always know the content of the HTML responseText beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to linebreaks. However, this method is a "last resort" since if the HTML code changes slightly, the method will likely fail.
    4. -
-

Handling binary data

-

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

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

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

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

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

-

Monitoring progress

-

XMLHttpRequest provides the ability to listen to various events that can occur while the request is being processed. This includes periodic progress notifications, error notifications, and so forth.

-

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

-
var oReq = new XMLHttpRequest();
-
-oReq.addEventListener("progress", updateProgress, false);
-oReq.addEventListener("load", transferComplete, false);
-oReq.addEventListener("error", transferFailed, false);
-oReq.addEventListener("abort", transferCanceled, false);
-
-oReq.open();
-
-// ...
-
-// progress on transfers from the server to the client (downloads)
-function updateProgress (oEvent) {
-  if (oEvent.lengthComputable) {
-    var percentComplete = oEvent.loaded / oEvent.total;
-    // ...
-  } else {
-    // Unable to compute progress information since the total size is unknown
-  }
-}
-
-function transferComplete(evt) {
-  alert("The transfer is complete.");
-}
-
-function transferFailed(evt) {
-  alert("An error occurred while transferring the file.");
-}
-
-function transferCanceled(evt) {
-  alert("The transfer has been canceled by the user.");
-}
-

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

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

The progress event handler, specified by the updateProgress() function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's total and loaded fields.  However, if the lengthComputable field is false, the total length is not known and will be zero.

-

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

-
var oReq = new XMLHttpRequest();
-
-oReq.upload.addEventListener("progress", updateProgress, false);
-oReq.upload.addEventListener("load", transferComplete, false);
-oReq.upload.addEventListener("error", transferFailed, false);
-oReq.upload.addEventListener("abort", transferCanceled, false);
-
-oReq.open();
-
-
- Note: Progress events are not available for the file: protocol.
-
- Note: Currently there are open bugs for the progress event that are still affecting version 25 of Firefox on OS X and Linux.
-
-

Note: Starting in {{Gecko("9.0")}}, progress events can now be relied upon to come in for every chunk of data received, including the last chunk in cases in which the last packet is received and the connection closed before the progress event is fired. In this case, the progress event is automatically fired when the load event occurs for that packet. This lets you now reliably monitor progress by only watching the "progress" event.

-
-
-

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

-
-

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

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

Note that there's no way to be certain from the information received by the loadend event as to which condition caused the operation to terminate; however, you can use this to handle tasks that need to be performed in all end-of-transfer scenarios.

-

Submitting forms and uploading files

-

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

- -

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

-

Using nothing but XMLHttpRequest

-

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

-

A brief introduction to the submit methods

-

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

- -

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

- -

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

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

A little vanilla framework

-

All these things are done automatically by the web browser whenever you submit a {{ HTMLElement("form") }}. But if you want to do the same things using JavaScript you have to instruct the interpreter about all things. So, how to send forms in pure AJAX is too complex to be explained in detail here. For this reason we posted here a complete (but still didactic) framework, which is able to use all the four ways of submit and, also, to upload files:

-
- 
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>Sending forms with pure AJAX &ndash; MDN</title>
-<script type="text/javascript">
-
-"use strict";
-
-/*\
-|*|
-|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
-\*/
-
-if (!XMLHttpRequest.prototype.sendAsBinary) {
-  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
-    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
-    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
-      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
-    }
-    /* send as ArrayBufferView...: */
-    this.send(ui8Data);
-    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
-  };
-}
-
-/*\
-|*|
-|*|  :: AJAX Form Submit Framework ::
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
-|*|
-|*|  This framework is released under the GNU Public License, version 3 or later.
-|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
-|*|
-|*|  Syntax:
-|*|
-|*|   AJAXSubmit(HTMLFormElement);
-\*/
-
-var AJAXSubmit = (function () {
-
-  function ajaxSuccess () {
-    /* console.log("AJAXSubmit - Success!"); */
-    alert(this.responseText);
-    /* you can get the serialized data through the "submittedData" custom property: */
-    /* alert(JSON.stringify(this.submittedData)); */
-  }
-
-  function submitData (oData) {
-    /* the AJAX request... */
-    var oAjaxReq = new XMLHttpRequest();
-    oAjaxReq.submittedData = oData;
-    oAjaxReq.onload = ajaxSuccess;
-    if (oData.technique === 0) {
-      /* method is GET */
-      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
-      oAjaxReq.send(null);
-    } else {
-      /* method is POST */
-      oAjaxReq.open("post", oData.receiver, true);
-      if (oData.technique === 3) {
-        /* enctype is multipart/form-data */
-        var sBoundary = "---------------------------" + Date.now().toString(16);
-        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
-        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
-      } else {
-        /* enctype is application/x-www-form-urlencoded or text/plain */
-        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
-        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
-      }
-    }
-  }
-
-  function processStatus (oData) {
-    if (oData.status > 0) { return; }
-    /* the form is now totally serialized! do something before sending it to the server... */
-    /* doSomething(oData); */
-    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
-    submitData (oData);
-  }
-
-  function pushSegment (oFREvt) {
-    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
-    this.owner.status--;
-    processStatus(this.owner);
-  }
-
-  function plainEscape (sText) {
-    /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
-    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
-    return sText.replace(/[\s\=\\]/g, "\\$&");
-  }
-
-  function SubmitRequest (oTarget) {
-    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
-    /* console.log("AJAXSubmit - Serializing form..."); */
-    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
-    this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
-    this.receiver = oTarget.action;
-    this.status = 0;
-    this.segments = [];
-    var fFilter = this.technique === 2 ? plainEscape : escape;
-    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
-      oField = oTarget.elements[nItem];
-      if (!oField.hasAttribute("name")) { continue; }
-      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
-      if (sFieldType === "FILE" && oField.files.length > 0) {
-        if (this.technique === 3) {
-          /* enctype is multipart/form-data */
-          for (nFile = 0; nFile < oField.files.length; nFile++) {
-            oFile = oField.files[nFile];
-            oSegmReq = new FileReader();
-            /* (custom properties:) */
-            oSegmReq.segmentIdx = this.segments.length;
-            oSegmReq.owner = this;
-            /* (end of custom properties) */
-            oSegmReq.onload = pushSegment;
-            this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
-            this.status++;
-            oSegmReq.readAsBinaryString(oFile);
-          }
-        } else {
-          /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
-          for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
-        }
-      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
-        /* field type is not FILE or is FILE but is empty */
-        this.segments.push(
-          this.technique === 3 ? /* enctype is multipart/form-data */
-            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
-          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
-            fFilter(oField.name) + "=" + fFilter(oField.value)
-        );
-      }
-    }
-    processStatus(this);
-  }
-
-  return function (oFormElement) {
-    if (!oFormElement.action) { return; }
-    new SubmitRequest(oFormElement);
-  };
-
-})();
-
-</script>
-</head>
-<body>
-
-<h1>Sending forms with pure AJAX</h1>
-
-<h2>Using the GET method</h2>
-
-<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h2>Using the POST method</h2>
-<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
-
-<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h3>Enctype: text/plain</h3>
-
-<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      Your name: <input type="text" name="user" />
-    </p>
-    <p>
-      Your message:<br />
-      <textarea name="message" cols="40" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h3>Enctype: multipart/form-data</h3>
-
-<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Upload example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" /><br />
-      Sex:
-      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
-      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
-      Password: <input type="password" name="secret" /><br />
-      What do you prefer:
-      <select name="image_type">
-        <option>Books</option>
-        <option>Cinema</option>
-        <option>TV</option>
-      </select>
-    </p>
-    <p>
-      Post your photos:
-      <input type="file" multiple name="photos[]">
-    </p>
-    <p>
-      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
-      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
-    </p>
-    <p>
-      Describe yourself:<br />
-      <textarea name="description" cols="50" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-</body>
-</html>
-
-

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

-
<?php
-/* register.php */
-
-header("Content-type: text/plain");
-
-/*
-NOTE: You should never use `print_r()` in production scripts, or
-otherwise output client-submitted data without sanitizing it first.
-Failing to sanitize can lead to cross-site scripting vulnerabilities.
-*/
-
-echo ":: data received via GET ::\n\n";
-print_r($_GET);
-
-echo "\n\n:: Data received via POST ::\n\n";
-print_r($_POST);
-
-echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
-if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
-
-echo "\n\n:: Files received ::\n\n";
-print_r($_FILES);
-
-
-

The syntax of this script is the following:

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

Using FormData objects

-

The FormData constructor lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples and explanations of how one can utilize FormData with XMLHttpRequests see the Using FormData Objects page. For didactic purpose only we post here a translation of the previous example transformed so as to make use of the FormData API. Note the brevity of the code:

-
- 
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>Sending forms with FormData &ndash; MDN</title>
-<script type="text/javascript">
-"use strict";
-
-function ajaxSuccess () {
-  alert(this.responseText);
-}
-
-function AJAXSubmit (oFormElement) {
-  if (!oFormElement.action) { return; }
-  var oReq = new XMLHttpRequest();
-  oReq.onload = ajaxSuccess;
-  if (oFormElement.method.toLowerCase() === "post") {
-    oReq.open("post", oFormElement.action, true);
-    oReq.send(new FormData(oFormElement));
-  } else {
-    var oField, sFieldType, nFile, sSearch = "";
-    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
-      oField = oFormElement.elements[nItem];
-      if (!oField.hasAttribute("name")) { continue; }
-      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
-      if (sFieldType === "FILE") {
-        for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
-      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
-        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
-      }
-    }
-    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
-    oReq.send(null);
-  }
-}
-</script>
-</head>
-<body>
-
-<h1>Sending forms with FormData</h1>
-
-<h2>Using the GET method</h2>
-
-<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h2>Using the POST method</h2>
-<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
-
-<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h3>Enctype: text/plain</h3>
-
-<p>The text/plain encoding is not supported by the FormData API.</p>
-
-<h3>Enctype: multipart/form-data</h3>
-
-<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Upload example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" /><br />
-      Sex:
-      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
-      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
-      Password: <input type="password" name="secret" /><br />
-      What do you prefer:
-      <select name="image_type">
-        <option>Books</option>
-        <option>Cinema</option>
-        <option>TV</option>
-      </select>
-    </p>
-    <p>
-      Post your photos:
-      <input type="file" multiple name="photos[]">
-    </p>
-    <p>
-      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
-      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
-    </p>
-    <p>
-      Describe yourself:<br />
-      <textarea name="description" cols="50" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-</body>
-</html>
-
-
- Note: As we said, {{domxref("FormData")}} objects are not stringifiable objects. If you want to stringify a submitted data, use the previous pure-AJAX example. Note also that, although in this example there are some file {{ HTMLElement("input") }} fields, when you submit a form through the FormData API you do not need to use the FileReader API also: files are automatically loaded and uploaded.
-

Get last modified date

-
function getHeaderTime () {
-  alert(this.getResponseHeader("Last-Modified"));  /* A valid GMTString date or null */
-}
-
-var oReq = new XMLHttpRequest();
-oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html", true);
-oReq.onload = getHeaderTime;
-oReq.send();
-

Do something when last modified date changes

-

Let's create these two functions:

-
function getHeaderTime () {
-
-  var
-    nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)),
-    nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
-
-  if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
-    window.localStorage.setItem('lm_' + this.filepath, Date.now());
-    isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit);
-  }
-
-}
-
-function ifHasChanged(sURL, fCallback) {
-  var oReq = new XMLHttpRequest();
-  oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL, true);
-  oReq.callback = fCallback;
-  oReq.filepath = sURL;
-  oReq.onload = getHeaderTime;
-  oReq.send();
-}
-

Test:

-
/* Let's test the file "yourpage.html"... */
-
-ifHasChanged("yourpage.html", function (nModif, nVisit) {
-  alert("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
-});
-

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

-

Cross-site XMLHttpRequest

-

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

-

Bypassing the cache

-

A, cross-browser compatible approach to bypassing the cache is to append a timestamp to the URL, being sure to include a "?" or "&" as appropriate.  For example:

-
http://foo.com/bar.html -> http://foo.com/bar.html?12345
-http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
-
-

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

-

You can automatically adjust URLs using the following code:

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

Security

-

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

-

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

-

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

-

XMLHttpRequests being stopped

-

If you end up with an XMLHttpRequest having status=0 and statusText=null, it means that the request was not allowed to be performed. It was UNSENT. A likely cause for this is when the XMLHttpRequest origin (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then open(). This case can happen for example when one has an XMLHttpRequest that gets fired on an onunload event for a window: the XMLHttpRequest gets in fact created when the window to be closed is still there, and then the request is sent (ie open()) when this window has lost its focus and potentially different window has gained focus. The way to avoid this problem is to set a listener on the new window "activate" event that gets set when the old window has its "unload" event fired.

-

Using XMLHttpRequest from JavaScript modules / XPCOM components

-

Instantiating XMLHttpRequest from a JavaScript module or an XPCOM component works a little differently; it can't be instantiated using the XMLHttpRequest() constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.

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

Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason.  If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.

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

See also

-
    -
  1. MDN AJAX introduction
    2. -
  2. HTTP access control
    3. -
  3. How to check the security state of an XMLHTTPRequest over SSL
    4. -
  4. XMLHttpRequest - REST and the Rich User Experience
    5. -
  5. Microsoft documentation
    6. -
  6. Apple developers' reference
    7. -
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. -
  8. The XMLHttpRequest Object: W3C Specification
    9. -
  9. Web Progress Events specification
    10. -
diff --git a/files/pl/web/css/attribute_selectors/index.html b/files/pl/web/css/attribute_selectors/index.html deleted file mode 100644 index 93ffda8fec..0000000000 --- a/files/pl/web/css/attribute_selectors/index.html +++ /dev/null @@ -1,238 +0,0 @@ ---- -title: Selektory artybutów -slug: Web/CSS/Attribute_selectors -translation_of: Web/CSS/Attribute_selectors ---- -
{{CSSRef}}
- -

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

- -
/* <a> Element z artybutem "title" */
-a[title] {
-  color: purple;
-}
-
-/* <a> elemente href zawierajacy "https://example.org" */
-a[href="https://example.org"] {
-  color: green;
-}
-
-/* <a> element href zawirający "example" */
-a[href*="example"] {
-  font-size: 2em;
-}
-
-/* <a> elementy href kończące się na  ".org" */
-a[href$=".org"] {
-  font-style: italic;
-}
-
-/* <a> elementy, których atrybut klasy zawiera słowo "logo" */
-a[class~="logo"] {
-  padding: 2px;
-}
- -

Syntax

- -
-
[attr]
-
- -

Reprezentuje elementy z atrybutem o nazwie attr.

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

Examples

- - - -

CSS

- -
a {
-  color: blue;
-}
-
-/* Internal links, beginning with "#" */
-a[href^="#"] {
-  background-color: gold;
-}
-
-/* Links with "example" anywhere in the URL */
-a[href*="example"] {
-  background-color: silver;
-}
-
-/* Links with "insensitive" anywhere in the URL,
-   regardless of capitalization */
-a[href*="insensitive" i] {
-  color: cyan;
-}
-
-/* Links with "cAsE" anywhere in the URL,
-with matching capitalization */
-a[href*="cAsE" s] {
-  color: pink;
-}
-
-/* Links that end in ".org" */
-a[href$=".org"] {
-  color: red;
-}
- -

HTML

- -
<ul>
-  <li><a href="#internal">Internal link</a></li>
-  <li><a href="http://example.com">Example link</a></li>
-  <li><a href="#InSensitive">Insensitive internal link</a></li>
-  <li><a href="http://example.org">Example org link</a></li>
-</ul>
- -

Result

- -

{{EmbedLiveSample("Links")}}

- -

Languages

- -

CSS

- -
/* All divs with a `lang` attribute are bold. */
-div[lang] {
-  font-weight: bold;
-}
-
-/* All divs without a `lang` attribute are italicized. */
-div:not([lang]) {
-  font-style: italic;
-}
-
-/* All divs in US English are blue. */
-div[lang~="en-us"] {
-  color: blue;
-}
-
-/* All divs in Portuguese are green. */
-div[lang="pt"] {
-  color: green;
-}
-
-/* All divs in Chinese are red, whether
-   simplified (zh-CN) or traditional (zh-TW). */
-div[lang|="zh"] {
-  color: red;
-}
-
-/* All divs with a Traditional Chinese
-   `data-lang` are purple. */
-/* Note: You could also use hyphenated attributes
-   without double quotes */
-div[data-lang="zh-TW"] {
-  color: purple;
-}
-
- -

HTML

- -
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
-<div lang="pt">Olá Mundo!</div>
-<div lang="zh-CN">世界您好！</div>
-<div lang="zh-TW">世界您好！</div>
-<div data-lang="zh-TW">世界您好！</div>
-
- -

Result

- -

{{EmbedLiveSample("Languages")}}

- -

HTML ordered lists

- -

The HTML specification requires the {{htmlattrxref("type", "input")}} attribute to be matched case-insensitively due to it primarily being used in the {{HTMLElement("input")}} element, trying to use attribute selectors to with the {{htmlattrxref("type", "ol")}} attribute of an {{HTMLElement("ol", "ordered list")}} doesn't work without the case-sensitive modifier.

- -

CSS

- -
/* List types require the case sensitive flag due to a quirk in how HTML treats the type attribute. */
-ol[type="a"] {
-  list-style-type: lower-alpha;
-  background: red;
-}
-
-ol[type="a" s] {
-  list-style-type: lower-alpha;
-  background: lime;
-}
-
-ol[type="A" s] {
-  list-style-type: upper-alpha;
-  background: lime;
-}
- -

HTML

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

Result

- -

{{EmbedLiveSample("HTML_ordered_lists")}}

- -

Specifications

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

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/pl/web/css/background-size/index.html b/files/pl/web/css/background-size/index.html deleted file mode 100644 index bceed2abcd..0000000000 --- a/files/pl/web/css/background-size/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: background-size -slug: Web/CSS/background-size -translation_of: Web/CSS/background-size ---- -
{{CSSRef}}
- -

Właściwość background-size określa wielkość elementu background-image. Obrazek może pozostać w jego domyślnych wymiarach, rozciągnięty do nowych wymiarów lub ustawiony tak, aby zajmował całą dostępną przestrzeń zachowując swoje proporcje.

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

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

- -

Syntax

- -
/* Wartości słowne */
-background-size: cover;
-background-size: contain;
-
-/* Właściwości z jedną wartością */
-/* szerokość obrazka (wysokość stanie się 'auto') */
-background-size: 50%;
-background-size: 3.2em;
-background-size: 12px;
-background-size: auto;
-
-/* Właściwości z dwoma wartościami */
-/* pierwsza wartość: szerokość obrazka, druga wartość: wysokość */
-background-size: 50% auto;
-background-size: 3em 25%;
-background-size: auto 6px;
-background-size: auto auto;
-
-/* Wiele teł */
-background-size: auto, auto; /* Not to be confused with `auto auto` */
-background-size: 50%, 25%, 25%;
-background-size: 6px, auto, contain;
-
-/* Wartości globalne */
-background-size: inherit;
-background-size: initial;
-background-size: unset;
-
- -

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

- - - -

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

- -

Values

- -
-
contain
-
Skaluje obrazek do jak największych rozmiarów, bez jego rozciągania czy przycinania.
-
cover
-
Skaluje obrazek do jak największych rozmiarów, bez jego rozciągania. Jeżeli proporcje obrazu są inne od elementu, jest on przycinany pionowo lub poziomo - tak, żeby nie zostało puste miejsce.
-
auto
-
Skaluje tło w odpowiednim kierunku, po to aby zachować jego nieodłączne proporcje.
-
{{cssxref("<length>")}}
-
Rozciąga obrazek w odpowiednim kierunku do określonej długości. Nie można używać wartości ujemnych.
-
{{cssxref("<percentage>")}}
-
[do przetłumaczenia na: Polski]
-
Stretches the image in the corresponding dimension to the specified percentage of the background positioning area. The background positioning area is determined by the value of {{cssxref("background-origin")}} (by default, the padding box). However, if the background's {{cssxref("background-attachment")}} value is fixed, the positioning area is instead the entire {{glossary("viewport")}}. Negative values are not allowed.
-
- -

Intrinsic dimensions and proportions

- -

The computation of values depends on the image's intrinsic dimensions (width and height) and intrinsic proportions (width-to-height ratio). These attributes are as follows:

- - - -
-

Note: The behavior of <gradient>s changed in Gecko 8.0 {{geckoRelease("8.0")}}. Before this, they were treated as images with no intrinsic dimensions, but with intrinsic proportions identical to that of the background positioning area.

-
- -
-

Note: In Gecko, background images created using the {{cssxref("element()")}} function are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion. This is non-standard behavior.

-
- -

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

- -
-
If both components of background-size are specified and are not auto:
-
The background image is rendered at the specified size.
-
If the background-size is contain or cover:
-
While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.
-
If the background-size is auto or auto auto:
-
-
    -
  • If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.
    • -
  • If the image has no intrinsic dimensions and has no intrinsic proportions, it's rendered at the size of the background positioning area.
    • -
  • If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if contain had been specified instead.
    • -
  • If the image has only one intrinsic dimension and has intrinsic proportions, it's rendered at the size corresponding to that one dimension. The other dimension is computed using the specified dimension and the intrinsic proportions.
    • -
  • If the image has only one intrinsic dimension but has no intrinsic proportions, it's rendered using the specified dimension and the other dimension of the background positioning area.
    • -
-
-
-
Note: SVG images have a preserveAspectRatio attribute that defaults to the equivalent of contain. In Firefox 43, as opposed to Chrome 52, an explicit background-size causes preserveAspectRatio to be ignored.
-
-
If the background-size has one auto component and one non-auto component:
-
-
    -
  • If the image has intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the specified dimension and the intrinsic proportions.
    • -
  • If the image has no intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the image's corresponding intrinsic dimension, if there is one. If there is no such intrinsic dimension, it becomes the corresponding dimension of the background positioning area.
    • -
-
-
- -
-

Note: Background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers. Be careful about relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable.

-
- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

Please see Scaling background images for examples.

- -

Notes

- -

If you use a <gradient> as the background and specify a background-size to go with it, it's best not to specify a size that uses a single auto component, or is specified using only a width value (for example, background-size: 50%). Rendering of <gradient>s in such cases changed in Firefox 8, and at present is generally inconsistent across browsers, which do not all implement rendering in full accordance with the CSS3 background-size specification and with the CSS3 Image Values gradient specification.

- -
.gradient-example {
-  width: 50px;
-  height: 100px;
-  background-image: linear-gradient(blue, red);
-
-  /* Not safe to use */
-  background-size: 25px;
-  background-size: 50%;
-  background-size: auto 50px;
-  background-size: auto 50%;
-
-  /* Safe to use */
-  background-size: 25px 50px;
-  background-size: 50% 50%;
-}
-
- -

Note that it's particularly not recommended to use a pixel dimension and an auto dimension with a <gradient>, because it's impossible to replicate rendering in versions of Firefox prior to 8, and in browsers not implementing Firefox 8's rendering, without knowing the exact size of the element whose background is being specified.

- -

Specifications

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

{{cssinfo}}

- -

Browser compatibility

- -

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

- -

See also

- - diff --git a/files/pl/web/css/box-decoration-break/index.html b/files/pl/web/css/box-decoration-break/index.html deleted file mode 100644 index 5873b850fb..0000000000 --- a/files/pl/web/css/box-decoration-break/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: box-decoration-break -slug: Web/CSS/box-decoration-break -tags: - - CSS - - CSS Fragmentation - - CSS Property - - Experimental -translation_of: Web/CSS/box-decoration-break ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

Summary

- -

The box-decoration-break CSS property specifies how the {{ Cssxref("background") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("border-image") }}, {{ Cssxref("box-shadow") }}, {{ Cssxref("margin") }} and {{ Cssxref("clip") }} of an element is applied when the box for the element is fragmented.  Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a page break when printed.  Each piece of the rendering for the element is called a fragment.

- -

{{cssinfo}}

- -

Syntax

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

Values

- -
-
slice
-
The element is rendered as if its box were not fragmented, and then the rendering for this hypothetical box is sliced into pieces for each line/column/page. Note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own width if the break occurs in the block direction. See the CSS specification for details.
-
clone
-
Each box fragment is rendered independently with the specified border, padding and margin wrapping each fragment. The {{ Cssxref("border-radius") }}, {{ Cssxref("border-image") }} and {{ Cssxref("box-shadow") }}, are applied to each fragment independently. The background is drawn independently in each fragment which means that a background image with {{ Cssxref("background-repeat") }}: no-repeat may be repeated multiple times.
-
- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

Inline box fragments

- -

An inline element that contains line-breaks styled with:

- -
.example {
-  background: linear-gradient(to bottom right, yellow, green);
-  box-shadow:
-    8px 8px 10px 0px deeppink,
-    -5px -5px 5px 0px blue,
-    5px 5px 15px 0px yellow;
-  padding: 0em 1em;
-  border-radius: 16px;
-  border-style: solid;
-  margin-left: 10px;
-  font: 24px sans-serif;
-  line-height: 2;
-}
-
-...
-<span class="example">The<br>quick<br>orange fox</span>
- -

Results in:

- -

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

- -

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

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

Results in:

- -

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

- -

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

- -

Here's an example of an inline element using a large border-radius value. The second "iM" has a line-break between the "i" and the "M". For comparison, the first "iM" is without line-breaks. Note that if you stack the rendering of the two fragments horizontally next to each other it will result in the non-fragmented rendering.

- -

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

- -

Try the above example in your browser.

- -

Block box fragments

- -

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

- -

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

- -

Fragmenting the above block into three columns results in:

- -

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

- -

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

- -

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

- -

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

- -

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

- -

You can try the block examples above in your browser.

- -

Specifications

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

Browser compatibility

- -

{{ CompatibilityTable() }}

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

[1] Note that Firefox implemented an non-standard version of this property before Firefox 32 named {{ Cssxref("-moz-background-inline-policy") }}. That property is unsupported since Firefox 32.

- -

See also

- - diff --git a/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html deleted file mode 100644 index eb9d550390..0000000000 --- a/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html +++ /dev/null @@ -1,609 +0,0 @@ ---- -title: Auto-placement in CSS Grid Layout -slug: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout -translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout ---- -

Poza możliwością umieszczania elementów

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

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

-
- -

Default rules for auto-placement

- -

As you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell. The default flow is to arrange items by row. Grid will lay an item out into each cell of row 1. If you have created additional rows using the grid-template-rows property then grid will continue placing items in these rows. If the grid does not have enough rows in the explicit grid to place all of the items new implicit rows will be created.

- -

Sizing rows in the implicit grid

- -

The default for automatically created rows in the implicit grid is for them to be auto-sized. This means that they will contain the content added to them without causing an overflow.

- -

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

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

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

-
- -

You can use {{cssxref("minmax","minmax()")}} in your value for {{cssxref("grid-auto-rows")}} enabling the creation of rows that are a minimum size but then grow to fit content if it is taller.

- -
- - -
<div class="wrapper">
-     <div>One</div>
-     <div>Two</div>
-     <div>Three</div>
-     <div>Four
-     <br>This cell
-     <br>Has extra
-     <br>content.
-     <br>Max is auto
-     <br>so the row expands.
-     </div>
-     <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: minmax(100px, auto);
-}
-
- -

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

-
- -

You can also pass in a track listing, this will repeat. The following track listing will create an initial implicit row track as 100 pixels and a second as 200px. This will continue for as long as content is added to the implicit grid. Track listings are not supported in Firefox.

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

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

-
- -

Auto-placement by column

- -

You can also ask grid to auto-place items by column. Using the property {{cssxref("grid-auto-flow")}} with a value of column. In this case grid will add items in rows that you have defined using {{cssxref("grid-template-rows")}}. When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized. You can control the size of implicit column tracks with {{cssxref("grid-auto-columns")}}, this works in the same way as {{cssxref("grid-auto-rows")}}.

- -

In this next example I have created a grid with three row tracks of 200 pixels height. I am auto-placing by column and the columns created will be a column width of 300 pixels, then a column width of 100 pixels until there are enough column tracks to hold all of the items.

- -
-
.wrapper {
-    display: grid;
-    grid-template-rows: repeat(3, 200px);
-    grid-gap: 10px;
-    grid-auto-flow: column;
-    grid-auto-columns: 300px 100px;
-}
-
- - - -
<div class="wrapper">
-   <div>One</div>
-   <div>Two</div>
-   <div>Three</div>
-   <div>Four</div>
-   <div>Five</div>
-   <div>Six</div>
-   <div>Seven</div>
-   <div>Eight</div>
-</div>
-
- -

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

-
- -

The order of auto placed items

- -

A grid can contain a mixture of items. Some of the items may have a position on the grid, but others may be auto-placed. This can be helpful, if you have a document order that reflects the order in which items sit on the grid you may not need to write CSS rules to place absolutely everything. The specification contains a long section detailing the Grid item placement algorithm, however for most of us we just need to remember a few simple rules for our items.

- -

Order modified document order

- -

Grid places items that have not been given a grid position in what is described in the specification as “order modified document order”. This means that if you have used the order property at all, the items will be placed by that order, not their DOM order. Otherwise they will stay by default in the order that they are entered in the document source.

- -

Items with placement properties

- -

The first thing grid will do is place any items that have a position. In the example below I have 12 grid items. Item 2 and item 5 have been placed using line based placement on the grid. You can see how those items are placed and the other items then auto-place in the spaces. The auto-placed items will place themselves before the placed items in DOM order, they don’t start after the position of a placed item that comes before them.

- -
- - -
<div class="wrapper">
-   <div>One</div>
-   <div>Two</div>
-   <div>Three</div>
-   <div>Four</div>
-   <div>Five</div>
-   <div>Six</div>
-   <div>Seven</div>
-   <div>Eight</div>
-   <div>Nine</div>
-   <div>Ten</div>
-   <div>Eleven</div>
-   <div>Twelve</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-auto-rows: 100px;
-  grid-gap: 10px;
-}
- .wrapper div:nth-child(2) {
-   grid-column: 3;
-   grid-row: 2 / 4;
- }
- .wrapper div:nth-child(5) {
-   grid-column: 1 / 3;
-   grid-row: 1 / 3;
-}
-
- -

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

-
- -

Deal with items that span tracks

- -

You can use placement properties while still taking advantage of auto-placement. In this next example I have added to the layout by setting odd items to span two tracks both for rows and columns. I do this with the {{cssxref("grid-column-end")}} and {{cssxref("grid-row-end")}} properties and setting the value of this to span 2. What this means is that the start line of the item will be set by auto-placement, and the end line will span two tracks.

- -

You can see how this then leaves gaps in the grid, as for the auto-placed items if grid comes across an item that doesn’t fit into a track, it will move to the next row until it finds a space the item can fit in.

- -
- - -
<div class="wrapper">
-   <div>One</div>
-   <div>Two</div>
-   <div>Three</div>
-   <div>Four</div>
-   <div>Five</div>
-   <div>Six</div>
-   <div>Seven</div>
-   <div>Eight</div>
-   <div>Nine</div>
-   <div>Ten</div>
-   <div>Eleven</div>
-   <div>Twelve</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-auto-rows: 100px;
-  grid-gap: 10px;
-}
-.wrapper div:nth-child(4n+1) {
-  grid-column-end: span 2;
-  grid-row-end: span 2;
-  background-color: #ffa94d;
-}
- .wrapper div:nth-child(2) {
-   grid-column: 3;
-   grid-row: 2 / 4;
- }
- .wrapper div:nth-child(5) {
-   grid-column: 1 / 3;
-   grid-row: 1 / 3;
-}
-
- -

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

-
- -

Filling in the gaps

- -

So far, other than items we have specifically placed, grid is always progressing forward and keeping items in DOM order. This is generally what you want, if you are laying out a form for example you wouldn’t want the labels and fields to become jumbled up in order to fill in some gap. However sometimes, we are laying things out that don’t have a logical order and we would like to create a layout that doesn’t have gaps in it.

- -

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

- -

Having done this, grid will now backfill the gaps, as it moves through the grid it leaves gaps as before, but then if it finds an item that will fit in a previous gap it will pick it up and take it out of DOM order to place it in the gap. As with any other reordering in grid this does not change the logical order. Tab order for example, will still follow the document order. We will take a look at the potential accessibility issues of Grid Layout in a later guide, but you should take care when creating this disconnect between the visual order and display order.

- -
- - -
<div class="wrapper">
-   <div>One</div>
-   <div>Two</div>
-   <div>Three</div>
-   <div>Four</div>
-   <div>Five</div>
-   <div>Six</div>
-   <div>Seven</div>
-   <div>Eight</div>
-   <div>Nine</div>
-   <div>Ten</div>
-   <div>Eleven</div>
-   <div>Twelve</div>
-</div>
-
- -
.wrapper div:nth-child(4n+1) {
-  grid-column-end: span 2;
-  grid-row-end: span 2;
-  background-color: #ffa94d;
-}
- .wrapper div:nth-child(2) {
-   grid-column: 3;
-   grid-row: 2 / 4;
- }
- .wrapper div:nth-child(5) {
-   grid-column: 1 / 3;
-   grid-row: 1 / 3;
-}
-.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-auto-rows: 100px;
-  grid-gap: 10px;
-  grid-auto-flow: dense;
-}
-
- -

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

-
- -

Anonymous grid items

- -

There is a mention in the specification of anonymous grid items. These are created if you have a string of text inside your grid container, that is not wrapped in any other element. In the example below we have three grid items, assuming you had set the parent with a class of grid to display: grid. The first is an anonymous item as it has no enclosing markup, this item will always be dealt with via the auto-placement rules. The other two are grid items enclosed in a div, they might be auto-placed or you could place these with a positioning method onto your grid.

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

Anonymous items are always auto-placed because there is no way to target them. Therefore if you have some unwrapped text for some reason in your grid, be aware that it might show up somewhere unexpected as it will be auto-placed according to the auto-placement rules.

- -

Use cases for auto-placement

- -

Auto-placement is useful whenever you have a collection of items. That could be items that do not have a logical order such as a gallery of photos, or product listing. In that case you might choose to use the dense packing mode to fill in any holes in your grid. In my image gallery example I have some landscape and some portrait images. I have set landscape images – with a class of landscape to span two column tracks. I then use grid-auto-flow: dense to create a densely packed grid.

- -
-
.wrapper {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-    grid-gap: 10px;
-    grid-auto-flow: dense;
-    list-style: none;
-    margin: 1em auto;
-    padding: 0;
-    max-width: 800px;
-}
-.wrapper li {
-    border: 1px solid #ccc;
-}
-.wrapper li.landscape {
-    grid-column-end: span 2;
-}
-.wrapper li img {
-   display: block;
-   object-fit: cover;
-   width: 100%;
-   height: 100%;
-}
-
- -
<ul class="wrapper">
-   <li><img src="https://placehold.it/200x300" alt="placeholder"></li>
-   <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li>
-   <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li>
-   <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li>
-   <li><img src="https://placehold.it/200x300" alt="placeholder"></li>
-   <li><img src="https://placehold.it/200x300" alt="placeholder"></li>
-   <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li>
-   <li><img src="https://placehold.it/200x300" alt="placeholder"></li>
-   <li><img src="https://placehold.it/200x300" alt="placeholder"></li>
-   <li><img src="https://placehold.it/200x300" alt="placeholder"></li>
-</ul>
-
- -

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

-
- -

Auto-placement can also help you lay out interface items which do have logical order. An example is the definition list in this next example. Definition lists are an interesting challenge to style as they are flat, there is nothing wrapping the groups of dt and dd items. In my example I am allowing auto-placement to place the items, however I have classes that start a dt in column 1, and dd in column 2, this ensure that terms go on one side and definitions on the other - no matter how many of each we have.

- -
- - -
<div class="wrapper">
-   <dl>
-       <dt>Mammals</dt>
-       <dd>Cat</dd>
-       <dd>Dog</dd>
-       <dd>Mouse</dd>
-       <dt>Fish</dt>
-       <dd>Guppy</dd>
-       <dt>Birds</dt>
-       <dd>Pied Wagtail</dd>
-       <dd>Owl</dd>
-   </dl>
-</div>
-
- -
dl {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  max-width: 300px;
-  margin: 1em;
-  line-height: 1.4;
-}
-dt {
-  grid-column: 1;
-  font-weight: bold;
-}
-dd {
-   grid-column: 2;
- }
-
- -

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

-
- -

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

- -

There are a couple of things that often come up as questions. Currently we can’t do things like target every other cell of the grid with our items. A related issue may have already come to mind if you followed the last guide about named lines on the grid. It would be to define a rule that said “auto-place items against the next line named “n”, and grid would then skip other lines.There is an issue raised about this on the CSSWG GitHub repository, and you would be welcome to add your own use cases to this.

- -

It may be that you come up with your own use cases for auto-placement or any other part of grid layout. If you do, raise them as issues or add to an existing issue that could solve your use case. This will help to make future versions of the specification better.

- - diff --git a/files/pl/web/css/media_queries/using_media_queries/index.html b/files/pl/web/css/media_queries/using_media_queries/index.html deleted file mode 100644 index 8944867c66..0000000000 --- a/files/pl/web/css/media_queries/using_media_queries/index.html +++ /dev/null @@ -1,643 +0,0 @@ ---- -title: Using media queries -slug: Web/CSS/Media_Queries/Using_media_queries -translation_of: Web/CSS/Media_Queries/Using_media_queries ---- -

Media query składa się z jej typu oraz przynajmniej jednego wyrażenia, zadaniem którego jest określenie zakresu działania kodu css, poprzez użycie takich wartości jak szerokość, wysokość czy kolor. Media queries zostały dodane w specyfikacji CSS3, pozwalając na przygotowanie określonego stylu zawartości strony, w zależności od urządzenia docelowego dla kodu, bez potrzeby zmiany samej treści w każdym z przypadków. 

- -

Składnia

- -

Każda Media query składa się z typu medium docelowego, a także, zgodnie ze specyfikacją CSS3, zawiera jedno lub więcej wyrażeń logicznych (ang. media features), które zwracają wartość true lub false. Wynik query jest prawdziwy, jeżeli typ medium jest zgodny z aktualnym urządzaniem (np. gdy rozdzielczość ekranu jest zgodna z podanymi warunkami). Media query zostanie wykonana, tylko jeśli wszystkie jej wyrażenia będą prawdziwe. 

- -
<!-- Media query użyta na elemencie link -->
-<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
-
-<!-- Media query w środku arkusza stylów  -->
-<style>
-@media (max-width: 600px) {
-  .facet_sidebar {
-    display: none;
-  }
-}
-</style>
-
- -

Jeżeli warunki zostaną spełnione, wskazane arkusze stylów, lub zasady CSS w przypadku stylu osadzonego, zostaną załadowane, zgodnie z zasadą kaskadowości css. Należy zaznaczyć, że załączone style za pomocą znacznika link będą pobierane niezależnie od tego czy media query zostanie wykonana.

- -

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

- -

Operatory logiczne

- -

Możesz tworzyć zaawansowane media queries za pomocą operatorów logicznych - not, and oraz only. Operator and używany jest do łączenia wielu wyrażeń logicznych, w jedną media query. Nakładają one wymaganie, aby każda zeleżność była prawdziwa, wykonując przez to podany zestaw styli. Operator not używany jest do zanegowanie całej media query. Celem operatora only jest zaaplikowanie CSS'a tylko w przypadku, gdy wszystkie warunki są spełnione ( użyteczne gdy chcemy zapobiec użyciu znacznika media przez starsze przeglądarki. Jak już wspomnieliśmy, używając operatorów only oraz not musisz określić typ medium.

- -

Możesz również połączyć wiele media queries w listę, oddzielając kolejne wyrażenia media średnikiem. Jeżeli jakakolwiek query jest prawdziwa, całe wyrażenie zwróci true. Takie wyrażenie jest równoznaczne z logicznym operatorem or

- -

and

- -

The and keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied all media type, could look like this:

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

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

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

Now the above media query will only return true if the viewport is 700px wide or wider and the display is in landscape. If, however, you only wanted this to apply if the display in question was of the media type TV, you could chain these features with a media type using an and operator.

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

Now, the above media query will only apply if the media type is TV, the viewport is 700px wide or wider, and the display is in landscape.

- -

comma-separated lists

- -

Comma-separated lists behave like the logical operator or when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. This means the comma-separated media queries can target different media features, types, and states.

- -

For instance, if you wanted to apply a set of styles if the viewing device either had a minimum width of 700px or was a handheld in landscape, you could write the following:

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

Above, if I were on a screen device with a viewport width of 800px, the media statement would return true because the first part, interpreted as @media all and (min-width: 700px) would apply to my device and therefore return true, despite the fact that my screen device would fail the handheld media type check in the second media query. Likewise, if I were on a handheld device held in landscape with a viewport width of 500px, while the first media query would fail due to the viewport width, the second media query would succeed and thus the media statement would return true.

- -

not

- -

The not keyword applies to the whole media query and returns true if the media query would otherwise return false (such as monochrome on a color display or a screen width of 600px with a min-width: 700px feature query). A not will only negate the media query it is applied to and not to every media query if present in a comma-separated list of media queries. The not keyword cannot be used to negate an individual feature query, only an entire media query. For example, the not is evaluated last in the following query:

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

This means that the query is evaluated like this:

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

... rather than like this:

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

As another example, look at the following media query:

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

It is evaluated like this:

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

only

- -

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

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

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

- -
media_query_list: <media_query> [, <media_query> ]*
-media_query: [[only | not]? <media_type> [ and <expression> ]*]
-  | <expression> [ and <expression> ]*
-expression: ( <media_feature> [: <value>]? )
-media_type: all | aural | braille | handheld | print |
-  projection | screen | tty | tv | embossed
-media_feature: width | min-width | max-width
-  | height | min-height | max-height
-  | device-width | min-device-width | max-device-width
-  | device-height | min-device-height | max-device-height
-  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
-  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
-  | color | min-color | max-color
-  | color-index | min-color-index | max-color-index
-  | monochrome | min-monochrome | max-monochrome
-  | resolution | min-resolution | max-resolution
-  | scan | grid
- -

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

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

Media features

- -

Most media features can be prefixed with "min-" or "max-" to express "greater or equal to" or "less than or equal to" constraints.  This avoids using the "<" and ">" symbols, which would conflict with HTML and XML.  If you use a media feature without specifying a value, the expression resolves to true if the feature's value is non-zero.

- -
Note: If a media feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false.  For example, querying the aspect ratio of an aural device always results in false.
- -

color

- -

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

- -

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

- -
Note: If the color components have different numbers of bits per color component, the smallest number is used.  For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component.  If the device uses indexed colors, the minimum number of bits per color component in the color table is used.
- -

Examples

- -

To apply a style sheet to all color devices:

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

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

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

color-index

- -

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

- -

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

- -

Examples

- -

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

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

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

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

aspect-ratio

- -

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

- -

Describes the aspect ratio of the targeted display area of the output device.  This value consists of two positive integers separated by a slash ("/") character.  This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).

- -

Example

- -

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

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

This selects the style when the aspect ratio is either 1:1 or greater. In other words, these styles will only be applied when the viewing area is square or landscape.

- -

device-aspect-ratio

- -

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

- -

Describes the aspect ratio of the output device.  This value consists of two positive integers separated by a slash ("/") character.  This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).

- -

Example

- -

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

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

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

- -

device-height

- -

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

- -

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

- -

Example

- -

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

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

device-width

- -

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

- -

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

- -

Example

- -

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

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

grid

- -

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

- -

Determines whether the output device is a grid device or a bitmap device.  If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1.  Otherwise it is zero.

- -

Example

- -

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

- -
@media handheld and (grid) and (max-width: 15em) { ... }
-
- -
Note: The "em" unit has a special meaning for grid devices; since the exact width of an "em" can't be determined, 1em is assumed to be the width of one grid cell horizontally, and the height of one cell vertically.
- -

height

- -

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

- -

The height media feature describes the height of the output device's rendering surface (such as the height of the viewport or of the page box on a printer).

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

monochrome

- -

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

- -

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

- -

Examples

- -

To apply a style sheet to all monochrome devices:

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

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

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

orientation

- -

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

- -

Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.

- -

Example

- -

To apply a style sheet only in portrait orientation:

- -
@media all and (orientation: portrait) { ... }
- -
Note: This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.
- -

resolution

- -

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

- -

Indicates the resolution (pixel density) of the output device.  The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).

- -

Example

- -

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

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

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

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

scan

- -

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

- -

Describes the scanning process of television output devices.

- -

Example

- -

To apply a style sheet only to progressive scanning televisions:

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

width

- -

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

- -

The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).

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

Examples

- -

If you want to specify a style sheet for handheld devices, or screen devices with a width greater than 20em, you can use this query:

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

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

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

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

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

Mozilla-specific media features

- -

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

- -

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

- -

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

- -

If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS pseudo-class.

- -

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

- -

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

- -

If the user has configured their device to use the "Graphite" appearance on Mac OS X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS X, this is 0.

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

Gives the number of device pixels per CSS pixel.

- -
-

Do not use this feature.

- -

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

- -

Example:

- -
@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
-       (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
-       (min-resolution: 2dppx),             /* The standard way */
-       (min-resolution: 192dpi)             /* dppx fallback */
- -

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

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

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

- -

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

- -

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

- - - -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.

- -

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

- -

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

- -

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

- -

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

- -

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

- -

Example

- -

You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.

- -

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

- -

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

- -

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

- -

If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.

- -

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

- -

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

- -

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

- - - -

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

- -

Browser compatibility

- -

{{ CompatibilityTable() }}

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

[1] grid media type is not supported

- -

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

- -

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

- -

[4] tv media type is not supported

- -

 

- -

See also

- - diff --git a/files/pl/web/guide/html/editable_content/index.html b/files/pl/web/guide/html/editable_content/index.html deleted file mode 100644 index 77abe792b7..0000000000 --- a/files/pl/web/guide/html/editable_content/index.html +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: Making content editable -slug: Web/Guide/HTML/Editable_content -translation_of: Web/Guide/HTML/Editable_content ---- -

In progress. In HTML, any element can be editable. By using some JavaScript event handlers, you can transform your web page into a full and fast rich text editor. This article provides some information about this functionality.

- -

How does it work?

- -

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

- -

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

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

Here's the above HTML in action:

- -

{{ EmbedLiveSample('How_does_it_work') }}

- -

Executing commands

- -

When an HTML element has contenteditable set to true, the {{ domxref("document.execCommand()") }} method is made available. This lets you run commands to manipulate the contents of the editable region. Most commands affect the document's selection by, for example, applying a style to the text (bold, italics, etc), while others insert new elements (like adding a link) or affect an entire line (indenting). When using contentEditable, calling execCommand() will affect the currently active editable element.

- -

Differences in markup generation

- -

Use of contenteditable across different browsers has been painful for a long time because of the differences in generated markup between browsers. For example, even something as simple as what happens when you press Enter/Return to create a new line of text inside an editable element was handled differently across the major browsers (Firefox inserted {{htmlelement("br")}} elements, IE/Opera used {{htmlelement("p")}}, Chrome/Safari used {{htmlelement("div")}}).

- -

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

- -

Try it out in the above example.

- -
-

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

-
- -

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

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

Security

- -

For security reasons, Firefox doesn't let JavaScript code use clipboard related features (copy, paste, etc.) by default. You can enable them by setting the preferences shown below using about:config:

- -
user_pref("capability.policy.policynames", "allowclipboard");
-user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
-user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
-user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
- -

Example: A simple but complete rich text editor

- -
-
<!doctype html>
-<html>
-<head>
-<title>Rich Text Editor</title>
-<script type="text/javascript">
-var oDoc, sDefTxt;
-
-function initDoc() {
-  oDoc = document.getElementById("textBox");
-  sDefTxt = oDoc.innerHTML;
-  if (document.compForm.switchMode.checked) { setDocMode(true); }
-}
-
-function formatDoc(sCmd, sValue) {
-  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
-}
-
-function validateMode() {
-  if (!document.compForm.switchMode.checked) { return true ; }
-  alert("Uncheck \"Show HTML\".");
-  oDoc.focus();
-  return false;
-}
-
-function setDocMode(bToSource) {
-  var oContent;
-  if (bToSource) {
-    oContent = document.createTextNode(oDoc.innerHTML);
-    oDoc.innerHTML = "";
-    var oPre = document.createElement("pre");
-    oDoc.contentEditable = false;
-    oPre.id = "sourceText";
-    oPre.contentEditable = true;
-    oPre.appendChild(oContent);
-    oDoc.appendChild(oPre);
-  } else {
-    if (document.all) {
-      oDoc.innerHTML = oDoc.innerText;
-    } else {
-      oContent = document.createRange();
-      oContent.selectNodeContents(oDoc.firstChild);
-      oDoc.innerHTML = oContent.toString();
-    }
-    oDoc.contentEditable = true;
-  }
-  oDoc.focus();
-}
-
-function printDoc() {
-  if (!validateMode()) { return; }
-  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
-  oPrntWin.document.open();
-  oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
-  oPrntWin.document.close();
-}
-</script>
-<style type="text/css">
-.intLink { cursor: pointer; }
-img.intLink { border: 0; }
-#toolBar1 select { font-size:10px; }
-#textBox {
-  width: 540px;
-  height: 200px;
-  border: 1px #000000 solid;
-  padding: 12px;
-  overflow: scroll;
-}
-#textBox #sourceText {
-  padding: 0;
-  margin: 0;
-  min-width: 498px;
-  min-height: 200px;
-}
-#editMode label { cursor: pointer; }
-</style>
-</head>
-<body onload="initDoc();">
-<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
-<input type="hidden" name="myDoc">
-<div id="toolBar1">
-<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
-<option selected>- formatting -</option>
-<option value="h1">Title 1 &lt;h1&gt;</option>
-<option value="h2">Title 2 &lt;h2&gt;</option>
-<option value="h3">Title 3 &lt;h3&gt;</option>
-<option value="h4">Title 4 &lt;h4&gt;</option>
-<option value="h5">Title 5 &lt;h5&gt;</option>
-<option value="h6">Subtitle &lt;h6&gt;</option>
-<option value="p">Paragraph &lt;p&gt;</option>
-<option value="pre">Preformatted &lt;pre&gt;</option>
-</select>
-<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
-<option class="heading" selected>- font -</option>
-<option>Arial</option>
-<option>Arial Black</option>
-<option>Courier New</option>
-<option>Times New Roman</option>
-</select>
-<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
-<option class="heading" selected>- size -</option>
-<option value="1">Very small</option>
-<option value="2">A bit small</option>
-<option value="3">Normal</option>
-<option value="4">Medium-large</option>
-<option value="5">Big</option>
-<option value="6">Very big</option>
-<option value="7">Maximum</option>
-</select>
-<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
-<option class="heading" selected>- color -</option>
-<option value="red">Red</option>
-<option value="blue">Blue</option>
-<option value="green">Green</option>
-<option value="black">Black</option>
-</select>
-<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
-<option class="heading" selected>- background -</option>
-<option value="red">Red</option>
-<option value="green">Green</option>
-<option value="black">Black</option>
-</select>
-</div>
-<div id="toolBar2">
-<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" />
-<img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC">
-<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" />
-<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" />
-<img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg==">
-<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" />
-<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" />
-<img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" />
-<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" />
-<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" />
-<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" />
-<img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" />
-<img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" />
-<img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" />
-<img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" />
-<img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" />
-<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" />
-<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" />
-<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" />
-<img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" />
-</div>
-<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
-<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
-<p><input type="submit" value="Send" /></p>
-</form>
-</body>
-</html>
-
-
- -
Note: if you want to see how to standardize the creation and the insertion of your editor in your page, please see our more complete rich-text editor example.
- -

See also

- - diff --git a/files/pl/web/guide/performance/index.html b/files/pl/web/guide/performance/index.html deleted file mode 100644 index 00c4b9d7fe..0000000000 --- a/files/pl/web/guide/performance/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Optimization and performance -slug: Web/Guide/Performance -tags: - - Landing - - NeedsTranslation - - Optimization - - Performance - - TopicStub - - Web -translation_of: Web/Guide/Performance ---- -

When building modern Web apps and sites, it's important to make your content perform well. That is, to make it work quickly and efficiently. This lets it work effectively both for users of powerful desktop systems as well as for handheld devices with less power.

-

{{LandingPageListSubpages}}

diff --git a/files/pl/web/html/element/heading_elements/index.html b/files/pl/web/html/element/heading_elements/index.html deleted file mode 100644 index c3eafe6774..0000000000 --- a/files/pl/web/html/element/heading_elements/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: '

–

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

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

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

Attributes

- -

These elements only include the global attributes.

- -
-

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

-
- -

Usage notes

- - - -

Examples

- -

All headings

- -

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

- -
<h1>Heading level 1</h1>
-<h2>Heading level 2</h2>
-<h3>Heading level 3</h3>
-<h4>Heading level 4</h4>
-<h5>Heading level 5</h5>
-<h6>Heading level 6</h6>
-
- -

Here is the result of this code:

- -

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

- -

Example page

- -

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

- -
<h1>Heading elements</h1>
-<h2>Summary</h2>
-<p>Some text here...</p>
-
-<h2>Examples</h2>
-<h3>Example 1</h3>
-<p>Some text here...</p>
-
-<h3>Example 2</h3>
-<p>Some text here...</p>
-
-<h2>See also</h2>
-<p>Some text here...</p>
-
- -

Here is the result of this code:

- -

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

- -

Accessibility concerns

- - - -

A common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.

- -

Don't

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

Do

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

Nesting

- -

Headings may be nested as subsections to reflect the organization of the content of the page. Most screen readers can also generate an ordered list of all the headings on a page, which can help a person quickly determine the hierarchy of the content:

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

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

- - - -

Labeling section content

- -

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

- -

Sectioning content can be labeled using a combination of the aria-labelledby and {{htmlattrxref("id")}} attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.

- -

Example

- -
<header>
-  <nav aria-labelledby="primary-navigation">
-    <h2 id="primary-navigation">Primary navigation</h2>
-    <!-- navigation items -->
-  </nav>
-</header>
-
-<!-- page content -->
-
-<footer>
-  <nav aria-labelledby="footer-navigation">
-    <h2 id="footer-navigation">Footer navigation</h2>
-    <!-- navigation items -->
-  </nav>
-</footer>
-
- -

In this example, screen reading technology would announce that there are two {{HTMLElement("nav")}} sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each nav element's contents to determine their purpose.

- - - -

Specifications

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

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/pl/web/html/element/input/button/index.html b/files/pl/web/html/element/input/button/index.html deleted file mode 100644 index 8c97a75321..0000000000 --- a/files/pl/web/html/element/input/button/index.html +++ /dev/null @@ -1,341 +0,0 @@ ---- -title: -slug: Web/HTML/Element/Input/button -translation_of: Web/HTML/Element/input/button ---- -
{{HTMLRef}}
- -

{{HTMLElement("input")}} elements of type button are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the {{event("click")}} event).

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

Note: While <input> elements of type button are still perfectly valid HTML, the newer {{HTMLElement("button")}} element is now the favored way to create buttons. Given that a {{HTMLElement("button")}}’s label text is inserted between the opening and closing tags, you can include HTML in the label, even images.

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

Value

- -

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

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

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

- -

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

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

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

- -

Using buttons

- -

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

- -

A simple button

- -

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

- -
<form>
-  <input type="button" value="Start machine">
-</form>
-<p>The machine is stopped.</p>
- -
const button = document.querySelector('input');
-const paragraph = document.querySelector('p');
-
-button.addEventListener('click', updateButton);
-
-function updateButton() {
-  if (button.value === 'Start machine') {
-    button.value = 'Stop machine';
-    paragraph.textContent = 'The machine has started!';
-  } else {
-    button.value = 'Start machine';
-    paragraph.textContent = 'The machine is stopped.';
-  }
-}
- -

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

- -

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

- -

Adding keyboard shortcuts to buttons

- -

Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any {{HTMLElement("input")}} for which it makes sense — you use the {{htmlattrxref("accesskey")}} global attribute.

- -

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

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

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

- -
-

Note: The problem with the above example of course is that the user will not know what the access key is! In a real site, you'd have to provide this information in a way that doesn't intefere with the site design (for example by providing an easily accessible link that points to information on what the site accesskeys are).

-
- -

Disabling and enabling a button

- -

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

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

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

- - - -

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

- -

If the disabled attribute isn't specified, the button inherits its disabled state from its parent element. This makes it possible to enable and disable groups of elements all at once by enclosing them in a container such as a {{HTMLElement("fieldset")}} element, and then setting disabled on the container.

- -

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

- - - -

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

- -
-

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

-
- -

Validation

- -

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

- -

Examples

- -

The below example shows a very simple drawing app created using a {{htmlelement("canvas")}} element and some simple CSS and JavaScript (we'll hide the CSS for brevity). The top two controls allow you to choose the color and size of the drawing pen. The button, when clicked, invokes a function that clears the canvas.

- -
<div class="toolbar">
-  <input type="color" aria-label="select pen color">
-  <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span>
-  <input type="button" value="Clear canvas">
-</div>
-
-<canvas class="myCanvas">
-  <p>Add suitable fallback here.</p>
-</canvas>
- - - -
var canvas = document.querySelector('.myCanvas');
-var width = canvas.width = window.innerWidth;
-var height = canvas.height = window.innerHeight-85;
-var ctx = canvas.getContext('2d');
-
-ctx.fillStyle = 'rgb(0,0,0)';
-ctx.fillRect(0,0,width,height);
-
-var colorPicker = document.querySelector('input[type="color"]');
-var sizePicker = document.querySelector('input[type="range"]');
-var output = document.querySelector('.output');
-var clearBtn = document.querySelector('input[type="button"]');
-
-// covert degrees to radians
-function degToRad(degrees) {
-  return degrees * Math.PI / 180;
-};
-
-// update sizepicker output value
-
-sizePicker.oninput = function() {
-  output.textContent = sizePicker.value;
-}
-
-// store mouse pointer coordinates, and whether the button is pressed
-var curX;
-var curY;
-var pressed = false;
-
-// update mouse pointer coordinates
-document.onmousemove = function(e) {
-  curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
-  curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
-}
-
-canvas.onmousedown = function() {
-  pressed = true;
-};
-
-canvas.onmouseup = function() {
-  pressed = false;
-}
-
-clearBtn.onclick = function() {
-  ctx.fillStyle = 'rgb(0,0,0)';
-  ctx.fillRect(0,0,width,height);
-}
-
-function draw() {
-  if(pressed) {
-    ctx.fillStyle = colorPicker.value;
-    ctx.beginPath();
-    ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
-    ctx.fill();
-  }
-
-  requestAnimationFrame(draw);
-}
-
-draw();
- -

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

- -

Specifications

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

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/pl/web/html/element/meta/index.html b/files/pl/web/html/element/meta/index.html deleted file mode 100644 index 8fbc0241f3..0000000000 --- a/files/pl/web/html/element/meta/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: ': Element metadanych na poziomie dokumentów' -slug: Web/HTML/Element/meta -translation_of: Web/HTML/Element/meta ---- -
{{HTMLRef}}
- -

Element HTML <meta> reprezentuje {{Glossary("Metadata","metadane")}}, które nie mogą być reprezentowane przez inne elementy związane z metadanymi w HTML, takie jak {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} lub {{HTMLElement("title")}}.

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

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

- - - -

Attributes

- -

This element includes the global attributes.

- -
-

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

-
- -
-
{{htmlattrdef("charset")}}
-
This attribute declares the document's character encoding. If the attribute is present, its value must be an ASCII case-insensitive match for the string "utf-8".
-
{{htmlattrdef("content")}}
-
This attribute contains the value for the {{htmlattrxref("http-equiv", "meta")}} or {{htmlattrxref("name", "meta")}} attribute, depending on which is used.
-
{{htmlattrdef("http-equiv")}}
-
-

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

- -
    -
  • content-security-policy - -

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

    -
    • -
  • content-type -

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

    -
    • -
  • default-style -

    Sets the name of the default CSS style sheet set.

    -
    • -
  • x-ua-compatible -

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

    -
    • -
  • refresh -
    This instruction specifies:
    - -
      -
    • The number of seconds until the page should be reloaded - only if the {{htmlattrxref("content", "meta")}} attribute contains a positive integer.
      • -
    • The number of seconds until the page should redirect to another - only if the {{htmlattrxref("content", "meta")}} attribute contains a positive integer followed by the string ';url=', and a valid URL.
      • -
    - -
    Accessibility concerns
    - -
    Pages set with a refresh value run the risk of having the time interval being too short. People navigating with the aid of assistive technology such as a screen reader may be unable to read through and understand the page's content before being automatically redirected. The abrupt, unannounced updating of the page content may also be disorienting for people experiencing low vision conditions.
    - - -
    • -
-
-
{{htmlattrdef("name")}}
-
-

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

- -

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

-
-
- -

Examples

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

Specifications

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

Browser compatibility

- - - -
{{Compat("html.elements.meta")}}
diff --git a/files/pl/web/html/global_attributes/spellcheck/index.html b/files/pl/web/html/global_attributes/spellcheck/index.html deleted file mode 100644 index a0b6c48785..0000000000 --- a/files/pl/web/html/global_attributes/spellcheck/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: sprawdzanie pisowni -slug: Web/HTML/Global_attributes/spellcheck -translation_of: Web/HTML/Global_attributes/spellcheck -original_slug: Web/HTML/Global_attributes/pisownia ---- -
{{HTMLSidebar("Global_attributes")}}
- -

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

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

It may have the following values:

- - - -
-

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

-
- -

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

- -

This attribute is merely a hint for the browser: browsers are not required to check for spelling errors. Typically non-editable elements are not checked for spelling errors, even if the spellcheck attribute is set to true and the browser supports spellchecking.

- -

Specifications

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

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/pl/web/http/authentication/index.html b/files/pl/web/http/authentication/index.html deleted file mode 100644 index d1a365fd50..0000000000 --- a/files/pl/web/http/authentication/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: HTTP authentication -slug: Web/HTTP/Authentication -translation_of: Web/HTTP/Authentication ---- -
{{HTTPSidebar}}
- -

Protokół HTTP zapewnia ogólną strukturę kontroli dostępu i uwierzytelniania. Ta strona stanowi wprowadzenie do struktury HTTP służącej do uwierzytelniania i pokazuje, jak ograniczyć dostęp do serwera za pomocą schematu HTTP „Basic”.

- -

Ogólna struktura uwierzytelniania HTTP

- -

{{RFC ("7235")}} definiuje strukturę uwierzytelniania HTTP, która może być używana przez serwer do {{glosariusza ("wyzwanie")}} żądania klienta, a przez klienta do dostarczania informacji uwierzytelniających.

- -

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

- -
    -
  1. Serwer odpowiada klientowi statusem odpowiedzi {{HTTPStatus ("401")}} (Unauthorized) i dostarcza informacji na temat autoryzacji za pomocą nagłówka odpowiedzi {{HTTPHeader ("WWW-Authenticate")}} zawierającego co najmniej jeden wyzwanie.
    2. -
  2. A client that wants to authenticate itself with the server can then do so by including an {{HTTPHeader("Authorization")}} request header with the credentials.
    3. -
  3. Usually a client will present a password prompt to the user and will then issue the request including the correct Authorization header.
    4. -
- -

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

- -

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

- -

Proxy authentication

- -

The same challenge and response mechanism can be used for proxy authentication. As both resource authentication and proxy authentication can coexist, a different set of headers and status codes is needed. In the case of proxies, the challenging status code is {{HTTPStatus("407")}} (Proxy Authentication Required), the {{HTTPHeader("Proxy-Authenticate")}} response header contains at least one challenge applicable to the proxy, and the {{HTTPHeader("Proxy-Authorization")}} request header is used for providing the credentials to the proxy server.

- -

Access forbidden

- -

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

- -

Authentication of cross-origin images

- -

A potential security hole recently been fixed by browsers is authentication of cross-site images. From Firefox 59 onwards, image resources loaded from different origins to the current document are no longer able to trigger HTTP authentication dialogs ({{bug(1423146)}}), preventing user credentials being stolen if attackers were able to embed an arbitrary image into a third-party page.

- -

Character encoding of HTTP authentication

- -

Browsers use utf-8 encoding for usernames and passwords.

- -

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

- -

WWW-Authenticate and Proxy-Authenticate headers

- -

The {{HTTPHeader("WWW-Authenticate")}} and {{HTTPHeader("Proxy-Authenticate")}} response headers define the authentication method that should be used to gain access to a resource. They must specify which authentication scheme is used, so that the client that wishes to authorize knows how to provide the credentials.

- -

The syntax for these headers is the following:

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

Here, <type> is the authentication scheme ("Basic" is the most common scheme and introduced below). The realm is used to describe the protected area or to indicate the scope of protection. This could be a message like "Access to the staging site" or similar, so that the user knows to which space they are trying to get access to.

- -

Authorization and Proxy-Authorization headers

- -

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

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

Authentication schemes

- -

The general HTTP authentication framework is used by several authentication schemes. Schemes can differ in security strength and in their availability in client or server software.

- -

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

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

Basic authentication scheme

- -

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

- -

Security of basic authentication

- -

As the user ID and password are passed over the network as clear text (it is base64 encoded, but base64 is a reversible encoding), the basic authentication scheme is not secure. HTTPS/TLS should be used with basic authentication. Without these additional security enhancements, basic authentication should not be used to protect sensitive or valuable information.

- -

Restricting access with Apache and basic authentication

- -

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

- -

The .htaccess file typically looks like this:

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

The .htaccess file references a .htpasswd file in which each line consists of a username and a password separated by a colon (:). You cannot see the actual passwords as they are hashed (using MD5-based hashing, in this case). Note that you can name your .htpasswd file differently if you like, but keep in mind this file shouldn't be accessible to anyone. (Apache is usually configured to prevent access to .ht* files).

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

Restricting access with nginx and basic authentication

- -

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

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

Access using credentials in the URL

- -

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

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

The use of these URLs is deprecated. In Chrome, the username:password@ part in URLs is even stripped out for security reasons. In Firefox, it is checked if the site actually requires authentication and if not, Firefox will warn the user with a prompt "You are about to log in to the site “www.example.com” with the username “username”, but the website does not require authentication. This may be an attempt to trick you."

- -

See also

- - diff --git a/files/pl/web/http/headers/date/index.html b/files/pl/web/http/headers/date/index.html deleted file mode 100644 index 81efdff778..0000000000 --- a/files/pl/web/http/headers/date/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Data -slug: Web/HTTP/Headers/Date -translation_of: Web/HTTP/Headers/Date -original_slug: Web/HTTP/Headers/Data ---- -
{{HTTPSidebar}}
- -

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

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

Składnia

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

Dyrektywy

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

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

-
-
- -

Przykłady

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

Specyfikacja

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

Zgodność z przeglądarką

- - - -

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

- -

Zobacz również

- - diff --git a/files/pl/web/javascript/data_structures/index.html b/files/pl/web/javascript/data_structures/index.html deleted file mode 100644 index 4a86825a9e..0000000000 --- a/files/pl/web/javascript/data_structures/index.html +++ /dev/null @@ -1,444 +0,0 @@ ---- -title: Typy oraz struktury danych w JavaScript -slug: Web/JavaScript/Data_structures -tags: - - JavaScript - - Początkujący - - Typy danych -translation_of: Web/JavaScript/Data_structures -original_slug: Web/JavaScript/typy_oraz_struktury_danych ---- -
{{jsSidebar("More")}}
- -
Wszystkie języki programowania posiadają wbudowane struktury danych, mogą one jednak różnic się między poszczególnymi językami. Poniższy artykuł jest próbą stworzenia listy wbudowanych typów oraz struktur danych w JavaScript oraz ich właściwości. Mogą być one użyte do tworzenia innych struktur danych. Tam gdzie jest to możliwe dokonano porównania z innymi językami programowania.
- -

Dynamiczne typowanie

- -

JavaScript jest językiem typowanym dynamicznie. Zmienne w Javascript nie są bezpośrednio powiązane z konkretnym typem wartości i możemy im przypisywać wartości dowolnego typu:

- -
let foo = 42;    // foo jest teraz liczbą (number)
-foo     = 'bar'; // foo jest teraz ciągiem znaków (string)
-foo     = true;  // foo jest teraz type logicznym (boolean)
-
- -

Data and Structure types

- -

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

- - - -

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

- -

Wartości prymitywne

- -

All types except objects define immutable values (that is, values which can't be changed). For example (and unlike in C), Strings are immutable. We refer to values of these types as "primitive values".

- -

Boolean type

- -

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

- -

Null type

- -

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

- -

Undefined type

- -

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

- -

Number type

- -

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

- -

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

- -

To check for the largest available value or smallest available value within {{jsxref("Infinity", "±Infinity")}}, you can use the constants {{jsxref("Number.MAX_VALUE")}} or {{jsxref("Number.MIN_VALUE")}}.

- -

Starting with ECMAScript 2015, you are also able to check if a number is in the double-precision floating-point number range using {{jsxref("Number.isSafeInteger()")}} as well as {{jsxref("Number.MAX_SAFE_INTEGER")}} and {{jsxref("Number.MIN_SAFE_INTEGER")}}. Beyond this range, integers in JavaScript are not safe anymore and will be a double-precision floating point approximation of the value.

- -

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

- -

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

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

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

- -

These bitwise operators can be used to represent several Boolean values within a single number using bit masking. However, this is usually considered a bad practice, since JavaScript offers other means to represent a set of Booleans (like an array of Booleans, or an object with Boolean values assigned to named properties). Bit masking also tends to make the code more difficult to read, understand, and maintain.

- -

It may be necessary to use such techniques in very constrained environments, like when trying to cope with the limitations of local storage, or in extreme cases (such as when each bit over the network counts). This technique should only be considered when it is the last measure that can be taken to optimize size.

- -

BigInt type

- -

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

- -

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

- -

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

- -

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

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

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

- -

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

- -

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

- -

String type

- -

JavaScript's {{jsxref("String")}} type is used to represent textual data. It is a set of "elements" of 16-bit unsigned integer values. Each element in the String occupies a position in the String. The first element is at index 0, the next at index 1, and so on. The length of a String is the number of elements in it.

- -

Unlike some programming languages (such as C), JavaScript strings are immutable. This means that once a string is created, it is not possible to modify it.

- -

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

- - - -

Beware of "stringly-typing" your code!

- -

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

- - - -

With conventions, it is possible to represent any data structure in a string. This does not make it a good idea. For instance, with a separator, one could emulate a list (while a JavaScript array would be more suitable). Unfortunately, when the separator is used in one of the "list" elements, then, the list is broken. An escape character can be chosen, etc. All of this requires conventions and creates an unnecessary maintenance burden.

- -

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

- -

Symbol type

- -

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

- -

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

- -

Obiekty

- -

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

- -

Properties

- -

In JavaScript, objects can be seen as a collection of properties. With the object literal syntax, a limited set of properties are initialized; then properties can be added and removed. Property values can be values of any type, including other objects, which enables building complex data structures. Properties are identified using key values. A key value is either a String or a Symbol value.

- -

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

- -

Data property

- -

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

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

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

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

Accessor property

- -

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

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

Note: Attribute is usually used by JavaScript engine, so you can't directly access it (see more about {{jsxref("Object.defineProperty()")}}). That's why the attribute is put in double square brackets instead of single.

-
- -

"Normal" objects, and functions

- -

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

- -

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

- -

Dates

- -

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

- -

Indexed collections: Arrays and typed Arrays

- -

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

- -

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

- -

Typed Arrays are new to JavaScript with ECMAScript 2015, and present an array-like view of an underlying binary data buffer. The following table helps determine the equivalent C data types:

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

Keyed collections: Maps, Sets, WeakMaps, WeakSets

- -

These data structures, introduced in ECMAScript Edition 6, take object references as keys. {{jsxref("Set")}} and {{jsxref("WeakSet")}} represent a set of objects, while {{jsxref("Map")}} and {{jsxref("WeakMap")}} associate a value to an object.

- -

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

- -

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

- -

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

- -

Structured data: JSON

- -

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

- -

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

- -

More objects in the standard library

- -

JavaScript has a standard library of built-in objects.

- -

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

- -

Określanie typu za pomocą operatora typeof

- -

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

- -

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

- -

Specifications

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

See also

- - diff --git a/files/pl/web/javascript/reference/deprecated_and_obsolete_features/index.html b/files/pl/web/javascript/reference/deprecated_and_obsolete_features/index.html deleted file mode 100644 index e937d7c66d..0000000000 --- a/files/pl/web/javascript/reference/deprecated_and_obsolete_features/index.html +++ /dev/null @@ -1,293 +0,0 @@ ---- -title: Przestarzałe własności i metody -slug: Web/JavaScript/Reference/Deprecated_and_obsolete_features -tags: - - Dokumentacja_JavaScript - - Dokumentacje - - JavaScript - - Strony_wymagające_dopracowania - - Wszystkie_kategorie -translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features -original_slug: Web/JavaScript/Referencje/Przestarzałe_własności_i_metody ---- -
{{JsSidebar("More")}}
- -

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

- -

Deprecated features

- -

These deprecated features can still be used, but should be used with caution because they are expected to be removed entirely sometime in the future. You should work to remove their use from your code.

- -

RegExp properties

- -

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

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

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

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

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

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

RegExp methods

- - - -

Function properties

- - - -

Legacy generator

- - - -

Iterator

- - - -

Object methods

- - - -

Date methods

- - - -

Functions

- - - -

Proxy

- - - -

Escape sequences

- - - -

String methods

- - - -

Obsolete features

- -

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

- -

Object

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

Function

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

Array

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

Number

- - - -

ParallelArray

- - - -

Statements

- - - -

E4X

- -

See E4X for more information.

- -

Sharp variables

- -

See Sharp variables in JavaScript for more information.

diff --git a/files/pl/web/javascript/reference/global_objects/escape/index.html b/files/pl/web/javascript/reference/global_objects/escape/index.html deleted file mode 100644 index 2fcf67431d..0000000000 --- a/files/pl/web/javascript/reference/global_objects/escape/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: escape() -slug: Web/JavaScript/Reference/Global_Objects/escape -translation_of: Web/JavaScript/Reference/Global_Objects/escape -original_slug: Web/JavaScript/Referencje/Obiekty/escape ---- -
{{jsSidebar("Objects")}}
- -

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

- -

Składnia

- -
escape(str)
- -

Parametry

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

Description

- -

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

- -

The hexadecimal form for characters, whose code unit value is 0xFF or less, is a two-digit escape sequence: %xx. For characters with a greater code unit, the four-digit format %uxxxx is used.

- -

Przykłady

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

Specifications

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

Browser compatibility

- -

{{CompatibilityTable}}

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

See also

- - diff --git a/files/pl/web/javascript/reference/global_objects/generator/index.html b/files/pl/web/javascript/reference/global_objects/generator/index.html deleted file mode 100644 index a84467e7ca..0000000000 --- a/files/pl/web/javascript/reference/global_objects/generator/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Generator -slug: Web/JavaScript/Reference/Global_Objects/Generator -translation_of: Web/JavaScript/Reference/Global_Objects/Generator -original_slug: Web/JavaScript/Referencje/Obiekty/Generator ---- -
{{JSRef}}
- -

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

- -

Syntax

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

Methods

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

Example

- -

An infinite iterator

- -
function* idMaker() {
-    var index = 0;
-    while(true)
-        yield index++;
-}
-
-var gen = idMaker(); // "Generator { }"
-
-console.log(gen.next().value); // 0
-console.log(gen.next().value); // 1
-console.log(gen.next().value); // 2
-// ...
- -

Legacy generator objects

- -

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

- -

Legacy generator methods

- -
-
Generator.prototype.next() {{non-standard_inline}}
-
Returns a value yielded by the {{jsxref("Operatory/yield", "yield")}} expression. This corresponds to next() in the ES2015 generator object.
-
Generator.prototype.close() {{non-standard_inline}}
-
Closes the generator, so that when calling next() an {{jsxref("StopIteration")}} error will be thrown. This corresponds to the return() method in the ES2015 generator object.
-
Generator.prototype.send() {{non-standard_inline}}
-
Used to send a value to a generator. The value is returned from the {{jsxref("Operatory/yield", "yield")}} expression, and returns a value yielded by the next {{jsxref("Operatory/yield", "yield")}} expression. send(x) corresponds to next(x) in the ES2015 generator object.
-
Generator.prototype.throw() {{non-standard_inline}}
-
Throws an error to a generator. This corresponds to the throw() method in the ES2015 generator object.
-
- -

Legacy generator example

- -
function fibonacci() {
-  var a = yield 1;
-  yield a * 2;
-}
-
-var it = fibonacci();
-console.log(it);          // "Generator {  }"
-console.log(it.next());   // 1
-console.log(it.send(10)); // 20
-console.log(it.close());  // undefined
-console.log(it.next());   // throws StopIteration (as the generator is now closed)
-
- -

Specifications

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

Browser compatibility

- -

{{CompatibilityTable}}

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

See also

- -

Legacy generators

- - - -

ES2015 generators

- - diff --git a/files/pl/web/javascript/reference/global_objects/string/blink/index.html b/files/pl/web/javascript/reference/global_objects/string/blink/index.html deleted file mode 100644 index 7430744309..0000000000 --- a/files/pl/web/javascript/reference/global_objects/string/blink/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: String.prototype.blink() -slug: Web/JavaScript/Reference/Global_Objects/String/blink -tags: - - Deprecated - - JavaScript - - Method - - Prototype - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/blink -original_slug: Web/JavaScript/Referencje/Obiekty/String/blink ---- -
{{JSRef}} {{deprecated_header}}
- -

Podsumowanie

- -

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

- -
-

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

-
- -

Składnia

- -
str.blink()
- -

Opis

- -

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

- -

Przykłady

- -

Przykład: Zastosowanie blink()

- -

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

- -
var worldString="Witaj, Świecie";
-
-console.log(worldString.blink());   // <blink>Witaj, Świecie</blink>
-console.log(worldString.bold());    // <bold>Witaj, Świecie</bold>
-console.log(worldString.italics()); // <i>Witaj, Świecie</i>
-console.log(worldString.strike());  // <s>Witaj, Świecie</s>
-
- -

Zobacz także

- - diff --git a/files/pl/web/javascript/reference/global_objects/string/fromcodepoint/index.html b/files/pl/web/javascript/reference/global_objects/string/fromcodepoint/index.html deleted file mode 100644 index 0a3bacc072..0000000000 --- a/files/pl/web/javascript/reference/global_objects/string/fromcodepoint/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: String.fromCodePoint() -slug: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint -translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint -original_slug: Web/JavaScript/Referencje/Obiekty/String/fromCodePoint ---- -
{{JSRef}}
- -

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

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

Syntax

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

Parameters

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

Return value

- -

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

- -

Exceptions

- - - -

Description

- -

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

- -

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

- -

Polyfill

- -

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

- -

Use the code below for a polyfill:

- -
if (!String.fromCodePoint) (function(stringFromCharCode) {
-    var fromCodePoint = function(_) {
-      var codeUnits = [], codeLen = 0, result = "";
-      for (var index=0, len = arguments.length; index !== len; ++index) {
-        var codePoint = +arguments[index];
-        // correctly handles all cases including `NaN`, `-Infinity`, `+Infinity`
-        // The surrounding `!(...)` is required to correctly handle `NaN` cases
-        // The (codePoint>>>0) === codePoint clause handles decimals and negatives
-        if (!(codePoint < 0x10FFFF && (codePoint>>>0) === codePoint))
-          throw RangeError("Invalid code point: " + codePoint);
-        if (codePoint <= 0xFFFF) { // BMP code point
-          codeLen = codeUnits.push(codePoint);
-        } else { // Astral code point; split in surrogate halves
-          // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
-          codePoint -= 0x10000;
-          codeLen = codeUnits.push(
-            (codePoint >> 10) + 0xD800,  // highSurrogate
-            (codePoint % 0x400) + 0xDC00 // lowSurrogate
-          );
-        }
-        if (codeLen >= 0x3fff) {
-          result += stringFromCharCode.apply(null, codeUnits);
-          codeUnits.length = 0;
-        }
-      }
-      return result + stringFromCharCode.apply(null, codeUnits);
-    };
-    try { // IE 8 only supports `Object.defineProperty` on DOM elements
-      Object.defineProperty(String, "fromCodePoint", {
-        "value": fromCodePoint, "configurable": true, "writable": true
-      });
-    } catch(e) {
-      String.fromCodePoint = fromCodePoint;
-    }
-}(String.fromCharCode));
-
- -

Examples

- -

Using fromCodePoint()

- -

Valid input:

- -
String.fromCodePoint(42);       // "*"
-String.fromCodePoint(65, 90);   // "AZ"
-String.fromCodePoint(0x404);    // "\u0404" == "Є"
-String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
-String.fromCodePoint(194564);   // "\uD87E\uDC04"
-String.fromCodePoint(0x1D306, 0x61, 0x1D307); // "\uD834\uDF06a\uD834\uDF07"
-
- -

Invalid input:

- -
String.fromCodePoint('_');      // RangeError
-String.fromCodePoint(Infinity); // RangeError
-String.fromCodePoint(-1);       // RangeError
-String.fromCodePoint(3.14);     // RangeError
-String.fromCodePoint(3e-2);     // RangeError
-String.fromCodePoint(NaN);      // RangeError
-
- -

Compared to fromCharCode()

- -

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

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

String.fromCodePoint(), on the other hand, can return 4-byte supplementary characters, as well as the more common 2-byte BMP characters, by specifying their code point (which is equivalent to the UTF-32 code unit):

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

Specifications

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

Browser compatibility

- -

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

- -

See also

- - diff --git a/files/pl/web/javascript/reference/global_objects/string/repeat/index.html b/files/pl/web/javascript/reference/global_objects/string/repeat/index.html deleted file mode 100644 index a6542a4bb7..0000000000 --- a/files/pl/web/javascript/reference/global_objects/string/repeat/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: String.prototype.repeat() -slug: Web/JavaScript/Reference/Global_Objects/String/repeat -translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat -original_slug: Web/JavaScript/Referencje/Obiekty/String/repeat ---- -
{{JSRef}}
- -

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

- -

Składnia

- -
str.repeat(count)
- -

Parametry

- -
-
count
-
An integer between 0 and +∞: [0, +∞), indicating the number of times to repeat the string in the newly-created string that is to be returned.
-
- -

Zwracana wartość

- -

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

- -

Exceptions

- - - -

Przykłady

- -
'abc'.repeat(-1);   // RangeError
-'abc'.repeat(0);    // ''
-'abc'.repeat(1);    // 'abc'
-'abc'.repeat(2);    // 'abcabc'
-'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
-'abc'.repeat(1/0);  // RangeError
-
-({ toString: () => 'abc', repeat: String.prototype.repeat }).repeat(2);
-// 'abcabc' (repeat() is a generic method)
-
- -

Polyfill

- -

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

- -
if (!String.prototype.repeat) {
-  String.prototype.repeat = function(count) {
-    'use strict';
-    if (this == null) {
-      throw new TypeError('can\'t convert ' + this + ' to object');
-    }
-    var str = '' + this;
-    count = +count;
-    if (count != count) {
-      count = 0;
-    }
-    if (count < 0) {
-      throw new RangeError('repeat count must be non-negative');
-    }
-    if (count == Infinity) {
-      throw new RangeError('repeat count must be less than infinity');
-    }
-    count = Math.floor(count);
-    if (str.length == 0 || count == 0) {
-      return '';
-    }
-    // Ensuring count is a 31-bit integer allows us to heavily optimize the
-    // main part. But anyway, most current (August 2014) browsers can't handle
-    // strings 1 << 28 chars or longer, so:
-    if (str.length * count >= 1 << 28) {
-      throw new RangeError('repeat count must not overflow maximum string size');
-    }
-    var rpt = '';
-    for (;;) {
-      if ((count & 1) == 1) {
-        rpt += str;
-      }
-      count >>>= 1;
-      if (count == 0) {
-        break;
-      }
-      str += str;
-    }
-    // Could we try:
-    // return Array(count + 1).join(this);
-    return rpt;
-  }
-}
-
- -

Specifications

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

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("41")}} {{CompatGeckoDesktop("24")}}{{CompatNo}}{{CompatNo}}{{CompatSafari("9")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatChrome("36")}}{{CompatGeckoMobile("24")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
diff --git a/files/pl/web/javascript/reference/global_objects/uint16array/index.html b/files/pl/web/javascript/reference/global_objects/uint16array/index.html deleted file mode 100644 index 759ad9d56e..0000000000 --- a/files/pl/web/javascript/reference/global_objects/uint16array/index.html +++ /dev/null @@ -1,225 +0,0 @@ ---- -title: Uint16Array -slug: Web/JavaScript/Reference/Global_Objects/Uint16Array -translation_of: Web/JavaScript/Reference/Global_Objects/Uint16Array -original_slug: Web/JavaScript/Referencje/Obiekty/Uint16Array ---- -
{{JSRef("Global_Objects", "TypedArray", "Int8Array,Uint8Array,Uint8ClampedArray,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array")}}
- -

Summary

- -

The Uint16Array typed array represents an array of 16-bit unsigned integers in the platform byte order. If control over byte order is needed, use {{jsxref("DataView")}} instead. The contents are initialized to 0. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).

- -

Syntax

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

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

- -

Properties

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

Methods

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

Uint16Array prototype

- -

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

- -

Properties

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

Methods

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

Examples

- -
// From a length
-var uint16 = new Uint16Array(2);
-uint16[0] = 42;
-console.log(uint16[0]); // 42
-console.log(uint16.length); // 2
-console.log(uint16.BYTES_PER_ELEMENT); // 2
-
-// From an array
-var arr = new Uint16Array([21,31]);
-console.log(arr[1]); // 31
-
-// From another TypedArray
-var x = new Uint16Array([21, 31]);
-var y = new Uint16Array(x);
-console.log(y[0]); // 21
-
-// From an ArrayBuffer
-var buffer = new ArrayBuffer(8);
-var z = new Uint16Array(buffer, 0, 4);
-
- -

Specifications

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

Browser compatibility

- -

{{ CompatibilityTable() }}

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

See also

- - diff --git a/files/pl/web/javascript/reference/operators/instanceof/index.html b/files/pl/web/javascript/reference/operators/instanceof/index.html deleted file mode 100644 index bd98d29e0f..0000000000 --- a/files/pl/web/javascript/reference/operators/instanceof/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Operator instanceof -slug: Web/JavaScript/Reference/Operators/instanceof -tags: - - Dokumentacja_JavaScript - - Dokumentacje - - JavaScript - - Strony_wymagające_dopracowania - - Wszystkie_kategorie -translation_of: Web/JavaScript/Reference/Operators/instanceof -original_slug: Web/JavaScript/Referencje/Operatory/Operator_instanceof ---- -
{{jsSidebar("Operators")}}
- -

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

- -

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

- - - -

Składnia

- -
object instanceof constructor
- -
-
-

Parametry

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

Opis

- -

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

- -
// definiowanie konstruktorów
-function C() {}
-function D() {}
-
-var o = new C();
-
-// true, ponieważ: Object.getPrototypeOf(o) === C.prototype
-o instanceof C;
-
-// false, ponieważ D.prototype nie występuje w łańcuchu prototypowym o.
-o instanceof D;
-
-o instanceof Object; // true, ponieważ:
-C.prototype instanceof Object // true
-
-C.prototype = {};
-var o2 = new C();
-
-o2 instanceof C; // true
-
-// false, ponieważ C.prototype nie ma już w łańcuchu prototypowym o
-o instanceof C;
-
-D.prototype = new C(); // add C to [[Prototype]] linkage of D
-var o3 = new D();
-o3 instanceof D; // true
-o3 instanceof C; // true since C.prototype is now in o3's prototype chain
-
- -

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

- -

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

- -

Different scopes have different execution environments. This means that they have different built-ins (different global object, different constructors, etc.). This may result in unexpected results. For instance, [] instanceof window.frames[0].Array will return false, because Array.prototype !== window.frames[0].Array and arrays inherit from the former.

- -

This may not make sense at first but when you start dealing with multiple frames or windows in your script and pass objects from one context to another via functions, this will be a valid and strong issue. For instance, you can securely check if a given object is, in fact, an Array using Array.isArray(myObj)

- -

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

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

Examples

- -

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

- -

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

- -

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

- -
var simpleStr = 'This is a simple string';
-var myString  = new String();
-var newStr    = new String('String created with constructor');
-var myDate    = new Date();
-var myObj     = {};
-
-simpleStr instanceof String; // returns false, checks the prototype chain, finds undefined
-myString  instanceof String; // returns true
-newStr    instanceof String; // returns true
-myString  instanceof Object; // returns true
-
-myObj instanceof Object;    // returns true, despite an undefined prototype
-({})  instanceof Object;    // returns true, same case as above
-
-myString instanceof Date;   // returns false
-
-myDate instanceof Date;     // returns true
-myDate instanceof Object;   // returns true
-myDate instanceof String;   // returns false
-
- -

Demonstrating that mycar is of type Car and type Object

- -

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

- -
function Car(make, model, year) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-}
-var mycar = new Car('Honda', 'Accord', 1998);
-var a = mycar instanceof Car;    // returns true
-var b = mycar instanceof Object; // returns true
-
- -

Specifications

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

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/pl/web/javascript/reference/operators/this/index.html b/files/pl/web/javascript/reference/operators/this/index.html deleted file mode 100644 index 427d3f843e..0000000000 --- a/files/pl/web/javascript/reference/operators/this/index.html +++ /dev/null @@ -1,347 +0,0 @@ ---- -title: this -slug: Web/JavaScript/Reference/Operators/this -translation_of: Web/JavaScript/Reference/Operators/this -original_slug: Web/JavaScript/Referencje/Operatory/this ---- -
-
{{jsSidebar("Operators")}}
-
- -

Summary

- -

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

- -

W większości przypadków wartość this jest ustalana na podstawie tego, jak wywołana została dana funkcja. Wartość ta nie może być przypisana podczas wykonywania się funkcji i może być inna za każdym wywołaniem. ES5 wprowadziło metodę bind dzięki której możemy przypisać wartość this w funkcji, niezależnie od tego jak została ona wywołana.

- -

Syntax

- -
this
- -

Global context

- -

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

- -
console.log(this.document === document); // true
-
-// In web browsers, the window object is also the global object:
-console.log(this === window); // true
-
-this.a = 37;
-console.log(window.a); // 37
-
- -

Function context

- -

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

- -

Simple call

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

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

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

In strict mode, the value of this remains at whatever it's set to when entering the execution context. If it's not defined, it remains undefined. It can also be set to any value, such as null or 42 or "I am not this".

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

As an object method

- -

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

- -

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

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

Note that this behavior is not at all affected by how or where the function was defined. In the previous example, we defined the function inline as the f member during the definition of o. However, we could have just as easily defined the function first and later attached it to o.f. Doing so results in the same behavior:

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

This demonstrates that it matters only that the function was invoked from the f member of o.

- -

Similarly, the this binding is only affected by the most immediate member reference. In the following example, when we invoke the function, we call it as a method g of the object o.b. This time during execution, this inside the function will refer to o.b. The fact that the object is itself a member of o has no consequence; the most immediate reference is all that matters.

- -
o.b = {g: independent, prop: 42};
-console.log(o.b.g()); // logs 42
-
- -

this on the object's prototype chain

- -

The same notion holds true for methods defined somewhere on the object's prototype chain. If the method is on an object's prototype chain, this refers to the object the method was called on, as if the method was on the object.

- -
var o = {f:function(){ return this.a + this.b; }};
-var p = Object.create(o);
-p.a = 1;
-p.b = 4;
-
-console.log(p.f()); // 5
-
- -

In this example, the object assigned to the variable p doesn't have its own f property, it inherits it from its prototype. But it doesn't matter that the lookup for f eventually finds a member with that name on o; the lookup began as a reference to p.f, so this inside the function takes the value of the object referred to as p. That is, since f is called as a method of p, its this refers to p. This is an interesting feature of JavaScript's prototype inheritance.

- -

this with a getter or setter

- -

Again, the same notion holds true when a function is invoked from a getter or a setter. A function used as getter or setter has its this bound to the object from which the property is being set or gotten.

- -
function modulus(){
-  return Math.sqrt(this.re * this.re + this.im * this.im);
-}
-
-var o = {
-  re: 1,
-  im: -1,
-  get phase(){
-    return Math.atan2(this.im, this.re);
-  }
-};
-
-Object.defineProperty(o, 'modulus', {
-    get: modulus, enumerable:true, configurable:true});
-
-console.log(o.phase, o.modulus); // logs -0.78 1.4142
-
- -

As a constructor

- -

When a function is used as a constructor (with the new keyword), its this is bound to new object being constructed.

- -

Note: while the default for a constructor is to return the object referenced by this, it can instead return some other object (if the return value isn't an object, then the this object is returned).

- -
/*
- * Constructors work like this:
- *
- * function MyConstructor(){
- *   // Actual function body code goes here.
- *   // Create properties on |this| as
- *   // desired by assigning to them.  E.g.,
- *   this.fum = "nom";
- *   // et cetera...
- *
- *   // If the function has a return statement that
- *   // returns an object, that object will be the
- *   // result of the |new| expression.  Otherwise,
- *   // the result of the expression is the object
- *   // currently bound to |this|
- *   // (i.e., the common case most usually seen).
- * }
- */
-
-function C(){
-  this.a = 37;
-}
-
-var o = new C();
-console.log(o.a); // logs 37
-
-
-function C2(){
-  this.a = 37;
-  return {a:38};
-}
-
-o = new C2();
-console.log(o.a); // logs 38
-
- -

In the last example (C2), because an object was returned during construction, the new object that this was bound to simply gets discarded. (This essentially makes the statement "this.a = 37;" dead code. It's not exactly dead, because it gets executed, but it can be eliminated with no outside effects.)

- -

call and apply

- -

Where a function uses the this keyword in its body, its value can be bound to a particular object in the call using the call or apply methods that all functions inherit from Function.prototype.

- -
function add(c, d){
-  return this.a + this.b + c + d;
-}
-
-var o = {a:1, b:3};
-
-// The first parameter is the object to use as
-// 'this', subsequent parameters are passed as
-// arguments in the function call
-add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
-
-// The first parameter is the object to use as
-// 'this', the second is an array whose
-// members are used as the arguments in the function call
-add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
-
- -

Note that with call and apply, if the value passed as this is not an object, an attempt will be made to convert it to an object using the internal ToObject operation. So if the value passed is a primitive like 7 or 'foo', it will be converted to an Object using the related constructor, so the primitive number 7 is converted to an object as if by new Number(7) and the string 'foo' to an object as if by new String('foo'), e.g.

- -
function bar() {
-  console.log(Object.prototype.toString.call(this));
-}
-
-bar.call(7); // [object Number]
-
- -

The bind method

- -

ECMAScript 5 introduced Function.prototype.bind. Calling f.bind(someObject) creates a new function with the same body and scope as f, but where this occurs in the original function, in the new function it is permanently bound to the first argument of bind, regardless of how the function is being used.

- -
function f(){
-  return this.a;
-}
-
-var g = f.bind({a:"azerty"});
-console.log(g()); // azerty
-
-var o = {a:37, f:f, g:g};
-console.log(o.f(), o.g()); // 37, azerty
-
- -

As a DOM event handler

- -

When a function is used as an event handler, its this is set to the element the event fired from (some browsers do not follow this convention for listeners added dynamically with methods other than addEventListener).

- -
// When called as a listener, turns the related element blue
-function bluify(e){
-  // Always true
-  console.log(this === e.currentTarget);
-  // true when currentTarget and target are the same object
-  console.log(this === e.target);
-  this.style.backgroundColor = '#A5D9F3';
-}
-
-// Get a list of every element in the document
-var elements = document.getElementsByTagName('*');
-
-// Add bluify as a click listener so when the
-// element is clicked on, it turns blue
-for(var i=0 ; i<elements.length ; i++){
-  elements[i].addEventListener('click', bluify, false);
-}
- -

In an in–line event handler

- -

When code is called from an in–line handler, its this is set to the DOM element on which the listener is placed:

- -
<button onclick="alert(this.tagName.toLowerCase());">
-  Show this
-</button>
-
- -

The above alert shows button. Note however that only the outer code has its this set this way:

- -
<button onclick="alert((function(){return this}()));">
-  Show inner this
-</button>
-
- -

In this case, the inner function's this isn't set so it returns the global/window object (i.e. the default object in non–strict mode where this isn't set by the call).

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
ECMAScript 1st Edition.StandardInitial definition. Implemented in JavaScript 1.0
{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-this-keyword', 'The this keyword')}}{{Spec2('ES6')}}
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

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

See also

- - diff --git a/files/pl/web/javascript/reference/statements/throw/index.html b/files/pl/web/javascript/reference/statements/throw/index.html deleted file mode 100644 index d47ab9803b..0000000000 --- a/files/pl/web/javascript/reference/statements/throw/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: throw -slug: Web/JavaScript/Reference/Statements/throw -tags: - - Dokumentacja_JavaScript - - Dokumentacje - - JavaScript - - Strony_wymagające_dopracowania - - Wszystkie_kategorie -translation_of: Web/JavaScript/Reference/Statements/throw -original_slug: Web/JavaScript/Referencje/Polecenia/throw ---- -
{{jsSidebar("Statements")}}
- -

The throw statement throws a user-defined exception. Execution of the current function will stop (the statements after throw won't be executed), and control will be passed to the first catch block in the call stack. If no catch block exists among caller functions, the program will terminate.

- -
{{EmbedInteractiveExample("pages/js/statement-throw.html")}}
- - -

Syntax

- -
throw expression;
- -
-
expression
-
The expression to throw.
-
- -

Description

- -

Use the throw statement to throw an exception. When you throw an exception, expression specifies the value of the exception. Each of the following throws an exception:

- -
throw 'Error2'; // generates an exception with a string value
-throw 42;       // generates an exception with the value 42
-throw true;     // generates an exception with the value true
- -

Also note that the throw statement is affected by automatic semicolon insertion (ASI) as no line terminator between the throw keyword and the expression is allowed.

- -

Examples

- -

Throw an object

- -

You can specify an object when you throw an exception. You can then reference the object's properties in the catch block. The following example creates an object of type UserException and uses it in a throw statement.

- -
function UserException(message) {
-   this.message = message;
-   this.name = 'UserException';
-}
-function getMonthName(mo) {
-   mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec)
-   var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
-      'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-   if (months[mo] !== undefined) {
-      return months[mo];
-   } else {
-      throw new UserException('InvalidMonthNo');
-   }
-}
-
-try {
-   // statements to try
-   var myMonth = 15; // 15 is out of bound to raise the exception
-   var monthName = getMonthName(myMonth);
-} catch (e) {
-   monthName = 'unknown';
-   console.log(e.message, e.name); // pass exception object to err handler
-}
-
- -

Another example of throwing an object

- -

The following example tests an input string for a U.S. zip code. If the zip code uses an invalid format, the throw statement throws an exception by creating an object of type ZipCodeFormatException.

- -
/*
- * Creates a ZipCode object.
- *
- * Accepted formats for a zip code are:
- *    12345
- *    12345-6789
- *    123456789
- *    12345 6789
- *
- * If the argument passed to the ZipCode constructor does not
- * conform to one of these patterns, an exception is thrown.
- */
-
-function ZipCode(zip) {
-   zip = new String(zip);
-   pattern = /[0-9]{5}([- ]?[0-9]{4})?/;
-   if (pattern.test(zip)) {
-      // zip code value will be the first match in the string
-      this.value = zip.match(pattern)[0];
-      this.valueOf = function() {
-         return this.value
-      };
-      this.toString = function() {
-         return String(this.value)
-      };
-   } else {
-      throw new ZipCodeFormatException(zip);
-   }
-}
-
-function ZipCodeFormatException(value) {
-   this.value = value;
-   this.message = 'does not conform to the expected format for a zip code';
-   this.toString = function() {
-      return this.value + this.message;
-   };
-}
-
-/*
- * This could be in a script that validates address data
- * for US addresses.
- */
-
-const ZIPCODE_INVALID = -1;
-const ZIPCODE_UNKNOWN_ERROR = -2;
-
-function verifyZipCode(z) {
-   try {
-      z = new ZipCode(z);
-   } catch (e) {
-      if (e instanceof ZipCodeFormatException) {
-         return ZIPCODE_INVALID;
-      } else {
-         return ZIPCODE_UNKNOWN_ERROR;
-      }
-   }
-   return z;
-}
-
-a = verifyZipCode(95060);         // returns 95060
-b = verifyZipCode(9560);          // returns -1
-c = verifyZipCode('a');           // returns -1
-d = verifyZipCode('95060');       // returns 95060
-e = verifyZipCode('95060 1234');  // returns 95060 1234
-
- -

Rethrow an exception

- -

You can use throw to rethrow an exception after you catch it. The following example catches an exception with a numeric value and rethrows it if the value is over 50. The rethrown exception propagates up to the enclosing function or to the top level so that the user sees it.

- -
try {
-   throw n; // throws an exception with a numeric value
-} catch (e) {
-   if (e <= 50) {
-      // statements to handle exceptions 1-50
-   } else {
-      // cannot handle this exception, so rethrow
-      throw e;
-   }
-}
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}Initial definition. Implemented in JavaScript 1.4
{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}{{Spec2('ESDraft')}}
- -

Browser compatibility

- - - -

{{Compat("javascript.statements.throw")}}

- -

See also

- - diff --git a/files/pl/web/javascript/typed_arrays/index.html b/files/pl/web/javascript/typed_arrays/index.html deleted file mode 100644 index b36127886f..0000000000 --- a/files/pl/web/javascript/typed_arrays/index.html +++ /dev/null @@ -1,274 +0,0 @@ ---- -title: Tablice reprezentujące typy JavaScript -slug: Web/JavaScript/Typed_arrays -translation_of: Web/JavaScript/Typed_arrays ---- -
-
{{JsSidebar("Advanced")}}
-
- -

Jako, że aplikacje internetowe stają się coraz bardziej potężne, zapewniając takie możliwości jak chociażby manipulacja audio i wideo, dostęp do surowych danych używając WebSocket, i tak dalej, stało się jasne, że są sytuacje, w których przydałoby się, żeby kod JavaScript był w stanie szybko i łatwo manipulować surowymi danymi binarnymi. W przeszłości, musiało być to symulowane przez traktowanie surowych danych jako string i używanie metody charCodeAt(), aby przeczytać bajty z buforu danych.

- -

Jakkolwiek, jest to wolne i podatne na błędy, ze względu na potrzebę wielu konwersji (szczególnie jeśli dane binarne nie są tak naprawdę danymi w formacie bajtów, ale, na przykład, 32-bitowymi liczbami całkowitymi lub zmiennoprzecinkowymi).

- -

Tablice zawierające typy JavaScript zapewniają mechanizm dostępu do danych binarnych dużo bardziej wydajnie.

- - - - - - - - -
-

Dokumentacja

- -
-
ArrayBuffer
-
The ArrayBuffer is a data type that is used to represent a generic, fixed-length binary data buffer. You can't directly manipulate the contents of an ArrayBuffer; instead, you create an ArrayBufferView object which represents the buffer in a specific format, and use that to read and write the contents of the buffer.
-
ArrayBufferView
-
The ArrayBufferView type describes a particular view on the contents of an ArrayBuffer's data. Of note is that you may create multiple views into the same buffer, each looking at the buffer's contents starting at a particular offset. This makes it possible to set up views of different data types to read the contents of a buffer based on the types of data at specific offsets into the buffer
-
DataView
-
-

The DataView view provides a low-level interface for reading data from and writing it to an ArrayBuffer.

-
-
StringView Non native
-
In this article is published a library of ours whose aims are: -
    -
  • creating a C-like interface for strings (i.e. array of characters codes — an ArrayBufferView in JavaScript) based upon the JavaScript ArrayBuffer interface,
    • -
  • creating an highly scalable library, that anyone can extend by adding methods to the object StringView.prototype,
    • -
  • creating a collection of methods for such string-like objects (since now: stringViews) which work strictly on arrays of numbers rather than on creating new immutable JavaScript strings,
    • -
  • working with other Unicode encodings different from default JavaScript's UTF-16 {{domxref("DOMString")}}s,
    • -
-
-
Getting ArrayBuffers or typed arrays from Base64-encoded strings
-
Code snippets to get ArrayBuffers or typed arrays from Base64-encoded strings.
-
FileReader.prototype.readAsArrayBuffer()
-
The FileReader.prototype.readAsArrayBuffer() method starts reading the contents of the specified Blob or File.
-
XMLHttpRequest.prototype.send()
-
XMLHttpRequest instances' send() method now supports typed arrays and ArrayBuffers as argument.
-
- - 		-

Społeczność

- -
    -
  • Zobacz forum Mozilla... {{ DiscussionList("dev-web-development", "mozilla.dev.web.development") }}
    • -
- -

Narzędzia

- - - - - - -
- -

Bufory i widoki: struktura tablic reprezentujących typy

- -

To achieve maximum flexibility and efficiency, JavaScript typed arrays split the implementation into a buffer and a view. A buffer (implemented by the ArrayBuffer class) is an object representing a chunk of data; it has no format to speak of, and offers no mechanism for accessing its contents. In order to access the memory contained in a buffer, you need to use a view. A view provides a context—that is, a data type, starting offset, and number of elements—that turns the data into an actual typed array. Views are implemented by the ArrayBufferView class and its subclasses.

- -

Podklasy tablic reprezentujących typy

- -

The following subclasses provide buffer views allowing access to the data in specific data types. Note that the classes that work with more than one byte (e.g. Int16Array) use the platform byte order. If control over byte order is needed, use DataView instead.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TypRozmiarOpisOdpowiednik C
Int8Array18-bitowa liczba całkowita ze znakiem w zapisie dopełnienia do dwóchsigned char
Uint8Array18-bitowa liczba całkowita bez znakuunsigned char
Uint8ClampedArray18-bitowa liczba całkowita bez znakuunsigned char
Int16Array216-bitowa liczba całkowita ze znakiem w zapisie dopełnienia do dwóchshort
Uint16Array216-bitowa liczba całkowita bez znakuunsigned short
Int32Array432-bitowa liczba całkowita ze znakiem w zapisie dopełnienia do dwóchint
Uint32Array432-bitowa liczba całkowita bez znakuunsigned int
Float32Array432-bitowa liczba zmiennoprzecinkowa IEEEfloat
Float64Array864-bitowa liczba zmiennoprzecinkowa IEEEdouble
- -

Superklasy tablic reprezentujących typy

- - - - - - - - - - - - - - - - -
TypOpis
DataViewThe DataView view provides a low-level interface for reading data from and writing it to an ArrayBuffer.
StringView Non nativeThe StringView view provides a C-like interface for strings (i.e. array of characters codes — an ArrayBufferView in JavaScript) based upon the JavaScript ArrayBuffer interface,
- -

Używanie widoków z buforami

- -

Stwórzmy 16-bajtowy bufor:

- -
var buffer = new ArrayBuffer(16);
-
- -

At this point, we have a chunk of memory whose bytes are all pre-initialized to 0. There's not a lot we can do with it, though. We can confirm that it is indeed 16 bytes long, and that's about it:

- -
if (buffer.byteLength == 16) {
-  alert("Yes, it's 16 bytes.");
-} else {
-  alert("Oh no, it's the wrong size!");
-}
-
- -

Before we can really work with this buffer, we need to create a view. Let's create a view that treats the data in the buffer as an array of 32-bit signed integers:

- -
var int32View = new Int32Array(buffer);
-
- -

Now we can access the fields in the array just like a normal array:

- -
for (var i=0; i<int32View.length; i++) {
-  int32View[i] = i*2;
-}
-
- -

This fills out the 4 entries in the array (4 entries at 4 bytes each makes 16 total bytes) with the values 0, 2, 4, and 6.

- -

Wiele widoków tych samych danych

- -

Things start to get really interesting when you consider that you can create multiple views onto the same data. For example, given the code above, we can continue like this:

- -
var int16View = new Int16Array(buffer);
-
-for (var i=0; i<int16View.length; i++) {
-  console.log("Entry " + i + ": " + int16View[i]);
-}
-
- -

Here we create a 16-bit integer view that shares the same buffer as the existing 32-bit view and we output all the values in the buffer as 16-bit integers. Now we get the output 0, 0, 2, 0, 4, 0, 6, 0.

- -

You can go a step farther, though. Consider this:

- -
int16View[0] = 32;
-console.log("Entry 0 in the 32-bit array is now " + int32View[0]);
-
- -

The output from this is "Entry 0 in the 32-bit array is now 32". In other words, the two arrays are indeed simply views on the same data buffer, treating it as different formats. You can do this with any view types.

- -

Praca ze złożonymi strukturami danych

- -

By combining a single buffer with multiple views of different types, starting at different offsets into the buffer, you can interact with data objects containing multiple data types. This lets you, for example, interact with complex data structures from WebGL, data files, or C structures you need to use while using js-ctypes.

- -

Rozważ tą strukturę C:

- -
struct someStruct {
-  unsigned long id;
-  char username[16];
-  float amountDue;
-};
- -

Możesz uzyskać dostęp do bufora zawierającego dane w tych formacie w ten sposób:

- -
var buffer = new ArrayBuffer(24);
-
-// ... zczytaj dane do bufora ...
-
-var idView = new Uint32Array(buffer, 0, 1);
-var usernameView = new Uint8Array(buffer, 4, 16);
-var amountDueView = new Float32Array(buffer, 20, 1);
- -

Potem możesz uzyskać dostęp, na przykład, do kwoty należnej używając amountDueView[0].

- -
Note: The data structure alignment in a C structure is platform-dependent. Take precautions and considerations for these padding differences.
- -

Konwersja do zwykłych tablic

- -

After processing a typed array, it is sometimes useful to convert it back to a normal array in order to benefit from the Array prototype. Following is a way to do that.

- -
var typedArray = new Uint8Array( [ 1, 2, 3, 4 ] ),
-    normalArray = Array.apply( [], typedArray );
-normalArray.length === 4;
-normalArray.constructor === Array;
-
- -

Kompatybilność

- -

Typed arrays are available in WebKit as well. Chrome 7 includes support for ArrayBuffer, Float32Array, Int16Array, and Uint8Array. Chrome 9 and Firefox 15 add support for DataView objects. Internet Explorer 10 supports all types except Uint8ClampedArray and ArrayBuffer.prototype.slice.

- -

Specyfikacja

- - - -

Zobacz także

- - - -
 
diff --git a/files/pl/web/security/securing_your_site/index.html b/files/pl/web/security/securing_your_site/index.html deleted file mode 100644 index 59682ddf82..0000000000 --- a/files/pl/web/security/securing_your_site/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Securing your site -slug: Web/Security/Securing_your_site -tags: - - HTTP - - NeedsTranslation - - Security - - TopicStub - - Web Development - - Website Security -translation_of: Web/Security/Securing_your_site ---- -

{{ draft() }}

- -

There are a number of things you can do to help secure your site. This article offers an assortment of suggestions, as well as links to other articles providing more useful information.

- -
Note: This article is a work in progress, and is neither complete nor does following its suggestions guarantee your site will be fully secure.
- -

User information security

- -
-
How to turn off form autocompletion
-
Form fields support autocompletion in Gecko; that is, their values can be remembered and automatically brought back the next time the user visits your site. For certain types of data, you may wish to disable this feature.
-
Privacy and the :visited selector
-
This article discusses changes made to the getComputedStyle() method that eliminates the ability for malicious sites to figure out the user's browsing history.
-
Hash passwords using a secure algorithm (OWASP)
-
Storing passwords in plain text can lead to attackers knowing and leaking the exact password of your site's users, potentially putting the users at risk. The same issues can arise if you use an old or insecure algorithm for hashing (such as md5). You should use a password-specific hashing algorithm (such as Argon2, PBKDF2, scrypt or bcrypt) instead of message digest algorithms (such as md5 and sha). This article showcases best practices to use when storing passwords.
-
- -

Content security

- -
-
Properly configuring server MIME types
-
There are several ways incorrect MIME types can cause potential security problems with your site. This article explains some of those and shows how to configure your server to serve files with the correct MIME types.
-
HTTP Strict Transport Security
-
The Strict-Transport-Security: HTTP header lets a website specify that it may only be accessed using HTTPS.
-
HTTP access control
-
The Cross-Origin Resource Sharing standard provides a way to specify what content may be loaded from other domains. You can use this to prevent your site from being used improperly; in addition, you can use it to establish resources that other sites are expressly permitted to use.
-
Content Security Policy
-
An added layer of security that helps to detect and mitigate certain types of attacks, including {{Glossary("Cross-site_scripting", "Cross Site Scripting (XSS)")}} and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware. Code is executed by the victims and lets the attackers bypass access controls and impersonate users. According to the Open Web Application Security Project, XSS was the seventh most common Web app vulnerability in 2017.
-
The X-Frame-Options response header
-
-

The X-Frame-Options: HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a {{ HTMLElement("frame") }}. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.

-
-
Securing Your Site using Htaccess
-
It is the best way to secure your site using the .htaccess file. You can blacklist IPs, restrict access to certain areas of website, protect different files, protect against image hotlinking, and a lot more.
-
- -

See also

- - - -
{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}
-- cgit v1.2.3-54-g00ecf