diff options
author | Florian Dieminger <me@fiji-flo.de> | 2021-02-11 18:26:59 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-02-11 18:26:59 +0100 |
commit | 7a94b4d8daf297eda6df8e5cf933f7ba159bbc76 (patch) | |
tree | c8c8a36c41beda7a4c150927b2b5c7d2a09837bd /files/pl/web/api | |
parent | ab718192b92d5cc38c1114e055a435a6de7dd8ef (diff) | |
parent | b8170f78422f2269dfc9df7760cc1ad51c048c00 (diff) | |
download | translated-content-7a94b4d8daf297eda6df8e5cf933f7ba159bbc76.tar.gz translated-content-7a94b4d8daf297eda6df8e5cf933f7ba159bbc76.tar.bz2 translated-content-7a94b4d8daf297eda6df8e5cf933f7ba159bbc76.zip |
Merge pull request #38 from fiji-flo/unslugging-pl
Unslugging pl
Diffstat (limited to 'files/pl/web/api')
-rw-r--r-- | files/pl/web/api/baseaudiocontext/createdynamicscompressor/index.html (renamed from files/pl/web/api/audiocontext/createdynamicscompressor/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/canvas_api/index.html | 56 | ||||
-rw-r--r-- | files/pl/web/api/canvas_api/tutorial/drawing_shapes/index.html (renamed from files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/canvas_api/tutorial/drawing_text/index.html | 137 | ||||
-rw-r--r-- | files/pl/web/api/canvas_api/tutorial/optimizing_canvas/index.html (renamed from files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/cssrulelist/index.html (renamed from files/pl/web/api/stylesheet/cssrules/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/cssstylesheet/deleterule/index.html (renamed from files/pl/web/api/stylesheet/deleterule/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/cssstylesheet/index.html (renamed from files/pl/web/api/stylesheet/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/cssstylesheet/insertrule/index.html (renamed from files/pl/web/api/stylesheet/insertrule/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/document/firstchild/index.html | 37 | ||||
-rw-r--r-- | files/pl/web/api/document/namespaceuri/index.html | 26 | ||||
-rw-r--r-- | files/pl/web/api/document_object_model/examples/index.html | 355 | ||||
-rw-r--r-- | files/pl/web/api/document_object_model/index.html | 86 | ||||
-rw-r--r-- | files/pl/web/api/document_object_model/introduction/index.html | 172 | ||||
-rw-r--r-- | files/pl/web/api/documentorshadowroot/activeelement/index.html (renamed from files/pl/web/api/document/activeelement/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/documentorshadowroot/stylesheets/index.html (renamed from files/pl/web/api/document/stylesheets/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/element/name/index.html | 61 | ||||
-rw-r--r-- | files/pl/web/api/elementcssinlinestyle/style/index.html (renamed from files/pl/web/api/element/style/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/eventtarget/addeventlistener/index.html (renamed from files/pl/web/api/element/addeventlistener/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/eventtarget/dispatchevent/index.html (renamed from files/pl/web/api/element/dispatchevent/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/globaleventhandlers/onclick/index.html (renamed from files/pl/web/api/element/onclick/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/globaleventhandlers/onkeydown/index.html | 25 | ||||
-rw-r--r-- | files/pl/web/api/globaleventhandlers/onkeypress/index.html (renamed from files/pl/web/api/element/onkeypress/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/globaleventhandlers/onkeyup/index.html (renamed from files/pl/web/api/element/onkeyup/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/globaleventhandlers/onload/index.html (renamed from files/pl/web/api/window/onload/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/globaleventhandlers/onmousedown/index.html (renamed from files/pl/web/api/element/onmousedown/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/globaleventhandlers/onmousemove/index.html (renamed from files/pl/web/api/element/onmousemove/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/htmlelement/click/index.html (renamed from files/pl/web/api/element/click/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/htmlelement/dir/index.html (renamed from files/pl/web/api/element/dir/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/htmlelement/lang/index.html (renamed from files/pl/web/api/element/lang/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/htmlelement/offsetheight/index.html (renamed from files/pl/web/api/element/offsetheight/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/htmlelement/offsetleft/index.html (renamed from files/pl/web/api/element/offsetleft/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/htmlelement/offsetparent/index.html (renamed from files/pl/web/api/element/offsetparent/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/htmlelement/offsetwidth/index.html (renamed from files/pl/web/api/element/offsetwidth/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/htmlorforeignelement/blur/index.html (renamed from files/pl/web/api/element/blur/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/htmlorforeignelement/dataset/index.html (renamed from files/pl/web/api/htmlelement/dataset/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/htmlorforeignelement/focus/index.html (renamed from files/pl/web/api/element/focus/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/htmlorforeignelement/tabindex/index.html (renamed from files/pl/web/api/element/tabindex/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/keyboardevent/charcode/index.html (renamed from files/pl/web/api/event/charcode/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/keyboardevent/keycode/index.html (renamed from files/pl/web/api/event/keycode/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/mouseevent/altkey/index.html (renamed from files/pl/web/api/event/altkey/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/mouseevent/button/index.html (renamed from files/pl/web/api/event/button/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/mouseevent/clientx/index.html (renamed from files/pl/web/api/event/clientx/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/mouseevent/clienty/index.html (renamed from files/pl/web/api/event/clienty/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/mouseevent/ctrlkey/index.html (renamed from files/pl/web/api/event/ctrlkey/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/mouseevent/initmouseevent/index.html (renamed from files/pl/web/api/event/initmouseevent/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/mouseevent/metakey/index.html (renamed from files/pl/web/api/event/metakey/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/mouseevent/relatedtarget/index.html (renamed from files/pl/web/api/event/relatedtarget/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/mouseevent/screenx/index.html (renamed from files/pl/web/api/event/screenx/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/mouseevent/screeny/index.html (renamed from files/pl/web/api/event/screeny/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/mouseevent/shiftkey/index.html (renamed from files/pl/web/api/event/shiftkey/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/navigatorid/appcodename/index.html (renamed from files/pl/web/api/navigator/appcodename/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/navigatorid/appname/index.html (renamed from files/pl/web/api/navigator/appname/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/navigatorid/appversion/index.html (renamed from files/pl/web/api/navigator/appversion/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/navigatorid/platform/index.html (renamed from files/pl/web/api/navigator/platform/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/navigatorid/product/index.html (renamed from files/pl/web/api/navigator/product/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/navigatorlanguage/language/index.html (renamed from files/pl/web/api/navigator/language/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/navigatoronline/online/index.html (renamed from files/pl/web/api/navigator/online/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/navigatoronline/online_and_offline_events/index.html (renamed from files/pl/web/api/navigatoronline/zdarzenia_online_i_offline/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/navigatorplugins/javaenabled/index.html (renamed from files/pl/web/api/navigator/javaenabled/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/navigatorplugins/mimetypes/index.html (renamed from files/pl/web/api/navigator/mimetypes/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/navigatorplugins/plugins/index.html (renamed from files/pl/web/api/navigator/plugins/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/appendchild/index.html (renamed from files/pl/web/api/element/appendchild/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/childnodes/index.html (renamed from files/pl/web/api/element/childnodes/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/clonenode/index.html (renamed from files/pl/web/api/element/clientnode/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/firstchild/index.html (renamed from files/pl/web/api/element/firstchild/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/haschildnodes/index.html (renamed from files/pl/web/api/element/haschildnodes/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/insertbefore/index.html (renamed from files/pl/web/api/element/insertbefore/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/lastchild/index.html (renamed from files/pl/web/api/element/lastchild/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/localname/index.html (renamed from files/pl/web/api/element/localname/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/namespaceuri/index.html (renamed from files/pl/web/api/element/namespaceuri/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/nextsibling/index.html (renamed from files/pl/web/api/element/nextsibling/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/nodename/index.html (renamed from files/pl/web/api/element/nodename/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/nodetype/index.html (renamed from files/pl/web/api/element/nodetype/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/nodevalue/index.html (renamed from files/pl/web/api/element/nodevalue/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/normalize/index.html (renamed from files/pl/web/api/element/normalize/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/ownerdocument/index.html (renamed from files/pl/web/api/element/ownerdocument/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/parentnode/index.html (renamed from files/pl/web/api/element/parentnode/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/prefix/index.html (renamed from files/pl/web/api/element/prefix/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/previoussibling/index.html (renamed from files/pl/web/api/element/previoussibling/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/removechild/index.html (renamed from files/pl/web/api/element/removechild/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/replacechild/index.html (renamed from files/pl/web/api/element/replacechild/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/node/textcontent/index.html (renamed from files/pl/web/api/element/textcontent/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/nodelist/length/index.html (renamed from files/pl/web/api/element/length/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/notification/index.html (renamed from files/pl/web/api/powiadomienie/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/stylesheet/ownerrule/index.html | 24 | ||||
-rw-r--r-- | files/pl/web/api/touch_events/index.html (renamed from files/pl/web/api/zdarzenia_dotykowe/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/uievent/cancelbubble/index.html (renamed from files/pl/web/api/event/cancelbubble/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/uievent/inituievent/index.html (renamed from files/pl/web/api/event/inituievent/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/uievent/ischar/index.html (renamed from files/pl/web/api/event/ischar/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/uievent/layerx/index.html (renamed from files/pl/web/api/event/layerx/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/uievent/layery/index.html (renamed from files/pl/web/api/event/layery/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/uievent/pagex/index.html (renamed from files/pl/web/api/event/pagex/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/uievent/pagey/index.html (renamed from files/pl/web/api/event/pagey/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/uievent/view/index.html (renamed from files/pl/web/api/event/view/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/web_storage_api/index.html (renamed from files/pl/web/api/storage/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/websockets_api/index.html | 189 | ||||
-rw-r--r-- | files/pl/web/api/windoworworkerglobalscope/atob/index.html (renamed from files/pl/web/api/windowbase64/atob/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/windoworworkerglobalscope/btoa/index.html (renamed from files/pl/web/api/windowbase64/btoa/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/windoworworkerglobalscope/clearinterval/index.html (renamed from files/pl/web/api/window/clearinterval/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/windoworworkerglobalscope/cleartimeout/index.html (renamed from files/pl/web/api/window/cleartimeout/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/windoworworkerglobalscope/index.html (renamed from files/pl/web/api/windowbase64/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/windoworworkerglobalscope/setinterval/index.html (renamed from files/pl/web/api/window/setinterval/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/windoworworkerglobalscope/settimeout/index.html (renamed from files/pl/web/api/window/settimeout/index.html) | 3 | ||||
-rw-r--r-- | files/pl/web/api/xmlhttprequest/index.html | 234 | ||||
-rw-r--r-- | files/pl/web/api/xmlhttprequest/using_xmlhttprequest/index.html | 658 |
106 files changed, 2098 insertions, 241 deletions
diff --git a/files/pl/web/api/audiocontext/createdynamicscompressor/index.html b/files/pl/web/api/baseaudiocontext/createdynamicscompressor/index.html index 7788cc64a9..8893099724 100644 --- a/files/pl/web/api/audiocontext/createdynamicscompressor/index.html +++ b/files/pl/web/api/baseaudiocontext/createdynamicscompressor/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.createDynamicsCompressor() -slug: Web/API/AudioContext/createDynamicsCompressor +slug: Web/API/BaseAudioContext/createDynamicsCompressor translation_of: Web/API/BaseAudioContext/createDynamicsCompressor +original_slug: Web/API/AudioContext/createDynamicsCompressor --- <p>{{ APIRef("Web Audio API") }}</p> diff --git a/files/pl/web/api/canvas_api/index.html b/files/pl/web/api/canvas_api/index.html new file mode 100644 index 0000000000..2e2ae1bbeb --- /dev/null +++ b/files/pl/web/api/canvas_api/index.html @@ -0,0 +1,56 @@ +--- +title: Canvas +slug: Web/API/Canvas_API +translation_of: Web/API/Canvas_API +original_slug: Web/HTML/Canvas +--- +<div> + {{outdated()}}</div> +<div> + <p><strong>Canvas</strong> (<code><canvas></code>) jest nowym elementem <a href="/pl/docs/HTML" title="pl/docs/HTML">HTML</a>, który może być użyty do rysowania grafik przy użyciu skryptów (zazwyczaj <a href="/pl/docs/JavaScript" title="pl/docs/JavaScript">JavaScript</a>). Na przykład może być użyty do rysowania wykresów, tworzenia kompozycji fotografii lub do prostych (i <a href="/pl/docs/Prosty_RayCaster" title="pl/docs/Prosty_RayCaster">nie tylko prostych</a>) animacji.</p> + <p>Po raz pierwszy <code><canvas></code> został przedstawiony przez Apple dla <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Mac OS X Dashboard</a> i później zaimplementowany w Safari. Przeglądarki oparte o silnik <a href="/pl/docs/Gecko" title="pl/docs/Gecko">Gecko</a> począwszy od wersji 1.8 (tj. <a href="/pl/docs/Firefox_1.5_dla_programistów" title="pl/docs/Firefox_1.5_dla_programistów">Firefox 1.5</a> oraz późniejsze) obsługują ten nowy element. Również Opera 9 go wspiera. Czynione są starania, aby <code><canvas></code> był obsługiwany przez Internet Explorera (zobacz ).</p> + <p>Element <code><canvas></code> jest częścią specyfikacji <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> znanej także jako HTML 5.</p> +</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Dokumentacja" name="Dokumentacja">Dokumentacja</h2> + <dl> + <dt> + <a href="/pl/docs/Rysowanie_grafik_za_pomocą_Canvas" title="pl/docs/Rysowanie_grafik_za_pomocą_Canvas">Rysowanie grafik za pomocą Canvas</a></dt> + <dd> + Wprowadzenie do <code><canvas></code>.</dd> + <dt> + <a href="/pl/docs/Przewodnik_po_canvas" title="pl/docs/Przewodnik_po_canvas">Przewodnik po canvas</a></dt> + <dd> + <code><canvas></code> jest nowym elementem <a href="/pl/docs/HTML" title="pl/docs/HTML">HTML</a>, który może być użyty do rysowania grafik przy użyciu skryptów (zazwyczaj <a href="/pl/docs/JavaScript" title="pl/docs/JavaScript">JavaScript</a>). Na przykład może być użyty do rysowania wykresów, tworzenia kompozycji fotografii lub do prostych (i <a href="/pl/docs/Prosty_RayCaster" title="pl/docs/Prosty_RayCaster">nie tylko prostych</a>) animacji.</dd> + <dt> + <a href="/pl/docs/Fragmenty_kodu/Canvas" title="pl/docs/Fragmenty_kodu/Canvas">Fragmenty kodu:Canvas</a></dt> + <dd> + Fragmenty kodu z użyciem <code><canvas></code>.</dd> + <dt> + <a href="/pl/docs/tag/Przykłady_Canvas" title="Special:Tags?tag=Przykłady_Canvas">Przykłady Canvas</a></dt> + <dd> + Lista różnych przykładów stosujących <code><canvas></code>.</dd> + <dt> + <a href="/pl/docs/Rysowanie_tekstu_za_pomocą_Canvas" title="pl/docs/Rysowanie_tekstu_za_pomocą_Canvas">Rysowanie tekstu za pomocą Canvas</a></dt> + <dd> + Dokumentacja nowych własności <code><canvas></code> dostępnych począwszy od Firefoksa 3</dd> + </dl> + </td> + <td> + <h2 class="Community" id="Spo.C5.82eczno.C5.9B.C4.87" name="Spo.C5.82eczno.C5.9B.C4.87">Społeczność</h2> + <ul> + <li>Zobacz fora Mozilli... {{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}</li> + <li><a class="external" href="http://groups.yahoo.com/group/canvas-developers/">Grupa Yahoo programistów Canvas</a></li> + </ul> + <h2 class="Related_Topics" id="Tematy_powi.C4.85zane" name="Tematy_powi.C4.85zane">Tematy powiązane</h2> + <ul> + <li><a href="/pl/docs/HTML" title="pl/docs/HTML">HTML</a>, <a href="/pl/docs/JavaScript" title="pl/docs/JavaScript">JavaScript</a>, <a href="/pl/docs/CSS" title="pl/docs/CSS">CSS</a>, <a href="/pl/docs/AJAX" title="pl/docs/AJAX">AJAX</a>, <a href="/pl/docs/DOM" title="pl/docs/DOM">DOM</a>, <a href="/pl/docs/SVG" title="pl/docs/SVG">SVG</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html b/files/pl/web/api/canvas_api/tutorial/drawing_shapes/index.html index 08c589844b..2f53156e92 100644 --- a/files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html +++ b/files/pl/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -1,7 +1,8 @@ --- title: Rysowanie kształtów w canvas -slug: Web/API/Canvas_API/Tutorial/rysowanie_ksztaltow +slug: Web/API/Canvas_API/Tutorial/Drawing_shapes translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +original_slug: Web/API/Canvas_API/Tutorial/rysowanie_ksztaltow --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div> diff --git a/files/pl/web/api/canvas_api/tutorial/drawing_text/index.html b/files/pl/web/api/canvas_api/tutorial/drawing_text/index.html new file mode 100644 index 0000000000..da19fa1cfe --- /dev/null +++ b/files/pl/web/api/canvas_api/tutorial/drawing_text/index.html @@ -0,0 +1,137 @@ +--- +title: Rysowanie tekstu przy użyciu canvas +slug: Web/API/Canvas_API/Tutorial/Drawing_text +tags: + - HTML + - HTML:Canvas + - NeedsContent + - Wszystkie_kategorie +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +original_slug: Rysowanie_tekstu_przy_użyciu_canvas +--- +<p>{{ Gecko_minversion_header(1.9) }} +{{ Fx_minversion_header(3) }} +Element <code><a href="pl/HTML/Canvas"><canvas></a></code> wspiera obsługę rysowania tekstu przez eksperymentalne API stworzone w Mozilli. +</p> +<h2 id="Method_overview" name="Method_overview"> Method overview </h2> +<table class="standard-table"> <tbody><tr> +<td> <code>void <a href="#mozDrawText.28.29">mozDrawText</a>(w <a href="pl/DOMString">DOMString</a> textToDraw);</code> +</td></tr> +<tr> +<td> <code>float <a href="#mozMeasureText.28.29">mozMeasureText</a>(w DOMString textToMeasure);</code> +</td></tr> +<tr> +<td> <code>void <a href="#mozPathText.28.29">mozPathText</a>(w DOMString textToPath);</code> +</td></tr> +<tr> +<td> <code>void <a href="#mozTextAlongPath.28.29">mozTextAlongPath</a>(w DOMString textToDraw, w boolean stroke);</code> +</td></tr> +</tbody></table> +<h2 id="Atrybuty" name="Atrybuty"> Atrybuty </h2> +<table class="standard-table"> <tbody><tr> +<td class="header">Atrybut +</td><td class="header">Typ +</td><td class="header">Opis +</td></tr> <tr> +<td><code>mozTextStyle</code> +</td><td><code><a href="pl/DOMString">DOMString</a></code> +</td><td>Przy rysowaniu tekstu używany jest aktualny styl. Ciąg używa takiej samej składni jak <a href="pl/CSS/font">CSS font</a>. Aby zmienić styl tekstu, po prostu zmień wartości atrybutu tak jak zaprezentowano to poniżej. Domyślna czcionka to 12-point sans-serif. +<p>Przykład: +</p> +<pre class="eval">ctx.mozTextStyle = "20pt Arial"; +</pre> +</td></tr></tbody></table> +<h2 id="Metody" name="Metody">Metody</h2> +<h3 id="mozDrawText.28.29" name="mozDrawText.28.29">mozDrawText()</h3> +<p>Rysuje podany tekst używając stylu tekstu podanego w atrybucie <code>mozTextStyle</code>. Kolor wypełnienia kontekstu zostanie użyty jako kolor tekstu. +</p> +<pre class="eval">void mozDrawText( + in DOMString textToDraw +); + +</pre> +<h6 id="Parametry" name="Parametry">Parametry</h6> +<dl><dt><tt>textToDraw</tt> +</dt><dd>Tekst rysowany w tym kontekście. +</dd></dl> +<h6 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h6> +<pre class="eval">ctx.translate(10, 50); +ctx.fillStyle = "Red"; +ctx.mozDrawText("Przykładowy ciąg"); +</pre> +<p>Ten kod rysuje tekst "Przykładowy ciąg" na czerwono w pozycji (10,50) elementu canvas. +</p> +<h3 id="mozMeasureText.28.29" name="mozMeasureText.28.29">mozMeasureText()</h3> +<p>Zwraca szerokość, w pikselach, jaką podany tekst zajmie kiedy zostanie narysowany w aktualnie użytym stylu. +</p> +<pre class="eval">float mozMeasureText( + in DOMString textToMeasure +); +</pre> +<h6 id="Parametery" name="Parametery">Parametery</h6> +<dl><dt><tt>textToMeasure</tt> +</dt><dd>Ciąg, którego szerokośc w pikselach chcemy ustalić. +</dd></dl> +<h6 id="Zwracana_warto.C5.9B.C4.87" name="Zwracana_warto.C5.9B.C4.87">Zwracana wartość</h6> +<p>Szerokość tekstu w pikselach. +</p> +<h6 id="Przyk.C5.82ad_2" name="Przyk.C5.82ad_2">Przykład</h6> +<pre class="eval">var text = "Przykładowy ciąg"; +var width = ctx.canvas.width; +var len = ctx.mozMeasureText(text); +ctx.translate((width - len)/2, 0); +ctx.mozDrawText(text); +</pre> +<p>Ten przykład określa szerokość ciągu, a następnie korzstając z tych danych ryskuje go na horyzontalnym środku w elemencie canvas. +</p> +<h3 id="mozPathText.28.29" name="mozPathText.28.29">mozPathText()</h3> +<p>Dodaje kontury tekstu do aktualnej ścieżki. Pozwala to na obrysowanie tekstu zamiast wypełniania go. +</p> +<pre class="eval">void mozPathText( + in DOMString textToPath +); +</pre> +<h6 id="Parametery_2" name="Parametery_2">Parametery</h6> +<dl><dt><tt>textToPath</tt> +</dt><dd>Tekst, którego kontury mają zostać dodane do aktualnej ścieżki. +</dd></dl> +<h6 id="Example" name="Example">Example</h6> +<pre class="eval">ctx.fillStyle = "green"; +ctx.strokeStyle = "black"; +ctx.mozPathText("Przykładowy ciąg"); +ctx.fill() +ctx.stroke() +</pre> +<p>Ten kod narysuje tekst "Przykładowy ciąg" na zielono z czarną obwódką przez dodanie konturów tekstu do ścieżki, a następnie wypełniając ścieżkę i nakładając kontur. +</p> +<h3 id="mozTextAlongPath.28.29" name="mozTextAlongPath.28.29">mozTextAlongPath()</h3> +<p>Dodaje (lub rysuje) określony tekst wzdłuż podanej ścieżki. +</p> +<pre class="eval">void mozTextAlongPath( + in DOMString textToDraw, + in boolean stroke +); +</pre> +<h6 id="Parametery_3" name="Parametery_3">Parametery</h6> +<dl><dt><tt>textToDraw</tt> +</dt><dd>Tekst, który ma zostać narysowany wzdłuż podanej ścieżki. +</dd><dt><tt>stroke</tt> +</dt><dd>Jeśli ten parametr ma wartość <code>true</code>, wówczas tekst będzie rysowany wzdłuż podanej ścieżki. Jeśli ma wartość <code>false</code>, tekst zostanie zamiast tego dodany do ścieżki, na końcu. +</dd></dl> +<h6 id="Uwagi" name="Uwagi">Uwagi</h6> +<p>Glify nie są skalowane ani transformowane zgodnie z krzywymi ścieżki; zamiast tego, każdy glif jest renderowany traktując ścieżkę pod sobą jako prostą linię. Można to wykorzystać do stworzenia unikatowych efektów. +</p> +<h2 id="Notatki" name="Notatki"> Notatki </h2> +<ul><li> Te rozszerzenia nie są jeszcze ustandardyzowane przez WHATWG. +</li><li> Nie potrzebujesz specjalnego kontekstu, aby tego używać; kontekst 2D wystarczy. +</li><li> Wszelkie rysowanie odbywa się przy użyciu aktualnej transformacji. +</li><li> Aby dowiedzieć się więcej o detalach implementacji zajrzyj do {{ Bug(339553) }}. +</li></ul> +<h2 id="Dodatkowe_przyk.C5.82ady" name="Dodatkowe_przyk.C5.82ady"> Dodatkowe przykłady </h2> +<ul><li> <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273497">Rysowanie tekstu konturem wokół ścieżki</a> +</li><li> <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273498">Rysowanie wzdłuż ścieżki</a> +</li><li> <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273499">Animowanie ruchu tekstu wokół kółka</a>. +</li></ul> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Drawing_text_using_a_canvas", "es": "es/Dibujar_texto_usando_canvas", "fr": "fr/Dessin_de_texte_avec_canvas", "ja": "ja/Drawing_text_using_a_canvas" } ) }} diff --git a/files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html b/files/pl/web/api/canvas_api/tutorial/optimizing_canvas/index.html index 68efe0225f..162a62d266 100644 --- a/files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html +++ b/files/pl/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -1,6 +1,6 @@ --- title: Optymalizacja elementu canvas -slug: Web/API/Canvas_API/Tutorial/Optymalizacja_canvas +slug: Web/API/Canvas_API/Tutorial/Optimizing_canvas tags: - Canvas - Grafika @@ -10,6 +10,7 @@ tags: - Tutorial - zaawansowany translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +original_slug: Web/API/Canvas_API/Tutorial/Optymalizacja_canvas --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div> diff --git a/files/pl/web/api/stylesheet/cssrules/index.html b/files/pl/web/api/cssrulelist/index.html index d3fabad79a..df2e004e09 100644 --- a/files/pl/web/api/stylesheet/cssrules/index.html +++ b/files/pl/web/api/cssrulelist/index.html @@ -1,12 +1,13 @@ --- title: stylesheet.cssRules -slug: Web/API/Stylesheet/cssRules +slug: Web/API/CSSRuleList tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/CSSRuleList +original_slug: Web/API/Stylesheet/cssRules --- <p>{{ ApiRef() }}</p> diff --git a/files/pl/web/api/stylesheet/deleterule/index.html b/files/pl/web/api/cssstylesheet/deleterule/index.html index bda06f24b4..53f72e576a 100644 --- a/files/pl/web/api/stylesheet/deleterule/index.html +++ b/files/pl/web/api/cssstylesheet/deleterule/index.html @@ -1,12 +1,13 @@ --- title: stylesheet.deleteRule -slug: Web/API/Stylesheet/deleteRule +slug: Web/API/CSSStyleSheet/deleteRule tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/CSSStyleSheet/deleteRule +original_slug: Web/API/Stylesheet/deleteRule --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/stylesheet/index.html b/files/pl/web/api/cssstylesheet/index.html index dca62c79ee..7fe2ecc979 100644 --- a/files/pl/web/api/stylesheet/index.html +++ b/files/pl/web/api/cssstylesheet/index.html @@ -1,12 +1,13 @@ --- title: Stylesheet -slug: Web/API/Stylesheet +slug: Web/API/CSSStyleSheet tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/CSSStyleSheet +original_slug: Web/API/Stylesheet --- <p>{{ ApiRef() }}</p> diff --git a/files/pl/web/api/stylesheet/insertrule/index.html b/files/pl/web/api/cssstylesheet/insertrule/index.html index eeabdc8a31..28c2c6f01a 100644 --- a/files/pl/web/api/stylesheet/insertrule/index.html +++ b/files/pl/web/api/cssstylesheet/insertrule/index.html @@ -1,6 +1,6 @@ --- title: stylesheet.insertRule -slug: Web/API/Stylesheet/insertRule +slug: Web/API/CSSStyleSheet/insertRule tags: - DOM - Dokumentacja_Gecko_DOM @@ -8,6 +8,7 @@ tags: - Strony_wymagające_dopracowania - Wszystkie_kategorie translation_of: Web/API/CSSStyleSheet/insertRule +original_slug: Web/API/Stylesheet/insertRule --- <p>{{APIRef("CSSOM")}}</p> diff --git a/files/pl/web/api/document/firstchild/index.html b/files/pl/web/api/document/firstchild/index.html deleted file mode 100644 index f53cd74778..0000000000 --- a/files/pl/web/api/document/firstchild/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: document.firstChild -slug: Web/API/Document/firstChild -tags: - - DOM - - Dokumentacja_Gecko_DOM - - Gecko - - Wszystkie_kategorie -translation_of: Web/API/Node/firstChild -translation_of_original: Web/API/document.firstChild ---- -<p>{{ ApiRef() }}</p> -<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> -<p><b>document.firstChild</b> zwraca pierwszy węzeł z listy bezpośrednich dzieci dokumentu.</p> -<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> -<pre class="eval"><i>dziecko</i> = document.firstChild -</pre> -<h3 id="Parametry" name="Parametry">Parametry</h3> -<ul> - <li><code>dziecko</code> jest węzłem typu <a href="pl/DOM/element">element</a>.</li> -</ul> -<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> -<pre>function fChild() { - f = document.firstChild; - alert(f.tagName); -} -// wyświetli: HTML -</pre> -<h3 id="Uwagi" name="Uwagi">Uwagi</h3> -<p>Zauważ, że możesz powrócić do drzewa DOM z tą własnością, by przejąć te węzły potomne, których potrzebujesz, ponieważ prawie zawsze <b>firstChild</b> zwraca element HTML.</p> -<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> -<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-169727388">firstChild </a></p> -<p> </p> -<p> </p> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/DOM/document.firstChild", "es": "es/DOM/document.firstChild", "fr": "fr/DOM/document.firstChild", "ja": "ja/DOM/document.firstChild" } ) }}</p> diff --git a/files/pl/web/api/document/namespaceuri/index.html b/files/pl/web/api/document/namespaceuri/index.html deleted file mode 100644 index 51ad1e71c0..0000000000 --- a/files/pl/web/api/document/namespaceuri/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: document.namespaceURI -slug: Web/API/Document/namespaceURI -tags: - - DOM - - Dokumentacja_Gecko_DOM - - Gecko - - Wszystkie_kategorie -translation_of: Web/API/Node/namespaceURI -translation_of_original: Web/API/Document/namespaceURI ---- -<p>{{ ApiRef() }}</p> -<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> -<p><b>namespaceURI</b> zwraca przestrzeń nazw XML dokumentu.</p> -<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> -<pre class="eval"><i>NSURI</i> = document.namespaceURI -</pre> -<h3 id="Parametry" name="Parametry">Parametry</h3> -<ul> - <li><code>NSURI</code> jest ciągiem zawierjącym przestrzeń nazw.</li> -</ul> -<h3 id="Uwagi" name="Uwagi">Uwagi</h3> -<p>DOM jako takie nie obsługuje ani nie wymaga walidacji przestrzeni nazw. Przeprowadzenie walidacji, jeśli jest taka potrzeba, zależy od aplikacji obsługującej DOM. Zauważ też, że prefiks przestrzeni nazw nie może zostać zmieniony, kiedy już raz zostanie przypisany węzłowi.</p> -<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> -<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#Namespaces-Considerations">namespaceURI </a></p> -<p>{{ languages( { "en": "en/DOM/document.namespaceURI", "fr": "fr/DOM/document.namespaceURI" } ) }}</p> diff --git a/files/pl/web/api/document_object_model/examples/index.html b/files/pl/web/api/document_object_model/examples/index.html new file mode 100644 index 0000000000..294e891bfe --- /dev/null +++ b/files/pl/web/api/document_object_model/examples/index.html @@ -0,0 +1,355 @@ +--- +title: Przykłady użycia DOM +slug: Web/API/Document_Object_Model/Examples +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document_Object_Model/Examples +original_slug: Dokumentacja_Gecko_DOM/Przykłady_użycia_DOM +--- +<p>{{ ApiRef() }}</p> + +<p>Rozdział ten pokazuje kilka dłuższych przykładów użycia DOM na stronach internetowych i zastosowanie <a href="pl/XML">XML</a>-a. Gdzie tylko jest to możliwe, przykłady używają ogólnie API, trików i wzorów kodu napisanych w JavaScripcie służących do manipulacji obiektem dokumentu.</p> + +<h3 id="Przyk.C5.82ad_1:_Wysoko.C5.9B.C4.87_i_szeroko.C5.9B.C4.87" name="Przyk.C5.82ad_1:_Wysoko.C5.9B.C4.87_i_szeroko.C5.9B.C4.87">Przykład 1: Wysokość i szerokość</h3> + +<p>Następujący przykład pokazuje użycie własności <code>height</code> i <code>width</code> obok obrazków, które się różnią rozmiarami:</p> + +<pre><!DOCTYPE html> +<html lang="pl"> +<head> +<title>Przykład width/height</title> +<script> +function init() +{ + var arrImages = new Array(3); + + arrImages[0] = document.getElementById("image1"); + arrImages[1] = document.getElementById("image2"); + arrImages[2] = document.getElementById("image3"); + var objOutput = document.getElementById("output"); + var strHtml = "<ul>"; + for (var i = 0; i < arrImages.length; i++) + strHtml += "<li>image" + (i+1) + + ": height=" + arrImages[i].height + + ", width=" + arrImages[i].width + + ", style.height=" + arrImages[i].style.height + + ", style.width=" + arrImages[i].style.width + + "<\/li>"; + strHtml += "<\/ul>"; + objOutput.innerHTML = strHtml; +} +</script> +</head> +<body onload="init();"> + +<p>Obrazek 1: Brak wysokości, szerokości oraz stylu + <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"> +</p> +<p>Obrazek 2: height="50", width="500", lecz bez stylu + <img id="image2" src="http://www.mozilla.org/images/mozilla-banner.gif" + height="50" width="500"> +</p> +<p>Obrazek 3: Brak wysokości, szerokości, lecz style="height: 50px; width: 500px;" + <img id="image3" src="http://www.mozilla.org/images/mozilla-banner.gif" + style="height: 50px; width: 500px;"> +</p> + +<div id="output"> </div> +</body> +</html> +</pre> + +<p><code>height</code> i <code>width</code> są także własnościami elementów <code>OBJECT</code> i <code>APPLET</code>.</p> + +<h3 id="Przyk.C5.82ad_2:_Atrybuty_obrazu" name="Przyk.C5.82ad_2:_Atrybuty_obrazu">Przykład 2: Atrybuty obrazu</h3> + +<pre><!DOCTYPE html> +<html lang="pl"> +<head> +<title>Modyfikacja obramowania obrazka</title> + +<script> +function setBorderWidth(width) { + document.getElementById("img1").style.borderWidth = width + "px"; +} +</script> +</head> + +<body> +<p> + <img id="img1" + src="image1.gif" + style="border: 5px solid green;" + width="100" + height="100" + alt="test obramowania"> +</p> + +<form name="FormName"> + <input type="button" value="Utwórz obramowanie 20px-wide" onclick="setBorderWidth(20);"> + <input type="button" value="Utwórz obramowanie 5px-wide" onclick="setBorderWidth(5);"> +</form> + +</body> +</html> +</pre> + +<h3 id="Przyk.C5.82ad_3:_Manipulacja_stylami" name="Przyk.C5.82ad_3:_Manipulacja_stylami">Przykład 3: Manipulacja stylami</h3> + +<p>W tym prostym przykładzie, niektóre podstawowe własności stylów elementu znacznika HTML są dostępne przy zastosowaniu obiektów stylu elementu i obiektów własności stylu CSS, który może być odzyskiwany i ustawiany z DOM. W tym przypadku manipulujemy bezpośrednio pojedynczym stylem. W następnym przykładzie (zobacz <a href="#Przyk.C5.82ad_4:_Zastosowanie_styl.C3.B3w">przykład 4</a>), zastosujemy arkusz stylów i jego reguły do zmiany stylów w dokumentach wokół.</p> + +<pre><!DOCTYPE html> +<html lang="pl"> +<head> +<title>Zmiana koloru i rozmiaru czcionki w przykładzie</title> + +<script> +function changeText() { + var p = document.getElementById("pid"); + + p.style.color = "blue" + p.style.fontSize = "18pt" +} +</script> +</head> +<body> + +<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> + +<form> + <p><input value="rec" type="button" onclick="changeText();"></p> +</form> + +</body> +</html> +</pre> + +<h3 id="Przyk.C5.82ad_4:_Zastosowanie_styl.C3.B3w" name="Przyk.C5.82ad_4:_Zastosowanie_styl.C3.B3w">Przykład 4: Zastosowanie stylów</h3> + +<p>Własność obiektu dokumentu styleSheets zwraca listę arkusza stylów wczytanego do tegoż dokumentu. Można uzyskać dostęp do indywidualnych własności arkusza stylów używając obiektów stylesheet, style oraz CSSRule jak zademonstrowano w poniższym przykładzie, który wyświetla selektory reguł stylu na konsole.</p> + +<pre>var ss = document.styleSheets; + +for(var i=0; i < ss.length; i++) { + for(var j=0; j < ss[i].cssRules.length; j++) { + console.log(ss[i].cssRules[j].selectorText + "\n" ); + } +} +</pre> + +<p>Dla dokumentu posiadającego tylko jeden styl, dla którego zdefiniowano 3 poniższe reguły:</p> + +<pre class="eval">body { background-color: darkblue; } +p { font-face: Arial; font-size: 10pt; margin-left: .125in; } +#lumpy { display: none; } +</pre> + +<p>Wynik skryptu będzie następujący:</p> + +<pre class="eval">BODY +P +#LUMPY +</pre> + +<h3 id="Przyk.C5.82ad_5:_Propagowanie_zdarze.C5.84" name="Przyk.C5.82ad_5:_Propagowanie_zdarze.C5.84">Przykład 5: Propagowanie zdarzeń</h3> + +<p>Poniższy przykład demonstruje w prosty sposób jak zainicjować zdarzenia oraz ich obsługę przez DOM. Kiedy BODY tegoż dokumentu zostanie załadowany nasłuch zdarzeń zostaje zarejestrowany w pierwszym rzędzie TABLE. Nasłuch zdarzeń obsługuje zdarzenie przez wykonanie funkcji l_func, która zmienia wartość dolnej komórki tabeli.</p> + +<p>Jednakże, l_func wywołuje również metodę obiektu zdarzenia <a href="pl/DOM/event.stopPropagation">event.stopPropagation</a> powstrzymującą zdarzenie od dalszego "mieszania" w DOM-ie. Zauważ, że sama tabela posiada uchwyt zdarzenia <a href="pl/DOM/element.onclick">onclick</a>, który powinien wyświetlić powiadomienie w przypadku kliknięcia na tabelę. Metoda l_func powstrzymała propagacje, tak wiec po zaktualizowaniu danych tabeli faza zdarzenia została zakończona.</p> + +<pre><!DOCTYPE html> +<html lang="pl"> +<head> + <title>Propagowanie zdarzeń</title> + <style> + #t-daddy { border: 1px solid red } + #t1 { background-color: pink; } + </style> + <script> + function stopEvent(e) { + t2 = document.getElementById("t2"); + t2.innerHTML = "hej"; + // this ought to keep t-daddy from getting the click. + e.stopPropagation(); + alert("propagowanie zdarzeń zatrzymane."); + } + function load() { + el = document.getElementById("t"); + el.addEventListener("click", stopEvent, false); + } + </script> +</head> +<body onload="load();"> + +<table id="t-daddy" onclick="alert('hi');"> + <tr id="t"> + <td id="t1">jeden</td> + </tr> + <tr> + <td id="t2">dwa</td> + </tr> +</table> +</body> +</html> +</pre> + +<h3 id="Przyk.C5.82ad_6:_getComputedStyle" name="Przyk.C5.82ad_6:_getComputedStyle">Przykład 6: getComputedStyle</h3> + +<p>Poniższy przykład demonstruje jak użyć metody DOM document.defaultView.getComputedStyle() do pobrania stylu elementu, który nie jest zgodny z językiem JavaScript (np., elementReference.style.backgroundColor="rgb(173, 216, 230)"). Typy stylów można pobrać w bardziej bezpośredni sposób style = własności elementReference.style, których lista własności przedstawiona jest <a href="pl/DOM/style">DOM Style Reference</a> książki (patrz <a href="pl/DOM/CSS">DOM CSS Properties List</a>). Zobacz również własności stylów w <a href="pl/DOM/element">DOM Elements Reference</a>. getComputedStyle() zwraca obiekt ComputedCSSStyleDeclaration, którego własności stylów można związać z metodą getPropertyValue() obiektu, jak pokazuje poniższy przykład dokumentu.</p> + +<pre><!DOCTYPE html> +<html lang="pl"> +<head> + +<title>Przykład getComputedStyle</title> + +<script> +function cStyles() { + var RefDiv = document.getElementById("d1"); + + var txtHeight = document.getElementById("t1"); + var h_style = +document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height"); + txtHeight.value = h_style; + + var txtWidth = document.getElementById("t2"); + var w_style = +document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width"); + txtWidth.value = w_style; + + var txtBackgroundColor = document.getElementById("t3"); + var b_style = +document.defaultView.getComputedStyle(RefDiv, +null).getPropertyValue("background-color"); + txtBackgroundColor.value = b_style; + } + </script> + + <style> + #d1 { margin-left: 10px; background-color: rgb(173, 216, 230); +height: 20px; max-width: 20px; } + </style> + +</head> + +<body> + +<div id="d1">&nbsp;</div> + +<form action=""> +<p><button type="button" onclick="cStyles();">getComputedStyle</button> + height<input id="t1" type="text" value="1"> + max-width<input id="t2" type="text" value="2"> + bg-color<input id="t3" type="text" value="3"></p> +</form> + +</body> +</html> +</pre> + +<h3 id="Przyk.C5.82ad_7:_Wy.C5.9Bwietlanie_sta.C5.82ych_obiektu_zdarzenia" name="Przyk.C5.82ad_7:_Wy.C5.9Bwietlanie_sta.C5.82ych_obiektu_zdarzenia">Przykład 7: Wyświetlanie stałych obiektu zdarzenia</h3> + +<p>Przykład pokazuje jak używając DOM można stworzyć tabele zawierającą zarówno wszystkie stałe obiektu zdarzenia jak i ich wartości. Pokazuje kilka ciekawych aspektów DOM, włączając w to własność Event.prototype pozwalającą uzyskać dostęp do własności danego obiektu, dobry wzorzec iteracji przez własności tegoż prototypu oraz same wartości stałych wyświetlanych w tabeli. Zauważ, że środkowy zakres zmiennych to kody znaków reprezentujące klawisze wciśnięte podczas zdarzenia (i do pobrania za pomocą własności charCode). Załaduj poniższy kod jako stronę www, aby zobaczyć stale obiektu zdarzenia.</p> + +<pre><!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>Show Event properties</title> + +<style> + table {border-collapse: collapse;} + thead {font-weight: bold;} + td {padding: 2px 10px 2px 10px;} + .odd {background-color: #efdfef;} + .even {background-color: #ffffff;} +</style> + +<script> + +function showEventProperties(e) { + function addCell(row, text) { + var cell = row.insertCell(-1); + cell.appendChild(document.createTextNode(text)); + } + + var e = e || window.event; + document.getElementById('eventType').innerHTML = e.type; + + var table = document.createElement('table'); + var thead = table.createTHead(); + var row = thead.insertRow(-1); + var lableList = ['#', 'Property', 'Value']; + var len = lableList.length; + + for (var i=0; i<len; i++) { + addCell(row, lableList[i]); + } + + var tbody = document.createElement('tbody'); + table.appendChild(tbody); + + for (var p in e) { + row = tbody.insertRow(-1); + row.className = (row.rowIndex % 2)? 'odd':'even'; + addCell(row, row.rowIndex); + addCell(row, p); + addCell(row, e[p]); + } + + document.body.appendChild(table); +} +window.onload = function(event){ + showEventProperties(event); +} +</script> +</head> + +<body> +<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1> +</body> + +</html> +</pre> + +<h3 id="Przyk.C5.82ad_8:_Zastosowanie_interfejsu_DOM_Table" name="Przyk.C5.82ad_8:_Zastosowanie_interfejsu_DOM_Table">Przykład 8: Zastosowanie interfejsu DOM Table</h3> + +<p>Interfejs DOM HTMLTableElement dostarcza kilku wygodnych metod do tworzenia i modyfikacji tabeli. Dwoma często stosowanymi metodami są <code><a href="pl/DOM/table.insertRow">table.insertRow</a></code> i <code><a href="pl/DOM/tableRow.insertCell">row.insertCell</a></code>.</p> + +<p>Aby dodać wiersz i kilka komórek do istniejącej tabeli:</p> + +<pre><table id="table0"> + <tr> + <td>Row 0 Cell 0</td> + <td>Row 0 Cell 1</td> + </tr> +</table> + +<script> + +var table = document.getElementById('table0'); +var row = table.insertRow(-1); +var cell, text; + +for (var i=0; i<2; i++) { + cell = row.insertCell(-1); + text = 'Row ' + row.rowIndex + ' Cell ' + i; + cell.appendChild(document.createTextNode(text)); +} +</script> +</pre> + +<h4 id="Uwagi" name="Uwagi">Uwagi</h4> + +<ul> + <li>A table's <code><a href="pl/DOM/element.innerHTML">innerHTML</a></code> property should never be used to modify a table, although you can use it to write an entire table or the content of a cell.</li> + <li>If DOM Core methods <code><a href="pl/DOM/document.createElement">document.createElement</a></code> and <code><a href="pl/DOM/element.appendChild">element.appendChild</a></code> are used to create rows and cells, IE requires that they are appended to a tbody element, whereas other browsers will allow appending to a table element (the rows will be added to the last tbody element).</li> + <li>There are a number of other convenience methods belonging to the <a href="pl/DOM/table#Metody">table interface</a> that can be used for creating and modifying tables.</li> +</ul> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/Gecko_DOM_Reference/Examples", "es": "es/Referencia_DOM_de_Gecko/Ejemplos", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko/Exemples", "ja": "ja/Gecko_DOM_Reference/Examples" } ) }}</p> diff --git a/files/pl/web/api/document_object_model/index.html b/files/pl/web/api/document_object_model/index.html new file mode 100644 index 0000000000..65d3e598e5 --- /dev/null +++ b/files/pl/web/api/document_object_model/index.html @@ -0,0 +1,86 @@ +--- +title: Dokumentacja Gecko DOM +slug: Web/API/Document_Object_Model +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document_Object_Model +original_slug: Dokumentacja_Gecko_DOM +--- +<p> +</p><p>Ta strona jest przyszłym spisem treści Dokumentacji Gecko DOM, którą przenosimy <a class="external" href="http://www.mozilla.org/docs/dom/domref/">stąd</a>. +</p><p><br> +</p> +<h4 id="Przedmowa"> <a href="pl/Dokumentacja_Gecko_DOM/Przedmowa">Przedmowa</a> </h4> +<ul><li> <a href="pl/Dokumentacja_Gecko_DOM/Przedmowa#O_dokumentacji">O dokumentacji</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przedmowa#Kto_j.C4.85_powinien_przeczyta.C4.87">Kto ją powinien przeczytać</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przedmowa#Czym_jest_Gecko.3F">Czym jest Gecko?</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przedmowa#Sk.C5.82adnia_API">Składnia API</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przedmowa#Korzystanie_z_przyk.C5.82ad.C3.B3w">Korzystanie z przykładów</a> +</li></ul> +<h4 id="Wprowadzenie"> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie">Wprowadzenie</a> </h4> +<ul><li> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#Czym_jest_DOM.3F">Czym jest DOM?</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#DOM_vs._JavaScript">DOM vs. JavaScript</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#Jak_korzysta.C4.87_z_DOM.3F">Jak korzystać z DOM?</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#Wa.C5.BCne_typy_danych">Ważne typy danych</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#Interfejsy_DOM">Interfejsy DOM</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#Testowanie_DOM_API">Testowanie DOM API</a> +</li></ul> +<h4 id="Elementy_w_DOM"> <a href="pl/DOM/element">Elementy w DOM</a> </h4> +<ul><li> <a href="pl/DOM/element#Wprowadzenie">Wprowadzenie</a> +</li><li> <a href="pl/DOM/element#W.C5.82asno.C5.9Bci">Własności</a> +</li><li> <a href="pl/DOM/element#Metody">Metody</a> +</li><li> <a href="pl/DOM/element#Uchwyty_zdarze.C5.84">Uchwyty zdarzeń</a> +</li></ul> +<h4 id="Obiekt_window"> <a href="pl/DOM/window">Obiekt window</a> </h4> +<ul><li> <a href="pl/DOM/window#Wprowadzenie">Wprowadzenie</a> +</li><li> <a href="pl/DOM/window#W.C5.82asno.C5.9Bci">Własności</a> +</li><li> <a href="pl/DOM/window#Metody">Metody</a> +</li><li> <a href="pl/DOM/window#Uchwyty_zdarze.C5.84">Uchwyty zdarzeń</a> +</li></ul> +<h4 id="Obiekt_document"> <a href="pl/DOM/document">Obiekt document</a> </h4> +<ul><li> <a href="pl/DOM/document#Wprowadzenie">Wprowadzenie</a> +</li><li> <a href="pl/DOM/document#W.C5.82asno.C5.9Bci">Własności</a> +</li><li> <a href="pl/DOM/document#Metody">Metody</a> +</li></ul> +<h4 id="Zdarzenia"> <a href="pl/DOM/event">Zdarzenia</a> </h4> +<ul><li> <a href="pl/DOM/event#Wprowadzenie">Wprowadzenie</a> +</li><li> <a href="pl/DOM/event#W.C5.82asno.C5.9Bci">Własności</a> +</li><li> <a href="pl/DOM/event#Metody">Metody</a> +</li></ul> +<h4 id="Style_w_DOM"> <a href="pl/DOM/style">Style w DOM</a> </h4> +<ul><li> <a href="pl/DOM/style#Notatki">Notatki</a> +</li><li> <a href="pl/DOM/style#Materia.C5.82y_do_przeniesienia_na_inne_strony">Materiały do przeniesienia na inne strony</a> +</li></ul> +<h4 id="DOM_range"> <a href="pl/DOM/range">DOM range</a> </h4> +<ul><li> <a href="pl/DOM/range#Wprowadzenie">Wprowadzenie</a> +</li><li> <a href="pl/DOM/range#W.C5.82asno.C5.9Bci">Własności</a> +</li><li> <a href="pl/DOM/range#Metody">Metody</a> +</li></ul> +<h4 id="Interfejs_elementu_HTML_FORM"> <a href="pl/DOM/form">Interfejs elementu HTML FORM</a> </h4> +<ul><li> <a href="pl/DOM/form#Interfejs_elementu_HTML_FORM">Interfejs elementu HTML FORM</a> +</li><li> <a href="pl/DOM/form#W.C5.82asno.C5.9Bci">Własności</a> +</li><li> <a href="pl/DOM/form#Metody">Metody</a> +</li></ul> +<h4 id="Interfejs_elementu_HTML_TABLE"> <a href="pl/DOM/table">Interfejs elementu HTML TABLE</a> </h4> +<ul><li> <a href="pl/DOM/table#Interfejs_elementu_HTML_TABLE">Interfejs elementu HTML TABLE</a> +</li><li> <a href="pl/DOM/table#W.C5.82asno.C5.9Bci">Własności</a> +</li><li> <a href="pl/DOM/table#Metody">Metody</a> +</li></ul> +<h4 id="Przyk.C5.82ady_u.C5.BCycia_DOM"> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM">Przykłady użycia DOM</a> </h4> +<ul><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_1:_Wysoko.C5.9B.C4.87_i_szeroko.C5.9B.C4.87">Przykład 1: Wysokość i szerokość</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_2:_Atrybuty_obrazu">Przykład 2: Atrybuty obrazu</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_3:_Manipulacja_stylami">Przykład 3: Manipulacja stylami</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_4:_Zastosowanie_styl.C3.B3w">Przykład 4: Zastosowanie stylów</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_5:_Propagowanie_zdarze.C5.84">Przykład 5: Propagowanie zdarzeń</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_6:_getComputedStyle">Przykład 6: getComputedStyle</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_7:_Wy.C5.9Bwietlanie_sta.C5.82ych_obiektu_zdarzenia">Przykład 7: Wyświetlanie stałych obiektu zdarzenia</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_8:_Zastosowanie_interfejsu_DOM_Table">Przykład 8: Zastosowanie interfejsu DOM Table</a> +</li></ul> +<p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Gecko_DOM_Reference", "es": "es/Referencia_DOM_de_Gecko", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko", "it": "it/Reference_del_DOM_di_Gecko", "ja": "ja/Gecko_DOM_Reference", "ko": "ko/Gecko_DOM_Reference", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003" } ) }} diff --git a/files/pl/web/api/document_object_model/introduction/index.html b/files/pl/web/api/document_object_model/introduction/index.html new file mode 100644 index 0000000000..074d814fce --- /dev/null +++ b/files/pl/web/api/document_object_model/introduction/index.html @@ -0,0 +1,172 @@ +--- +title: Wprowadzenie +slug: Web/API/Document_Object_Model/Introduction +tags: + - DOM + - Gecko +translation_of: Web/API/Document_Object_Model/Introduction +original_slug: Dokumentacja_Gecko_DOM/Wprowadzenie +--- +<p>Ten rozdział ma dać ogólne pojęcie o <a href="pl/DOM">DOM</a>: co to jest, o strukturze dla dokumentów <a href="pl/HTML">HTML</a> i <a href="pl/XML">XML</a>, jak korzystać z DOM oraz w jaki sposób przedstawiona będzie dokumentacja i przykłady.</p> + +<h2 id="Czym_jest_DOM.3F" name="Czym_jest_DOM.3F">Czym jest DOM?</h2> + +<p><b>Model obiektowy dokumentu</b> (ang. Document Object Model, DOM) stanowi API dla dokumentów HTML i XML. Odpowiada za dwie rzeczy: zapewnia reprezentację struktury dokumentu oraz określa, w jaki sposób odnosić się do tej struktury z poziomu skryptu. DOM przedstawia stronę jako strukturyzowaną grupę węzłów, co omówimy pokrótce. W gruncie rzeczy, DOM łączy stronę ze skryptami bądź językami programowania.</p> + +<p>Zauważ, że DOM nie jest konkretną aplikacją czy produktem. Jest raczej interfejsem, API, które twórcy oprogramowania muszą zaimplementować, jeśli chcą spełniać standard W3C DOM. Mały przykład: każda przeglądarka internetowa musi zwracać wszystkie elementy <code><P></code> ze strony HTML jako tablicę węzłów, kiedy poniższy skrypt wywoła metodę <code>getElementsByTagName</code>:</p> + +<pre>paragraphs = document.getElementsByTagName("P"); +// paragraphs[0] to pierwszy element <p> +// paragraphs[1] - drugi element <p>, etc. +alert(paragraphs[0].nodeName); +</pre> + +<p>Wszystkie metody, właściwości i wydarzenie dostępne dla webmastera w celu manipulowania lub tworzenia stron są zorganizowane w obiekty (np. obiekt <code>document</code>, reprezentujący sam dokument, obiekt <code>table</code>, implementujący specjalny interfejs DOM <code>HTMLTableElement</code>, który umożliwia dostęp do tabel w HTML, itd.) Niniejsza dokumentacja przedstawia opis każdego z obiektów w tym API.</p> + +<h2 id="DOM_vs._JavaScript" name="DOM_vs._JavaScript">DOM vs. JavaScript</h2> + +<p>Powyższy przykład, jak i inne w tej dokumentacji, napisano w <a href="pl/JavaScript">JavaScript</a>. Ściślej, został on + + <i>napisany</i> + w JavaScript, ale + + <i>korzysta</i> + z DOM, by manipulować stroną i jej elementami. DOM nie jest sam w sobie językiem programowania, ale bez niego język JavaScript nie miałby żadnego odniesienia do stron czy dokumentów XML i ich elementów. Każdy z elementów - jak nagłówek, tabele, nagłówki tabel, komórki tych tabel, tekst w tych komórkach - są częściami obiektowego modelu tego konkretnego dokumentu i, za pomocą DOM, język taki jak JavaScript może nimi operować.</p> + +<p>DOM zaprojektowano tak, by był niezależny od języka programowania, dzięki czemu reprezentacja struktury dokumentu dostępna jest poprzez jedno, spójne API. W niniejszej dokumentacji skupimy się wyłącznie na JavaScripcie, jednak można stworzyć implementację DOM dla dowolnego języka - poniżej przykład w Pythonie:</p> + +<pre class="eval"># Przykład: DOM w Pythonie +import xml.dom.minidom as m +doc = m.parse("C:\\Projects\\Py\\chap1.xml"); +doc.nodeName # DOM - własność obiektu document; +p_list = doc.getElementsByTagName("para"); +</pre> + +<h2 id="Jak_korzysta.C4.87_z_DOM.3F" name="Jak_korzysta.C4.87_z_DOM.3F">Jak korzystać z DOM?</h2> + +<p>Aby zacząć korzystać z DOM, nie musisz robić nic szczególnego. Różne przeglądarki różnią się implementacją DOM, implementacje wykazują różny stopień zgodności z faktycznym standardem DOM (jest to kwestia, której staramy się unikać w niniejszej dokumentacji), ale każda przeglądarka używa jakiegoś obiektowego modelu dokumentu, by dać dostęp do strony z poziomu skryptu.</p> + +<p>Kiedy tworzysz nowy skrypt - niezależnie, czy jest to on zagnieżdżony w elemencie <code><SCRIPT></code>, czy też załączony do strony w odpowiedni sposób - możesz od razu zacząć korzystać z API dla elementów <code>document</code> lub <code>window</code> by manipulować samym dokumentem lub by przechwycić któregoś z potomków - elementów strony. Programowanie w DOM może być tak proste jak poniższy przykład, który wykorzystuje metodę <code>alert()</code> obiektu <code>window</code>, może jednak korzystać z bardziej skomplikowanych metod, by tworzyć nową zawartość - tak jak w drugim z poniższych przykładów.</p> + +<pre class="eval"><body onload="window.alert('Witaj!');"> +</pre> + +<p>Niezależnie od elementu <code><script></code>, w którym poniższy skrypt jest zdefiniowany, kod ten tworzy nowy element H1, dodaje do niego tekst, a następnie włącza <code>H1</code> do drzewa dokumentu.</p> + +<pre class="eval"><html> +<script> + // create a couple of elements + // in an otherwise empty HTML page + heading = document.createElement("h1"); + heading_text = document.createTextNode("Big Head!"); + heading.appendChild(heading_text); + document.body.appendChild(heading); +</script> +</html> +</pre> + +<h2 id="Wa.C5.BCne_typy_danych" name="Wa.C5.BCne_typy_danych">Ważne typy danych</h2> + +<h2 id="Interfejsy_DOM" name="Interfejsy_DOM">Interfejsy DOM</h2> + +<p>Założeniem tego przewodnika jest ograniczenie do minimum dyskusji o abstrakcyjnych interfejsach, dziedziczeniu i innych szczegółach implementacji, a zamiast tego omówienie obiektów w DOM, faktycznych + <i>bytów</i> + , jakich możesz użyć do manipulowania hierarchią DOM. Z punktu widzenia programisty zwykle nie jest istotne, że obiekt reprezentujący element HTML <code>FORM</code> pobiera własność <b>name</b> z interfejsu <code>HTMLFormElement</code>, a własność <b>className</b> z interfejsu <code>HTMLElement</code>. W obu przypadkach własność, która Ciebie interesuje, znajduje się po prostu w obiekcie <code>form</code>.</p> + +<p>Jednakże zależność między obiektami a interfejsami, jakie one implementują, może być myląca, dlatego w tym podrozdziale spróbujemy powiedzieć coś o faktycznych interfejsach w specyfikacji DOM oraz o tym, w jaki sposób są one dostępne.</p> + +<h3 id="Interfejsy_a_obiekty" name="Interfejsy_a_obiekty">Interfejsy a obiekty</h3> + +<p>W niektórych przypadkach obiekt przedstawia tylko jeden interfejs, jednak z reguły obiekty - takie jak np. <code>table</code> - reprezentują kilka różnych interfejsów. Dla przykładu - <code>table</code> implementuje specjalny interfejs <code>HTMLTableElement</code>, który zawiera metody takie jak XXX i YYY. Ponieważ jednak jest to element HTML, <code>table</code> implementuje też interfejs <code>Element</code>, opisany w rozdziale <a href="pl/DOM/element">Obiekt element</a>. I wreszcie, ponieważ element HTML jest, jeśli mówimy o DOM, węzłem w drzewie węzłów, jakie tworzy obiektowy model strony internetowej czy XML, element <code>table</code> implementuje także bardziej podstawowy interfejs <code>Node</code>, z którego wywodzi się <code>Element</code>.</p> + +<p>Kiedy otrzymasz referencję do obiektu <code>table</code>, tak jak w poniższym przykładzie, używasz zazwyczaj zamiennie wszystkich trzech interfejsów, być może nawet o tym nie wiedząc.</p> + +<pre>var table = document.getElementById("table"); +var tableAttrs = table.attributes; // interfejs Node/Element +for(var i = 0; i < tableAttrs.length; i++){ + // interfejs HTMLTableElement: atrybut border + if(tableAttrs[i].nodeName.toLowerCase() == "border") + table.setAttribute("border", "1"); +} +// interfejs HTMLTableElement: atrybut summary +table.summary = "uwaga: zwiększono obramowanie"; +</pre> + +<h3 id="Najwa.C5.BCniejsze_interfejsy_w_DOM" name="Najwa.C5.BCniejsze_interfejsy_w_DOM">Najważniejsze interfejsy w DOM</h3> + +<p>W tej części wymienione zostaną niektóre z najczęściej używanych interfejsów DOM. Celem nie jest opisanie, co wymienione API robią, ale raczej by dać Tobie ogólne pojęcie o rodzajach metod i własności, jakie będziesz często widywał, używając DOM. Te API wykorzystano także w <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM">przykładach</a>, jakie znajdziesz na końcu tej dokumentacji.</p> + +<p>Obiekty <code>document</code> i <code>window</code> to obiekty, których interfejsy będziesz najczęściej wykorzystywał w programowaniu przy użyciu DOM. W prostych słowach, <code>window</code> reprezentuje coś takiego jak przeglądarka, zaś <code>document</code> jest początkiem, górą całego dokumentu. <code>Element</code> dziedziczy z ogólnego interfejsu <code>Node</code>, zaś razem te dwa interfejsy odpowiadają za wiele metod i własności, jakich będziesz używał na konkretnych elementach. Elementy te mogą mieć też własne, osobne interfejsy, służące do obsługi konkretnego rodzaju danych, jaki przechowują - tak jak na przykład wspomniany wcześniej obiekt <code>table</code>.</p> + +<p>Poniżej krótka lista najczęściej używanych API w skryptach wykorzystujących DOM.</p> + +<ul> + <li><code><a href="pl/DOM/document.getElementById">document.getElementById</a>(id)</code></li> + <li><code>element.<a href="pl/DOM/element.getElementsByTagName">getElementsByTagName</a>(name)</code></li> + <li><code><a href="pl/DOM/document.createElement">document.createElement</a>(name)</code></li> + <li><code>parentNode.<a href="pl/DOM/element.appendChild">appendChild</a>(node)</code></li> + <li><code>element.<a href="pl/DOM/element.innerHTML">innerHTML</a></code></li> + <li><code>element.<a href="pl/DOM/element.style">style</a>.left</code></li> + <li><code>element.<a href="pl/DOM/element.setAttribute">setAttribute</a></code></li> + <li><code>element.<a href="pl/DOM/element.getAttribute">element.getAttribute</a></code></li> + <li><code>element.<a href="pl/DOM/element.addEventListener">addEventListener</a></code></li> + <li><code><a href="pl/DOM/window.content">window.content</a></code></li> + <li><code><a href="pl/DOM/window.onload">window.onload</a></code></li> + <li><code><a href="pl/DOM/window.dump">window.dump</a></code></li> + <li><code><a href="pl/DOM/window.scrollTo">window.scrollTo</a></code></li> +</ul> + +<h2 id="Testowanie_DOM_API" name="Testowanie_DOM_API">Testowanie DOM API</h2> + +<p>W dokumentacji tej znajdziesz do każdego interfejsu przykłady wykorzystania. W niektórych przypadkach są to kompletne strony HTML, działające z poziomu elementu <code><script></code>, z elementami (jak np. przyciski) niezbędnymi do uruchomienia skryptu, jak również elementami, którymi operuje DOM. W takim przypadku możesz po prostu skopiować przykład, wkleić go do nowego pliku, zapisać i uruchomić w przeglądarce.</p> + +<p>Jednakże, w wielu przypadkach przykłady są bardziej zwięzłe. Aby uruchomić kod, który pokazuje proste relacje między interfejsem a elementami HTML, możesz chcieć stworzyć stronę testową. Poniżej znajdziesz właśnie taką, prostą stronę do testów - funkcje testujące możesz umieścić w znaczniku <code><script></code> w nagłówku, umieszczono też kilka elementów wraz z atrybutami, którymi możesz swobodnie manipulować, a także interfejs użytkownika, pozwalający wywoływać funkcje testowe z poziomu przeglądarki.</p> + +<p>Możesz skorzystać z tej strony testowej lub stworzyć własną. Możesz zmieniać w razie potrzeby treść skryptu, dodać przyciski czy elementy.</p> + +<pre><html> +<head> +<title>DOM Tests</title> +<script type="application/x-javascript"> +function setBodyAttr(attr,value){ + if(document.body) eval('document.body.'+attr+'="'+value+'"'); + else notSupported(); +} +</script> +</head> +<body> +<div style="margin: .5in; height="400""> +<p><b><tt>text</tt> color</p> +<form> +<select onChange="setBodyAttr('text', + this.options[this.selectedIndex].value);"> +<option value="black">black +<option value="darkblue">darkblue +</select> + <p><b><tt>bgColor</tt></p> + <select onChange="setBodyAttr('bgColor', + this.options[this.selectedIndex].value);"> +<option value="white">white +<option value="lightgrey">gray + </select> +<p><b><tt>link</tt></p> +<select onChange="setBodyAttr('link', + this.options[this.selectedIndex].value);"> +<option value="blue">blue +<option value="green">green +</select> <small> + <a href="http://www.brownhen.com/dom_api_top.html" id="sample"> +(sample link)</a></small><br> +</form> +<form> + <input type="button" value="version" onclick="ver()" /> +</form> +</div> +</body> +</html> +</pre> + +<p><img alt="Przykładowa strona testowa DOM"><br> + By przetestować więcej interfejsów na jednej stronie - np. komplet własności zmieniających kolory strony - możesz stworzyć podobną stronę z całą konsolą przycisków, pól tekstowych i innych elementów HTML. Poniższy zrzut ekranu przedstawia przykładowy pomysł pogrupowania interfejsów do testów.</p> + +<p>W tym przykładzie rozwijalne menu dynamicznie podmieniają takie aspekty strony jak kolor tła (<code>bgColor</code>), kolory linków (<code>aLink</code>), tekstu (<code>text</code>). Niezależnie od tego, jak zaprojektujesz swoją stronę testową - testowanie interfejsów jest ważnym elementem efektywnej nauki DOM.</p> diff --git a/files/pl/web/api/document/activeelement/index.html b/files/pl/web/api/documentorshadowroot/activeelement/index.html index 6a8358c7ac..173e0b9d64 100644 --- a/files/pl/web/api/document/activeelement/index.html +++ b/files/pl/web/api/documentorshadowroot/activeelement/index.html @@ -1,6 +1,6 @@ --- title: document.activeElement -slug: Web/API/Document/activeElement +slug: Web/API/DocumentOrShadowRoot/activeElement tags: - DOM - Dokumentacja_Gecko_DOM @@ -8,6 +8,7 @@ tags: - Wszystkie_kategorie translation_of: Web/API/DocumentOrShadowRoot/activeElement translation_of_original: Web/API/Document/activeElement +original_slug: Web/API/Document/activeElement --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/document/stylesheets/index.html b/files/pl/web/api/documentorshadowroot/stylesheets/index.html index e1c2493cd3..cb2e61d67b 100644 --- a/files/pl/web/api/document/stylesheets/index.html +++ b/files/pl/web/api/documentorshadowroot/stylesheets/index.html @@ -1,6 +1,6 @@ --- title: document.styleSheets -slug: Web/API/Document/styleSheets +slug: Web/API/DocumentOrShadowRoot/styleSheets tags: - DOM - Dokumentacja_Gecko_DOM @@ -8,6 +8,7 @@ tags: - Wszystkie_kategorie translation_of: Web/API/DocumentOrShadowRoot/styleSheets translation_of_original: Web/API/Document/styleSheets +original_slug: Web/API/Document/styleSheets --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/name/index.html b/files/pl/web/api/element/name/index.html deleted file mode 100644 index 3923721e2a..0000000000 --- a/files/pl/web/api/element/name/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: element.name -slug: Web/API/Element/name -tags: - - DOM - - Dokumentacja_Gecko_DOM - - Gecko - - Wszystkie_kategorie -translation_of: Web/API -translation_of_original: Web/API/Element/name ---- -<p>{{ ApiRef() }}</p> -<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> -<p><strong>name</strong> pobiera lub ustawia atrybut <code>name</code> obiektu DOM. Ma zastosowanie tylko dla poniższych elementów: anchor, applet, form, frame, iframe, image, input, map, meta, object, option, param, select i textarea.</p> -<p><strong>name</strong> można wykorzystać w metodzie <a href="/pl/DOM/document.getElementsByName" title="pl/DOM/document.getElementsByName">getElementsByName</a>, w obiekcie <a href="/pl/DOM/form" title="pl/DOM/form">form</a> i w kolekcji <a href="/pl/DOM/form.elements" title="pl/DOM/form.elements">elements</a>. Jeśli zostanie użyta dla formularza lub kolekcji elementów, właściwość tak może zwrócić jeden element lub ich kolekcję.</p> -<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> -<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; -var elName = <em>HTMLElement</em>.name; - -var kontrolka = <em>HTMLFormElement</em>.<em>nazwaElementu</em>; -var kolekcjaKontrolek = <em>HTMLFormElement</em>.elements.<em>nazwaElementu</em>; -</pre> -<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> -<pre class="eval"><form action="" name="formA"> - <input type="text" value="foo"> -</form> - -<script type="text/javascript"> - - // pobierz referncję do pierwszego elementu formularza - var formElement = document.forms['formA'].elements[0]; - - // nadaj mu nazwę - formElement.name = 'inputA'; - - // i wyświetl jego wartość - alert(document.forms['formA'].elements['inputA'].value); - -</script> -</pre> -<h3 id="uwagi" name="uwagi">uwagi</h3> -<p>W przeglądarce Internet Explorer (IE) nie można modyfikować właściwości <code>name</code> obiektów DOM utworzonych za pomocą <code><a href="/pl/DOM/document.createElement" title="pl/DOM/document.createElement">createElement</a></code>.</p> -<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> -<p>Specyfikacja W3C DOM 2 HTML:</p> -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Option</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> -</ul> -<p>{{ languages( { "en": "en/DOM/element.name", "ja": "ja/DOM/element.name", "fr": "fr/DOM/element.name" } ) }}</p> diff --git a/files/pl/web/api/element/style/index.html b/files/pl/web/api/elementcssinlinestyle/style/index.html index 4736774e83..80ee084961 100644 --- a/files/pl/web/api/element/style/index.html +++ b/files/pl/web/api/elementcssinlinestyle/style/index.html @@ -1,6 +1,6 @@ --- title: element.style -slug: Web/API/Element/style +slug: Web/API/ElementCSSInlineStyle/style tags: - DOM - Dokumentacja_Gecko_DOM @@ -8,6 +8,7 @@ tags: - Strony_wymagające_dopracowania - Wszystkie_kategorie translation_of: Web/API/ElementCSSInlineStyle/style +original_slug: Web/API/Element/style --- <p>{{ ApiRef("DOM") }}</p> diff --git a/files/pl/web/api/element/addeventlistener/index.html b/files/pl/web/api/eventtarget/addeventlistener/index.html index 781ec7f3b6..abba3c0352 100644 --- a/files/pl/web/api/element/addeventlistener/index.html +++ b/files/pl/web/api/eventtarget/addeventlistener/index.html @@ -1,6 +1,6 @@ --- title: element.addEventListener -slug: Web/API/Element/addEventListener +slug: Web/API/EventTarget/addEventListener tags: - DOM - Dokumentacja_Gecko_DOM @@ -8,6 +8,7 @@ tags: - Strony_wymagające_dopracowania - Wszystkie_kategorie translation_of: Web/API/EventTarget/addEventListener +original_slug: Web/API/Element/addEventListener --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/dispatchevent/index.html b/files/pl/web/api/eventtarget/dispatchevent/index.html index 266c570cfe..885951a2bd 100644 --- a/files/pl/web/api/element/dispatchevent/index.html +++ b/files/pl/web/api/eventtarget/dispatchevent/index.html @@ -1,12 +1,13 @@ --- title: element.dispatchEvent -slug: Web/API/Element/dispatchEvent +slug: Web/API/EventTarget/dispatchEvent tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/EventTarget/dispatchEvent +original_slug: Web/API/Element/dispatchEvent --- <p>{{ ApiRef() }}</p> diff --git a/files/pl/web/api/element/onclick/index.html b/files/pl/web/api/globaleventhandlers/onclick/index.html index b6215b4c00..1f20dfe26a 100644 --- a/files/pl/web/api/element/onclick/index.html +++ b/files/pl/web/api/globaleventhandlers/onclick/index.html @@ -1,6 +1,6 @@ --- title: element.onclick -slug: Web/API/Element/onclick +slug: Web/API/GlobalEventHandlers/onclick tags: - DOM - DOM_0 @@ -8,6 +8,7 @@ tags: - Gecko - Wszystkie_kategorie translation_of: Web/API/GlobalEventHandlers/onclick +original_slug: Web/API/Element/onclick --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/globaleventhandlers/onkeydown/index.html b/files/pl/web/api/globaleventhandlers/onkeydown/index.html new file mode 100644 index 0000000000..1e2e7dac9c --- /dev/null +++ b/files/pl/web/api/globaleventhandlers/onkeydown/index.html @@ -0,0 +1,25 @@ +--- +title: element.onkeydown +slug: Web/API/GlobalEventHandlers/onkeydown +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onkeydown +original_slug: DOM/element.onkeydown +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność <b>onkeydown</b> zawiera kod obsługi zdarzenia <code>keydown</code> dla bieżącego elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">kod obsługi zdarzenia = element.onkeydown +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zdarzenie <code>keydown</code> wywoływane jest, gdy użytkownik naciska klawisz na klawiaturze.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.onkeydown", "fr": "fr/DOM/element.onkeydown" } ) }}</p> diff --git a/files/pl/web/api/element/onkeypress/index.html b/files/pl/web/api/globaleventhandlers/onkeypress/index.html index eb57c1936c..87d8d71ca0 100644 --- a/files/pl/web/api/element/onkeypress/index.html +++ b/files/pl/web/api/globaleventhandlers/onkeypress/index.html @@ -1,6 +1,6 @@ --- title: element.onkeypress -slug: Web/API/Element/onkeypress +slug: Web/API/GlobalEventHandlers/onkeypress tags: - DOM - DOM_0 @@ -8,6 +8,7 @@ tags: - Gecko - Wszystkie_kategorie translation_of: Web/API/GlobalEventHandlers/onkeypress +original_slug: Web/API/Element/onkeypress --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/onkeyup/index.html b/files/pl/web/api/globaleventhandlers/onkeyup/index.html index ad411b0e1a..d7e7ccc00f 100644 --- a/files/pl/web/api/element/onkeyup/index.html +++ b/files/pl/web/api/globaleventhandlers/onkeyup/index.html @@ -1,6 +1,6 @@ --- title: element.onkeyup -slug: Web/API/Element/onkeyup +slug: Web/API/GlobalEventHandlers/onkeyup tags: - DOM - DOM_0 @@ -8,6 +8,7 @@ tags: - Gecko - Wszystkie_kategorie translation_of: Web/API/GlobalEventHandlers/onkeyup +original_slug: Web/API/Element/onkeyup --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/window/onload/index.html b/files/pl/web/api/globaleventhandlers/onload/index.html index 45e1b97328..d1575beb1c 100644 --- a/files/pl/web/api/window/onload/index.html +++ b/files/pl/web/api/globaleventhandlers/onload/index.html @@ -1,6 +1,6 @@ --- title: window.onload -slug: Web/API/Window/onload +slug: Web/API/GlobalEventHandlers/onload tags: - DOM - DOM_0 @@ -9,6 +9,7 @@ tags: - Strony_wymagające_dopracowania - Wszystkie_kategorie translation_of: Web/API/GlobalEventHandlers/onload +original_slug: Web/API/Window/onload --- <p>{{ ApiRef() }}</p> diff --git a/files/pl/web/api/element/onmousedown/index.html b/files/pl/web/api/globaleventhandlers/onmousedown/index.html index e616906126..d3b85a83d8 100644 --- a/files/pl/web/api/element/onmousedown/index.html +++ b/files/pl/web/api/globaleventhandlers/onmousedown/index.html @@ -1,12 +1,13 @@ --- title: element.onmousedown -slug: Web/API/Element/onmousedown +slug: Web/API/GlobalEventHandlers/onmousedown tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/GlobalEventHandlers/onmousedown +original_slug: Web/API/Element/onmousedown --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/onmousemove/index.html b/files/pl/web/api/globaleventhandlers/onmousemove/index.html index f54256c9f7..733209593f 100644 --- a/files/pl/web/api/element/onmousemove/index.html +++ b/files/pl/web/api/globaleventhandlers/onmousemove/index.html @@ -1,6 +1,6 @@ --- title: element.onmousemove -slug: Web/API/Element/onmousemove +slug: Web/API/GlobalEventHandlers/onmousemove tags: - DOM - Dokumentacja_Gecko_DOM @@ -8,6 +8,7 @@ tags: - Strony_wymagające_dopracowania - Wszystkie_kategorie translation_of: Web/API/GlobalEventHandlers/onmousemove +original_slug: Web/API/Element/onmousemove --- <p>{{ ApiRef() }}</p> diff --git a/files/pl/web/api/element/click/index.html b/files/pl/web/api/htmlelement/click/index.html index 5c0fe512d5..0a728115e5 100644 --- a/files/pl/web/api/element/click/index.html +++ b/files/pl/web/api/htmlelement/click/index.html @@ -1,12 +1,13 @@ --- title: element.click -slug: Web/API/Element/click +slug: Web/API/HTMLElement/click tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/HTMLElement/click +original_slug: Web/API/Element/click --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/dir/index.html b/files/pl/web/api/htmlelement/dir/index.html index 5e20e1e6ad..6d96feb8a0 100644 --- a/files/pl/web/api/element/dir/index.html +++ b/files/pl/web/api/htmlelement/dir/index.html @@ -1,12 +1,13 @@ --- title: element.dir -slug: Web/API/Element/dir +slug: Web/API/HTMLElement/dir tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/HTMLElement/dir +original_slug: Web/API/Element/dir --- <div> {{ApiRef}}</div> diff --git a/files/pl/web/api/element/lang/index.html b/files/pl/web/api/htmlelement/lang/index.html index 446c0817b9..699d6f41ae 100644 --- a/files/pl/web/api/element/lang/index.html +++ b/files/pl/web/api/htmlelement/lang/index.html @@ -1,12 +1,13 @@ --- title: element.lang -slug: Web/API/Element/lang +slug: Web/API/HTMLElement/lang tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/HTMLElement/lang +original_slug: Web/API/Element/lang --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/offsetheight/index.html b/files/pl/web/api/htmlelement/offsetheight/index.html index ce5fc2254e..1fe35e7691 100644 --- a/files/pl/web/api/element/offsetheight/index.html +++ b/files/pl/web/api/htmlelement/offsetheight/index.html @@ -1,6 +1,6 @@ --- title: element.offsetHeight -slug: Web/API/Element/offsetHeight +slug: Web/API/HTMLElement/offsetHeight tags: - DOM - Dokumentacja_Gecko_DOM @@ -8,6 +8,7 @@ tags: - Strony_wymagające_dopracowania - Wszystkie_kategorie translation_of: Web/API/HTMLElement/offsetHeight +original_slug: Web/API/Element/offsetHeight --- <p>{{ ApiRef() }}</p> diff --git a/files/pl/web/api/element/offsetleft/index.html b/files/pl/web/api/htmlelement/offsetleft/index.html index b0252f3363..2cc478daa5 100644 --- a/files/pl/web/api/element/offsetleft/index.html +++ b/files/pl/web/api/htmlelement/offsetleft/index.html @@ -1,6 +1,6 @@ --- title: element.offsetLeft -slug: Web/API/Element/offsetLeft +slug: Web/API/HTMLElement/offsetLeft tags: - DOM - Dokumentacja_Gecko_DOM @@ -8,6 +8,7 @@ tags: - Strony_wymagające_dopracowania - Wszystkie_kategorie translation_of: Web/API/HTMLElement/offsetLeft +original_slug: Web/API/Element/offsetLeft --- <p>{{ ApiRef("HTML DOM") }}</p> diff --git a/files/pl/web/api/element/offsetparent/index.html b/files/pl/web/api/htmlelement/offsetparent/index.html index c33d32b38c..57033d33a5 100644 --- a/files/pl/web/api/element/offsetparent/index.html +++ b/files/pl/web/api/htmlelement/offsetparent/index.html @@ -1,12 +1,13 @@ --- title: element.offsetParent -slug: Web/API/Element/offsetParent +slug: Web/API/HTMLElement/offsetParent tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/HTMLElement/offsetParent +original_slug: Web/API/Element/offsetParent --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/offsetwidth/index.html b/files/pl/web/api/htmlelement/offsetwidth/index.html index b78d7b4136..996593db32 100644 --- a/files/pl/web/api/element/offsetwidth/index.html +++ b/files/pl/web/api/htmlelement/offsetwidth/index.html @@ -1,6 +1,6 @@ --- title: element.offsetWidth -slug: Web/API/Element/offsetWidth +slug: Web/API/HTMLElement/offsetWidth tags: - DOM - Dokumentacja_Gecko_DOM @@ -8,6 +8,7 @@ tags: - Strony_wymagające_dopracowania - Wszystkie_kategorie translation_of: Web/API/HTMLElement/offsetWidth +original_slug: Web/API/Element/offsetWidth --- <p>{{ APIRef("HTML DOM") }}</p> diff --git a/files/pl/web/api/element/blur/index.html b/files/pl/web/api/htmlorforeignelement/blur/index.html index 1febd21617..35d1e725eb 100644 --- a/files/pl/web/api/element/blur/index.html +++ b/files/pl/web/api/htmlorforeignelement/blur/index.html @@ -1,12 +1,13 @@ --- title: element.blur -slug: Web/API/Element/blur +slug: Web/API/HTMLOrForeignElement/blur tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/HTMLOrForeignElement/blur +original_slug: Web/API/Element/blur --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/htmlelement/dataset/index.html b/files/pl/web/api/htmlorforeignelement/dataset/index.html index fac7ec119f..4d322c20eb 100644 --- a/files/pl/web/api/htmlelement/dataset/index.html +++ b/files/pl/web/api/htmlorforeignelement/dataset/index.html @@ -1,7 +1,8 @@ --- title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset +slug: Web/API/HTMLOrForeignElement/dataset translation_of: Web/API/HTMLOrForeignElement/dataset +original_slug: Web/API/HTMLElement/dataset --- <div>{{ APIRef("HTML DOM") }}</div> diff --git a/files/pl/web/api/element/focus/index.html b/files/pl/web/api/htmlorforeignelement/focus/index.html index 7f3eef32fa..4d5084b55a 100644 --- a/files/pl/web/api/element/focus/index.html +++ b/files/pl/web/api/htmlorforeignelement/focus/index.html @@ -1,12 +1,13 @@ --- title: element.focus -slug: Web/API/Element/focus +slug: Web/API/HTMLOrForeignElement/focus tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/HTMLOrForeignElement/focus +original_slug: Web/API/Element/focus --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/tabindex/index.html b/files/pl/web/api/htmlorforeignelement/tabindex/index.html index d8fdd6ce7d..dd8b28401b 100644 --- a/files/pl/web/api/element/tabindex/index.html +++ b/files/pl/web/api/htmlorforeignelement/tabindex/index.html @@ -1,12 +1,13 @@ --- title: element.tabIndex -slug: Web/API/Element/tabIndex +slug: Web/API/HTMLOrForeignElement/tabIndex tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/HTMLOrForeignElement/tabIndex +original_slug: Web/API/Element/tabIndex --- <div> {{APIRef}}</div> diff --git a/files/pl/web/api/event/charcode/index.html b/files/pl/web/api/keyboardevent/charcode/index.html index 6600e6c1dd..58f2f1ebf2 100644 --- a/files/pl/web/api/event/charcode/index.html +++ b/files/pl/web/api/keyboardevent/charcode/index.html @@ -1,10 +1,11 @@ --- title: event.charCode -slug: Web/API/Event/charCode +slug: Web/API/KeyboardEvent/charCode tags: - DOM - Wszystkie_kategorie translation_of: Web/API/KeyboardEvent/charCode +original_slug: Web/API/Event/charCode --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/event/keycode/index.html b/files/pl/web/api/keyboardevent/keycode/index.html index 3c6c510c14..9f580c8ef7 100644 --- a/files/pl/web/api/event/keycode/index.html +++ b/files/pl/web/api/keyboardevent/keycode/index.html @@ -1,11 +1,12 @@ --- title: event.keyCode -slug: Web/API/Event/keyCode +slug: Web/API/KeyboardEvent/keyCode tags: - DOM - Wszystkie_kategorie translation_of: Web/API/KeyboardEvent/keyCode translation_of_original: Web/API/event.keyCode +original_slug: Web/API/Event/keyCode --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/event/altkey/index.html b/files/pl/web/api/mouseevent/altkey/index.html index 1b0faf6fae..f3820f2804 100644 --- a/files/pl/web/api/event/altkey/index.html +++ b/files/pl/web/api/mouseevent/altkey/index.html @@ -1,6 +1,6 @@ --- title: event.altKey -slug: Web/API/Event/altKey +slug: Web/API/MouseEvent/altKey tags: - DOM - Dokumentacja_Gecko_DOM @@ -8,6 +8,7 @@ tags: - Wszystkie_kategorie translation_of: Web/API/MouseEvent/altKey translation_of_original: Web/API/event.altKey +original_slug: Web/API/Event/altKey --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/event/button/index.html b/files/pl/web/api/mouseevent/button/index.html index 4ee1c42386..e466ba9fdc 100644 --- a/files/pl/web/api/event/button/index.html +++ b/files/pl/web/api/mouseevent/button/index.html @@ -1,6 +1,6 @@ --- title: event.button -slug: Web/API/Event/button +slug: Web/API/MouseEvent/button tags: - DOM - Dokumentacja_Gecko_DOM @@ -8,6 +8,7 @@ tags: - Wszystkie_kategorie translation_of: Web/API/MouseEvent/button translation_of_original: Web/API/event.button +original_slug: Web/API/Event/button --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/event/clientx/index.html b/files/pl/web/api/mouseevent/clientx/index.html index 2e38b30ea8..7b64c05d77 100644 --- a/files/pl/web/api/event/clientx/index.html +++ b/files/pl/web/api/mouseevent/clientx/index.html @@ -1,11 +1,12 @@ --- title: event.clientX -slug: Web/API/Event/clientX +slug: Web/API/MouseEvent/clientX tags: - DOM - Wszystkie_kategorie translation_of: Web/API/MouseEvent/clientX translation_of_original: Web/API/event.clientX +original_slug: Web/API/Event/clientX --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/event/clienty/index.html b/files/pl/web/api/mouseevent/clienty/index.html index 45d9ae0b34..8dffcf95fc 100644 --- a/files/pl/web/api/event/clienty/index.html +++ b/files/pl/web/api/mouseevent/clienty/index.html @@ -1,11 +1,12 @@ --- title: event.clientY -slug: Web/API/Event/clientY +slug: Web/API/MouseEvent/clientY tags: - DOM - Wszystkie_kategorie translation_of: Web/API/MouseEvent/clientY translation_of_original: Web/API/event.clientY +original_slug: Web/API/Event/clientY --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/event/ctrlkey/index.html b/files/pl/web/api/mouseevent/ctrlkey/index.html index e0753f6aee..fbd179c6cf 100644 --- a/files/pl/web/api/event/ctrlkey/index.html +++ b/files/pl/web/api/mouseevent/ctrlkey/index.html @@ -1,11 +1,12 @@ --- title: event.ctrlKey -slug: Web/API/Event/ctrlKey +slug: Web/API/MouseEvent/ctrlKey tags: - DOM - Wszystkie_kategorie translation_of: Web/API/MouseEvent/ctrlKey translation_of_original: Web/API/event.ctrlKey +original_slug: Web/API/Event/ctrlKey --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/event/initmouseevent/index.html b/files/pl/web/api/mouseevent/initmouseevent/index.html index e9de804697..c1a703b537 100644 --- a/files/pl/web/api/event/initmouseevent/index.html +++ b/files/pl/web/api/mouseevent/initmouseevent/index.html @@ -1,12 +1,13 @@ --- title: event.initMouseEvent -slug: Web/API/Event/initMouseEvent +slug: Web/API/MouseEvent/initMouseEvent tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/MouseEvent/initMouseEvent +original_slug: Web/API/Event/initMouseEvent --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/event/metakey/index.html b/files/pl/web/api/mouseevent/metakey/index.html index 3c18799032..64d201092c 100644 --- a/files/pl/web/api/event/metakey/index.html +++ b/files/pl/web/api/mouseevent/metakey/index.html @@ -1,6 +1,6 @@ --- title: event.metaKey -slug: Web/API/Event/metaKey +slug: Web/API/MouseEvent/metaKey tags: - DOM - Dokumentacja_Gecko_DOM @@ -8,6 +8,7 @@ tags: - Wszystkie_kategorie translation_of: Web/API/MouseEvent/metaKey translation_of_original: Web/API/event.metaKey +original_slug: Web/API/Event/metaKey --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/event/relatedtarget/index.html b/files/pl/web/api/mouseevent/relatedtarget/index.html index 46ef60e718..85f2d13409 100644 --- a/files/pl/web/api/event/relatedtarget/index.html +++ b/files/pl/web/api/mouseevent/relatedtarget/index.html @@ -1,11 +1,12 @@ --- title: event.relatedTarget -slug: Web/API/Event/relatedTarget +slug: Web/API/MouseEvent/relatedTarget tags: - DOM - Wszystkie_kategorie translation_of: Web/API/MouseEvent/relatedTarget translation_of_original: Web/API/event.relatedTarget +original_slug: Web/API/Event/relatedTarget --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/event/screenx/index.html b/files/pl/web/api/mouseevent/screenx/index.html index f248efb6f3..dbc4e4e48d 100644 --- a/files/pl/web/api/event/screenx/index.html +++ b/files/pl/web/api/mouseevent/screenx/index.html @@ -1,11 +1,12 @@ --- title: event.screenX -slug: Web/API/Event/screenX +slug: Web/API/MouseEvent/screenX tags: - DOM - Wszystkie_kategorie translation_of: Web/API/MouseEvent/screenX translation_of_original: Web/API/event.screenX +original_slug: Web/API/Event/screenX --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/event/screeny/index.html b/files/pl/web/api/mouseevent/screeny/index.html index 52af68dc14..302acf7e0a 100644 --- a/files/pl/web/api/event/screeny/index.html +++ b/files/pl/web/api/mouseevent/screeny/index.html @@ -1,11 +1,12 @@ --- title: event.screenY -slug: Web/API/Event/screenY +slug: Web/API/MouseEvent/screenY tags: - DOM - Wszystkie_kategorie translation_of: Web/API/MouseEvent/screenY translation_of_original: Web/API/event.screenY +original_slug: Web/API/Event/screenY --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/event/shiftkey/index.html b/files/pl/web/api/mouseevent/shiftkey/index.html index ee3c1cb72c..9fd4e9db57 100644 --- a/files/pl/web/api/event/shiftkey/index.html +++ b/files/pl/web/api/mouseevent/shiftkey/index.html @@ -1,11 +1,12 @@ --- title: event.shiftKey -slug: Web/API/Event/shiftKey +slug: Web/API/MouseEvent/shiftKey tags: - DOM - Wszystkie_kategorie translation_of: Web/API/MouseEvent/shiftKey translation_of_original: Web/API/event.shiftKey +original_slug: Web/API/Event/shiftKey --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/navigator/appcodename/index.html b/files/pl/web/api/navigatorid/appcodename/index.html index ec0da7157c..36b6cdcb2c 100644 --- a/files/pl/web/api/navigator/appcodename/index.html +++ b/files/pl/web/api/navigatorid/appcodename/index.html @@ -1,12 +1,13 @@ --- title: window.navigator.appCodeName -slug: Web/API/Navigator/appCodeName +slug: Web/API/NavigatorID/appCodeName tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/NavigatorID/appCodeName +original_slug: Web/API/Navigator/appCodeName --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/navigator/appname/index.html b/files/pl/web/api/navigatorid/appname/index.html index d651ac3682..cede259301 100644 --- a/files/pl/web/api/navigator/appname/index.html +++ b/files/pl/web/api/navigatorid/appname/index.html @@ -1,12 +1,13 @@ --- title: window.navigator.appName -slug: Web/API/Navigator/appName +slug: Web/API/NavigatorID/appName tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/NavigatorID/appName +original_slug: Web/API/Navigator/appName --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/navigator/appversion/index.html b/files/pl/web/api/navigatorid/appversion/index.html index 3d08f23cee..b3146b68b6 100644 --- a/files/pl/web/api/navigator/appversion/index.html +++ b/files/pl/web/api/navigatorid/appversion/index.html @@ -1,12 +1,13 @@ --- title: window.navigator.appVersion -slug: Web/API/Navigator/appVersion +slug: Web/API/NavigatorID/appVersion tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/NavigatorID/appVersion +original_slug: Web/API/Navigator/appVersion --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/navigator/platform/index.html b/files/pl/web/api/navigatorid/platform/index.html index 3a73ee3c2e..3e15e51020 100644 --- a/files/pl/web/api/navigator/platform/index.html +++ b/files/pl/web/api/navigatorid/platform/index.html @@ -1,6 +1,6 @@ --- title: window.navigator.platform -slug: Web/API/Navigator/platform +slug: Web/API/NavigatorID/platform tags: - DOM - DOM_0 @@ -8,6 +8,7 @@ tags: - Gecko - Wszystkie_kategorie translation_of: Web/API/NavigatorID/platform +original_slug: Web/API/Navigator/platform --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/navigator/product/index.html b/files/pl/web/api/navigatorid/product/index.html index 50d34a4a66..8dbd83400e 100644 --- a/files/pl/web/api/navigator/product/index.html +++ b/files/pl/web/api/navigatorid/product/index.html @@ -1,12 +1,13 @@ --- title: window.navigator.product -slug: Web/API/Navigator/product +slug: Web/API/NavigatorID/product tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/NavigatorID/product +original_slug: Web/API/Navigator/product --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/navigator/language/index.html b/files/pl/web/api/navigatorlanguage/language/index.html index 1dcc4daabc..6146d09ce2 100644 --- a/files/pl/web/api/navigator/language/index.html +++ b/files/pl/web/api/navigatorlanguage/language/index.html @@ -1,12 +1,13 @@ --- title: NavigatorLanguage.language -slug: Web/API/Navigator/language +slug: Web/API/NavigatorLanguage/language tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/NavigatorLanguage/language +original_slug: Web/API/Navigator/language --- <p>{{ ApiRef() }}</p> diff --git a/files/pl/web/api/navigator/online/index.html b/files/pl/web/api/navigatoronline/online/index.html index 20bbd73fb0..7884fc4764 100644 --- a/files/pl/web/api/navigator/online/index.html +++ b/files/pl/web/api/navigatoronline/online/index.html @@ -1,6 +1,6 @@ --- title: NavigatorOnLine.onLine -slug: Web/API/Navigator/onLine +slug: Web/API/NavigatorOnLine/onLine tags: - DOM - DOM_0 @@ -8,6 +8,7 @@ tags: - Gecko - Wszystkie_kategorie translation_of: Web/API/NavigatorOnLine/onLine +original_slug: Web/API/Navigator/onLine --- <p>{{ ApiRef() }}</p> diff --git a/files/pl/web/api/navigatoronline/zdarzenia_online_i_offline/index.html b/files/pl/web/api/navigatoronline/online_and_offline_events/index.html index d286acc4b0..618d611bfe 100644 --- a/files/pl/web/api/navigatoronline/zdarzenia_online_i_offline/index.html +++ b/files/pl/web/api/navigatoronline/online_and_offline_events/index.html @@ -1,12 +1,13 @@ --- title: Zdarzenia online i offline -slug: Web/API/NavigatorOnLine/Zdarzenia_online_i_offline +slug: Web/API/NavigatorOnLine/Online_and_offline_events tags: - AJAX - DOM - Programowanie_WWW - Wszystkie_kategorie translation_of: Web/API/NavigatorOnLine/Online_and_offline_events +original_slug: Web/API/NavigatorOnLine/Zdarzenia_online_i_offline --- <p>{{ Fx_minversion_header(3) }} W programie <a href="pl/Firefox_3_dla_programist%c3%b3w">Firefox 3</a> zaimplementowano obsługę <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">zdarzeń online i offline</a> zdefiniowanych w <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">specyfikacji WHATWG Web Applications 1.0</a>. </p> diff --git a/files/pl/web/api/navigator/javaenabled/index.html b/files/pl/web/api/navigatorplugins/javaenabled/index.html index 291d27782e..b4cae7a1b5 100644 --- a/files/pl/web/api/navigator/javaenabled/index.html +++ b/files/pl/web/api/navigatorplugins/javaenabled/index.html @@ -1,12 +1,13 @@ --- title: NavigatorPlugins.javaEnabled -slug: Web/API/Navigator/javaEnabled +slug: Web/API/NavigatorPlugins/javaEnabled tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/NavigatorPlugins/javaEnabled +original_slug: Web/API/Navigator/javaEnabled --- <p>{{ ApiRef() }}</p> diff --git a/files/pl/web/api/navigator/mimetypes/index.html b/files/pl/web/api/navigatorplugins/mimetypes/index.html index 371e75eff2..0ad81a61c5 100644 --- a/files/pl/web/api/navigator/mimetypes/index.html +++ b/files/pl/web/api/navigatorplugins/mimetypes/index.html @@ -1,6 +1,6 @@ --- title: NavigatorPlugins.mimeTypes -slug: Web/API/Navigator/mimeTypes +slug: Web/API/NavigatorPlugins/mimeTypes tags: - DOM - DOM_0 @@ -8,6 +8,7 @@ tags: - Gecko - Wszystkie_kategorie translation_of: Web/API/NavigatorPlugins/mimeTypes +original_slug: Web/API/Navigator/mimeTypes --- <p>{{ ApiRef() }}</p> diff --git a/files/pl/web/api/navigator/plugins/index.html b/files/pl/web/api/navigatorplugins/plugins/index.html index c60d9f6614..bb0a730981 100644 --- a/files/pl/web/api/navigator/plugins/index.html +++ b/files/pl/web/api/navigatorplugins/plugins/index.html @@ -1,6 +1,6 @@ --- title: NavigatorPlugins.plugins -slug: Web/API/Navigator/plugins +slug: Web/API/NavigatorPlugins/plugins tags: - DOM - DOM_0 @@ -8,6 +8,7 @@ tags: - Gecko - Wszystkie_kategorie translation_of: Web/API/NavigatorPlugins/plugins +original_slug: Web/API/Navigator/plugins --- <p>{{ ApiRef() }}</p> diff --git a/files/pl/web/api/element/appendchild/index.html b/files/pl/web/api/node/appendchild/index.html index ae2b141231..8cbbe6866b 100644 --- a/files/pl/web/api/element/appendchild/index.html +++ b/files/pl/web/api/node/appendchild/index.html @@ -1,12 +1,13 @@ --- title: element.appendChild -slug: Web/API/Element/appendChild +slug: Web/API/Node/appendChild tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/appendChild +original_slug: Web/API/Element/appendChild --- <p>{{ ApiRef() }}</p> diff --git a/files/pl/web/api/element/childnodes/index.html b/files/pl/web/api/node/childnodes/index.html index 2f15d119e2..511db0973b 100644 --- a/files/pl/web/api/element/childnodes/index.html +++ b/files/pl/web/api/node/childnodes/index.html @@ -1,12 +1,13 @@ --- title: element.childNodes -slug: Web/API/Element/childNodes +slug: Web/API/Node/childNodes tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/childNodes +original_slug: Web/API/Element/childNodes --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/clientnode/index.html b/files/pl/web/api/node/clonenode/index.html index eb0550678b..4c7d379a18 100644 --- a/files/pl/web/api/element/clientnode/index.html +++ b/files/pl/web/api/node/clonenode/index.html @@ -1,12 +1,13 @@ --- title: element.cloneNode -slug: Web/API/Element/clientNode +slug: Web/API/Node/cloneNode tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/cloneNode +original_slug: Web/API/Element/clientNode --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/firstchild/index.html b/files/pl/web/api/node/firstchild/index.html index 20189ce803..73fc2fca33 100644 --- a/files/pl/web/api/element/firstchild/index.html +++ b/files/pl/web/api/node/firstchild/index.html @@ -1,12 +1,13 @@ --- title: element.firstChild -slug: Web/API/Element/firstChild +slug: Web/API/Node/firstChild tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/firstChild +original_slug: Web/API/Element/firstChild --- <p>{{ ApiRef() }}</p> diff --git a/files/pl/web/api/element/haschildnodes/index.html b/files/pl/web/api/node/haschildnodes/index.html index e21f22dedf..bd575229c8 100644 --- a/files/pl/web/api/element/haschildnodes/index.html +++ b/files/pl/web/api/node/haschildnodes/index.html @@ -1,12 +1,13 @@ --- title: element.hasChildNodes -slug: Web/API/Element/hasChildNodes +slug: Web/API/Node/hasChildNodes tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/hasChildNodes +original_slug: Web/API/Element/hasChildNodes --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/insertbefore/index.html b/files/pl/web/api/node/insertbefore/index.html index 27c40ad945..bf4eddcf43 100644 --- a/files/pl/web/api/element/insertbefore/index.html +++ b/files/pl/web/api/node/insertbefore/index.html @@ -1,12 +1,13 @@ --- title: element.insertBefore -slug: Web/API/Element/insertBefore +slug: Web/API/Node/insertBefore tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/insertBefore +original_slug: Web/API/Element/insertBefore --- <p>{{ ApiRef() }}</p> diff --git a/files/pl/web/api/element/lastchild/index.html b/files/pl/web/api/node/lastchild/index.html index 34475c02d7..58eb52506a 100644 --- a/files/pl/web/api/element/lastchild/index.html +++ b/files/pl/web/api/node/lastchild/index.html @@ -1,12 +1,13 @@ --- title: element.lastChild -slug: Web/API/Element/lastChild +slug: Web/API/Node/lastChild tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/lastChild +original_slug: Web/API/Element/lastChild --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/localname/index.html b/files/pl/web/api/node/localname/index.html index 55b5649e31..a99e7ae8da 100644 --- a/files/pl/web/api/element/localname/index.html +++ b/files/pl/web/api/node/localname/index.html @@ -1,12 +1,13 @@ --- title: element.localName -slug: Web/API/Element/localName +slug: Web/API/Node/localName tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/localName +original_slug: Web/API/Element/localName --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/namespaceuri/index.html b/files/pl/web/api/node/namespaceuri/index.html index 9f252ba570..59d7006ff2 100644 --- a/files/pl/web/api/element/namespaceuri/index.html +++ b/files/pl/web/api/node/namespaceuri/index.html @@ -1,12 +1,13 @@ --- title: element.namespaceURI -slug: Web/API/Element/namespaceURI +slug: Web/API/Node/namespaceURI tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/namespaceURI +original_slug: Web/API/Element/namespaceURI --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/nextsibling/index.html b/files/pl/web/api/node/nextsibling/index.html index 17f1822a56..0aa4a0ebfb 100644 --- a/files/pl/web/api/element/nextsibling/index.html +++ b/files/pl/web/api/node/nextsibling/index.html @@ -1,12 +1,13 @@ --- title: element.nextSibling -slug: Web/API/Element/nextSibling +slug: Web/API/Node/nextSibling tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/nextSibling +original_slug: Web/API/Element/nextSibling --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/nodename/index.html b/files/pl/web/api/node/nodename/index.html index 93a54424a6..1469f246f1 100644 --- a/files/pl/web/api/element/nodename/index.html +++ b/files/pl/web/api/node/nodename/index.html @@ -1,12 +1,13 @@ --- title: element.nodeName -slug: Web/API/Element/nodeName +slug: Web/API/Node/nodeName tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/nodeName +original_slug: Web/API/Element/nodeName --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/nodetype/index.html b/files/pl/web/api/node/nodetype/index.html index 8f3825ea86..e829a351b3 100644 --- a/files/pl/web/api/element/nodetype/index.html +++ b/files/pl/web/api/node/nodetype/index.html @@ -1,12 +1,13 @@ --- title: element.nodeType -slug: Web/API/Element/nodeType +slug: Web/API/Node/nodeType tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/nodeType +original_slug: Web/API/Element/nodeType --- <div> {{ApiRef}}</div> diff --git a/files/pl/web/api/element/nodevalue/index.html b/files/pl/web/api/node/nodevalue/index.html index 205871bba3..2832bb028a 100644 --- a/files/pl/web/api/element/nodevalue/index.html +++ b/files/pl/web/api/node/nodevalue/index.html @@ -1,12 +1,13 @@ --- title: Node.nodeValue -slug: Web/API/Element/nodeValue +slug: Web/API/Node/nodeValue tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/nodeValue +original_slug: Web/API/Element/nodeValue --- <div> {{APIRef}}</div> diff --git a/files/pl/web/api/element/normalize/index.html b/files/pl/web/api/node/normalize/index.html index 4dac3822cc..847418c217 100644 --- a/files/pl/web/api/element/normalize/index.html +++ b/files/pl/web/api/node/normalize/index.html @@ -1,12 +1,13 @@ --- title: element.normalize -slug: Web/API/Element/normalize +slug: Web/API/Node/normalize tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/normalize +original_slug: Web/API/Element/normalize --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/ownerdocument/index.html b/files/pl/web/api/node/ownerdocument/index.html index 0ecbed4869..19fcded1ff 100644 --- a/files/pl/web/api/element/ownerdocument/index.html +++ b/files/pl/web/api/node/ownerdocument/index.html @@ -1,12 +1,13 @@ --- title: element.ownerDocument -slug: Web/API/Element/ownerDocument +slug: Web/API/Node/ownerDocument tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/ownerDocument +original_slug: Web/API/Element/ownerDocument --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/parentnode/index.html b/files/pl/web/api/node/parentnode/index.html index ec9bbceda0..2e2aafac81 100644 --- a/files/pl/web/api/element/parentnode/index.html +++ b/files/pl/web/api/node/parentnode/index.html @@ -1,12 +1,13 @@ --- title: element.parentNode -slug: Web/API/Element/parentNode +slug: Web/API/Node/parentNode tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/parentNode +original_slug: Web/API/Element/parentNode --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/prefix/index.html b/files/pl/web/api/node/prefix/index.html index c5ecdac392..0a76253cd6 100644 --- a/files/pl/web/api/element/prefix/index.html +++ b/files/pl/web/api/node/prefix/index.html @@ -1,12 +1,13 @@ --- title: element.prefix -slug: Web/API/Element/prefix +slug: Web/API/Node/prefix tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/prefix +original_slug: Web/API/Element/prefix --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/previoussibling/index.html b/files/pl/web/api/node/previoussibling/index.html index 0199cfb1a7..4dace5c856 100644 --- a/files/pl/web/api/element/previoussibling/index.html +++ b/files/pl/web/api/node/previoussibling/index.html @@ -1,12 +1,13 @@ --- title: element.previousSibling -slug: Web/API/Element/previousSibling +slug: Web/API/Node/previousSibling tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/previousSibling +original_slug: Web/API/Element/previousSibling --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/removechild/index.html b/files/pl/web/api/node/removechild/index.html index c07c36ab3b..4f94df019d 100644 --- a/files/pl/web/api/element/removechild/index.html +++ b/files/pl/web/api/node/removechild/index.html @@ -1,12 +1,13 @@ --- title: element.removeChild -slug: Web/API/Element/removeChild +slug: Web/API/Node/removeChild tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/removeChild +original_slug: Web/API/Element/removeChild --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/replacechild/index.html b/files/pl/web/api/node/replacechild/index.html index dcb5686d44..6c4151a757 100644 --- a/files/pl/web/api/element/replacechild/index.html +++ b/files/pl/web/api/node/replacechild/index.html @@ -1,12 +1,13 @@ --- title: element.replaceChild -slug: Web/API/Element/replaceChild +slug: Web/API/Node/replaceChild tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/replaceChild +original_slug: Web/API/Element/replaceChild --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/textcontent/index.html b/files/pl/web/api/node/textcontent/index.html index f667ea2889..943614ac15 100644 --- a/files/pl/web/api/element/textcontent/index.html +++ b/files/pl/web/api/node/textcontent/index.html @@ -1,12 +1,13 @@ --- title: element.textContent -slug: Web/API/Element/textContent +slug: Web/API/Node/textContent tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/Node/textContent +original_slug: Web/API/Element/textContent --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/element/length/index.html b/files/pl/web/api/nodelist/length/index.html index ce5e1345ef..b1a3ed83ca 100644 --- a/files/pl/web/api/element/length/index.html +++ b/files/pl/web/api/nodelist/length/index.html @@ -1,12 +1,13 @@ --- title: element.length -slug: Web/API/Element/length +slug: Web/API/NodeList/length tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/NodeList/length +original_slug: Web/API/Element/length --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/powiadomienie/index.html b/files/pl/web/api/notification/index.html index e314c36a3a..046fe35e71 100644 --- a/files/pl/web/api/powiadomienie/index.html +++ b/files/pl/web/api/notification/index.html @@ -1,12 +1,13 @@ --- title: Powiadomienie -slug: Web/API/powiadomienie +slug: Web/API/Notification tags: - API - JS Powiadomienia - Powiadomienia - Powiadomienie translation_of: Web/API/Notification +original_slug: Web/API/powiadomienie --- <p>{{APIRef("Web Notifications")}}</p> diff --git a/files/pl/web/api/stylesheet/ownerrule/index.html b/files/pl/web/api/stylesheet/ownerrule/index.html deleted file mode 100644 index 93d73c35c5..0000000000 --- a/files/pl/web/api/stylesheet/ownerrule/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: stylesheet.ownerRule -slug: Web/API/Stylesheet/ownerRule -tags: - - DOM - - Dokumentacja_Gecko_DOM - - Gecko - - Wszystkie_kategorie ---- -<p>{{ ApiRef() }}</p> -<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> -<p>Jeżeli arkusz stylów pochodzi z reguły @import, własność <b>ownerRule</b> będzie zawierać regułę CSSImportRule.</p> -<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> -<pre class="eval"><i>rule</i> = stylesheet.ownerRule -</pre> -<h3 id="Parametry" name="Parametry">Parametry</h3> -<ul> - <li><code>rule</code> jest łańcuchem zawierającym importowaną regułę w dokumencie HTML lub XML.</li> -</ul> -<h3 id="Uwagi" name="Uwagi">Uwagi</h3> -<p>Zauważ, że jeżeli wartość własności <b>ownerNode</b> bieżącego elementu <a href="pl/STYLE">STYLE</a> wynosi NULL, wówczas reguła <b>ownerRule</b> zwróci !!TODO!!. I odwrotnie.</p> -<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> -<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleSheet-ownerRule">ownerRule </a></p> -<p>{{ languages( { "en": "en/DOM/stylesheet.ownerRule" } ) }}</p> diff --git a/files/pl/web/api/zdarzenia_dotykowe/index.html b/files/pl/web/api/touch_events/index.html index 4d49e9b5b5..362642a067 100644 --- a/files/pl/web/api/zdarzenia_dotykowe/index.html +++ b/files/pl/web/api/touch_events/index.html @@ -1,7 +1,8 @@ --- title: Zdarzenia dotykowe -slug: Web/API/Zdarzenia_dotykowe +slug: Web/API/Touch_events translation_of: Web/API/Touch_events +original_slug: Web/API/Zdarzenia_dotykowe --- <div>{{DefaultAPISidebar("Touch Events")}}</div> diff --git a/files/pl/web/api/event/cancelbubble/index.html b/files/pl/web/api/uievent/cancelbubble/index.html index 64b0a32f88..51fa756278 100644 --- a/files/pl/web/api/event/cancelbubble/index.html +++ b/files/pl/web/api/uievent/cancelbubble/index.html @@ -1,10 +1,11 @@ --- title: event.cancelBubble -slug: Web/API/Event/cancelBubble +slug: Web/API/UIEvent/cancelBubble tags: - DOM - Wszystkie_kategorie translation_of: Web/API/UIEvent/cancelBubble +original_slug: Web/API/Event/cancelBubble --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/event/inituievent/index.html b/files/pl/web/api/uievent/inituievent/index.html index 3a20fef39d..cf548d9f19 100644 --- a/files/pl/web/api/event/inituievent/index.html +++ b/files/pl/web/api/uievent/inituievent/index.html @@ -1,12 +1,13 @@ --- title: event.initUIEvent -slug: Web/API/Event/initUIEvent +slug: Web/API/UIEvent/initUIEvent tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/UIEvent/initUIEvent +original_slug: Web/API/Event/initUIEvent --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/event/ischar/index.html b/files/pl/web/api/uievent/ischar/index.html index fc7a7dfec9..393402ed7c 100644 --- a/files/pl/web/api/event/ischar/index.html +++ b/files/pl/web/api/uievent/ischar/index.html @@ -1,10 +1,11 @@ --- title: event.isChar -slug: Web/API/Event/isChar +slug: Web/API/UIEvent/isChar tags: - DOM - Wszystkie_kategorie translation_of: Web/API/UIEvent/isChar +original_slug: Web/API/Event/isChar --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/event/layerx/index.html b/files/pl/web/api/uievent/layerx/index.html index 5a69b4c864..b4b123e60f 100644 --- a/files/pl/web/api/event/layerx/index.html +++ b/files/pl/web/api/uievent/layerx/index.html @@ -1,10 +1,11 @@ --- title: event.layerX -slug: Web/API/Event/layerX +slug: Web/API/UIEvent/layerX tags: - DOM - Wszystkie_kategorie translation_of: Web/API/UIEvent/layerX +original_slug: Web/API/Event/layerX --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/event/layery/index.html b/files/pl/web/api/uievent/layery/index.html index f610d08357..f91727d283 100644 --- a/files/pl/web/api/event/layery/index.html +++ b/files/pl/web/api/uievent/layery/index.html @@ -1,10 +1,11 @@ --- title: event.layerY -slug: Web/API/Event/layerY +slug: Web/API/UIEvent/layerY tags: - DOM - Wszystkie_kategorie translation_of: Web/API/UIEvent/layerY +original_slug: Web/API/Event/layerY --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/event/pagex/index.html b/files/pl/web/api/uievent/pagex/index.html index 98c3c3e1ed..05b33b7b84 100644 --- a/files/pl/web/api/event/pagex/index.html +++ b/files/pl/web/api/uievent/pagex/index.html @@ -1,12 +1,13 @@ --- title: event.pageX -slug: Web/API/Event/pageX +slug: Web/API/UIEvent/pageX tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/UIEvent/pageX +original_slug: Web/API/Event/pageX --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/event/pagey/index.html b/files/pl/web/api/uievent/pagey/index.html index d82e2237df..e1749273da 100644 --- a/files/pl/web/api/event/pagey/index.html +++ b/files/pl/web/api/uievent/pagey/index.html @@ -1,10 +1,11 @@ --- title: event.pageY -slug: Web/API/Event/pageY +slug: Web/API/UIEvent/pageY tags: - DOM - Wszystkie_kategorie translation_of: Web/API/UIEvent/pageY +original_slug: Web/API/Event/pageY --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/event/view/index.html b/files/pl/web/api/uievent/view/index.html index 57af70a587..19278dede9 100644 --- a/files/pl/web/api/event/view/index.html +++ b/files/pl/web/api/uievent/view/index.html @@ -1,12 +1,13 @@ --- title: event.view -slug: Web/API/Event/view +slug: Web/API/UIEvent/view tags: - DOM - Dokumentacja_Gecko_DOM - Gecko - Wszystkie_kategorie translation_of: Web/API/UIEvent/view +original_slug: Web/API/Event/view --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/storage/index.html b/files/pl/web/api/web_storage_api/index.html index 238b10d4d7..7cd66bc9fe 100644 --- a/files/pl/web/api/storage/index.html +++ b/files/pl/web/api/web_storage_api/index.html @@ -1,6 +1,6 @@ --- title: Storage -slug: Web/API/Storage +slug: Web/API/Web_Storage_API tags: - DOM - Dokumentacja_Gecko_DOM @@ -9,6 +9,7 @@ tags: - Wszystkie_kategorie translation_of: Web/API/Web_Storage_API translation_of_original: Web/Guide/API/DOM/Storage +original_slug: Web/API/Storage --- <p>{{ ApiRef() }}</p> diff --git a/files/pl/web/api/websockets_api/index.html b/files/pl/web/api/websockets_api/index.html new file mode 100644 index 0000000000..8cf0de0bd1 --- /dev/null +++ b/files/pl/web/api/websockets_api/index.html @@ -0,0 +1,189 @@ +--- +title: WebSockets +slug: Web/API/WebSockets_API +translation_of: Web/API/WebSockets_API +original_slug: WebSockets +--- +<p>WebSocket to zaawansowana technologia, która pozwala na otwarcie interaktywnej sesji komunikacyjnej pomiędzy przeglądarką użytkownika a serwerem. Dzięki temu API możesz wysłać wiadomość do serwera oraz otrzymać od niego odpowiedzi jako zdarzenia, bez konieczności ponownego odpytywania o nie serwera.</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Dokumentacja</h2> + +<dl> + <dt><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications" title="WebSockets/Pisanie aplikacji klienckich WebSocket">Pisanie aplikacji klienckich WebSocket</a></dt> + <dd>Poradnik pokazujący jak napisać klienta WebSocket uruchamianego w przeglądarce internetowej.</dd> + <dt><a href="/en-US/docs/WebSockets/WebSockets_reference" title="WebSockets/WebSockets reference">WebSockets reference</a></dt> + <dd>A reference to the client-side WebSocket API.</dd> + <dt><a href="/en-US/docs/WebSockets/Writing_WebSocket_servers" title="WebSockets/Pisanie aplikacji serwerowych WebSocket">Obsługa WebSocket po stronie serwera</a></dt> + <dd>Przewodnik do obsługi protokołu WebSocket po stronie serwera.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/WebSockets" title="tag/WebSockets">Zobacz całość...</a></span></p> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">Narzędzia</h2> + +<ul> + <li><a class="external" href="http://socket.io" title="http://socket.io/">Socket.IO</a>: Ogromne, multiplatformowe API WebSocket dla <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> + <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>: A WebSocket server API implementation for <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> + <li><a href="http://www.totaljs.com">Total.js</a>: Web application framework for <a href="http://www.nodejs.org">Node.js</a> (Example: <a href="https://github.com/totaljs/examples/tree/master/websocket">WebSocket chat</a>)</li> + <li><a href="http://ajf.me/websocket/#libs" title="http://websocket.us/#libs">A more extensive list of frameworks and libraries here</a></li> +</ul> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Podobne Tematy</h2> + +<ul> + <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li> +</ul> +</div> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li><a class="external" href="http://tools.ietf.org/html/rfc6455">RFC 6455 - Protokół WebSocket</a></li> + <li><a class="external" href="http://www.w3.org/TR/websockets/">WebSocket - Specyfikacja API</a></li> + <li><a href="/en-US/docs/Server-sent_events" title="Server-sent_events">Server-Sent Events</a></li> +</ul> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Version -76 support {{obsolete_inline}}</td> + <td>6</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>11.00 (disabled)</td> + <td>5.0.1</td> + </tr> + <tr> + <td>Protocol version 7 support {{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("6.0")}}<br> + {{property_prefix("Moz")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Protocol version 10 support {{obsolete_inline}}</td> + <td>14</td> + <td>{{CompatGeckoDesktop("7.0")}}<br> + {{property_prefix("Moz")}}</td> + <td>HTML5 Labs</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Standard - RFC 6455 Support</td> + <td>16</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>10</td> + <td>12.10</td> + <td>6.0</td> + </tr> + <tr> + <td>Usable in Workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Version -76 support {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Protocol version 7 support {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Protocol version 8 support (IETF draft 10) {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("7.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Standard - RFC 6455 Support</td> + <td>4.4</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>12.10</td> + <td>6.0</td> + </tr> + <tr> + <td>Usable in Workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<p>WebSockets support in Firefox is continuing to track the evolving WebSocket specification. Firefox 6 implements version 7 of the underlying protocol, while Firefox 7 implements version 8 (as specified by IETF draft 10). Firefox mobile received WebSocket support in Firefox mobile 7.0.</p> + +<h4 id="Gecko_6.0">Gecko 6.0</h4> + +<p>Prior to Gecko 6.0 {{geckoRelease("6.0")}}, there was, incorrectly, a <code>WebSocket</code> object that some sites were thinking implied that <code>WebSocket</code> services were not prefixed; this object has been renamed to <code>MozWebSocket</code>.</p> + +<h4 id="Gecko_7.0">Gecko 7.0</h4> + +<p>Począwszy od Gecko 7.0 {{geckoRelease("7.0")}}, właściwość <code>network.websocket.max-connections</code> jest używana by decydować o maksymalnej liczbie połączeń WebSocket, które mogą być otwarte jednocześnie. Domyślnie jest to 200.</p> + +<h4 id="Gecko_8.0">Gecko 8.0</h4> + +<p>Starting in Gecko 8.0 {{geckoRelease("8.0")}}, the deflate-stream extension to the WebSocket protocol has been disabled, since it's been deprecated from the specification drafts. This resolves incompatibilities with some sites.</p> + +<h4 id="Gecko_11.0">Gecko 11.0</h4> + +<p>Prior to Gecko 11.0, both incoming and outgoing messages were limited to 16 MB in size. They may now be up to 2 GB in size. Note, however, that memory limitations (especially on mobile devices) make that a theoretical maximum, not a practical one. In reality, transfers of that size will fail on devices that don't have enough memory.</p> + +<p>Additionally, ArrayBuffer send and receive support for binary data has been implemented.</p> + +<p>Starting in Gecko 11.0, the WebSocket API is no longer prefixed.</p> diff --git a/files/pl/web/api/windowbase64/atob/index.html b/files/pl/web/api/windoworworkerglobalscope/atob/index.html index cd36201a6c..862f7b56fe 100644 --- a/files/pl/web/api/windowbase64/atob/index.html +++ b/files/pl/web/api/windoworworkerglobalscope/atob/index.html @@ -1,6 +1,6 @@ --- title: WindowBase64.atob() -slug: Web/API/WindowBase64/atob +slug: Web/API/WindowOrWorkerGlobalScope/atob tags: - API - Base-64 @@ -11,6 +11,7 @@ tags: - Referencja - WindowBase64 translation_of: Web/API/WindowOrWorkerGlobalScope/atob +original_slug: Web/API/WindowBase64/atob --- <p>{{APIRef}}</p> <p>Funkcja <strong><code>WindowBase64.atob()</code></strong> dekoduje ciąg danych, który został zakodowany używając kodowania base-64. Możesz użyć metody <a href="/pl/docs/Web/API/WindowBase64.btoa"><code>window.btoa()</code></a> aby zakodować i przesłać dane, które w innym wypadku mogą powodować problemy z komunikacją, a następnie odebrać je i użyć metody <code>window.atob()</code> aby zdekodować dane ponownie. Na przykład możesz zakodować, przesłać i zdekodować znaki kontrolne ASCII o wartościach od 0 do 31.</p> diff --git a/files/pl/web/api/windowbase64/btoa/index.html b/files/pl/web/api/windoworworkerglobalscope/btoa/index.html index cf3e90c26d..6b1cc90cc4 100644 --- a/files/pl/web/api/windowbase64/btoa/index.html +++ b/files/pl/web/api/windoworworkerglobalscope/btoa/index.html @@ -1,6 +1,6 @@ --- title: WindowBase64.btoa() -slug: Web/API/WindowBase64/btoa +slug: Web/API/WindowOrWorkerGlobalScope/btoa tags: - API - Base-64 @@ -10,6 +10,7 @@ tags: - Referencja - WindowBase64 translation_of: Web/API/WindowOrWorkerGlobalScope/btoa +original_slug: Web/API/WindowBase64/btoa --- <p>{{APIRef}}</p> <p>Tworzy string ASCII zakodowany w base-64 z ciągu ("string") danych binarnych.</p> diff --git a/files/pl/web/api/window/clearinterval/index.html b/files/pl/web/api/windoworworkerglobalscope/clearinterval/index.html index e763be1f4a..e4ecb8701d 100644 --- a/files/pl/web/api/window/clearinterval/index.html +++ b/files/pl/web/api/windoworworkerglobalscope/clearinterval/index.html @@ -1,9 +1,10 @@ --- title: window.clearInterval -slug: Web/API/Window/clearInterval +slug: Web/API/WindowOrWorkerGlobalScope/clearInterval tags: - Window translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +original_slug: Web/API/Window/clearInterval --- <div> {{ApiRef}}</div> diff --git a/files/pl/web/api/window/cleartimeout/index.html b/files/pl/web/api/windoworworkerglobalscope/cleartimeout/index.html index 64604dc479..b57e9d04b4 100644 --- a/files/pl/web/api/window/cleartimeout/index.html +++ b/files/pl/web/api/windoworworkerglobalscope/cleartimeout/index.html @@ -1,7 +1,8 @@ --- title: window.clearTimeout -slug: Web/API/Window/clearTimeout +slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout +original_slug: Web/API/Window/clearTimeout --- <p>{{ ApiRef() }}</p> <h3 id="Summary" name="Summary">Podsumowanie</h3> diff --git a/files/pl/web/api/windowbase64/index.html b/files/pl/web/api/windoworworkerglobalscope/index.html index 88443161b5..668b6a0a72 100644 --- a/files/pl/web/api/windowbase64/index.html +++ b/files/pl/web/api/windoworworkerglobalscope/index.html @@ -1,8 +1,9 @@ --- title: WindowBase64 -slug: Web/API/WindowBase64 +slug: Web/API/WindowOrWorkerGlobalScope translation_of: Web/API/WindowOrWorkerGlobalScope translation_of_original: Web/API/WindowBase64 +original_slug: Web/API/WindowBase64 --- <p>{{APIRef("HTML DOM")}}</p> diff --git a/files/pl/web/api/window/setinterval/index.html b/files/pl/web/api/windoworworkerglobalscope/setinterval/index.html index 5cbfadde80..277b9c44d7 100644 --- a/files/pl/web/api/window/setinterval/index.html +++ b/files/pl/web/api/windoworworkerglobalscope/setinterval/index.html @@ -1,6 +1,6 @@ --- title: window.setInterval -slug: Web/API/Window/setInterval +slug: Web/API/WindowOrWorkerGlobalScope/setInterval tags: - DOM - DOM_0 @@ -8,6 +8,7 @@ tags: - Gecko - Wszystkie_kategorie translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval +original_slug: Web/API/Window/setInterval --- <p>{{ ApiRef() }}</p> diff --git a/files/pl/web/api/window/settimeout/index.html b/files/pl/web/api/windoworworkerglobalscope/settimeout/index.html index 926080dd5b..bfe274a8f7 100644 --- a/files/pl/web/api/window/settimeout/index.html +++ b/files/pl/web/api/windoworworkerglobalscope/settimeout/index.html @@ -1,6 +1,6 @@ --- title: window.setTimeout -slug: Web/API/Window/setTimeout +slug: Web/API/WindowOrWorkerGlobalScope/setTimeout tags: - DOM - DOM_0 @@ -8,6 +8,7 @@ tags: - Gecko - Wszystkie_kategorie translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +original_slug: Web/API/Window/setTimeout --- <p>{{ ApiRef() }}</p> <h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> diff --git a/files/pl/web/api/xmlhttprequest/index.html b/files/pl/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..646ce1d952 --- /dev/null +++ b/files/pl/web/api/xmlhttprequest/index.html @@ -0,0 +1,234 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +tags: + - AJAX + - Wszystkie_kategorie + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +original_slug: XMLHttpRequest +--- +<p> +</p><p>Obiekt <code>XMLHttpRequest</code> jest obiektem <a href="pl/JavaScript">JavaScript</a> zaprojektowanym przez firmę Microsoft i zaadaptowanym w programach Mozilla. Służy do pobierania danych przy użyciu protokołu HTTP. Wbrew nazwie może być stosowany do obsługi dokumentów w wielu formatach, nie tylko XML, ale także <a href="pl/JSON">JSON</a>. </p><p>Artykuł ten zawiera między innymi informacje specyficzne dla silnika <a href="pl/Gecko">Gecko</a> lub kodu uprzywilejowanego, takiego jak kod rozszerzeń programu Firefox. +</p><p>W silniku Gecko w obiekcie zaimplementowano interfejsy <code><a href="pl/NsIJSXMLHttpRequest">nsIJSXMLHttpRequest</a></code> i <code><a href="pl/NsIXMLHttpRequest">nsIXMLHttpRequest</a></code>. W najnowszych wersjach Gecko dokonano pewnych modyfikacji tego obiektu — patrz artykuł <a href="pl/Zmiany_w_obiekcie_XMLHttpRequest_w_Gecko_1.8">Zmiany w obiekcie XMLHttpRequest w Gecko 1.8</a>. +</p> +<h3 id="Podstawy" name="Podstawy"> Podstawy </h3> +<p>Korzystanie z obiektu <code>XMLHttpRequest</code> jest bardzo proste. Należy utworzyć instancję obiektu, otworzyć adres URL, po czym wysłać żądanie. Zwrócony przez serwer kod stanu HTTP, jak również pobrany dokument są następnie dostępne jako własności obiektu żądania. +</p><p>{{ Note("W wersjach Firefoksa starszych niż 3 żądania są zawsze wysyłane przy użyciu kodowania UTF-8. W programie <a href='\"pl/Firefox_3\"'>Firefox 3</a> dokument jest wysyłany poprawnie przy użyciu kodowania określonego we własności <code>data.inputEncoding</code> (gdzie <code>data</code> to obiekt przekazany do metody <code>send()</code>; obiekt ten nie może być wartością <code>null</code>). Jeżeli nie określono żadnego kodowania, używane jest kodowanie UTF-8.") }} +</p> +<h4 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h4> +<pre>var req = new XMLHttpRequest(); +req.open('GET', 'http://www.mozilla.org/', false); +req.send(null); +if(req.status == 200) + dump(req.responseText); +</pre> +<div class="note"><b>Uwaga:</b> W tym przykładzie dane pobierane są w sposób synchroniczny — wykonanie powyższego kodu JavaScript spowoduje zablokowanie interfejsu użytkownika do momentu zakończenia pobierania. Nie należy wykorzystywać podanego kodu w praktyce.</div> +<div class="note"><b>Uwaga:</b> W żądaniach synchronicznych nie należy korzystać z funkcji <code>onreadystatechange</code> — w przeciwnym przypadku w wersjach Firefoksa starszych niż wersja 3 zostanie ona wywołana. Program <a href="pl/Firefox_3">Firefox 3</a> jest zablokowany do momentu ukończenia procesu obsługi żądania (tak jak w powyższym przykładzie). Program Firefox 2 działa w ten sam sposób, jeżeli tylko funkcja <code>onreadystatechange</code> nie zostanie zaimplementowana.</div> +<h4 id="Przyk.C5.82ad_dla_protoko.C5.82u_innego_ni.C5.BC_HTTP" name="Przyk.C5.82ad_dla_protoko.C5.82u_innego_ni.C5.BC_HTTP"> Przykład dla protokołu innego niż HTTP </h4> +<pre>var req = new XMLHttpRequest(); +req.open('GET', 'file:///home/user/file.json', false); +req.send(null); +if(req.status == 0) + dump(req.responseText); +</pre> +<div class="note"><b>Uwaga:</b> protokoły <code><a class=" external" rel="freelink">file:///</a></code> i <code><a class=" link-ftp" href="ftp://" rel="freelink">ftp://</a></code> nie zwracają kodu stanu HTTP, stąd w ich przypadku własność <code>status</code> zwraca wartość zero, a własność <code>statusText</code> zawiera pusty ciąg znaków. Aby uzyskać więcej informacji, patrz {{ Bug(331610) }}.</div> +<h3 id="Zastosowanie_asynchroniczne" name="Zastosowanie_asynchroniczne"> Zastosowanie asynchroniczne </h3> +<p>W przypadku korzystania z obiektów <code>XMLHttpRequest</code> w rozszerzeniu Firefoksa pobierane dane powinny być ładowane asynchronicznie. Po całkowitym pobraniu danych przekazywane jest wywołanie zwrotne (ang. <i>callback</i>), co pozwala na normalną pracę przeglądarki podczas przetwarzania żądania. +</p> +<h4 id="Przyk.C5.82ad_2" name="Przyk.C5.82ad_2"> Przykład </h4> +<pre>var req = new XMLHttpRequest(); +req.open('GET', 'http://www.mozilla.org/', true); /* Argument trzeci, wartość true, określa, że żądanie ma być asynchroniczne */ +req.onreadystatechange = function (aEvt) { + if (req.readyState == 4) { + if(req.status == 200) + dump(req.responseText); + else + dump("Błąd podczas ładowania strony\n"); + } +}; +req.send(null); +</pre> +<h4 id="Monitorowanie_post.C4.99pu" name="Monitorowanie_post.C4.99pu"> Monitorowanie postępu </h4> +<p>Obiekt <code>XMLHttpRequest</code> umożliwia monitorowanie wielu zdarzeń, które mogą wystąpić podczas przetwarzania żądania — służą do tego okresowe powiadomienia o postępie przetwarzania, komunikaty o błędach itp. +</p><p>Jeżeli na przykład w czasie pobierania dokumentu do użytkownika mają być wysyłane informacje o postępie przetwarzania, można skorzystać z poniższego kodu: +</p> +<pre>function onProgress(e) { + var percentComplete = (e.position / e.totalSize)*100; + ... +} + +function onError(e) { + alert("Podczas pobierania dokumentu wystąpił błąd " + e.target.status + "."); +} + +function onLoad(e) { + // ... +} +// ... +var req = new XMLHttpRequest(); +req.onprogress = onProgress; +req.open("GET", url, true); +req.onload = onLoad; +req.onerror = onError; +req.send(null); +</pre> +<p>Atrybuty zdarzenia <code>onprogress</code>, <code>position</code> i <code>totalSize</code>, wskazują odpowiednio liczbę pobranych dotychczas bajtów i całkowitą liczbę bajtów, które mają zostać pobrane. +</p><p>Dla wszystkich zdarzeń atrybut <code>target</code> wskazuje powiązany obiekt <code>XMLHttpRequest</code>. +</p> +<div class="note"><b>Uwaga:</b> przy korzystaniu z funkcji obsługi zdarzeń w dokumentach XML reprezentowanych przez obiekt <code>XMLDocument</code> program <a href="pl/Firefox_3">Firefox 3</a> sprawdza, czy wartości własności <code>target</code>, <code>currentTarget</code> i <code>this</code> obiektu zdarzenia wskazują na właściwe obiekty. Aby uzyskać szczegółowe informacje, patrz {{ Bug(198595) }}.</div> +<h3 id="Inne_w.C5.82asno.C5.9Bci_i_metody" name="Inne_w.C5.82asno.C5.9Bci_i_metody"> Inne własności i metody </h3> +<p>Oprócz własności i metod omówionych powyżej obiekty <code>XMLHttpRequest</code> obsługują również inne przydatne własności i metody. +</p> +<h4 id="responseXML" name="responseXML">responseXML</h4> +<p>Jeżeli ładowany jest dokument <a href="pl/XML">XML</a>, własność <code>responseXML</code> zawiera treść pobranego dokumentu w postaci obiektu <code>XmlDocument</code>, do którego można uzyskać za pomocą metod DOM. Jeżeli serwer wysyła poprawnie sformatowany dokument XML, ale nie jest okreśony nagłówek XML Content-Type, za pomocą metody <code><a href="pl/XMLHttpRequest#overrideMimeType.28.29">overrideMimeType()</a></code> można wymusić przetwarzanie dokumentu jako kodu XML. Jeżeli dokument XML wysyłany z serwera nie jest sformatowany poprawnie, własność <code>responseXML</code> zwraca wartość null, niezależnie od wymuszonego typu danych. +</p> +<h4 id="overrideMimeType.28.29" name="overrideMimeType.28.29">overrideMimeType()</h4> +<p>Za pomocą tej metody można wymusić sposób obsługi dokumentu, wskazując określony typ danych. Metoda ta przydaje się w sytuacji, gdy do przetwarzania otrzymanych danych ma być użyta własność <code>responseXML</code>, serwer wysyła dane w formacie <a href="pl/XML">XML</a>, ale nie jest wysyłany poprawny nagłówek Content-Type. </p> +<div class="note"><b>Uwaga:</b> metodę tę należy wywołać przed użyciem metody <code>send()</code>.</div> +<pre>var req = new XMLHttpRequest(); +req.open('GET', 'http://www.mozilla.org/', true); +req.overrideMimeType('text/xml'); +req.send(null); +</pre> +<h4 id="setRequestHeader.28.29" name="setRequestHeader.28.29">setRequestHeader()</h4> +<p>Za pomocą tej metody można ustawić dowolny nagłówek HTTP żądania przed wysłaniem go. +</p> +<div class="note"><b>Uwaga:</b> Przed wywołaniem tej metody należy użyć metody <code>open()</code>.</div> +<pre>var req = new XMLHttpRequest(); +req.open('GET', 'http://www.mozilla.org/', true); +req.setRequestHeader("X-Foo", "Bar"); +req.send(null); +</pre> +<h4 id="getResponseHeader.28.29" name="getResponseHeader.28.29">getResponseHeader()</h4> +<p>Za pomocą tej metody można pobrać nagłówek HTTP ustawiony w odpowiedzi przesłanej przez serwer. +</p> +<pre>var req = new XMLHttpRequest(); +req.open('GET', 'http://www.mozilla.org/', false); +req.send(null); +dump("Content-Type: " + req.getResponseHeader("Content-Type") + "\n"); +</pre> +<h4 id="abort.28.29" name="abort.28.29">abort()</h4> +<p>Metoda ta służy do anulowania żądania, które jest właśnie wykonywane. +</p> +<pre>var req = new XMLHttpRequest(); +req.open('GET', 'http://www.mozilla.org/', false); +req.send(null); +req.abort(); +</pre> +<h4 id="mozBackgroundRequest" name="mozBackgroundRequest">mozBackgroundRequest</h4> +<p>{{ Fx_minversion_inline(3) }} Za pomocą tej własności można wyłączyć okna dialogowe uwierzytelniania i niewłaściwego certyfikatu, które mogą pojawiać się przy wysyłaniu żądania. Żądanie, dla którego ustawiono tę własność, nie będzie ponadto anulowane nawet w przypadku zamknięcia okna, z którego zostało wysłane. Własność ta działa wyłącznie w kodzie chrome. +</p> +<pre>var req = new XMLHttpRequest(); +req.mozBackgroundRequest = true; +req.open('GET', 'http://www.mozilla.org/', true); +req.send(null); +</pre> +<h3 id="Zastosowanie_w_komponentach_XPCOM" name="Zastosowanie_w_komponentach_XPCOM"> Zastosowanie w komponentach XPCOM </h3> +<div class="note"><b>Uwaga:</b> W przypadku korzystania z obiektów XMLHttpRequest w komponentach JavaScript XPCOM wymagane są pewne zmiany.</div> +<p>W komponentach JavaScript XPCOM niemożliwe jest utworzenie obiektów XMLHttpRequest za pomocą konstruktora <code>XMLHttpRequest()</code> — nie jest on zdefiniowany wewnątrz komponentów i jego wywołanie powoduje wystąpienie błędu. W celu utworzenia i użycia obiektu należy skorzystać z innej składni. +</p><p>Zamiast kodu: +</p> +<pre>var req = new XMLHttpRequest(); +req.onprogress = onProgress; +req.onload = onLoad; +req.onerror = onError; +req.open("GET", url, true); +req.send(null); +</pre> +<p>należy użyć: +</p> +<pre>var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"] + .createInstance(Components.interfaces.nsIXMLHttpRequest); +req.onprogress = onProgress; +req.onload = onLoad; +req.onerror = onError; +req.open("GET", url, true); +req.send(null); +</pre> +<p>W kodzie w języku C++ można za pomocą metody QueryInterface przesłać komponent do interfejsu <code>nsIEventTarget</code>, aby ustawić procedury obsługi zdarzeń; bezpośrednie korzystanie z kanału jest jednak lepszą techniką. +</p> +<h3 id="Ograniczona_liczba_jednoczesnych_po.C5.82.C4.85cze.C5.84_nawi.C4.85zywanych_przez_obiekty_XMLHttpRequest" name="Ograniczona_liczba_jednoczesnych_po.C5.82.C4.85cze.C5.84_nawi.C4.85zywanych_przez_obiekty_XMLHttpRequest"> Ograniczona liczba jednoczesnych połączeń nawiązywanych przez obiekty XMLHttpRequest </h3> +<p>Maksymalna liczba połączeń, określona w preferencji <code>network.http.max-persistent-connections-per-server</code> (dostępnej w oknie <code>about:config</code>), jest domyślnie ograniczona do 2. Niektóre interaktywne strony internetowe, na których używane są obiekty XMLHttpRequest, mogą podtrzymywać otwarte połączenie. Otwarcie dwóch lub trzech takich stron w osobnych kartach lub oknach może spowodować awarię przeglądarki, w wyniku której zawartość okien nie będzie odświeżana, a sama aplikacja przestanie odpowiadać. +</p> +<h3 id="Zawarto.C5.9B.C4.87_binarna" name="Zawarto.C5.9B.C4.87_binarna"> Zawartość binarna </h3> +<p>Chociaż wysyłanie i odbieranie danych tekstowych jest najbardziej popularnym zastosowaniem obiektu <code>XMLHttpRequest</code>, za jego pomocą można także przesyłać zawartość binarną. +</p> +<h4 id="Pobieranie_zawarto.C5.9Bci_binarnej" name="Pobieranie_zawarto.C5.9Bci_binarnej">Pobieranie zawartości binarnej</h4> +<pre>// Synchroniczne pobieranie PLIKÓW BINARNYCH za pomocą obiektu XMLHttpRequest +function load_binary_resource(url) { + var req = new XMLHttpRequest(); + req.open('GET', url, false); + //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com] + req.overrideMimeType('text/plain; charset=x-user-defined'); + req.send(null); + if (req.status != 200) return ''; + return req.responseText; +} + +var filestream = load_binary_resource(url); +// x to offset (tzn. pozycja) bajtu w zwróconym strumieniu pliku binarnego. +// Wartość x powinna mieścić się w zakresie od 0 do filestream.length-1. +var abyte = filestream.charCodeAt(x) & 0xff; // usunięcie najbardziej znaczącego (górnego) bajtu (f7) +</pre> +<p>Szczegółowe wyjaśnienia można znaleźć w <a class="external" href="http://mgran.blogspot.com/2006/08/downloading-binary-streams-with.html">artykule dotyczącym pobierania zawartości binarnej za pomocą obiektu XMLHttpRequest</a>. Patrz także <a href="pl/Fragmenty_kodu/Pobieranie_plik%c3%b3w">Pobieranie plików</a>. +</p> +<h4 id="Wysy.C5.82anie_zawarto.C5.9Bci_binarnej" name="Wysy.C5.82anie_zawarto.C5.9Bci_binarnej">Wysyłanie zawartości binarnej</h4> +<p>W poniższym przykładzie zawartość binarna jest wysyłana asynchronicznie za pomocą metody POST. Zmienna <code>aBody</code> reprezentuje wysyłane dane.</p> +<pre class="eval"> var req = new XMLHttpRequest(); + req.open("POST", url, true); + // ustawienie odpowiednich nagłówków i typu MIME + req.setRequestHeader("Content-Length", 741); + req.sendAsBinary(aBody); +</pre> +<p>Zawartość binarną można także wysłać, przekazując instancję interfejsu <a href="/pl/NsIFileInputStream" title="pl/NsIFileInputStream">nsIFileInputStream</a> do metody <code>req.send()</code>. W takim przypadku nie jest konieczne ustawienie nagłówka <code>Content-Length</code>:</p> +<pre>// Tworzenie strumienia z pliku. +var stream = Components.classes["@mozilla.org/network/file-input-stream;1"] + .createInstance(Components.interfaces.nsIFileInputStream); +stream.init(file, 0x04 | 0x08, 0644, 0x04); // file to instancja interfejsu nsIFile + +// Próba określenia typu MIME pliku +var mimeType = "text/plain"; +try { + var mimeService = Components.classes["@mozilla.org/mime;1"].getService(Components.interfaces.nsIMIMEService); + mimeType = mimeService.getTypeFromFile(file); // file to instancja interfejsu nsIFile +} +catch(e) { /* W tym przypadku zastosuj po prostu typ text/plain */ } + +// Wysłanie +var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"] + .createInstance(Components.interfaces.nsIXMLHttpRequest); +req.open('PUT', url, false); /* synchronicznie! */ +req.setRequestHeader('Content-Type', mimeType); +req.send(stream); +</pre><h3 id="Pomijanie_pami.C4.99ci_podr.C4.99cznej" name="Pomijanie_pami.C4.99ci_podr.C4.99cznej">Pomijanie pamięci podręcznej</h3> +<p>Obiekt <code>XMLHttpRequest</code> próbuje z reguły pobrać zawartość z lokalnej pamięci podręcznej. Aby pominąć tę próbę, należy skorzystać z poniższego kodu: +</p> +<pre class="eval"> var req = new XMLHttpRequest(); + <b>req.channel.loadFlags |= Components.interfaces.nsIRequest.LOAD_BYPASS_CACHE;</b> + req.open('GET', url, false); + req.send(null); +</pre> +<p>Istnieje także alternatywny sposób pomijania pamięci podręcznej, opisany <a class="external" href="http://mozdev.org/pipermail/project_owners/2006-August/008353.html">tutaj</a>: +</p> +<pre class="eval"> var req = new XMLHttpRequest(); + req.open("GET", url += (url.match(/\?/) == null ? "?" : "&") + (new Date()).getTime(), false); + req.send(null); +</pre> +<p>Do adresu URL dodawany jest parametr zawierający znacznik czasu (odpowiednio wstawiane są znaki ? i &). Na przykład adres <a class=" external" href="http://foo.com/bar.html" rel="freelink">http://foo.com/bar.html</a> jest przekształcany na <a class=" external" href="http://foo.com/bar.html?12345" rel="freelink">http://foo.com/bar.html?12345</a>, a <a class=" external" href="http://foo.com/bar.html?foobar=baz" rel="freelink">http://foo.com/bar.html?foobar=baz</a> zostaje zamieniany na <a class=" external" href="http://foo.com/bar.html?foobar=baz&12345" rel="freelink">http://foo.com/bar.html?foobar=baz&12345</a>. Lokalna pamięć podręczna jest indeksowana przy użyciu adresów URL; tymczasem, ponieważ każdy adres URL w obiekcie XMLHttpRequest jest niepowtarzalny, pamięć podręczna jest zawsze pomijana. +</p> +<h3 id="Pobieranie_kodu_JSON_i_JavaScript_w_rozszerzeniach" name="Pobieranie_kodu_JSON_i_JavaScript_w_rozszerzeniach">Pobieranie kodu JSON i JavaScript w rozszerzeniach</h3> +<p>W rozszerzeniach do przetwarzania pobieranego z sieci kodu JSON lub JavaScript nie należy używać metody <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/eval"><code>eval()</code></a>. Szczegółowe informacje można znaleźć w artykule <a href="pl/Pobieranie_kodu_JSON_i_JavaScript_w_rozszerzeniach">Pobieranie kodu JSON i JavaScript w rozszerzeniach</a>. +</p> +<h3 id="Odno.C5.9Bniki" name="Odno.C5.9Bniki"> Odnośniki </h3> +<ol><li> <a href="pl/AJAX/Na_pocz%c4%85tek">AJAX: wprowadzenie</a> +</li><li> <a class="external" href="http://www.peej.co.uk/articles/rich-user-experience.html">Obiekt XMLHttpRequest - architektura REST i zaawansowane interfejsy użytkownika</a> (artykuł w j. ang.) +</li><li> <a class="external" href="http://www.xulplanet.com/references/objref/XMLHttpRequest.html">Dokumentacja XULPlanet</a> (artykuł w j. ang.) +</li><li> <a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Dokumentacja firmy Microsoft</a> (artykuł w j. ang.) +</li><li> <a class="external" href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Materiały dla programistów Apple</a> (artykuł w j. ang.) +</li><li> <a class="external" href="http://jibbering.com/2002/4/httprequest.html">Korzystanie z obiektu XMLHttpRequest (jibbering.com)</a> (artykuł w j. ang.) +</li><li> <a class="external" href="http://www.w3.org/TR/XMLHttpRequest/">Obiekt XMLHttpRequest: robocza wersja specyfikacji W3C</a> (artykuł w j. ang.) +</li></ol> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XMLHttpRequest", "es": "es/XMLHttpRequest", "fr": "fr/XMLHttpRequest", "it": "it/XMLHttpRequest", "ja": "ja/XMLHttpRequest", "ko": "ko/XMLHttpRequest", "zh-cn": "cn/XMLHttpRequest" } ) }} diff --git a/files/pl/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/pl/web/api/xmlhttprequest/using_xmlhttprequest/index.html new file mode 100644 index 0000000000..94be8159b1 --- /dev/null +++ b/files/pl/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -0,0 +1,658 @@ +--- +title: Wykorzystanie XMLHttpRequest +slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +original_slug: XMLHttpRequest/Using_XMLHttpRequest +--- +<p><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest"><code>XMLHttpRequest</code></a> makes sending HTTP requests very easy. You simply create an instance of the object, open a URL, and send the request. The <a href="/en-US/docs/HTTP/HTTP_response_codes" title="HTTP response codes">HTTP status</a> of the result, as well as the result's contents, are available in the request object when the transaction is completed. This page outlines some of the common and even slightly obscure use cases for this powerful JavaScript object.</p> +<pre class="brush: js">function reqListener () { + console.log(this.responseText); +} + +var oReq = new XMLHttpRequest(); +oReq.onload = reqListener; +oReq.open("get", "yourFile.txt", true); +oReq.send();</pre> +<h2 id="Types_of_requests">Types of requests</h2> +<p>A request made via XMLHttpRequest can fetch the data in one of two ways, asynchronously or synchronously. The type of request is dictated by the optional <code>async</code> argument (the third argument) that is set on the XMLHttpRequest <a href="/en-US/docs/DOM/XMLHttpRequest#open()" title="DOM/XMLHttpRequest#open()">open()</a> method. If this argument is <code>true</code> or not specified, the <code>XMLHttpRequest</code> is processed asynchronously, otherwise the process is handled synchronously. A detailed discussion and demonstrations of these two types of requests can be found on the <a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" title="Synchronous and Asynchronous Requests">synchronous and asynchronous requests</a> page. In general, you should rarely if ever use synchronous requests.</p> +<div class="note"> + <strong>Note:</strong> Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.</div> +<h2 id="Handling_responses">Handling responses</h2> +<p>There are several types of <a href="http://www.w3.org/TR/XMLHttpRequest2/#response" title="http://www.w3.org/TR/XMLHttpRequest2/#response">response attributes</a> defined by the W3C specification for XMLHttpRequest. These tell the client making the XMLHttpRequest important information about the status of the response. Some<span style="line-height: 1.572;"> cases where dealing with non-text response types may involve some manipulation and analysis as outlined in the following sections.</span></p> +<h3 id="Analyzing_and_manipulating_the_responseXML_property">Analyzing and manipulating the <code>responseXML</code> property</h3> +<p>If you use <code>XMLHttpRequest </code>to get the content of a remote XML document, the <code>responseXML </code>property will be a DOM Object containing a parsed XML document, which can be hard to manipulate and analyze. There are four primary ways of analyzing this XML document:</p> +<ol> + <li>Using <a href="/en-US/docs/XPath" title="XPath">XPath</a> to address (point to) parts of it.</li> + <li>Using <a href="/en-US/docs/JXON" title="JXON">JXON</a> to convert it into a JavaScript Object tree.</li> + <li>Manually <a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">Parsing and serializing XML</a> to strings or objects.</li> + <li>Using <a href="/en-US/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a> to serialize <strong>DOM trees to strings or to files</strong>.</li> + <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp">RegExp </a>can be used if you always know the content of the XML document beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to linebreaks. However, this method is a "last resort" since if the XML code changes slightly, the method will likely fail.</li> +</ol> +<h3 id="Analyzing_and_manipulating_a_responseText_property_containing_an_HTML_document">Analyzing and manipulating a <code>responseText</code> property containing an HTML document</h3> +<div class="note"> + <strong>Note:</strong> The W3C <a href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> specification allows HTML parsing via the <code>XMLHttpRequest.responseXML</code> property. Read the article about <a href="/en-US/docs/HTML_in_XMLHttpRequest" title="HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a> for details.</div> +<p>If you use <code>XMLHttpRequest</code> to get the content of a remote HTML webpage, the <code>responseText</code> property is a string containing a "soup" of all the HTML tags, which can be hard to manipulate and analyze. There are three primary ways of analyzing this HTML soup string:</p> +<ol> + <li>Use the <code>XMLHttpRequest.responseXML</code> property.</li> + <li>Inject the content into the body of a <a href="/en-US/docs/Web/API/DocumentFragment">document fragment</a> via <code>fragment.body.innerHTML</code> and traverse the DOM of the fragment.</li> + <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp">RegExp </a>can be used if you always know the content of the HTML <code>responseText </code>beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to linebreaks. However, this method is a "last resort" since if the HTML code changes slightly, the method will likely fail.</li> +</ol> +<h2 id="Handling_binary_data">Handling binary data</h2> +<p>Although <code>XMLHttpRequest</code> is most commonly used to send and receive textual data, it can be used to send and receive binary content. There are several well tested methods for coercing the response of an XMLHttpRequest into sending binary data. These involve utilizing the <code>.overrideMimeType()</code> method on the XMLHttpRequest object and is a workable solution.</p> +<pre class="brush:js">var oReq = new XMLHttpRequest(); +oReq.open("GET", url, true); +// retrieve data unprocessed as a binary string +oReq.overrideMimeType("text/plain; charset=x-user-defined"); +/* ... */ +</pre> +<p>The XMLHttpRequest Level 2 Specification adds new <a href="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute" title="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute">responseType attributes</a> which make sending and receiving binary data much easier.</p> +<pre class="brush:js">var oReq = new XMLHttpRequest(); + + +oReq.onload = function(e) { + var arraybuffer = oReq.response; // not responseText + /* ... */ +} +<span style="font-size: 1rem;">oReq.open("GET", url, true); +</span><span style="font-size: 1rem;"><span style="font-size: 1rem;">oReq.responseType = "arraybuffer"; +</span>oReq.send();</span></pre> +<p>For more examples check out the <a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data" title="DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Sending and Receiving Binary Data</a> page</p> +<h2 id="Monitoring_progress">Monitoring progress</h2> +<p><code>XMLHttpRequest</code> provides the ability to listen to various events that can occur while the request is being processed. This includes periodic progress notifications, error notifications, and so forth.</p> +<p>Support for DOM progress event monitoring of <code>XMLHttpRequest</code> transfers follows the Web API <a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">specification for progress events</a>: these events implement the {{domxref("ProgressEvent")}} interface.</p> +<pre class="brush:js">var oReq = new XMLHttpRequest(); + +oReq.addEventListener("progress", updateProgress, false); +oReq.addEventListener("load", transferComplete, false); +oReq.addEventListener("error", transferFailed, false); +oReq.addEventListener("abort", transferCanceled, false); + +oReq.open(); + +// ... + +// progress on transfers from the server to the client (downloads) +function updateProgress (oEvent) { + if (oEvent.lengthComputable) { + var percentComplete = oEvent.loaded / oEvent.total; + // ... + } else { + // Unable to compute progress information since the total size is unknown + } +} + +function transferComplete(evt) { + alert("The transfer is complete."); +} + +function transferFailed(evt) { + alert("An error occurred while transferring the file."); +} + +function transferCanceled(evt) { + alert("The transfer has been canceled by the user."); +}</pre> +<p>Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using <code>XMLHttpRequest</code>.</p> +<div class="note"> + <strong>Note:</strong> You need to add the event listeners before calling <code>open()</code> on the request. Otherwise the progress events will not fire.</div> +<p>The progress event handler, specified by the <code>updateProgress()</code> function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's <code>total</code> and <code>loaded</code> fields. However, if the <code>lengthComputable</code> field is false, the total length is not known and will be zero.</p> +<p>Progress events exist for both download and upload transfers. The download events are fired on the <code>XMLHttpRequest</code> object itself, as shown in the above sample. The upload events are fired on the <code>XMLHttpRequest.upload</code> object, as shown below:</p> +<pre class="brush:js">var oReq = new XMLHttpRequest(); + +oReq.upload.addEventListener("progress", updateProgress, false); +oReq.upload.addEventListener("load", transferComplete, false); +oReq.upload.addEventListener("error", transferFailed, false); +oReq.upload.addEventListener("abort", transferCanceled, false); + +oReq.open(); +</pre> +<div class="note"> + <strong>Note:</strong> Progress events are not available for the <code>file:</code> protocol.</div> +<div class="note"> + <strong>Note</strong>: Currently there are open bugs for the progress event that are still affecting version 25 of Firefox on <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=908375">OS X</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=786953">Linux</a>.</div> +<div class="note"> + <p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, progress events can now be relied upon to come in for every chunk of data received, including the last chunk in cases in which the last packet is received and the connection closed before the progress event is fired. In this case, the progress event is automatically fired when the load event occurs for that packet. This lets you now reliably monitor progress by only watching the "progress" event.</p> +</div> +<div class="note"> + <p><strong>Note:</strong> As of {{Gecko("12.0")}}, if your progress event is called with a <code>responseType</code> of "moz-blob", the value of response is a {{domxref("Blob")}} containing the data received so far.</p> +</div> +<p>One can also detect all three load-ending conditions (<code>abort</code>, <code>load</code>, or <code>error</code>) using the <code>loadend</code> event:</p> +<pre class="brush:js">req.addEventListener("loadend", loadEnd, false); + +function loadEnd(e) { + alert("The transfer finished (although we don't know if it succeeded or not)."); +} +</pre> +<p>Note that there's no way to be certain from the information received by the <code>loadend</code> event as to which condition caused the operation to terminate; however, you can use this to handle tasks that need to be performed in all end-of-transfer scenarios.</p> +<h2 id="Submitting_forms_and_uploading_files">Submitting forms and uploading files</h2> +<p>Instances of <code>XMLHttpRequest</code> can be used to submit forms in two ways:</p> +<ul> + <li>using nothing but AJAX</li> + <li>using the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> API</li> +</ul> +<p>The <strong>second way</strong> (using the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> API) is the simplest and the fastest, but has the disadvantage that the data collected can not be <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringified</a>.<br> + The <strong>first way</strong> is instead the most complex but also lends itself to be the most flexible and powerful.</p> +<h3 id="Using_nothing_but_XMLHttpRequest">Using nothing but <code>XMLHttpRequest</code></h3> +<p>Submitting forms without the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> API does not require other APIs, except that, only <strong>if you want to upload one or more files</strong>, the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API.</p> +<h4 id="A_brief_introduction_to_the_submit_methods">A brief introduction to the submit methods</h4> +<p>An html {{ HTMLElement("form") }} can be sent in four ways:</p> +<ul> + <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>application/x-www-form-urlencoded</code> (default);</li> + <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>text/plain</code>;</li> + <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>multipart/form-data</code>;</li> + <li>using the <code>GET</code> method (in this case the <code>enctype</code> attribute will be ignored).</li> +</ul> +<p>Now, consider to submit a form containing only two fields, named <code>foo</code> and <code>baz</code>. If you are using the <code>POST</code> method, the server will receive a string similar to one of the following three ones depending on the encoding type you are using:</p> +<ul> + <li> + <p>Method: <code>POST</code>; Encoding type: <code>application/x-www-form-urlencoded</code> (default):</p> + <pre>Content-Type: application/x-www-form-urlencoded + +foo=bar&baz=The+first+line.&#37;0D%0AThe+second+line.%0D%0A</pre> + </li> + <li> + <p>Method: <code>POST</code>; Encoding type: <code>text/plain</code>:</p> + <pre>Content-Type: text/plain + +foo=bar +baz=The first line. +The second line.</pre> + </li> + <li> + <p>Method: <code>POST</code>; Encoding type: <code>multipart/form-data</code>:</p> + <pre style="height: 100px; overflow: auto;">Content-Type: multipart/form-data; boundary=---------------------------314911788813839 + +-----------------------------314911788813839 +Content-Disposition: form-data; name="foo" + +bar +-----------------------------314911788813839 +Content-Disposition: form-data; name="baz" + +The first line. +The second line. + +-----------------------------314911788813839--</pre> + </li> +</ul> +<p>Instead, if you are using the <code>GET</code> method, a string like the following will be simply added to the URL:</p> +<pre>?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.</pre> +<h4 id="A_little_vanilla_framework">A little vanilla framework</h4> +<p>All these things are done automatically by the web browser whenever you submit a {{ HTMLElement("form") }}. But if you want to do the same things using JavaScript you have to instruct the interpreter about <em>all</em> things. So, how to send forms in <em>pure</em> AJAX is too complex to be explained in detail here. For this reason we posted here <strong>a complete (but still didactic) framework</strong>, which is able to use all the four ways of <em>submit</em> and, also, to <strong>upload files</strong>:</p> +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> + <pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>Sending forms with pure AJAX &ndash; MDN</title> +<script type="text/javascript"> + +"use strict"; + +/*\ +|*| +|*| :: XMLHttpRequest.prototype.sendAsBinary() Polyfill :: +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary() +\*/ + +if (!XMLHttpRequest.prototype.sendAsBinary) { + XMLHttpRequest.prototype.sendAsBinary = function(sData) { + var nBytes = sData.length, ui8Data = new Uint8Array(nBytes); + for (var nIdx = 0; nIdx < nBytes; nIdx++) { + ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff; + } + /* send as ArrayBufferView...: */ + this.send(ui8Data); + /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */ + }; +} + +/*\ +|*| +|*| :: AJAX Form Submit Framework :: +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest +|*| +|*| This framework is released under the GNU Public License, version 3 or later. +|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html +|*| +|*| Syntax: +|*| +|*| AJAXSubmit(HTMLFormElement); +\*/ + +var AJAXSubmit = (function () { + + function ajaxSuccess () { + /* console.log("AJAXSubmit - Success!"); */ + alert(this.responseText); + /* you can get the serialized data through the "submittedData" custom property: */ + /* alert(JSON.stringify(this.submittedData)); */ + } + + function submitData (oData) { + /* the AJAX request... */ + var oAjaxReq = new XMLHttpRequest(); + oAjaxReq.submittedData = oData; + oAjaxReq.onload = ajaxSuccess; + if (oData.technique === 0) { + /* method is GET */ + oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true); + oAjaxReq.send(null); + } else { + /* method is POST */ + oAjaxReq.open("post", oData.receiver, true); + if (oData.technique === 3) { + /* enctype is multipart/form-data */ + var sBoundary = "---------------------------" + Date.now().toString(16); + oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary); + oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n"); + } else { + /* enctype is application/x-www-form-urlencoded or text/plain */ + oAjaxReq.setRequestHeader("Content-Type", oData.contentType); + oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&")); + } + } + } + + function processStatus (oData) { + if (oData.status > 0) { return; } + /* the form is now totally serialized! do something before sending it to the server... */ + /* doSomething(oData); */ + /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */ + submitData (oData); + } + + function pushSegment (oFREvt) { + this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n"; + this.owner.status--; + processStatus(this.owner); + } + + function plainEscape (sText) { + /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */ + /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */ + return sText.replace(/[\s\=\\]/g, "\\$&"); + } + + function SubmitRequest (oTarget) { + var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post"; + /* console.log("AJAXSubmit - Serializing form..."); */ + this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded"; + this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0; + this.receiver = oTarget.action; + this.status = 0; + this.segments = []; + var fFilter = this.technique === 2 ? plainEscape : escape; + for (var nItem = 0; nItem < oTarget.elements.length; nItem++) { + oField = oTarget.elements[nItem]; + if (!oField.hasAttribute("name")) { continue; } + sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; + if (sFieldType === "FILE" && oField.files.length > 0) { + if (this.technique === 3) { + /* enctype is multipart/form-data */ + for (nFile = 0; nFile < oField.files.length; nFile++) { + oFile = oField.files[nFile]; + oSegmReq = new FileReader(); + /* (custom properties:) */ + oSegmReq.segmentIdx = this.segments.length; + oSegmReq.owner = this; + /* (end of custom properties) */ + oSegmReq.onload = pushSegment; + this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n"); + this.status++; + oSegmReq.readAsBinaryString(oFile); + } + } else { + /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */ + for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name))); + } + } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { + /* field type is not FILE or is FILE but is empty */ + this.segments.push( + this.technique === 3 ? /* enctype is multipart/form-data */ + "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n" + : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */ + fFilter(oField.name) + "=" + fFilter(oField.value) + ); + } + } + processStatus(this); + } + + return function (oFormElement) { + if (!oFormElement.action) { return; } + new SubmitRequest(oFormElement); + }; + +})(); + +</script> +</head> +<body> + +<h1>Sending forms with pure AJAX</h1> + +<h2>Using the GET method</h2> + +<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h2>Using the POST method</h2> +<h3>Enctype: application/x-www-form-urlencoded (default)</h3> + +<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: text/plain</h3> + +<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + Your name: <input type="text" name="user" /> + </p> + <p> + Your message:<br /> + <textarea name="message" cols="40" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: multipart/form-data</h3> + +<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Sex: + <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> + What do you prefer: + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> + Post your photos: + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +</body> +</html></pre> +</div> +<p>To test it, create a<span class="long_text short_text" id="result_box" lang="en"><span class="hps"> </span></span>page named <strong>register.php</strong> (which is the <code>action</code> attribute of these sample forms) and just put the following <em><span class="long_text short_text" id="result_box" lang="en"><span class="hps">minimalistic </span></span></em>content:</p> +<pre class="brush: php"><?php +/* register.php */ + +header("Content-type: text/plain"); + +/* +NOTE: You should never use `print_r()` in production scripts, or +otherwise output client-submitted data without sanitizing it first. +Failing to sanitize can lead to cross-site scripting vulnerabilities. +*/ + +echo ":: data received via GET ::\n\n"; +print_r($_GET); + +echo "\n\n:: Data received via POST ::\n\n"; +print_r($_POST); + +echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n"; +if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; } + +echo "\n\n:: Files received ::\n\n"; +print_r($_FILES); + +</pre> +<p>The syntax of this script is the following:</p> +<pre class="syntaxbox">AJAXSubmit(myForm);</pre> +<div class="note"> + <strong>Note:</strong> This framework uses the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API to transmit file uploads. This is a recent API and is not implemented in IE9 or below. For this reason, the AJAX-only upload is considered <strong>an experimental technique</strong>. If you do not need to upload binary files, this framework work fine in most browsers.</div> +<div class="note"> + <strong>Note:</strong> The best way to send binary content is via <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffers</a> or <a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob">Blobs</a> in conjuncton with the <a href="/en-US/docs/DOM/XMLHttpRequest#send%28%29" title="/en-US/docs/DOM/XMLHttpRequest#send()"><code>send()</code></a> method and possibly the <a href="/en-US/docs/DOM/FileReader#readAsArrayBuffer()" title="/en-US/docs/DOM/FileReader#readAsArrayBuffer()"><code>readAsArrayBuffer()</code></a> method of the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API. But, since the aim of this script is to work with a <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> raw data, we used the <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29" title="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> method in conjunction with the <a href="/en-US/docs/DOM/FileReader#readAsBinaryString%28%29" title="/en-US/docs/DOM/FileReader#readAsBinaryString()"><code>readAsBinaryString()</code></a> method of the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API. As such, the above script makes sense only when you are dealing with small files. If you do not intend to upload binary content, consider instead using the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> API.</div> +<div class="note"> + <strong>Note:</strong> The non-standard <code>sendAsBinary </code>method is considered deprecated as of Gecko 31 {{ geckoRelease(31) }} and will be removed soon. The standard <code>send(Blob data)</code> method can be used instead.</div> +<h3 id="Using_FormData_objects">Using FormData objects</h3> +<p>The <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> constructor lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's <code>submit()</code> method would use to send the data if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples and explanations of how one can utilize FormData with XMLHttpRequests see the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="Using FormData Objects">Using FormData Objects</a> page. For didactic purpose only we post here <strong>a <em>translation</em> of <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">the previous example</a> transformed so as to make use of the <code>FormData</code> API</strong>. Note the brevity of the code:</p> +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> + <pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>Sending forms with FormData &ndash; MDN</title> +<script type="text/javascript"> +"use strict"; + +function ajaxSuccess () { + alert(this.responseText); +} + +function AJAXSubmit (oFormElement) { + if (!oFormElement.action) { return; } + var oReq = new XMLHttpRequest(); + oReq.onload = ajaxSuccess; + if (oFormElement.method.toLowerCase() === "post") { + oReq.open("post", oFormElement.action, true); + oReq.send(new FormData(oFormElement)); + } else { + var oField, sFieldType, nFile, sSearch = ""; + for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) { + oField = oFormElement.elements[nItem]; + if (!oField.hasAttribute("name")) { continue; } + sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; + if (sFieldType === "FILE") { + for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name)); + } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { + sSearch += "&" + escape(oField.name) + "=" + escape(oField.value); + } + } + oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); + oReq.send(null); + } +} +</script> +</head> +<body> + +<h1>Sending forms with FormData</h1> + +<h2>Using the GET method</h2> + +<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h2>Using the POST method</h2> +<h3>Enctype: application/x-www-form-urlencoded (default)</h3> + +<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: text/plain</h3> + +<p>The text/plain encoding is not supported by the FormData API.</p> + +<h3>Enctype: multipart/form-data</h3> + +<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Sex: + <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> + What do you prefer: + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> + Post your photos: + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +</body> +</html></pre> +</div> +<div class="note"> + <strong>Note:</strong> As we said,<strong> {{domxref("FormData")}} objects are not <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> objects</strong>. If you want to stringify a submitted data, use <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">the previous <em>pure</em>-AJAX example</a>. Note also that, although in this example there are some <code>file</code> {{ HTMLElement("input") }} fields, <strong>when you submit a form through the <code>FormData</code> API you do not need to use the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API also</strong>: files are automatically loaded and uploaded.</div> +<h2 id="Get_last_modified_date">Get last modified date</h2> +<pre class="brush: js">function getHeaderTime () { + alert(this.getResponseHeader("Last-Modified")); /* A valid GMTString date or null */ +} + +var oReq = new XMLHttpRequest(); +oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html", true); +oReq.onload = getHeaderTime; +oReq.send();</pre> +<h3 id="Do_something_when_last_modified_date_changes">Do something when last modified date changes</h3> +<p>Let's create these two functions:</p> +<pre class="brush: js">function getHeaderTime () { + + var + nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)), + nLastModif = Date.parse(this.getResponseHeader("Last-Modified")); + + if (isNaN(nLastVisit) || nLastModif > nLastVisit) { + window.localStorage.setItem('lm_' + this.filepath, Date.now()); + isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit); + } + +} + +function ifHasChanged(sURL, fCallback) { + var oReq = new XMLHttpRequest(); + oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL, true); + oReq.callback = fCallback; + oReq.filepath = sURL; + oReq.onload = getHeaderTime; + oReq.send(); +}</pre> +<p>Test:</p> +<pre class="brush: js">/* Let's test the file "yourpage.html"... */ + +ifHasChanged("yourpage.html", function (nModif, nVisit) { + alert("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!"); +});</pre> +<p>If you want to know <strong>whether <em>the current page</em> has changed</strong>, please read the article about <a href="/en-US/docs/Web/API/document.lastModified" title="/en-US/docs/Web/API/document.lastModified"><code>document.lastModified</code></a>.</p> +<h2 id="Cross-site_XMLHttpRequest">Cross-site XMLHttpRequest</h2> +<p>Modern browsers support cross-site requests by implementing the web applications working group's <a href="/en-US/docs/HTTP_access_control" title="HTTP access control">Access Control for Cross-Site Requests</a> standard. As long as the server is configured to allow requests from your web application's origin, <code>XMLHttpRequest</code> will work. Otherwise, an <code>INVALID_ACCESS_ERR</code> exception is thrown.</p> +<h2 id="Bypassing_the_cache">Bypassing the cache</h2> +<p><span style="line-height: 1.572;">A, cross-browser compatible approach to bypassing the cache is to append a timestamp to the URL, being sure to include a "?" or "&" as appropriate. For example:</span></p> +<pre>http://foo.com/bar.html -> http://foo.com/bar.html?12345 +http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345 +</pre> +<p>Since the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.</p> +<p>You can automatically adjust URLs using the following code:</p> +<pre class="brush:js">var oReq = new XMLHttpRequest(); + +oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true); +oReq.send(null);</pre> +<h2 id="Security">Security</h2> +<p>{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference <code>capability.policy.<policyname>.XMLHttpRequest.open</policyname></code> to <code>allAccess</code> to give specific sites cross-site access. This is no longer supported.")}}</p> +<p>{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}</p> +<p>The recommended way to enable cross-site scripting is to use the <code>Access-Control-Allow-Origin </code> HTTP header in the response to the XMLHttpRequest.</p> +<h3 id="XMLHttpRequests_being_stopped">XMLHttpRequests being stopped</h3> +<p>If you end up with an XMLHttpRequest having <code>status=0</code> and <code>statusText=null</code>, it means that the request was not allowed to be performed. It was <code><a href="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent" title="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent">UNSENT</a></code>. A likely cause for this is when the <a href="http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin" style="outline: 1px dotted; outline-offset: 0pt;"><code>XMLHttpRequest</code> origin</a> (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then <code>open()</code>. This case can happen for example when one has an XMLHttpRequest that gets fired on an onunload event for a window: the XMLHttpRequest gets in fact created when the window to be closed is still there, and then the request is sent (ie <code>open()</code>) when this window has lost its focus and potentially different window has gained focus. The way to avoid this problem is to set a listener on the new window "activate" event that gets set when the old window has its "unload" event fired.</p> +<h2 id="Using_XMLHttpRequest_from_JavaScript_modules_XPCOM_components">Using XMLHttpRequest from JavaScript modules / XPCOM components</h2> +<p>Instantiating <code>XMLHttpRequest</code> from a <a href="/en-US/docs/JavaScript_code_modules/Using" title="https://developer.mozilla.org/en/JavaScript_code_modules/Using_JavaScript_code_modules">JavaScript module</a> or an XPCOM component works a little differently; it can't be instantiated using the <code>XMLHttpRequest()</code> constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.</p> +<pre class="brush: js">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest"); +</pre> +<p>Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason. If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.</p> +<pre class="brush:js">const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"] + .getService(Components.interfaces.nsIAppShellService) + .hiddenDOMWindow; +var oReq = new XMLHttpRequest();</pre> +<h2 id="See_also">See also</h2> +<ol> + <li><a href="/en-US/docs/AJAX/Getting_Started" title="AJAX/Getting_Started">MDN AJAX introduction</a></li> + <li><a href="/en-US/docs/HTTP_access_control" title="HTTP access control">HTTP access control</a></li> + <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL" title="How to check the security state of an XMLHTTPRequest over SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li> + <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li> + <li><a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li> + <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Articles/XHR.html">Apple developers' reference</a></li> + <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li> + <li><a href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object: W3C Specification</a></li> + <li><a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">Web Progress Events specification</a></li> +</ol> |